Add Login to Your Vue Application

Auth0 allows you to add authentication to almost any application type. This guide demonstrates how to integrate Auth0, add authentication, and display user profile information in any Vue application using the Auth0 Vue SDK.

To use this quickstart, you will need:

  • A free Auth0 account or log in to Auth0.
  • A working Vue project that you want to integrate with OR you can download a sample application after logging in.
1

Configure Auth0

To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the project you are developing.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in.

Configure Logout URLs

A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error.

Configure Allowed Web Origins

An Allowed Web Origin is a URL that you want to be allowed to access to your authentication flow. This must contain the URL of your project. If not properly set, your project will be unable to silently refresh authentication tokens, so your users will be logged out the next time they visit your application or refresh a page.

2

Install the Auth0 Vue SDK

Auth0 provides a Vue SDK to simplify the process of implementing Auth0 authentication and authorization in Vue 3 apps.

Install the Auth0 Vue SDK by running the following commands in your terminal:

cd <your-project-directory>
npm install @auth0/auth0-vue

Was this helpful?

/

Register the plugin

For the SDK to function, you must register the plugin with your Vue application using the following properties:

  • domain: The domain of your Auth0 tenant. This value is in the Auth0 Dashboard under your Application's Settings in the Domain field. If you are using a custom domain, set this to the value of your custom domain instead.
  • clientId: The ID of the Auth0 Application you set up earlier in this quickstart. Find this in the Auth0 Dashboard under your Application's Settings in the Client ID field.
  • authorizationParams.redirect_uri: The URL in your application that you would like Auth0 to redirect users to after they have authenticated. This corresponds to the callback URL you set up earlier in this quickstart. This value is in the Auth0 Dashboard under your Application's Settings in the Callback URLs field. Make sure what you enter in your code matches what you set up earlier or your users will see an error.

The plugin will register the SDK using both provide and app.config.globalProperties. This enables both the Composition API and Options API.

Checkpoint

The plugin is now configured. Run your application to verify that:

  • the SDK is initializing correctly
  • your application is not throwing any errors related to Auth0
3

Add login to your application

Next, you will set up login for your project. You will use the SDK’s loginWithRedirect function exposed on the return value of useAuth0, which you can access in your component's setup function. It will redirect users to the Auth0 Universal Login page. and, after a user authenticates, redirect then back to the callback URL you set up earlier in this quickstart.

Using the Options API

If you are using the Options API, you can use the same loginWithRedirect method from the global $auth0 property through the this accessor.

Checkpoint

You should now be able to log in using Auth0 Universal Login.

Click the login button and verify that:

  • your Vue application redirects you to the Auth0 Universal Login page
  • you can log in or sign up
  • Auth0 redirects you to your application using the value of the authorizationParams.redirect_uri you used to configure the plugin.
4

Add logout to your application

Users who log in to your project will also need a way to log out. When users log out, your application will redirect them to your Auth0 logout endpoint, which will then redirect them to the specified logoutParams.returnTo parameter.

Use the logout function exposed on the return value of useAuth0, which you can access in your component's setup function, to log the user out of your application.

Using the Options API

With the Options API, you can use the same logout method from the global $auth0 property through the this accessor.

Checkpoint

Run your application and click the logout button, verify that:

  • your Vue application redirects you to the logoutParams.returnTo address
  • you are no longer logged in to your application
5

Show user profile information

Next, you will configure how to retrieve the profile information associated with authenticated users. For example, you may want to be able to display a logged-in user’s name or profile picture in your project. Once the user authenticates, the SDK extracts the user's profile information and stores it in memory. The application can access the user profile with the reactive user property. To access this property, review your component's setup function and find the userAuth0 return value.

The user property contains sensitive information related to the user's identity. It is only available based on the user's authentication status. To prevent render errors, you should always:

  • use the isAuthenticated property to determine whether Auth0 has authenticated the user before Vue renders any component that consumes the user property.

  • ensure that the SDK has finished loading by checking that isLoading is false before accessing the isAuthenticated property.

Using the Options API

For the Options API, use the same reactive user, isLoading, and isAuthenticated properties from the global $auth0 property through the this accessor.

Checkpoint

Verify that:

  • you can display the user or any of the user properties within a component correctly after you have logged in

Next Steps

Excellent work! If you made it this far, you should now have login, logout, and user profile information running in your application.

This concludes our quickstart tutorial, but there is so much more to explore. To learn more about what you can do with Auth0, check out:

  • Auth0 Dashboard - Learn how to configure and manage your Auth0 tenant and applications
  • auth0-vue SDK - Explore the SDK used in this tutorial more fully
  • Auth0 Marketplace - Discover integrations you can enable to extend Auth0’s functionality

Did it work?

Any suggestion or typo?

Edit on GitHub
Sign Up

Sign up for an or to your existing account to integrate directly with your own tenant.