-
-
Notifications
You must be signed in to change notification settings - Fork 3.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to setup NEXTAUTH_URL for preview deployments? #497
Comments
Great question! There are multiple contributing reasons as to why this needs to be set - and why it is an environment variable in v3. API routes and Server Side Rendered functions (e.g. This allows API routes and Server Side Rendered Pages to be lightweight and not have to pull in all the database code and other logic, which stays in the authentication route. Of course, using JSON Web Tokens sessions and the In v2 the site name and base path were options on NextAuth.js configuration, and this was passed to API routes and Server Side Pages using a Secure server side only configuration cookie. This has some security challenges, even a secure, server only cookie and was problematic in practice. It is especially problematic in development mode or when rendering Server Side Pages. On first hit of a new deploy (a particular problem on local development instances) the server rendered page would not have had access to the cookie yet and so wouldn't know how to contact the server. Even requesting the page was enough for it to see and grab the value from the cookie for later reuse (as even Serverless functions are memory resident, e.g. for ~2 hours on AWS Lambda) but it was still an edge case there was no other obvious solution for. It's possible to grab the host name from the Another consideration is that the hostnames in callback URLs for most OAuth providers need to exactly match the specified domains with the OAuth provider. In the vast majority of cases you can't use a wildcard with an OAuth provider either; you have to explicitly configure each Full Qualified Domain Name (e.g. So, it's an environment variable, which has the added benefit of being available to all pages and routes in an application, so works great for other API routes and for Server Side Pages. The environment variable also lets you specify a custom base path on it too, so it takes care of that problem as well. In the case of Vercel, it actually reads in the instance name of The I've had a chat with the Vercel folks about this and how it would be really nice if a user could define a 'default domain' for a site and use that for However, even with that, there is still the issue for OAuth providers that they mostly (overwhelmingly) don't let you specify wildcard domains for valid callback URLs. For test instances on Vercel, one option to get round this is to enable an Email provider or a Credentials Provider with hard coded credentials, only on Pull Request environments (e.g. if |
@iaincollins Thank you for your detailed and quick reply. I've removed
I'm not getting any error related to my code. However, the logs are present in the screenshot above. Any idea if this could happen because of the environment variables? |
Hmm, I'm not sure what's causing this - this should work! Just to confirm the the second URL (after submitting an email address), e.g. https://nextjs-hasura-boilerplate-luzxmiugl.vercel.app, is the The URL in the address bar changes when you submit because the form always uses the canonical callback URL for a provider (including email) and is always taken from the server config to ensure it's "correct"; and in this case because there is no I had a go at signing in myself saw the same behaviour, the email works fine but for some reason it can't sign me in! That's really unusual. That's the sort of thing I would expect to see if there is a problem with the database, but the email provider uses a database so I don't know why this his happening. I assume you have upgraded to Can I ask what sort of database you are using so I can see if I can replicate the issue? PS: The example site uses |
I'm using Postgres on Heroku (free Hobby tier). |
@iaincollins I figured out the issue that was happening in my case. It was because I was signing my jwt with a secret. This thread/comment helped me with it. |
@iaincollins Also, I'm doing the following:
|
Thanks for the update! That makes sense and is good to know. We do the same thing for the private key on the Apple provider as how newlines get transformed in ENV VARs is pesky. Based on your experience, happy to take any recommendations about error handling (either on the console or in API responses) that would make debugging this easier. I know there are potential areas for improvement there. |
@iaincollins thanks for the thorough explanation. I think you should include this in the documentation:
Thanks! |
Best I can tell When I follow this:
I get
My goal is to be able to test Auth on the previews, but that doesn't appear feasible at the moment? |
@iaincollins Where should one set NEXTAUTH_URL if not deploying to vercel? I use serverless next.js component (i.e. deploying to AWS Lambda@Edge & Cloudfront). Is it enough to set NEXTAUTH_URL in env.local file? |
+1 for this issue. However, since Any idea on how to solve that? |
For anyone else looking for workarounds... If you need different
as Alternatively, you can set a global "root" site host (in Vercel Environment Variables):
and programmatically (in your
|
Thanks @lukeburns, that's really interesting and I'm sure helpful for folks! @breytex Sorry we don't have a better answer yet, but is on the radar.
Sorry this reply is late, but for anyone else coming to this, if using AWS Lambda, then in the Serverless config is fine (if using Serverless) or in the config page for the Lambda on AWS console (you should be able to set it once and have it persist). You can also set env vars manually via Vercel/Heroku/AWS dashboard. NB: AWS Lambda@Edge (as opposed to AWS Lambda) is a tricky platform to support. Folks have been using it successfully (and am happy to take PRs related to supporting it!) but it's not something we test against so you might bump into issues with it. Using NextAuth.js with CloudFront is fine. Running inside a CloudFront Workers is currently supported (as they are not Node.js), but running behind a CloudFront Worker (e.g. which checks a JWT set by NextAuth.js to do access control) is a great way to control access to content. |
I do this with my team by having them do preview deployments like this. |
For anyone trying to get nextauth working on vercel preview environments I got it working by following the secure cookie issue made by @cathykc above #1672 (comment) Basically just:
|
It would be really helpful if |
How does setting a different/dynamic Can somebody please post a full working example of Next Auth support in Vercel preview deployments? |
a summary on authentication in preview environments: |
Some questions regarding Netlify preview deployments: #3176 |
I am not clear if |
On most platforms, you should ALWAYS set |
Is next-auth reading that environment variable during build time or run time? We strive to have all our systems obey the 12-factor app rules (https://12factor.net/) and one of the big ones is being able to build once and run in multiple different configurations/environments. Is next-auth compatible with that approach? |
Was this fixed since that, or is this still using build time env vars? |
It reads variables at build time not run time. If you manually add the correct URL to |
not sure why this is closed but if there is a real solution about this issue should be better explained on the docs Then on deployment page https://next-auth.js.org/deployment seems is saying exactly the opposite. |
@balazsorban44 - I would like to give it a read but this link is broken, can you please share the updated one? Thanks! |
@balazsorban44 Any update on the link? |
@DeBraid - I am in similar situation now, were you able to solve this problem? |
@breytex - I am in similar situation now, were you able to solve this problem? |
@iaincollins Can you elaborate on this approach? How can we fake auth for a signed in user tied to a real record in the preview app DB? |
One idea: NextAuth can encode the initial URL (preview URL) in the OAuth state and do another redirect after auth is successful with the production instance (after coming back from the provider to the production instance) to do another redirect and set-cookie for the initial URL and get user back where they started. |
getServerSession returns null for some reason, I'm using Next pages with trpc, and calling |
For people from SvelteKit eco-system, I have written a blog on how we can achieve the same using fake identity server. Do give it a read! |
I'm using Next-Auth and this solved for me:
Code for lazy people: echo "http://localhost:3000" | vercel env add NEXTAUTH_URL development
vercel env pull
vercel build |
Vercel has the option to preview deployments of your pull requests before merging them. As a result, setting
NEXTAUTH_URL
would be tricky as the deployment url of a preview pull request might be different from the production url.Your question
Is it possible to set the value of
NEXTAUTH_URL
dynamically? Also, why is this environment variable necessary to be set?The text was updated successfully, but these errors were encountered: