Currently, I am using a nextjs 12 application and set up auth0 as my authentication provider by following the guidelines provided here: https://auth0.com/docs/quickstart/webapp/nextjs/interactive. However, I am now looking to upgrade my application to nextjs 13, but I have not been able to find any documentation on this specific upgrade process.
In nextjs 12, the UserProvider wraps the entire app in _app.tsx as shown below:
import "../styles/globals.css";
import type { AppProps } from "next/app";
import { UserProvider } from "@auth0/nextjs-auth0/client";
function MyApp({ Component, pageProps }: AppProps) {
return (
<UserProvider>
<Component {...pageProps} />
</UserProvider>
);
}
export default MyApp;
With the changes introduced in nextjs 13, I needed to make adjustments within the main page.tsx file as follows:
import { UserProvider } from "@auth0/nextjs-auth0/client";
import "../styles/globals.css";
export default function RootLayout({
// Layouts must accept a children prop.
// This will be populated with nested layouts or pages
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<UserProvider>
<body>{children}</body>
</UserProvider>
</html>
);
}
However, when attempting to access 'http://localhost:3000/api/auth/login', I encounter the following error related to CORS policy restrictions:
Access to fetch at 'https://domain.eu.auth0.com/authorize?client_id=test_number&scope....' (redirected from 'http://localhost:3000/api/auth/login') 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.
I made sure to add http://localhost:3000 and as Allowed Origins CQRS and Allowed Web Origins in the Auth0 dashboard settings.
If anyone has experience integrating auth0 into a nextjs 13 application or any insights into resolving the CORS issue mentioned above, I would greatly appreciate it. Thank you!