Next.js: Preview URL available during deployement

[vhiairrassary]

Feature request

Is your feature request related to a problem? Please describe.

While using @auth0/nextjs-auth0 we need to configure a redirectUri value (as part of the OAuth2 flow). Currently it is fixed, which means the authenticated pages from pull requests (automatically deployed using Vercel for GitHub) cannot be tested.

Workaround

But as each pull request has one of its preview URLs matching the following this pattern https://<project>-git-<branch-name>.<project>.vercel.app, we were able to workaround this issue by adding in Auth0 the following redirect URI pattern https://*.<project>.vercel.app and using the following code to deduce the redirectUri in our Next.js project:

if (process.env.NOW_GITHUB_COMMIT_REF === 'master') {
    baseRedirectUri = getConfig().publicRuntimeConfig.APP_URL;
}
else {
    baseRedirectUri = `https://myproject-git-${process.env.NOW_GITHUB_COMMIT_REF.replace('/', '-')}.myproject.vercel.app`
}

We consider this workaround to be a bit wobbly as not officially supported & as we rely on NOW_GITHUB_COMMIT_REF which needs to be transformed to get the Preview URL.

Describe the solution you'd like

The Preview URL ending with .<project>.vercel.app is available as an environment variable (something like VERCEL_PREVIEW_URL) during the deployment.

[vhiairrassary]

Note: we can't use VERCEL_URL system environment variables as it follows <project>-<random-value>.vercel.app pattern. It would require us to allow *.vercel.app in Auth0, which is too open.

[sauhard98]

In case you want the url you can also access it using window.location.href also. (On client side).
This could be a possible way around.
(It won't be the best practice though)

[vhiairrassary]

@sauhard98 Unfortunately the configuratoin code is executed server side (https://github.com/auth0/nextjs-auth0#runtime-configuration) as it requires secrets.

[yegorkay]

@vhiairrassary this could be a potential workaround:

export const isProd = String(process.env.NODE_ENV) === 'production'
export const isDev = String(process.env.NODE_ENV) === 'development'

export const LOCAL_HOST = 'http://localhost:3000'

export const getProdPath = () => {
  const currentBranch = process.env.VERCEL_GITHUB_COMMIT_REF.toLowerCase()
    .replace('/', '-')
    .replace('_', '-')

  if (currentBranch === 'master') {
    return process.env.WEB_URI // we have a production URL env in the project we are working on
  }
  return `https://your-project${currentBranch}.vercel.app`
}

export const CONFIG_URL = isProd ? getProdPath() : LOCAL_HOST

https://vercel.com/docs/build-step#system-environment-variables

[vhiairrassary]

@yegorkay yep 👍 , it is similar to the one posted in the first comment

[cyrus-za]

The problem with that approach is that if anyone ever wants to visit the raw url from vercel dashboard e.g. project-rsd2gf6.vercel.app it won't work with auth0

[MariusRumpf]

Another problem for me seems to be that merges into the production branch are reported with a VERCEL_GITHUB_COMMIT_REF of the merged branch name and not the production branch name. This leads to a misconfigured build with auth0 errors after every production branch merge. To fix this a commit to the production branch has to be made.
A workaround for that is to add your own environment variable to vercel in production deployments and check for that too.