A CORS error appears in the console

Get Help
,
1 
// \frontend\src\app\chat\[...slug]\page.jsx
import { notFound, redirect } from "next/navigation";
import mongoDbCreateUser from "@/lib/mongoDbCreateUser";
import ChatWrapper from "@/app/chat/[...slug]/ChatWrapper";
import { auth0 } from "@/lib/auth0";
export async function generateMetadata({ params, searchParams }) {
  const { slug } = await params;
  const searchParamsTemp = await searchParams;
  const initialMessage = searchParamsTemp?.q;
  return {
    metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL ?? "http://localhost:3000"),
    title: `Chat | ${slug ? "Session" : initialMessage ? "New Session" : "bureaucrazy.co"}`,
    icons: {
      icon: "/web/Logo.webp",
      shortcut: "/web/Logo.webp",
      apple: "/web/Logo.webp",
    },
    robots: {
      index: false,
      follow: false,
      nocache: true,
    },
    openGraph: {
      title: "bureaucrazy.co",
      description: "",
      url: "https://www.bureaucrazy.co/",
      siteName: "bureaucrazy.co",
      images: [
        {
          url: "/web/Logo.webp",
          width: 1200,
          height: 630,
          alt: "Bureaucrazy logo",
        },
      ],
      locale: "en_US",
      type: "website",
    },
  };
}

export default async function Page({ params, searchParams }) {
  const { slug } = await params;
  const searchParamsTemp = await searchParams;
  const initialMessage = searchParamsTemp.q;
  const { getUserInfo } = await mongoDbCreateUser();
  const session = await auth0.getSession();
  if (!session) {
    redirect(`/chat/testing/?q=${initialMessage || "Hi bureaucrazy!"}`);
  }
  const chatSession = getUserInfo.sessions.find((data) => data.sessionId == slug);

  if (chatSession) {
    return (
      <>
        <main className=" w-full flex flex-1 relative flex-col justify-between ">
          <ChatWrapper session={session} initialMsg={chatSession} />
        </main>
      </>
    );
  }

  if (!chatSession && initialMessage) {
    return (
      <>
        <main className=" w-full flex flex-1 relative flex-col justify-between   ">
          <ChatWrapper session={session} initialMsg={decodeURIComponent(initialMessage)} />
        </main>
      </>
    );
  } else {
    return (
      <>
        <main className=" w-full flex flex-1 relative flex-col justify-between   ">{notFound()}</main>
      </>
    );
  }
}


Access to fetch at 'https://auth.bureaucrazy.co/authorize?client_id=..y.co' (redirected from 'https://www.bureaucrazy.co/auth/login?_rsc=tgark') from origin 'https://www.bureaucrazy.co' 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.



Failed to load resource: net::ERR_FAILED
1255-f206d8cb7c37a3ff.js:1  Failed to fetch RSC payload for https://www.bureaucrazy.co/auth/login. Falling back to browser navigation.

I have tried out everything
I can log in successfully, but I get logged out when I refresh the page or navigate to another dynamic route.

3

Hi @MSK1116

Welcome to the Auth0 Community!

You can check out this community post regarding the CORS error that you are receiving.

As the solution mentions, it happens because the login is being served on a different origin than the one requesting it. In these scenarios, you must include the origin to your Allowed Web Origins and include your app’s origin URL in the Allowed Origins (CORS) of your application settings.

I would also recommend reading through our documentation about Configuring Cross-Origin Resource Sharing..

Let me know if you have any other questions!

Kind Regards,
Nik

4

Thank you, Nik, for your reply!

I indeed have set up both of them

  1. Allowed Web Origins=> https://www.bureaucrazy.co

  2. Allowed origins (CORS)=> https://www.bureaucrazy.co

Still, I get the same error on refresh or route change.

Additional info:

 const session = await auth0.getSession();

I’m calling this from the page.jsx

//frontend\src\lib\auth0.js
import { Auth0Client } from "@auth0/nextjs-auth0/server";

export const auth0 = new Auth0Client({
  // Options are loaded from environment variables by default
  // Ensure necessary environment variables are properly set

  // domain: process.env.AUTH0_TEN_DOMAIN,
  // clientId: process.env.AUTH0_CLIENT_ID,
  // clientSecret: process.env.AUTH0_CLIENT_SECRET,
  // appBaseUrl: process.env.APP_BASE_URL,
  // secret: process.env.AUTH0_CLIENT_SECRET,

  authorizationParameters: {
    // In v4, the AUTH0_SCOPE and AUTH0_AUDIENCE environment variables are no longer automatically picked up by the SDK.
    // Instead, we need to provide the values explicitly.
    scope: process.env.AUTH0_SCOPE,
    audience: process.env.AUTH0_AUDIENCE,
  },
});