Auth0 does not work with Next.js app router

[alexstroescu]

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:

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:

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

[nadun]

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.

[WSzP]

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

[cool4uh]

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

[ku6ryo]

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

Example code

GitHub - ku6ryo/Auth0_NextJs-AppRouter

Please try creating a route in the API directory.

ku6ryo/Auth0_NextJs-AppRouter/blob/master/src/pages/api/auth/[...auth0].ts

[Adnanear]

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

[devDoubleH]

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

[meroware]

I got it working doing the following, hit me up if you have any questions

Docs for reference

Middleward Route - withMiddlewareAuthRequired | @auth0/nextjs-auth0
Session/Route auth - GetSession | @auth0/nextjs-auth0

Setting up the api auth0 route - REQUIRED

Create a new route under src/app/api/auth/[auth0]/route.ts
Contents would be

// app/api/auth/[auth0]/route.js
import { handleAuth } from '@auth0/nextjs-auth0';

export const GET = handleAuth();

Env variables required

Make sure to set this env variables in your app as they are required by the auth0 lib during run time

AUTH0_SECRET
AUTH0_BASE_URL
AUTH0_ISSUER_BASE_URL
AUTH0_CLIENT_ID
AUTH0_CLIENT_SECRET

How to protect your routes

Option 1: Middleware

Create a new file middleware.ts or middleware.js at the same level as app inside your src folder with the following contents

// src/app/middleware.ts
import { withMiddlewareAuthRequired } from '@auth0/nextjs-auth0/edge';

export default withMiddlewareAuthRequired();

This will make sure that all your routes are protected. You can create a config on it to protect certain routes if you’d like

// src/app/middleware.ts
import { withMiddlewareAuthRequired } from '@auth0/nextjs-auth0/edge';

export default withMiddlewareAuthRequired();

export const config = {
  matcher: '/about/:path*',
};

Option 2: Route Level

You just need to export a GET function as a constant wrapping your route under teh with api auth required function that the lib provides

// app/api/<route directory name>/route.ts
import { withApiAuthRequired } from '@auth0/nextjs-auth0';
import { NextResponse } from 'next/server';

export const GET = withApiAuthRequired(async function GET(req) {
  const res = new NextResponse();
  return new NextResponse('Seems to be working', {
      status: 200
  })
});

Accessing the user session

Go to your route and import the get session function from lib
import { getSession } from '@auth0/nextjs-auth0';

Then just call the get session with the request and a new response object, that’s pretty much it

// app/api/<route directory name>/route.ts
import { getSession } from '@auth0/nextjs-auth0';
import { NextResponse } from 'next/server';

export async function GET(req) {
  const res = new NextResponse();
  const session = await getSession(req, res);
  return new NextResponse(`Logged in as ${session?.user.nickname}`, {
      status: 200
  })
});