Preview URL available during deployement

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.

[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

[lukeburns]

If your deployment is on a particular branch and is served from a custom domain, then you can use next-branch-env to define a deployment URL for each branch.

For example, if you have a production branch main and preview branches staging and dev served on myapp.com, staging.myapp.com, and dev.myapp.com respectively, then the environment variables (defined in Vercel Project Settings)

NEXT_PUBLIC_DEPLOYMENT_URL=https://myapp.com # production
STAGING_NEXT_PUBLIC_DEPLOYMENT_URL=https://staging.myapp.com # preview
DEV_NEXT_PUBLIC_DEPLOYMENT_URL=https://dev.myapp.com # preview

will be exposed as NEXT_PUBLIC_DEPLOYMENT_URL on their respective branch deployments, which you can then use to configure redirect uris.