fix: next-auth basePath should be set to /api/auth by default (#9687)

* tweak dev app

* respect `basePath` in `useSession`

* fix type

* default `basePath` to `/api/auth`

* add `createActionURL` method

Author: balazsorban44

apps/dev/nextjs/auth.config.ts

@@ -1,5 +1,10 @@
 import type { NextAuthConfig } from "next-auth"
 import Credentials from "next-auth/providers/credentials"
+import GitHub from "next-auth/providers/github"
+import Google from "next-auth/providers/google"
+import Facebook from "next-auth/providers/facebook"
+import Auth0 from "next-auth/providers/auth0"
+import Twitter from "next-auth/providers/twitter"
 
 declare module "next-auth" {
   /**
@@ -32,16 +37,17 @@ export default {
         }
       },
     }),
-    process.env.AUTH_GITHUB_ID && (await import("next-auth/providers/github")).default,
-    process.env.AUTH_GOOGLE_ID && (await import("next-auth/providers/google")).default,
-    process.env.AUTH_FACEBOOK_ID && (await import("next-auth/providers/facebook")).default,
-    process.env.AUTH_AUTH0_ID && (await import("next-auth/providers/auth0")).default,
-    process.env.AUTH_TWITTER_ID && (await import("next-auth/providers/twitter")).default
+    GitHub,
+    Google,
+    Facebook,
+    Auth0,
+    Twitter,
   ].filter(Boolean) as NextAuthConfig["providers"],
   callbacks: {
     jwt({ token, trigger, session }) {
       if (trigger === "update") token.name = session.user.name
       return token
     },
   },
+  basePath: "/auth",
 } satisfies NextAuthConfig

apps/dev/nextjs/middleware.ts

@@ -1,12 +1,12 @@
 import NextAuth from "next-auth"
 import authConfig from "auth.config"
 
-// export const middleware = NextAuth(authConfig).auth
+export const middleware = NextAuth(authConfig).auth
 
-export const middleware = NextAuth((req) => {
-  console.log("middleware", req)
-  return authConfig
-}).auth
+// export const middleware = NextAuth((req) => {
+//   console.log("middleware", req)
+//   return authConfig
+// }).auth
 
 export const config = {
   matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],

packages/next-auth/src/index.tsx

@@ -358,7 +358,9 @@ export interface NextAuthResult {
  * ```
  */
 export default function NextAuth(
-  config: NextAuthConfig | ((request: Request | undefined) => NextAuthConfig)
+  config:
+    | NextAuthConfig
+    | ((request: NextRequest | undefined) => NextAuthConfig)
 ): NextAuthResult {
   if (typeof config === "function") {
     const httpHandler = (req: NextRequest) => {

packages/next-auth/src/lib/actions.ts

@@ -2,10 +2,10 @@ import { Auth, raw, skipCSRFCheck } from "@auth/core"
 import { headers as nextHeaders, cookies } from "next/headers"
 import { redirect } from "next/navigation"
 
-import { detectOrigin } from "./env.js"
-
+import type { AuthAction } from "@auth/core/types.js"
 import type { NextAuthConfig } from "./index.js"
 import type { NextAuthResult, Session } from "../index.js"
+import type { headers } from "next/headers"
 
 type SignInParams = Parameters<NextAuthResult["signIn"]>
 export async function signIn(
@@ -22,7 +22,7 @@ export async function signIn(
   } = options instanceof FormData ? Object.fromEntries(options) : options
 
   const callbackUrl = redirectTo?.toString() ?? headers.get("Referer") ?? "/"
-  const base = authUrl(detectOrigin(headers), "signin")
+  const base = createActionURL("signin", headers, config.basePath)
 
   if (!provider) {
     const url = `${base}?${new URLSearchParams({ callbackUrl })}`
@@ -70,7 +70,7 @@ export async function signOut(
   const headers = new Headers(nextHeaders())
   headers.set("Content-Type", "application/x-www-form-urlencoded")
 
-  const url = authUrl(detectOrigin(headers), "signout")
+  const url = createActionURL("signout", headers, config.basePath)
   const callbackUrl = options?.redirectTo ?? headers.get("Referer") ?? "/"
   const body = new URLSearchParams({ callbackUrl })
   const req = new Request(url, { method: "POST", headers, body })
@@ -92,7 +92,7 @@ export async function update(
   const headers = new Headers(nextHeaders())
   headers.set("Content-Type", "application/json")
 
-  const url = authUrl(detectOrigin(headers), "session")
+  const url = createActionURL("session", headers, config.basePath)
   const body = JSON.stringify({ data })
   const req = new Request(url, { method: "POST", headers, body })
 
@@ -103,10 +103,25 @@ export async function update(
   return res.body
 }
 
-/** Determine an action's URL */
-function authUrl(base: URL, action: string) {
-  let pathname
-  if (base.pathname === "/") pathname ??= `/api/auth/${action}`
-  else pathname ??= `${base.pathname}/${action}`
-  return new URL(pathname, base.origin)
+/**
+ * Extract the origin and base path from either `AUTH_URL` or `NEXTAUTH_URL` environment variables,
+ * or the request's headers and the {@link NextAuthConfig.basePath} option.
+ */
+export function createActionURL(
+  action: AuthAction,
+  h: Headers | ReturnType<typeof headers>,
+  basePath?: string
+) {
+  const envUrl = process.env.AUTH_URL ?? process.env.NEXTAUTH_URL
+  if (envUrl) {
+    const { origin, pathname } = new URL(envUrl)
+    const separator = pathname.endsWith("/") ? "" : "/"
+    return `${origin}${pathname}${separator}${action}`
+  }
+  const host = h.get("x-forwarded-host") ?? h.get("host")
+  const protocol = h.get("x-forwarded-proto") === "http" ? "http" : "https"
+  // @ts-expect-error `basePath` value is default'ed to "/api/auth" in `setEnvDefaults`
+  const { origin, pathname } = new URL(basePath, `${protocol}://${host}`)
+  const separator = pathname.endsWith("/") ? "" : "/"
+  return `${origin}${pathname}${separator}${action}`
 }

packages/next-auth/src/lib/env.ts

@@ -1,10 +1,17 @@
 import { NextRequest } from "next/server"
-import type { headers } from "next/headers"
 
 import type { NextAuthConfig } from "./index.js"
 
 export function setEnvDefaults(config: NextAuthConfig) {
   config.secret ??= process.env.AUTH_SECRET ?? process.env.NEXTAUTH_SECRET
+  try {
+    const url = process.env.AUTH_URL ?? process.env.NEXTAUTH_URL
+    if (url) config.basePath = new URL(url).pathname
+  } catch {
+  } finally {
+    config.basePath ??= "/api/auth"
+  }
+
   config.trustHost ??= !!(
     process.env.AUTH_URL ??
     process.env.NEXTAUTH_URL ??
@@ -27,18 +34,6 @@ export function setEnvDefaults(config: NextAuthConfig) {
   })
 }
 
-/**
- * Extract the origin from `NEXTAUTH_URL` or `AUTH_URL`
- * environment variables, or the request's headers.
- */
-export function detectOrigin(h: Headers | ReturnType<typeof headers>) {
-  const url = process.env.AUTH_URL ?? process.env.NEXTAUTH_URL
-  if (url) return new URL(url)
-  const host = h.get("x-forwarded-host") ?? h.get("host")
-  const protocol = h.get("x-forwarded-proto") === "http" ? "http" : "https"
-  return new URL(`${protocol}://${host}`)
-}
-
 /** If `NEXTAUTH_URL` or `AUTH_URL` is defined, override the request's URL. */
 export function reqWithEnvUrl(req: NextRequest): NextRequest {
   const url = process.env.AUTH_URL ?? process.env.NEXTAUTH_URL

packages/next-auth/src/lib/index.ts

@@ -1,7 +1,8 @@
 import { Auth, type AuthConfig } from "@auth/core"
 import { headers } from "next/headers"
 import { NextResponse } from "next/server"
-import { detectOrigin, reqWithEnvUrl } from "./env.js"
+import { reqWithEnvUrl } from "./env.js"
+import { createActionURL } from "./actions.js"
 
 import type { AuthAction, Awaitable, Session } from "@auth/core/types"
 import type {
@@ -59,8 +60,8 @@ export interface NextAuthConfig extends Omit<AuthConfig, "raw"> {
 }
 
 async function getSession(headers: Headers, config: NextAuthConfig) {
-  const origin = detectOrigin(headers)
-  const request = new Request(`${origin}/session`, {
+  const url = createActionURL("session", headers, config.basePath)
+  const request = new Request(url, {
     headers: { cookie: headers.get("cookie") ?? "" },
   })
 
@@ -249,7 +250,7 @@ async function handleAuth(
       (await userMiddlewareOrRoute(augmentedReq, args[1])) ??
       NextResponse.next()
   } else if (!authorized) {
-    const signInPage = config.pages?.signIn ?? "/api/auth/signin"
+    const signInPage = config.pages?.signIn ?? `${config.basePath}/signin`
     if (request.nextUrl.pathname !== signInPage) {
       // Redirect to signin page by default if not authorized
       const signInUrl = request.nextUrl.clone()

packages/next-auth/src/react.tsx

@@ -137,7 +137,7 @@ export function useSession<R extends boolean>(
 
   React.useEffect(() => {
     if (requiredAndNotLoading) {
-      const url = `/api/auth/signin?${new URLSearchParams({
+      const url = `${__NEXTAUTH.basePath}/signin?${new URLSearchParams({
         error: "SessionRequired",
         callbackUrl: window.location.href,
       })}`