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

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

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(''),
  }),
});

Hmmm… looks like this is a long standing issue!

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