Custom Base Path not working

[NikitaKlimuk]

Hi, I have the following problem, I need to change the custom base path for next auth to work. My application already has an endpoint api/auth for backend server, so I started looking for a solution to this problem.

Following the documentation -
https://next-auth.js.org/configuration/options#nextauth_url

I changed the value of NEXTAUTH_URL (site/next/api/auth) and basePath in (next/api/auth) and added a custom folder in the path to the nextauth config (app/next/api/auth/[...nextauth]/route.ts).

This helped but only for the local version of the site, if you load it on a real domain then incorrectly flies request to providers (for example Google expects redirect url - site/api/auth).

Tried to solve this problem in app and pages routing and got the same result. The problem seems to have gone away in the latest beta version (5.0.0-beta.4), but I would like to use a more stable version if possible, since without proper documentation it is hard to migrate all my methods from [...nextauth].ts or [...nextauth]/route.ts of the previous current version.

Below is a simple sample code for implementation

import type { AuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export const authConfig: AuthOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.AUTH_GOOGLE_ID!,
      clientSecret: process.env.AUTH_GOOGLE_SECRET!,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET!,
  pages: {
    signIn: "/signin",
  },
};

import { authConfig } from "@/configs/auth";
import NextAuth from "next-auth/next";

const handler = NextAuth(authConfig);

export { handler as GET, handler as POST };

"use client";

import { SessionProvider } from "next-auth/react";

export const Providers = ({ children }: { children: React.ReactNode }) => {
  return (
    <SessionProvider basePath="/next/api/auth">{children}</SessionProvider>
  );
};

# Auth Providers
AUTH_GOOGLE_ID=
AUTH_GOOGLE_SECRET=

# Auth config
NEXTAUTH_SECRET=
NEXTAUTH_URL="site/next/api/auth"

I would appreciate any help and advice to solve this problem.

[BouzianeAminePro]

Did you set your basePath on the next.config ?

[ahoydave]

Thank you! I don't know how this is not mentioned in the docs anywhere. I couldn't get nextAuth 4 to use a custom base path until I included NEXTAUTH_URL in the env field of my next.config file

[nktnet1]

^ yeah, for v4, I had the same issue and tracked it down to this one comment here with the same workaround:

• 404 on api/auth/session when using basePath #689 (comment)

[NikitaKlimuk]

I will share my solution to this problem, one way or another you have to use app routing to create a custom path route for nextauth. The path will look like this src/app/next/api/auth/[...nextauth]/route.ts

Then create a route for NextAuth (app routing) - https://next-auth.js.org/configuration/initialization#route-handlers-app.

`
declare module 'next-auth' {
interface Session extends DefaultSession {
token: string;
user: DefaultSession['user'] & {
email: string;
name: string;
picture: string;
};
}
}

const auth = async (req: any, ctx: any) => {

const authOptions: AuthOptions = {
providers: [
GoogleProvider({...
credentialProviderLogin,
credentialProviderSignup,
],
secret:
session: {
},
pages: {
signIn: '/auth/login',
newUser: '/auth/signup',
},
callbacks: {
...
}
};

return await NextAuth(req, ctx, authOptions);
};

export { auth as GET, auth as POST };
`

[ronijaat]

please share the full code

[Badaboom1995]

Added basePath in auth.js and SessionProvider
Worked for me

[ronijaat]

please share bro

[ronijaat]

Hi friends,
i am sharing an easiest way to handle this.

my nextauth config (app/visa/api/auth/[...nextauth]/route.ts).

auth.js

`import NextAuth from 'next-auth';
import Google from 'next-auth/providers/google';

export const { handlers, signIn, signOut, auth } = NextAuth({
providers: [
Google({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
}),
],
session: { strategy: 'jwt' },
basePath: '/visa/api/auth',
});
`

add a base path by default it is /api/auth so change to this /custom_name/api/auth
using this signIn method for login

Sign in client component

`'use client';

import { signInOAuth } from '@/lib/actions/sign-in.action';
import { FcGoogle } from 'react-icons/fc';
import { Button } from '../ui/button';

export const Social = () => {
const onClick = async (provider: string) =>
await signInOAuth({ providerId: provider });
return (

<Button
className="w-full"
size="lg"
variant="outline"
onClick={() => {
onClick('google');
}}
>

);
};
`

after that we will use signIn from auth.ts i.e creating a server action for sign in..
actions/signin.ts

`'use server';
import { signIn } from '@/auth';

import { type OAuthProviderType } from 'next-auth/providers';
import { redirect } from 'next/navigation';

/**

• Server action for OAuth sign in with AuthJS.
  */
  export async function signInOAuth({ providerId }: { providerId: string }) {
  let redirectUrl: string | null = null;
  try {
  // note: could validate the providerId using something like zod to ensure only allowed providers are passed in
  // The signIn() function comes from NextAuth() in your auth.ts
  redirectUrl = await signIn(providerId as OAuthProviderType, {
  redirect: false,
  });
  if (!redirectUrl) {
  return {
  status: 'error',
  errorMessage: 'Failed to login, redirect url not found',
  } as const;
  }
  } catch (error) {
  return {
  status: 'error',
  errorMessage: 'Failed to login',
  } as const;
  }

redirect(redirectUrl);
}
`

path for google developer console.
redirect url : http://localhost:3000/custom_path/api/auth/callback/google

[heondokim]

I was not having success with the above solutions, for us the fix was adding the baseUrl prop to the SessionProvider along with basePath prop, baseUrl would be the canonical url, excluding the basePath

so if you had https://example.com/custom-base the baseUrl would be https://example.com

import { SessionProvider } from "next-auth/react";

// baseUrl === 'https://example.com` basePath === `/custom-base`
<SessionProvider baseUrl={baseUrl} basePath={`${basePath}/api/auth`}>

not defining the baseUrl would break our prod deployment

[patriciaanet]

@heondokim thank you! This approach worked for me on version 5.0.0-beta.12

[heondokim]

Ran into a lot of headaches deploying next auth, happy to help

[nktnet1]

Is this still the case on version 5.0.0-beta.25?

Could not get it to work - have used different combinations of

• NEXTAUTH_URL in next.config.mjs env
• AUTH_URL in next.config.mjs env
• setting baseUrl in <SessionProvider>
• setting basePath in <SessionProvider>

Tested credentials login and microsoft entra id login.

This PR contains many workarounds for v5:

• fix(next-auth): Add support for Next.js basePath configuration #10797

[nktnet1]

For v4, define NEXTAUTH_URL in nest.config.jsworked for me, e.g. assuming it exists in.env`:

const config = {
  // ...
  env: {
    NEXTAUTH_URL: process.env.NEXTAUTH_URL,
  },
};

Read more about this bug here:

• 404 on api/auth/session when using basePath #689 (comment)

---

For v5, see this pull request (contains 2 workarounds):

• fix(next-auth): Add support for Next.js basePath configuration #10797

And another proposed workaround:

• Working universal solution for Auth v5 in dockerized Next.js with basePath #12160

[SrayasPMaatrum]

for v5 working workaround
next-auth/discussions/9274 this works fine