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.

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?

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.

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.

1import { handleAuth, handleLogin } from '@auth0/nextjs-auth0'23export const GET = handleAuth({4    login: handleLogin({5      returnTo: "/admin",6    }),7  });8910// Basic CORS headers for auth routes11const corsHeaders = {12  'Access-Control-Allow-Credentials': 'true',13  'Access-Control-Allow-Origin': '*',14  'Access-Control-Allow-Methods': 'GET,POST,OPTIONS',15  'Access-Control-Allow-Headers': 'Content-Type, Authorization',16};1718export async function OPTIONS() {19  return new Response(null, {20    status: 200,21    headers: corsHeaders,22  });23}24

I have followed this guide: https://developer.auth0.com/resources/guides/web-app/nextjs/basic-authentication

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.

Hey mate, thanks for the response.

I tried replacing the Link https://nextjs.org/docs/pages/api-reference/components/link 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 - https://nextjs.org/docs/pages/api-reference/components/link#prefetch

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. https://github.com/auth0/nextjs-auth0?tab=readme-ov-file#consume-authentication

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.