How to Deploy a Next.js App Secured By Auth0 to Vercel

Developer Hub
, ,
8

Hi @danieldeichfuss, thank you for your understanding!

To make it work with preview deployments, you should configure the Allowed Callback URLs and Allowed Logout URLs in your Auth0 application to use wildcards at the subdomain level (e.g., https://*.vercel.app).

You’ll need to add the following values to your Auth0 application registration:

  • Allowed Callback URLs: https://*.vercel.app/api/auth/callback
  • Allowed Logout URLs: https://*.vercel.app

Additionally, for preview deployments, to assign AUTH0_BASE_URL environment variable, you need to create a .env.production file at the root folder of your project and ensure this file is committed to your source code.

If you have an entry for the AUTH0_BASE_URL environment variable for the preview environment within Vercel settings, remove it since this will override the .env.production file.

Within the .env.production file, assign either the “Automatic Deployment URL” or the “Automatic Branch URL” to the AUTH0_BASE_URL environment variable:

Automatic Deployment URL:

Whenever a new deployment is created, Vercel will automatically generate a unique URL that follows this structure <project-name>-<unique-hash>-<scope-slug>.vercel.app. This URL is available through the VERCEL_URL environment variable:

#.env.production
AUTH0_BASE_URL=$VERCEL_URL

Automatic Branch URL:

You can also use the generated URL associated with a deployment connected to a Git branch. This URL follows this structure <project-name>-git-<branch-name>-<scope-slug>.vercel.app. You can construct this URL as follows:

#.env.production
AUTH0_BASE_URL=${VERCEL_GIT_REPO_SLUG}-git-${VERCEL_GIT_COMMIT_REF}-${VERCEL_GIT_REPO_OWNER}.vercel.app

Besides creating the .env.production file, you will also need to create the following env property under the next.config.js file:

// next.config.js
// ... existing code
const nextConfig = {
// ... existing code
// 👇 new code
  env: {
    AUTH0_BASE_URL: process.env.VERCEL_URL || process.env.AUTH0_BASE_URL,
  },
// 👆 new code
}

Make sure that the Automatically expose System Environment Variables option in your Vercel Dashboard is checked in “Settings” > “Environment Variables”.

Hope this helps! Don’t hesitate to reach out if you have any issues or further questions!

Thanks!

1 Like