vue logo
javascript logo
spa
authentication

Vue.js/JavaScript App: Authentication Code Sample

spa
authentication
Dan Arias
By Dan Arias, R&D Engineering ManagerLast update on November 19, 2021

This code sample demonstrates how to implement authentication in a Vue.js Single-Page Application (SPA) using the Auth0 SPA SDK. This Vue.js code sample implements the following security tasks:

  • Add user login and logout.
  • Retrieve user profile information.
  • Protect application routes.
  • Make secure calls to an API.

Vue.js Code Sample Specs

This code sample uses the following tools:

  • Vue v2.6.11
  • Vue Router v3.5.1
  • Auth0 SPA SDK v1.18.0

The Vue.js project dependency installations were tested with npm v7.24.0. Running the Vue.js application was tested using Node.js v16.10.0.

Quick Auth0 Set Up

First and foremost, if you haven't already, sign up for an Auth0 account to connect your application with the Auth0 Identity Platform.

Next, you'll connect your Single-Page Application (SPA) with Auth0. You'll need to create an application registration in the Auth0 Dashboard and get two configuration values: the Auth0 Domain and the Auth0 Client ID. You'll also need to define an Auth0 Audience value within your project to practice making secure calls to an external API.

Get the Auth0 domain and client ID

  • Open the Applications section of the Auth0 Dashboard.

  • Click on the Create Application button and fill out the form with the following values:

Name
Hello World Client
Application Type
Single Page Web Applications
Single Page Web Applications
  • Click on the Create button.

Visit the "Register Applications" document for more details.

An Auth0 Application page loads up.

As such, click on the "Settings" tab of your Auth0 Application page, locate the "Application URIs" section, and fill in the following values:

Allowed Callback URLs
Allowed Logout URLs
Allowed Web Origins

Scroll down and click the "Save Changes" button.

Next, locate the "Basic Information" section.

Auth0 application settings to enable user authentication

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 it easy to copy and paste code as you follow along. For security, these 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.

As such, enter the "Domain" and "Client ID" values in the following fields to set up your single-page application in the next section:

Authenticate Vue.js Users

GoalThis section sets up and explores a Vue.js code sample that supports user authentication using the Auth0 SPA SDK.

Start by cloning the project into your local machine:

git clone https://github.com/auth0-developer-hub/spa_vue_javascript_hello-world.git

Check out the basic-authentication branch, which holds all the Vue.js code related to implementing basic user authentication with Auth0:

git checkout basic-authentication

Then, make the project directory your current working directory:

cd spa_vue_javascript_hello-world

Next, install the Vue.js project dependencies:

npm install

This Vue.js project offers a functional application that consumes data from an external API to hydrate the user interface. For simplicity and convenience, the Vue.js project on the basic-authentication branch simulates the external API locally using json-server. In the next section, you'll integrate this Vue.js application with a real API server using a backend technology of your choice.

The compatible API server runs on http://localhost:6060 by default. As such, to connect your Vue.js application with that API server and with the Auth0 Authentication API, create a .env file under the root project directory and populate it with the following environment variables:

.env
VUE_APP_AUTH0_DOMAIN=AUTH0-DOMAIN
VUE_APP_AUTH0_CLIENT_ID=AUTH0-CLIENT-ID
VUE_APP_AUTH0_CALLBACK_URL=http://localhost:4040/callback
VUE_APP_API_SERVER_URL=http://localhost:6060

Next, execute the following command to run the JSON server API:

npm run api

Finally, open another terminal tab and execute this command to run your Vue.js application:

npm run serve

You can now visit http://localhost:4040/ to access the application.

This basic-authentication branch of the code sample repository lets you see the following features in action:

There's something missing in this Vue.js code sample. There's no login or sign-up forms!

When you click on the "Log In" button, Vue.js takes you to the Auth0 Universal Login page. Your users can log in to your application through a page hosted by Auth0, which provides them with a secure, standards-based login experience that you can customize with your own branding and various authentication methods, such as logging in with username and password or with a social provider like Facebook or Google.

Once you log in, visit the protected "Profile" page to see all the user profile information that Auth0 securely shares with your application using ID tokens:

You can test that the protected Vue.js routes require users to log in before accessing them. Click on the "Log Out" button and try to access the Profile page, Protected page, or the Admin page:

If everything is working as expected, Vue.js redirects you to log in with Auth0.

Make Authenticated Calls to an API From Vue.js

GoalThis section sets up and explores a Vue.js code sample that integrates with an API server to request data using an access token.

Before you can practice requesting protected resources from an external API server using access tokens, you need to set up and configure an API with Auth0.

You can simulate a secure full-stack application system in no time with the Auth0 Developer Hub code samples. You can pair this Vue.js client application with an API server that matches the technology stack that you use at work. This "Hello World" client application can communicate with any of our "Hello World" API server samples.

Set up a Hello World API server

Pick an API code sample in your preferred backend framework and language from the list below and follow the instructions on the code sample page to set it up. Once you complete the sample API server set up, please return to this Vue.js code sample page to learn how to integrate that API server with your Vue.js application.

actix-web
rust
api
authorization
api
authorization
Actix Web/Rust API: Authorization Code Sample
Code sample of a simple Actix Web server that implements token-based authorization using Auth0.
django
python
api
authorization
api
authorization
Django/Python API: Authorization Code Sample
Code sample of a simple Django server that implements token-based authorization using Auth0.
dot-net
csharp
api
authorization
api
authorization
.NET/C# Web API: Authorization Code Sample
Code sample of a simple .NET server that implements token-based authorization using Auth0.
express
javascript
api
authorization
api
authorization
Express.js/JavaScript API: Authorization Code Sample
Code sample of a simple Express.js server built with JavaScript that implements token-based authorization using Auth0.
express
typescript
api
authorization
api
authorization
Express.js/TypeScript API: Authorization Code Sample
Code sample of a simple Express.js server built with TypeScript that implements token-based authorization using Auth0.
flask
python
api
authorization
api
authorization
Flask/Python API: Authorization Code Sample
Code sample of a simple Flask server that implements token-based authorization using Auth0.
laravel
php
api
authorization
api
authorization
Laravel/PHP API: Authorization Code Sample
Code sample of a simple Laravel server that implements token-based authorization using Auth0.
lumen
php
api
authorization
api
authorization
Lumen/PHP API: Authorization Code Sample
Code sample of a simple Lumen server that implements token-based authorization using Auth0.
phoenix
elixir
api
authorization
api
authorization
Phoenix/Elixir API: Authorization Code Sample
Code sample of a simple Phoenix server that implements token-based authorization using Auth0.
rails
ruby
api
authorization
api
authorization
Ruby on Rails API: Authorization Code Sample
Code sample of a simple Rails server that implements authorization using Auth0.
spring-boot
java
api
authorization
api
authorization
Spring Boot/Java API: Authorization Code Sample
Code sample of a simple Spring Boot server that implements token-based authorization using Auth0.
spring-functional
java
api
authorization
api
authorization
Functional Spring/Java API: Authorization Code Sample
Code sample of a simple Spring API server that follows a functional approach. It implements token-based authorization using Auth0.
standard-library
golang
api
authorization
api
authorization
Golang Web API: Authorization Code Sample
Code sample of a simple Golang server that implements token-based authorization using Auth0.

While setting up the API server code sample, you created an Auth0 Audience value. Store that value in the following field so that you can use it throughout the instructions present in this section easily:

Set up the Vue.js client application

If you haven't cloned the repository already, start by cloning the Vue.js project into your local machine:

git clone https://github.com/auth0-developer-hub/spa_vue_javascript_hello-world.git

Check out the basic-authentication-with-api-integration branch:

git checkout basic-authentication-with-api-integration

Then, make the project directory your current working directory:

cd spa_vue_javascript_hello-world

Next, install the Vue.js project dependencies:

npm install

Now, either create or update the .env file under the Vue.js project directory with the following:

.env
VUE_APP_AUTH0_DOMAIN=AUTH0-DOMAIN
VUE_APP_AUTH0_CLIENT_ID=AUTH0-CLIENT-ID
VUE_APP_AUTH0_CALLBACK_URL=http://localhost:4040/callback
VUE_APP_API_SERVER_URL=http://localhost:6060
VUE_APP_AUTH0_AUDIENCE=AUTH0-AUDIENCE

Re-run your application for Vue.js to recognize the .env changes:

npm run serve

You are using VUE_APP_AUTH0_AUDIENCE to add the value of your Auth0 API Audience so that your Vue.js client application can request resources from the API that such audience value represents.

Now your Vue.js is all set up to request protected data from the "Hello World" API server of your choice. Ensure that your API server is running and visit the Protected page or the Admin page of your Vue.js application:

Verify that these pages are displaying the relevant messages from the API. Each API response includes a metadata property that gives the following information:

  • api: The framework and programming language that the API server uses.
  • branch: The active branch of the API server project.

The response also includes a text property with the corresponding message data for the page.

This basic-authentication-with-api-integration branch of the code sample repository lets you see the following features in action:

Handle Vue.js Complex Use Cases

These Vue.js code samples covered the most common authentication use case for a Vue.js application:

  • Allow users to log in, sign up, and log out.
  • Display user profile information.
  • Require authentication to access Vue.js routes.
  • Make authenticated calls to an API from Vue.js.

However, 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 diverse architecture scenarios we have identified when working with customers on implementing Auth0.