Auth0 does not work with Next.js app router

Help
1

Hi!
I got a problem with implementing Auth0 using the new Next.js App router. The sample app is on the old version of the router and there are no tutorials for the new version, so I tried finding my own way.
I did all the configuration from the Getting Started section on next JS, made my .env file, and this is how I made my file structure:
auth0problem
The page.tsx from the [auth] folder, which is the wild card route, is the basic handleAuth file.
When I go to http://localhost:3000/api/auth/login I get this error:
auth0error

What can I do to make this work with the newest Next.js version?

1 Like
2

Hi Alex,

I have the same issue. Have you found a solution?

Attached is my screenshot of the file structure and I am using the latest NEXTJS build.

Screenshot 2023-05-14 at 8.52.08 pm
Screenshot 2023-05-14 at 8.52.08 pm235Ă—506 19.5 KB

3

I have the same issue, and found no workaround. Using Next.js 13.4

4

I’ve tried multiple times to test an app router, but I’ve had no luck.

5

Hi,
I faced the same problem.
Even in a project that is using App Router, legacy “pages/api” directory works.

Example code

Please try creating a route in the API directory.

7

I’m facing the same issue… I tried to mock the api route like the following: const auth = handleAuth({ ... }); export default auth; export { auth as GET, auth as POST };
But that didn’t solve the issue.

I ended up by creating src/pages/api/auth/[...auth0].ts and using it just like the current documentation says until they update the package to support the new NextJs App Router

8

Same here any solutions for app router, or other ways to redirect after successful authentication