NextJS - CORS No 'Access-Control-Allow-Origin' header is present on the requested resource

Help
,
1

Hi,

I’m having a problem with auth0 CORS issues both on local and deployed development branch of NextJS 14 app.

In my auth0 applicaton account I’ve added both my local and deployed development urls under the following sections:

Allowed Callback URLs,
Allowed Logout URLs,
Allowed Web Origins
Allow Cross-Origin Authentication
Allowed Origins (CORS)

But I’m still getting the following just for home, this one is for localhost:

"Access to fetch at ‘https://dev-my-instanceId.us.auth0.com/authorize?…’ (redirected from ‘http://localhost:3000/dashboard?_rsc=acgkz’) from origin ‘http://localhost:3000’ 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. "

Access to fetch at 'https://dev-<instanceId>.us.auth0.com/authorize?client_id=<clientId>>&scope=openid%20profile%20email&response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fapi%2Fauth%2Fcallback&nonce=oIdCmaHiR6DVq96O8sNnF5KfgBrjXaE4gNevlbhPujg&state=eyJyZXR1cm5UbyI6Imh0dHA6Ly9sb2NhbGhvc3Q6MzAwMC9kYXNoYm9hcmQifQ&code_challenge_method=S256&code_challenge=192mQQ_qp_u0IyOnjDBiH6ptWQhOWeQqeCZ5ZDQ49E4' (redirected from 'http://localhost:3000/dashboard?_rsc=acgkz') from origin 'http://localhost:3000' 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.

For reference, this is what my home/landing page looks like.

'use client';
import { useUser } from '@auth0/nextjs-auth0/client';
import Link from 'next/link';

export default function Home() {
  const { user, isLoading, error } = useUser();

  if (isLoading) {
    return (
      <div>
        <p className="text-warn">loading...!:p</p>
      </div>
    );
  }

  if (error) {
    return (
      <div>
        <p className="text-warn">
          Something gone very wrong! error:{JSON.stringify(error, null, 4)}
        </p>
      </div>
    );
  }

  return (
    <>
      <h1 className="text-3xl font-bold underline">Home page!</h1>
      {!user ? (
        <p>
          Looks like you need to <Link href="/api/auth/login">login</Link>{' '}
          first!
        </p>
      ) : (
        <p>hello {user.name}!</p>
      )}
    </>
  );
}

Anyone else having this problem? Am I missing something obvious? (can’t believe I’d be the only one)

2 Likes
2

Also, for further reference, here is the basic /api/auth/[auth0]/route.ts setup.

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

const logoutUrl = [
  `${process.env.AUTH0_ISSUER_BASE_URL}/v2/logout?`,
  `client_id=${process.env.AUTH0_CLIENT_ID}`,
  `&returnTo=${process.env.AUTH0_BASE_URL}`,
];

export const GET = handleAuth({
  login: handleLogin({
    returnTo: '/',
  }),
  logout: handleLogout({
    returnTo: logoutUrl.join(''),
  }),
});
3

Hmmm… looks like this is a long standing issue!

It’s not really impressive that something like this is left unfixed.

4

Came here battling the same issue, always Cors errors on logout (and always in my production environment, never with local developement :man_shrugging: ).

The only fix I have found is to use a clean a tag:

<a href="/api/auth/logout/">Logout</a>

Link component or using router.push(“api/auth/logout”) doesnt work due to the prefetch that the browser will do (I was able to capture this in the network tab inside dev tools).

The readme for auth0/nextjs also uses a href tag:
https://github.com/auth0/nextjs-auth0#consume-authentication

5

Stumbled on the same issue Gentleman. I am assuming you guys are also using the free tier and are redirecting it to auth0 servers to authorize. Do you think it will be solved when hosted on our domain?

6

Hi @noelt.dolan,

Your application is making a CORS request to the /authorize endpoint instead of redirecting the user’s browser, which is leading to a CORS error as the /authorize endpoint does not support CORS.

Exactly as @samuel5 found, the recommended fix is to use anchor (<a>) tags instead of Link tags when authenticating users. Using Link tags causes Javascript to call /authorize instead of redirecting the user’s view.

See these resources: