nextjs logo
javascript logo

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

Published on April 4, 2023
Photo of Dan Arias
Dan AriasStaff Developer Advocate

This guide helps you learn how to deploy to Vercel a Next.js application secured with Auth0 by Okta. This guide assumes that you have secured your Next.js application using the Auth0 Next.js SDK, which provides developers with a high-level API to handle many authentication implementation details.

If you have not already secured your Next.js application with Auth0, please create a free Auth0 account and check out the "Auth0 Next.js" quickstart to learn how to add user authentication to Next.js before following this guide.

Get the Auth0 Domain, Client ID, and Client Secret

Start by logging in to your Auth0 account and open the Applications section of the Auth0 Dashboard. Then, select the Auth0 application registration associated with your Next.js application.

Click on the "Settings" tab and locate the "Basic Information" section. Under this section, you'll find the "Domain", "Client ID", and "Client Secret" values.

Auth0 application settings to enable user authentication

These variables let your Next.js application identify itself as an authorized party to interact with the Auth0 authentication server.

When you enter a value in the input fields present on this page, any code snippet that uses such value updates to reflect it. Using the input fields makes copying and pasting code as you follow along easy.

As such, enter the "Domain" and "Client ID" values in the following fields, as you will use them when configuring the environment variables for your project in Vercel in the next sections:

For security, these configuration values are stored in memory and only used locally. They are gone as soon as you refresh the page! As an extra precaution, you should use values from an Auth0 test application instead of a production one.

Don't close this page since you'll need to come back and configure the "Application URIs" section after importing your project on Vercel.

Import Your Next.js Project to Vercel

Start by logging in to the Vercel Dashboard to import your Next.js project.

Click the "Add New" drop-down and select the "Project" option. A Vercel page to import an existing Git repository loads up.

Select the project you want to import by clicking the "Import" button. During this step, Vercel will try to infer the framework preset of your repository and, based on it, set default build and output settings. A Vercel page for configuring your project page loads up. Modify the default configuration settings as needed.

Next, click the "Environment Variables" options within the "Configure Project" section to define environment variables related to Auth0. You need the Auth0 Domain, Auth0 Client ID and Auth0 Client Secret to connect your Next.js application once deployed to Vercel with the Auth0 Authentication Server.

Start by defining the Auth0 Domain by entering the following information in the environment variable field:

Name
AUTH0_ISSUER_BASE_URL
Value
https://AUTH0-DOMAIN

Click the "Add" button.

Next, define the Auth0 Client ID as follows:

Name
AUTH0_CLIENT_ID
Value
AUTH0-CLIENT-ID

Once again, click the "Add" button.

Now, define the Auth0 Client Secret as follows:

Name
AUTH0_CLIENT_SECRET

Set the value for the AUTH0_CLIENT_SECRET environment variable with the value from your Auth0 Application Registration and click the "Add" button..

This page does not store the value of the Auth0 Client Secret. Not even in memory. Think of it as your application's password, which must always be kept confidential. If anyone gains access to your Client Secret, they can impersonate your application and access protected resources. The Auth0 Client Secret protects your resources by only granting authentication-related credentials as tokens to requestors if authorized.

You'll also need a session secret to sign the session ID cookie of your web application. Use the following command to generate a random secret key:

COMMAND
node -e "console.log(crypto.randomBytes(32).toString('hex'))"

Copy the long-string output from the terminal and paste it into the following input box:

Now, define an environment variable for the Auth0 Session Secret Key as follows:

Name
AUTH0_SECRET
Value
KEY-VALUE

Click the "Add" button.

Additionally to those environment variables, you'll need to set the AUTH0_BASE_URL environment variable, the base URL of your application. You'll configure this value once Vercel has assigned a domain for your production deployment.

With these Auth0 environment variables in place, click the "Deploy" button to kickstart the Vercel deployment process for Next.js web applications.

Visit the Deploying Git Repositories with Vercel document for more information on how to deploy Git repositories with Vercel.

While your Next.js application runs on Vercel, it will redirect users to Auth0 whenever they trigger an authentication request. Auth0 will present your users with the Auth0 Universal Login page. Once your users log in, Auth0 will redirect them to your Next.js application. For that redirecting to happen securely, you must specify in your Auth0 Application Settings the URLs to which Auth0 can redirect users once it authenticates them. That is, you need to define the Vercel production deployment URL of your Next.js application as an "Auth0 Allowed Callback URL".

Use Your Vercel Production URL in Auth0

Let's start by getting your Vercel production deployment URL.

Select your project from the Vercel Dashboard.

Click on the "Settings" tab and then the "Domains" option on the sidebar. This section uses tags to show the domains that Vercel has assigned to your production and preview deployments.

Locate the domain with the "Production" tag. Copy and paste that domain value into the following field:

You can also assign custom domains to your Vercel deployments.

Head back to the "Settings" section of your Auth0 application registration in the Auth0 Dashboard and locate the "Application URIs" section. Fill in the following values:

Allowed Callback URLs
https://VERCEL-PRODUCTION-DOMAIN/api/auth/callback

The above value is the URL that Auth0 can use to redirect your users after they successfully log in.

Allowed Logout URLs
https://VERCEL-PRODUCTION-DOMAIN

The above value is the URL that Auth0 can use to redirect your users after they log out.

Scroll down and click the "Save Changes" button.

Assigning the AUTH0_BASE_URL Environment Variable

For production deployments, you should use the Vercel Production Domain to set the AUTH0_BASE_URL environment variable.

Select your project in the Vercel Dashboard. Click on the "Settings" tab and select the "Environment Variables" option.

Next, define the Auth0 Client ID as follows:

Name
AUTH0_BASE_URL
Value
https://VERCEL-PRODUCTION-DOMAIN

Click the "Save" button.

Vercel recommends redeploying your application when modifying the environment variables for the changes to take effect.

Head back to your project from the Vercel Dashboard, and click on the "Deployments" tab that lists all the previous builds.

Click on the three-dot menu icon, and click the "Redeploy" option.

This completes the configuration of your Next.js application to work with Auth0 while it is running on Vercel. Now, you can log in to your Next.js application using your Vercel production URL.

Use Your Deployed Next.js Application

Visit your Next.js application using your Vercel production URL. Assuming that you created authentication buttons, click the login button.

Next.js takes you to the Auth0 Universal Login page. You can use the form to log in with a username and password or a social identity provider like Google.

New Auth0 Universal Login Experience Form

Once you have signed in using the Universal Login page, Auth0 will redirect you to the Next.js application deployed on Vercel. The Auth0 Next.js SDK tracks the authentication state of your users through the user value. You can use this value to render UI elements conditionally based on the authentication state of your users.

Finally, click the logout button. This will clear the application session and redirects you to the Auth0 /v2/logout endpoint to clear the Auth0 session and redirect back to your application.

Next Steps

You have learned to deploy a Next.js application secured with Auth0 to Vercel. Auth0 is an extensible and flexible identity platform that can help you achieve even more. If you have a more complex use case, check out the Auth0 Architecture Scenarios to learn more about the typical architecture scenarios we have identified when working with customers on implementing Auth0.

Let us know in the comments below what you think of this tutorial or if you have any issues following this guide for deploying your Next.js application secured by Auth0 to Vercel.