basePath and redirect_uri issues when deploying to vercel

[waltervanwoudenberg]

Question 💬

On my local environment when I go to: http://localhost:3000/api/app/auth/providers everything works as supposed, I get back:

{"google":{"id":"google","name":"Google","type":"oauth","signinUrl":"http://localhost:3000/api/app/auth/signin/google","callbackUrl":"http://localhost:3000/api/app/auth/callback/google"},"login":{"id":"login","name":"Login","type":"credentials","signinUrl":"http://localhost:3000/api/app/auth/signin/login","callbackUrl":"http://localhost:3000/api/app/auth/callback/login"}}

But on vercel when i go to https://my-app.vercel.app/api/app/auth/providers

I get back:

{"google":{"id":"google","name":"Google","type":"oauth","signinUrl":"https://my-app.vercel.app/api/auth/signin/google","callbackUrl":"https://my-app.vercel.app/api/auth/callback/google"},"login":{"id":"login","name":"Login","type":"credentials","signinUrl":"https://my-app.vercel.app/api/auth/signin/login","callbackUrl":"https://my-app.vercel.app/api/auth/callback/login"}}

so when the request is made to: Request URL: https://accounts.google.com/o/oauth2/v2/auth
it contains: redirect_uri: https://my-app.vercel.app/api/auth/callback/google in the payload

I tried playing with NEXTAUTH_URL and NEXTAUTH_URL_INTERNAL but the docs say:

On Vercel deployments, we will read the VERCEL_URL environment variable, so you won't need to define NEXTAUTH_URL.

Using:

    "next": "^13.4.9",
    "next-auth": "^4.22.1"

What am i missing to get the correct urls back on vercel?

How to reproduce ☕️

In my SessionProvider l have defined the basePath like:

<SessionProvider
  basePath={'/api/app/auth'}
>
{children}
</SessionProvider>

Contributing 🙌🏽

No, I am afraid I cannot help regarding this

[nontone]

same here, I also found this problem after changing many things to basePath.

1. set NEXTAUTH_URL .env to https://any.vercel.app/basePath/api/auth
2. add basePath to <SessionProvider basePath="/basePath/api/auth">
3. create /auth/signIn server side page for custom signIn function

• create function new signIn to override
• add options callbackUrl to ${NEXTAUTH_URL}/callback/google. (pass baseUrl from server side)
• add options signinUrl/redirectUrl jus try to change redirect_uri but it doesn't exist.

4. change some options in /api/auth/[...nextauth].ts but no one related to redirect_uri.
5. try to add redirectProxyUrl but doesn't exist in Google provider
6. try to set NEXTAUTH_URL_INTERNAL and AUTH_REIDRECT_PROXY_URL

it doesn't change redirect_uri mismatch from Google.

the last one I try out is the solution for me.

• downgrade to version 4.20.1 because 4.22.x and 4.21.x don't work as I thought too.

I think a new version of google provider might have something wrong or just doesn't support basePath and seems changed to core/ instead of next-auth/ on providers. 4.20.1 before renamed to authjs.

so, do you find out another solution on a new version?

Thanks

---

updates 16 Aug 2024

1. set NEXTAUTH_URL and NEXTAUTH_URL_INTERNAL to env
2. use next-auth 4.20.1

[stale[bot]]

It looks like this issue did not receive any activity for 60 days. It will be closed in 7 days if no further activity occurs. If you think your issue is still relevant, commenting will keep it open. Thanks!

[KentonParton]

I'm running into this issue too. Like you, everything works locally but I get the mismatch when I deploy to Vercel.

Have you managed to determine a workaround?

[sajjadskdeveloper]

have you find solution