How to NOT override NEXTAUTH_URL on Vercel

[klynow]

1. I have set basePath: '/photo' in next.config.js
2. Also set it in _app.tsx
   <SessionProvider session={session} basePath="/photo/api/auth">
3. Lastly for env.local set NEXTAUTH_URL=http://localhost:3000/photo/api/auth
   When I am running this on local host, I have no issues of loging through Google (The only login I implemented so far)

However, when I deploy it to vercel, I can be redirected to login page but fail to access call back since the call back url will be
https://vercelURL/api/auth/callback/google/******

However, if I manually insert the basePath to the above url: https://vercelURL/**photo**/api/auth/callback/google/****** the login will be successful.

Since the document describe you don't need to set NEXTAUTH_URL in vercel, I believe that's exactly the problem - nextauth simply use the defaul root domain passed by Vercel rather than the one with custom path.

Any workaround on this?

[KentonParton]

I'm having the same issue. Like you, I have set basePath off of

'use client';

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

export default function RepoAuthProvider({ children }) {
  return (
    <SessionProvider basePath="/api/repo-auth">
      {children}
    </SessionProvider>
  );
}

All works well locally, but when I deploy to Vercel, it uses the default callback url.

next-auth version: ^4.24.7
next version: 14.2.3

App router.

Does anyone know how to resolve this?

[jacksteves]

Found out that Vercel system environment variables can override custom ones. Turning them off fixed this issue for me.