search

nextauthjs / next-auth

Authentication for the Web.
https://authjs.dev
ISC License
24.59k stars 3.46k forks source link

Vercel deployment redirect URI #3419

Closed AashJ closed 2 years ago

AashJ commented 2 years ago

Question 💬

When deploying with vercel, after calling signIn, nextauthv4 redirects me to the vercel assigned url instead of the url i bought. For example, after calling signIn("github") my redirect uri is --------p617s86j0-aashj.vercel.app/api/auth/....

I'm wondering how I can change this to use my domain that i've assigned instead. Obviously this is an issue because i'll need to change my authorization url for my oauth provider every time i deploy.

I'm wondering what I'm doing wrong here...?

How to reproduce ☕️

Any vercel deployed nextjs app using nextauth with an oauth provider.

Contributing 🙌🏽

No, I am afraid I cannot help regarding this

AashJ commented 2 years ago

Calling signOut client side also redirects me to a url that correlates w/ the vercel deployment

balazsorban44 commented 2 years ago

do you have a reproduction?

AashJ commented 2 years ago

Yes, repro link is here: https://github.com/AashJ/next-auth-frontend-repro Deploy is here: https://next-auth-repro-private.vercel.app/

balazsorban44 commented 2 years ago

Hmm... After some digging, it might be that we cannot rely solely on VERCEL_URL after all... :thinking: https://vercel.com/docs/concepts/projects/environment-variables#system-environment-variables

The idea was that when you deployed to Vercel, you wouldn't have to set NEXTAUTH_URL.

As a workaround, could you try adding NEXTAUTH_URL=https://next-auth-repro-private.vercel.app in your Vercel dashboard to your production deployment and see if that helps?

AashJ commented 2 years ago

Ah yes, this seemed to fix it! Thank you

balazsorban44 commented 2 years ago

We still have to figure out if we can work around this... I'm kind of surprised, we have been saying for a long time that on Vercel, you don't have to set that variable. 👀

waptik commented 2 years ago

I also faced the same issue today when using google provider until I saw this issue as well as this. Before then, I had to delete my google cloud project and create a new one.

balazsorban44 commented 2 years ago

I'm thinking of a solution. Vercel safely sets the x-forwarded-host header. In combination with any of the Vercel environment variables, we might be able to detect a Vercel deployment sagely again, even with a custom domain.

https://vercel.com/docs/concepts/edge-network/headers#x-vercel-deployment-url

Vercel makes sure that the header is always correct and wasn't overridden by an incoming request. So it's important we verify we are on the Vercel platform before relying on the header value.

I believe all this can be introduced in a non-breaking fashion, and I'll experiment with it the coming days/weeks.

tomaszgrabowski commented 2 years ago

Exact thing happen to me when using the next-auth credentials login. After providing credentials and click login app takes me to another Vercel domain and auth process starts again. Setting NEXTAUTH_UR doesn't help here.

balazsorban44 commented 2 years ago

Setting NEXTAUTH_URL is the only way to fix this currently. Remember to re-deploy when you have set it, and that you are on the latest version (4.0.6 as of writing). Otherwise, you might have a different issue.

tomaszgrabowski commented 2 years ago

Setting NEXTAUTH_URL is the only way to fix this currently. Remember to re-deploy when you have set it, and that you are on the latest version (4.0.6 as of writing). Otherwise, you might have a different issue.

Thank you! Redeploy was the missing piece ;)

pawellenart commented 2 years ago

Setting NEXTAUTH_URL in Vercel project settings doesn't work for me. I tried to set it to three different URLs (two custom domains and one Vercel-generated domain) each time redeploying it to fetch new variables but when trying to log in it loops me back to a login screen.

My code is here: https://github.com/pawellenart/spotify-2 My deployed Vercel app is here: https://spotify-2-pawellenart.vercel.app/

Currently, I set NEXTAUTH_URL=https://spotify-2-pawellenart.vercel.app.

balazsorban44 commented 2 years ago

Private repo. Try upgrading to npm i next-auth@latest

pawellenart commented 2 years ago

Private repo. Try upgrading to npm i next-auth@latest

@balazsorban44 Sorry, changed it to public. Tried your suggestion but I was already at the latest version and no luck.

"next-auth": "^4.0.6"

pawellenart commented 2 years ago

@balazsorban44 I did some more trial and error and adding secureCookie option for getToken worked both on custom and Vercel domains (plus also working in Netlify deployment). 🎉

Related change made: https://github.com/pawellenart/spotify-2/commit/7e0ef935d2275256f439ece935c0b61e3c9fc074

balazsorban44 commented 2 years ago

This has been fixed on the latest (as of writing 4.1.1) version of next-auth, please upgrade!

The new solution is more reliable, and you can completely remove NEXTAUTH_URL if you are on Vercel. It will detect the correct URL in both production and on preview URLs as well!

One requirement though is that you expose System Variables as described here: https://vercel.com/docs/concepts/projects/environment-variables#system-environment-variables

If you want the technical details, we detect the Vercel environment based on the presence of the VERCEL system variable and then use the x-forwarded-host header, which in the case of Vercel is safe to use, because their proxy overrides the correct header regardless of what the user sends.

To fix your deployments I recommend the following steps:

  1. remove NEXTAUTH_URL in the Vercel dashboard (from every environment)
  2. remove the __Secure-next-auth.callback-url cookie, if set incorrectly
  3. Make sure system variables are exposed (or optionally set VERCEL to any value manually)
  4. Re-deploy
frankiesardo commented 2 years ago

@balazsorban44 That's great, thanks for shipping this. Can we remove this warning https://next-auth.js.org/warnings#client in local development now? (or at least give a way to remove it without a .env file? It's confusing to have a env variable only for local development)

balazsorban44 commented 2 years ago

Unfortunately it's not possible to detect locally that you are going to deploy to Vercel in production. 😬

frankiesardo commented 2 years ago

Heh, yes, I agree. But maybe there's a flag that can be exposed somewhere to remove it?

balazsorban44 commented 2 years ago

I guess you could surpress it through the logger warning method https://next-auth.js.org/configuration/options#logger if it's a problem.

A1exSereb commented 1 year ago

Hi guys, can sombody help me with issue. In my case, it doesn’t matter if there is an NEXTAUTH_URL or not, anyway, when I login through Google, a loop starts from clicking on your account in list and redirecting to the Google login page and again click account. But if I set a variable NODE_TLS_REJECT_UNAUTHORIZED=0 everything works fine.

arooj-12 commented 10 months ago

hi, can someone please help. everything is working fine on localhost. but when after i successfully deploy on vercel i am not able to sigin or register. this is the error: You can’t sign in because this app sent an invalid request. You can try again later or contact the developer about this issue. You can't sign in to this app because it doesn't comply with Google's OAuth 2.0 policy.

If you're the app developer, register the redirect URI in the Google Cloud Console.