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 ?

[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 and that 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