How to set redirect_uri for preview deployments?

[jcheese1]

Please refer to the documentation, the example project and existing issues before creating a new issue.

Your question A clear and concise question.

Since vercel preview deployment url changes for every preview, how can we set oauth redirect uri for those? They also don't support wildcards. I'm trying to use google as an oauth provider

Documentation feedback Documentation refers to searching through online documentation, code comments and issue history. The example project refers to next-auth-example.

• [x] Found the documentation helpful
• [ ] Found documentation but was incomplete
• [ ] Could not find relevant documentation
• [ ] Found the example project helpful
• [ ] Did not find the example project helpful

[iaincollins]

Since vercel preview deployment url changes for every preview, how can we set oauth redirect uri for those? They also don't support wildcards. I'm trying to use google as an oauth provider

Most OAuth Providers do not support wildcards in callback URLs.

This is very awkward but not something we can do anything about.

Enabling an Email Provider or Credentials Provider on test instances can be helpful to work around this.

Note: If you enable the VERCEL_URL environment variable, NextAuth.js with pick that up if NEXTAUTH_URL is not set.

[jcheese1]

@iaincollins Thank you! will add an email provider

[arunoda]

@iaincollins yes. I think having this feature will be something useful. Here's my idea.

• We have a single server which handle oauth stuff. For next-auth, we can consider the main deployment URL as that.
• That's our NEXTAUTH_URL
• All the login stuff are going through the above URL
• When we got the callback URL, NEXTAUTH_URL will redirect in to another URL in the staging URL
• Then it'll add all the related cookies etc
• I think we need to find a way to enable some domains to prevent open redirects.

But this will be a killer feature, if we can do this inside next-auth. There will be potential issues with my approach, but if we can do this, this will be an valuable contribution to the community. And we can stand out from other auth libraries/solutions.

[jmfury]

Note: If you enable the VERCEL_URL environment variable, NextAuth.js with pick that up if NEXTAUTH_URL is not set.

@iaincollins Would love your take on the following.

Sort of related to this issue (or perhaps just what I consider to be a broader issue) is that it seems NEXTAUTH_URL cannot be set within next.config.js like other env variables, specifically in the absence of build-time setting (.env file, Vercel UI settings for env)

I consider the API route to be more a runtime concern, so I'm confused why VERCEL_URL and localhost:3000 are the first and second defaults, with no extra runtime check for a NEXTAUTH_URL set later in the race so to speak.

I could be totally missing the rationale here (maybe some quirks related to serverless on Vercel), so apologies in advance if I'm off on the above 😅

[jmfury]

Just saw this one - https://github.com/nextauthjs/next-auth/issues/497 - sorry if my comment above is a bit of a duplicate.

[stale[bot]]

Hi there! It looks like this issue hasn't had any activity for a while. It will be closed if no further activity occurs. If you think your issue is still relevant, feel free to comment on it to keep it open. (Read more at #912) Thanks!

[stale[bot]]

Hi there! It looks like this issue hasn't had any activity for a while. To keep things tidy, I am going to close this issue for now. If you think your issue is still relevant, just leave a comment and I will reopen it. (Read more at #912) Thanks!

[Standaa]

Since vercel preview deployment url changes for every preview, how can we set oauth redirect uri for those? They also don't support wildcards. I'm trying to use google as an oauth provider

Most OAuth Providers do not support wildcards in callback URLs.

This is very awkward but not something we can do anything about.

Enabling an Email Provider or Credentials Provider on test instances can be helpful to work around this.

Note: If you enable the VERCEL_URL environment variable, NextAuth.js with pick that up if NEXTAUTH_URL is not set.

I am looking into this problem as ideally I would like our staging environment to match production. Here are the different paths I explored: • Wildcards: Not supported. Some say it is proscribed int the oauth2 spec. Will likely never be supported for security reasons. • Programmatic API to set up callback urls: Not supported by Google & Github (did not check other providers) • Scraping: Could get away with a bot manually adding callback urls into GH and Google by reading vercel's deployments. • Auth proxy server: Seems quite cumbersome to set up. Lack the time to do that but it seems like the ideal solution. I would be ready to pay for it if NextAuth was to offer it. Would love to be able to input a single staging callback url in Google & Github oauth settings.

[bonesoul]

same issue here..

[eddyhdzg-solarx]

same issue here...

[andrevenancio]

Is this still the case in 2023? We have URL preview's but we can't access them because providers dont allow for wildcard URLs? kind of defeats the point of preview url's then.

[aakash14goplani]

If someone has found any working solution, please post it here for better good :)

[Hendrixer]

I discovered a solution that applies not only to NextAuth but also to OAuth and Vercel preview deployments in general. Here's a step-by-step guide:

1. Deploy an API Route to a Stable URL: First, create and deploy an API route to a fixed domain. This could be your production URL on Vercel, a dedicated subdomain, or even a different platform. The key requirement is that the URL remains constant. It doesn't necessarily have to be a subdomain; any stable URL will suffice.
2. Utilize the state Parameter in OAuth Flow: When constructing the URL for initiating the OAuth process, include a state search parameter. This parameter, which is designed to prevent attacks, has a size limit but is otherwise quite flexible. In your API function that generates this URL (which activates in your preview build upon clicking the sign-in button), encode the current preview URL into this state parameter. This can be done by using environment variables or retrieving it from the window object on the frontend, and then passing it to your handler.
3. Configure Callback URL in OAuth Provider Settings: Next, set the stable URL from step one as the callback URL in your OAuth provider’s settings.
4. Handle Redirection in API: After a user consents, the OAuth provider will redirect to the API handler set up in step one. In this handler, decode the state parameter to retrieve the original preview URL that initiated the request. You then redirect the user back to this URL, along with any parameters sent by the OAuth provider.

While this method is not specific to NextAuth, it's an effective workaround. I personally use Lucia Auth combined with custom solutions, as I find NextAuth overly complex, especially with its recent name change and outdated documentation for Next.js 13 and other issues