[v5]: nextauth handler in Nextjs Pages directory

[HugeLetters]

What is the improvement or update you wish to see?

https://authjs.dev/getting-started/providers/oauth-tutorial#creating-the-server-config

The info provided here is out of date - NextAuth object doesn't return a handler anymore

I can't use this method either

import NextAuth from "next-auth"
import GitHub from "next-auth/providers/github"

export const {
  handlers: { GET, POST },
  auth,
} = NextAuth({
  providers: [GitHub],
})

export { GET, POST } from "./auth"
export const runtime = "edge" // optional

because this is for App directory

Is there any context that might help us understand?

I'm using next-auth@5.0.0-beta.15

Does the docs page already exist? Please link to it.

https://authjs.dev/getting-started/providers/oauth-tutorial#creating-the-server-config

[chungweileong94]

You can use Route Handler with page router, both API Routes & Route Handler are almost the same.

[HugeLetters]

@chungweileong94 what's a Route Handler? These ones?

export { GET, POST } from "./auth"

[chungweileong94]

@chungweileong94 what's a Route Handler? These ones?

export { GET, POST } from "./auth"

Yes

[HugeLetters]

@chungweileong94 doesn't seem like I can use those with Pages router - API routes receive NextApiRequest, not NextRequest

This is how I've tried to set it up

// src/pages/api/auth/[...nextauth].ts
import { GET, POST } from "@/server/auth";
import type { NextRequest } from "next/server";

export default function handler(req: NextRequest) {
  if (req.method === "GET") return GET(req);
  if (req.method === "POST") return POST(req);

  console.log("INVALID VERB", req.method);
}

This is the error

 ⨯ node_modules/.pnpm/next-auth@5.0.0-beta.16_next@14.1.4_nodemailer@6.9.9_react@18.2.0/node_modules/next-auth/lib/env.js (9:12) @ reqWithEnvURL
 ⨯ TypeError: Cannot destructure property 'href' of 'req.nextUrl' as it is undefined.
    at reqWithEnvURL (webpack-internal:///(api)/./node_modules/.pnpm/next-auth@5.0.0-beta.16_next@14.1.4_nodemailer@6.9.9_react@18.2.0/node_modules/next-auth/lib/env.js:16:13)
    at httpHandler (webpack-internal:///(api)/./node_modules/.pnpm/next-auth@5.0.0-beta.16_next@14.1.4_nodemailer@6.9.9_react@18.2.0/node_modules/next-auth/index.js:139:141)
    at handler (webpack-internal:///(api)/./src/pages/api/auth/[...nextauth].ts:8:87)
    at /home/hugeletters/VSCodeProjects/recallio/node_modules/.pnpm/next@14.1.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/pages-api.runtime.dev.js:21:3039
    at /home/hugeletters/VSCodeProjects/recallio/node_modules/.pnpm/next@14.1.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/trace/tracer.js:133:36
    at NoopContextManager.with (/home/hugeletters/VSCodeProjects/recallio/node_modules/.pnpm/next@14.1.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:7062)
    at ContextAPI.with (/home/hugeletters/VSCodeProjects/recallio/node_modules/.pnpm/next@14.1.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:518)
    at NoopTracer.startActiveSpan (/home/hugeletters/VSCodeProjects/recallio/node_modules/.pnpm/next@14.1.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:18093)
    at ProxyTracer.startActiveSpan (/home/hugeletters/VSCodeProjects/recallio/node_modules/.pnpm/next@14.1.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:18854)
    at /home/hugeletters/VSCodeProjects/recallio/node_modules/.pnpm/next@14.1.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/trace/tracer.js:122:103
    at NoopContextManager.with (/home/hugeletters/VSCodeProjects/recallio/node_modules/.pnpm/next@14.1.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:7062)
    at ContextAPI.with (/home/hugeletters/VSCodeProjects/recallio/node_modules/.pnpm/next@14.1.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:518)
    at NextTracerImpl.trace (/home/hugeletters/VSCodeProjects/recallio/node_modules/.pnpm/next@14.1.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/trace/tracer.js:122:28)
    at K (/home/hugeletters/VSCodeProjects/recallio/node_modules/.pnpm/next@14.1.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/pages-api.runtime.dev.js:21:2970)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  page: '/api/auth/[...nextauth]'
}

[chungweileong94]

@HugeLetters I mean, you can just use Route Handler from page router instead of API routes from page router.

[HugeLetters]

@chungweileong94 would you please provide some minimal code example? I don't really understand what you mean - if I need an API endpoint in pages router the only way to do that is to have an API route - with a handler which receives NextApiRequest and NextApiResponse.

I don't understand what function do I need to provide as a handler to the api/auth/[...nextauth] API route so that it would handle all the signin/singout/session userflows for me - like it does with next-auth@4

[ThangHuuVu]

@HugeLetters since v5, while authenticating in pages/ is still supported, we moved configuration to the app router. You can create a app/api/auth/[...nextauth]/route.ts to replace a pages/api/auth/[...nextauth].ts file and the following code should work:

import NextAuth from "next-auth"
import GitHub from "next-auth/providers/github"

export const {
  handlers: { GET, POST },
  auth,
} = NextAuth({
  providers: [GitHub],
})

Closing as wont fix. Learn more about the v5 migration here: https://authjs.dev/guides/upgrade-to-v5#configuration 🙏