Netlify Preview Deployment NEXTAUTH_URL Support

[jonioni]

Currently we are deploying our Next.js + NextAuth project on Netlify using its official next.js plugin.

Netlify works mostly the same as Vercel where there is is preview deployment for each branch whose URL isn't certain, which causes trouble for the NEXTAUTH_URL setup.

The Vercel preview deployment issue is fixed in next-auth by the VERCEL_URL default. But there is no support for Netlify's preview url so far.

I understand that this is a faq of this project (#497, #969, #1156, #2376, etc.) and we have tried various methods & configurations. Yet Netlify doesn't really support context specific runtime environment variable for functions and its official guiding principle on environment variable setup [Support Guide] Using environment variables on Netlify correctly (also see Netlify Functions and Env Variables from netlify.toml) implies that dynamic runtime environment variable should be explicitly exported to somewhere and imported as variable into the function code, which isn't quite compatible with next-auth's guiding principle that NEXTAUTH_URL should be provided as environment variable. Thus for the various methods we've tried, it'd always result in:

https://next-auth.js.org/warnings#nextauth_url NEXTAUTH_URL environment variable not set

There should be a sufficient amount of users who are also deploying their next.js + next-auth project on Netlify. Curious how can NEXTAUTH_URL be properly configured to the dynamic netlify preview deployment url. So far it seems that we have to switch to another authentication method/provider that doesn't require NEXTAUTH_URL just for the deploy previews (https://github.com/nextauthjs/docs/issues/19).

---

Also a side question: Why NEXTAUTH_URL via next.config.js's env setting wouldn't work?

Update: Set dynamic NEXTAUTH_URL through next.config.js.

[balazsorban44]

there is an ongoing effort to decouple the core of nextauth in a way that would let you create your own wrapper like this file that won't rely on that variable

https://github.com/nextauthjs/next-auth/blob/beta/src/next/index.ts

See #2294

it's basically done, just not documented yet...

Not sure about your side question. haven't tested it, but I would assume it would just work. the next config env variables are inlined build time AFAIK, but nothing else is different.

https://nextjs.org/docs/api-reference/next.config.js/environment-variables

Next.js will replace process.env.customKey with 'my-value' at build time

[jonioni]

Thanks for the quick response. It seems promising.

Regarding next.config.js it corresponds to @iaincollins's response here: https://www.reddit.com/r/nextjs/comments/lw07sd/comment/gq4gu45/?utm_source=share&utm_medium=web2x&context=3

[balazsorban44]

I believe that's an outdated response. I actually wanted to discuss something with him that is touching on this very topic, and using next config env variable would actually solve an issue, rather than creating one

#1713 (comment)

[jonioni]

Oh that is great 👍 . Supporting Using next.config.js env would resolve quite a lot of such dynamic NEXTAUTH_URL requests.

[balazsorban44]

it's not about us "supporting" it. that's a Next.js feature.

next-auth has never done anything special to the next config, so I'm not sure why was it even assumed it wouldn't work.

[jonioni]

On close inspection next.config.js's env actually works. It seems there is another Netlify issue that's causing authentication malfunction but it's out of the topic. So all in all next.config.js works well and I've updated the issue description above. Thanks.