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.
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.
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:
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:
AUTH0_ISSUER_BASE_URL
https://AUTH0-DOMAIN
Click the "Add" button.
Next, define the Auth0 Client ID as follows:
AUTH0_CLIENT_ID
AUTH0-CLIENT-ID
Once again, click the "Add" button.
Now, define the Auth0 Client Secret as follows:
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..
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:
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:
AUTH0_SECRET
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.
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:
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:
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.
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:
AUTH0_BASE_URL
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.
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.
