Support Route Handlers in the app folder of Nextjs 13

[benderillo]

Description 📓

TL;DR

Need support for setting up NextAuth in route handler.

Details

As API routes being replaced by Route handlers (https://beta.nextjs.org/docs/routing/route-handlers) NextAuth need to support running in the route handler.

And documentation need to provide an example how to setup the nextjs authentication with NextAuth that uses route handler instead of the API route pages/api/auth/[...nextauth].ts

How to reproduce ☕️

N/A

Contributing 🙌🏽

No, I am afraid I cannot help regarding this

[balazsorban44]

There is already a PR for it, and you can find an experimental version here #6777 (comment) to try it out!

Note, It's more of an incremental/gradual migration over a longer time period, API Routes are not "replaced".

[benderillo]

There is already a PR for it, and you can find an experimental version here #6777 (comment) to try it out!

Note, It's more of an incremental/gradual migration over a longer time period, API Routes are not "replaced".

This is great! Do you know when (approximately) this will make it to the next official release?

[balazsorban44]

I would like to get this released maybe next week, if not sooner.

[benderillo]

@balazsorban44 I tried the latest code from #6777 (comment) today.
CORS issue is gone but now I am getting this:

[next-auth][error][OAUTH_CALLBACK_ERROR] 
https://next-auth.js.org/errors#oauth_callback_error checks.state argument is missing {
  error: TypeError: checks.state argument is missing
      at Client.callback (webpack-internal:///(sc_server)/./node_modules/openid-client/lib/client.js:321:19)
      at oAuthCallback (webpack-internal:///(sc_server)/./node_modules/next-auth/core/lib/oauth/callback.js:95:35)
      at runMicrotasks (<anonymous>)
      at processTicksAndRejections (node:internal/process/task_queues:96:5)
      at async Object.callback (webpack-internal:///(sc_server)/./node_modules/next-auth/core/routes/callback.js:18:83)
      at async AuthHandler (webpack-internal:///(sc_server)/./node_modules/next-auth/core/index.js:198:38)
      at async NextAuthRouteHandler (webpack-internal:///(sc_server)/./node_modules/next-auth/next/index.js:51:30)
      at async eval (webpack-internal:///(sc_server)/./node_modules/next-auth/next/index.js:85:24)
      at async AppRouteRouteHandler.execute (~/nextjs-temp-prep/node_modules/next/dist/server/future/route-handlers/app-route-route-handler.js:214:26)

    name: 'OAuthCallbackError',
    code: undefined
  },
  providerId: 'google',
  message: 'checks.state argument is missing'

I get the google's consent screen first, and after I give my consent I get redirected to the callback but with the error.
http://localhost:3000/auth/signin?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2Fauth%2Fsignin&error=OAuthCallback

Not quite sure what this is.

[balazsorban44]

Small blocker I encountered, there seems to be an issue with setting multiple cookies. Currently, I suspect it's in Next.js, investigating. Related: vercel/next.js#38302 (comment)

All of your reports are likely related to that.

[benderillo]

@balazsorban44 Do I understand correctly that the fix for this ticket depends on vercel/next.js#46355?
If so I want it to be here so people can get the current status without posting here that your PR does not work for them yet.

[balazsorban44]

Yes, see: #6792 (comment)

That issue you linked is more correct to link to though, so thanks. 👍

[NiranjithCU]

to resolve this temporarily, setting checks: ['pkce'] in the config seems to be working with github login.

[EliasGcf]

Hi @balazsorban44, sorry for the late reply. Here is the reproduction repo as you requested in #6777 (comment): https://github.com/EliasGcf/next-auth-with-route-handler

[balazsorban44]

Thank you for everyone's patience, this is now available in 4.22.0! 🎉 Check out the docs: https://next-auth.js.org/configuration/initialization#route-handlers-app

Remember, this is opt-in, pages will be still supported!

[leeren]

Even though I can correctly source my provider configuration from api/auth/[...nextauth].ts I get an API resolver error unless I define the same NextAuth settings in pages/api/auth/[...nextauth].ts

This happens when I trigger the signIn callback from next-auth/react

Does anyone have a similar issue? Or anyone have tips on how to debug / resolve this problem?

[octet-stream]

api/auth/[...nextauth].ts

In App Router, Route Hanlders must be defined at file named route.{ts,js}, so I think you nett to rename this to api/auth/[...nextauth]/route.ts. See it in documentation.

[leeren]

I tried the above but still get the same issue.

Putting the following in api/auth/[...nextauth]/route.ts:

import NextAuth from "next-auth"
import type { NextAuthOptions } from 'next-auth'
import GoogleProvider from "next-auth/providers/google";

export const authOptions: NextAuthOptions = {
	providers: [
		GoogleProvider({
			clientId: process.env.GOOGLE_CLIENT_ID,
			clientSecret: process.env.GOOGLE_CLIENT_SECRET
		}),
	],
}

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

Putting it in api/auth/[...nextauth].ts:

import NextAuth from "next-auth"
import type { NextAuthOptions } from 'next-auth'
import GoogleProvider from "next-auth/providers/google";

export const authOptions: NextAuthOptions = {
	providers: [
		GoogleProvider({
			clientId: process.env.GOOGLE_CLIENT_ID,
			clientSecret: process.env.GOOGLE_CLIENT_SECRET
		}),
	],
}

export default NextAuth(authOptions);

Both fail for me unless I explicitly define them in the pages folder. Anyone have a working example using Next.js 13?

[dstarosta]

api/auth routes are not resolving for me either.

[Jarpiino]

api/auth/[...nextauth].ts

In App Router, Route Hanlders must be defined at file named route.{ts,js}, so I think you nett to rename this to api/auth/[...nextauth]/route.ts. See it in documentation.

./api/auth/[...nextauth]/route.js actually works, ty!

[dstarosta]

I have tried /api/auth/[...nextauth]/route.ts and /api/auth/[...nextauth]/route.js without any success.

Only the pages/api/auth/[...nextauth].ts route works.

[Jarpiino]

I have tried /api/auth/[...nextauth]/route.ts and /api/auth/[...nextauth]/route.js without any success.

Only the pages/api/auth/[...nextauth].ts route works.

I also found a great guide which was made just 10 days ago https://youtu.be/VE8BkImUciY?t=8085
his github repo with the new routes > https://github.com/safak/nextjs-tutorial/blob/main/src/app/api/auth/%5B...nextauth%5D/route.js

[dstarosta]

The issue was caused by a redirect regex on the backend.

[arilotter]

Found & resolved an issue on my end;
app/api/auth/[...nextauth]/route.ts doesn't work, but
app/auth/[...nextauth]/route.ts works perfectly.

[makhtardiouf]

For those that deployed their app on the Cloud and use a custom base path, refer to https://next-auth.js.org/getting-started/client#custom-base-path.
And set NEXTAUTH_SECRET and NEXTAUTH_URL to the full path including ../api/auth

Was a major headache on my Next.js 14.2 app