vue logo
javascript logo

How to Deploy a Vue.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 Vue.js application secured with Auth0 by Okta. This guide assumes that you have secured your Vue.js application using the Auth0 Vue.js SDK, which provides developers with a high-level API to handle many authentication implementation details.

If you have not already secured your Vue.js application with Auth0, please create a free Auth0 account and follow the "Vue.js Authentication by Example" developer guide to learn how to add user authentication to Vue.js before following this guide.

General Guidelines for Vue.js Deploys on Vercel

You may be building your Vue.js application separately from your backend application. For example, your backend exposes an API that your Vue.js application consumes. In that scenario, your Vue.js app is essentially a static app. You can deploy the built content in the dist directory to any static file server, but you need to set the correct publicPath.

You can use Vercel to deploy your Vue.js application as a purely static app. However, deploying your Vue.js Single-Page Application (SPA) to Vercel won't work as expected if you are using the Vue.js Router in certain modes: HTML5 mode for Vue.js 3 applications and history mode for Vue.js v2 applications. Your users will get a 404 error from the static file server whenever they visit a route directly other than the / route, such as /profile.

You can fix that by configuring your production server to fall back to index.html, which is the entry point of your SPA, for any requests that do not match a static file. The Vue.js Router docs provide configuration instructions to set up your Vercel server.

Assuming that you are serving your app from the root folder, create a vercel.json file under the root directory of your Vue.js project and populate it with the following content:

"rewrites": [{ "source": "/:path*", "destination": "/index.html" }]

Get the Auth0 Domain and Client ID

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 Vue.js application.

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

Auth0 application settings to enable user authentication

These variables let your Vue.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 Vue.js Project to Vercel

Start by logging in to the Vercel Dashboard to import your Vue.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 and Auth0 Client ID to connect your Vue.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:


Click the "Add" button.

Next, define the Auth0 Client ID as follows:


Once again, click the "Add" button.

With these Auth0 environment variables in place, click the "Deploy" button to kickstart the Vercel deployment process for Vue.js Single-Page Applications (SPAs).

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

While your Vue.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 Vue.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 Vue.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

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

Allowed Logout URLs

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

Allowed Web Origins

Using the Auth0 Vue SDK, your Vue.js application will make requests under the hood to an Auth0 URL to handle authentication requests. As such, you need to add your Vue.js application origin URL to avoid Cross-Origin Resource Sharing (CORS) issues.

Scroll down and click the "Save Changes" button.

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

Use Your Deployed Vue.js Application

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

Vue.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 Vue.js application deployed on Vercel. The Auth0 Vue SDK tracks the authentication state of your users through the isAuthenticated 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 Vue.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 Vue.js application secured by Auth0 to Vercel.