basepath is not working in next-auth

[SrayasPMaatrum]

base path not work in next-autyh properly

[srayas]

in my app i have configured the base path as /basepath in next.config so by this all the api's and url end point will now work with /basepath but every ones issue is with basepath, is not working as expected which we are setting in auth.ts in next-auth, i have found the the work around for this

for this we need to follow the below steps i am using Next 15,

step 1: set the /basepath in next config
const nextConfig = {
basePath: '/basepath', // this will set the basepath for all contents in /app directory
images: {
loader: 'default',
path: '/basepath/_next/image', // this will append the basepath for the image apis called by next
},
assetPrefix: process.env.NEXT_APP_BASE_URL // this is will get appended for all the asset calls of the public directory
}

by follow the step 1 our app will expect the basepath in all urls and api's
but next-auth by default directly trigger /api/auth to over come this install next-auth v5 and try the following
steps
step 2: need to define the client side auth api's by following below step in client component wher session provider you used
export default function AppLayout({ children, showSideBar }: AppLayoutProps) {
return (
<>

{children}

</>
);
}
2.1 this code will call the auth api's from client side with your http://localhost:/basepath/api/auth/ as mentioned but you'll get 400 error because as you haven't configured the base path in auth.ts so it will throw cannot parse unknown exception because now because of this line code SessionProvider basePath= "/basepath/api/auth" ans step 1
the next-auth will expect the url's and api as http://localhost:/basepath(from step1)/basepath(from step 2)/api/auth/

because of this every on facing the issue to over come this follow the next step

step 3: configure the basepath in auth.ts:

in auth.ts declath the basePath option as
export const { auth, handlers, signIn, signOut } = NextAuth({
basePath: "/api/auth",
)}

this will make next-auth to expect expect the url's and api as http://localhost:/basepath(from step1)/api/auth/

so as per step 2 to will call the api from client as http://localhost:/basepath(from step1)/api/auth/ and it matches with next-auth base path now http://localhost:/basepath(from step1)/api/auth/ as per step 3

step 4:additional for /api/auth/callback/
so now all the api's will work fine for all api's except the callback api of a provider still that will be called by next-auth http://localhost:/api/auth/callback/

if we modify this with our desired basepath we 'll get the error as invalid_redirect_uri as response from our provider itself
because this http://localhost:/api/auth/callback/ api we are getting as response from this api /api/auth/providers so this api will save the redirect_uri url in our provider while on this api itself

so if if append our base path and called this like http://localhost:/basepath/api/auth/callback/
we 'll get the error as invalid_redirect_uri as response because the /api/auth/providers api set the redirect_uri as http://localhost:/api/auth/callback/ and we are calling the http://localhost:/basepath/api/auth/callback/ so the provider will tell redirect ui not matching with the saved one so throws the error

for this part perm fix next-auth team need to work on the providers api request handling to set the re_directuri based on config or need to allow some parameters to pass for this api

for this there is 2 work around

4.1 we can use redirects or rewrites in next.config for this api /api/auth/callback/ as below
// either this one this will directly move this to our desired url
async redirects() {
return [
{
source: '/api/auth/callback/:path*',
destination: ${process.env.NEXT_PUBLIC_APP_BASE_URL}/api/auth/callback/:path*,
basePath: false,
permanent: true,
},
];
},
//or
//this one this will just write the response of our desired url to this
async rewrites() {
return [
{
source: '/api/auth/callback/:path*',
destination: ${process.env.NEXT_PUBLIC_APP_BASE_URL}/api/auth/callback/:path*,
basePath: false,
},
];
},
but redirect or rewrite that will work properly only if don't have any other /api/auth in your domain if used in some other then you will get too many redirects error on server instance

4.2 (if yours is micro service architecture and should not call any of your app url or end point without your base path ) then avoid the any public provider configuration in next-auth configure the provider redirect and login in client side so that we can avoid the calling of this and use credentiasprovider for custom handling

4.2.1 configure the credentialsprovider in auth.ts as input of your desired inputs and write you custom authorise method and saved details in session
// auth.ts
export const { auth, handlers, signIn, signOut } = NextAuth({

basePath: "/api/auth",
providers: [CredentialsProvider({
name: "Keycloak Credentials",
credentials: {
access_token: { label: "Access Token", type: "text" },
refresh_token: { label: "Refresh Token", type: "text" },
},
async authorize(credentials) {
// write your custom logic in my case i have called the token api of keyccloak using refresh_token and
save the response and necessary details as per my wish
} catch (error) {
console.log("Authorization error:", error);
throw new Error("Invalid credentials");
}
},

})],
}

4.2.3 in my case i have used keycloak and i have configured the keycloak and keycloak login redirect is handled in client side
4.2.4 after successful login. i passed the accesstoken and refreshtoken as inputs as below
//client side code to call the sign of next-auth after succefull login in client side
await signIn("credentials", {
redirect: false,
access_token,
refresh_token,
});
}

by following the 4 th steps we can over the callback api of a provider still that will be called by next-auth http://localhost:/api/auth/callback/ because this api never called these steps working perfectly for me as a production ready code

[SrayasPMaatrum]

this is working