CORS issue on Auth0 rejecting OPTIONS request from Vercel - NextJS App

Help
1

G’day!

I am having troubles with CORS on the Auth0 where /authrize is being blocked as Auth0 doesnt support OPTIONS method.

I have done everything that is required for this but Auth0 keeps blocking the request and the authentication doesnt work. Is there a way to disabled this using “no-cors”? My app is unusable without auth working.

Everything works on localhost. And yes I have followed How can I enable CORS on Vercel? and implemented this on the app. The issue seems to be on the Auth0 side reject OPTIONS.

mywebsite.com is a made up domain and not my real domain. I am happy to send my domain upon request privately.

Can anyone suggest some here please?

Error:
Access to fetch at ‘<auth0_domain>/authorize?client_id=<>’ (redirected from ‘mywebsite.com - This website is for sale! - mywebsite Resources and Information.’) from origin ‘https://www.mywebsite.com’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

2

Hey there - I would not recommend using ‘no-cors’ to disable this. The Vercel CORS guide is more about implementing CORS on your own endpoints, so the advice there isn’t going to be useful for your problem.

The OPTIONS request is a preflight request, which is meant to be accessed via redirect. Looks like you’re already doing that part correctly, so I’d double check that your allowed origins are configured correctly in Auth0. I would guess that requests from localhost are excepted for development, so that’s why it worked locally.

If your allowed origins are set up properly with your production domain and you still can’t get it working, consider using Auth0’s universal login (their hosted solution). Cross origin auth is known to be tricky, so using the hosted login may be your best option, even as a temporary workaround to unblock yourself.

3

Thanks mate for your reply. Hope you are going great.

Yeah agreed on the part the guide is for internal requests and not external requests whichI figured last night as it had no impact on the preflight for the Auth0 requests.

A few things to note

  • All the domain settings are correctly configured on Auth0. I have eyeballed it many times.
  • Yes, I am using Universal Login Page but the domain is the default Auth0 domain. I might have to see if I can setup a configuration for my custom domain (hosted login as you are also suggesting) as I already have a custom one but that configuration was low in the priority list since the Auth0 domain was all working. This domain would be auth..com and I can then wildcard the allowed origins on NextJs configs.
    Is that the right assumption?
4

Yep that’s correct! Going back to the error message though, I missed the initial phrase access to fetch. Could you share the component (or a snippet from it) where you’re attempting to log in? There are a few correct ways, but the main thing is you want to redirect the user rather than make a direct request to /authorize. Totally possible you’ve already got this right, but worth checking.

5

Hey mate, here’s the code. Just using /api/auth/[auth0]/route.ts
There might be some redundant code but you will get an idea.
All from the page route, it is just a /api/auth/login call

The authorize call is something from Auth0 library where the login route is using it internally.

import { handleAuth, handleLogin } from '@auth0/nextjs-auth0'

export const GET = handleAuth({
    login: handleLogin({
      returnTo: "/admin",
    }),
  });


// Basic CORS headers for auth routes
const corsHeaders = {
  'Access-Control-Allow-Credentials': 'true',
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Methods': 'GET,POST,OPTIONS',
  'Access-Control-Allow-Headers': 'Content-Type, Authorization',
};

export async function OPTIONS() {
  return new Response(null, {
    status: 200,
    headers: corsHeaders,
  });
}

I have followed this guide: Next.js Authentication By Example: Using App Router

6

If you request that endpoint directly, what’s the response status? It should be a redirect but I’m not clear from the docs which 3xx.

Caching may be a factor here as well - if you’re on Next 13 or 14, GET requests in route handlers are cached by default, so you could try adding export const dynamic = 'force-dynamic' and see if that helps.

1 Like
7

Hey mate, thanks for the response.

I tried replacing the Link Components: <Link> | Next.js with a direct anchor tag and there is no preflight request going. I did this because Auth0 doesnt support OPTIONS or preflight.

More info on prefetch - Components: <Link> | Next.js

The Link component from react, as you may know, is built with a preflight feature for performance and optimisation reasons but in this case it wasn’t working for me. The issue seems to be only popping up on Vercel as there is a special setting on Link to only do preflight on deployment environments. This was the case in all preview/development/production on vercel.

For now this has gone and I will have to dig further on when to use Link and when to use an anchor as explained here too.

Thanks for looking into this one for me. It took me a while and someone supporting is a great gesture and immensely helpful when you’re stuck.

Cheers, have a great one.

1 Like
8

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.