This JavaScript code sample demonstrates how to implement authentication in a Vue 3 Single-Page Application that uses the Composition API. This code sample uses the Auth0 Vue SDK (Beta) to implement the following security tasks:
- Add user login and logout.
- Retrieve user profile information.
- Protect application routes.
- Make secure calls to an API.
If you are using the traditional Vue Options API, check out the Vue 3 Options API code sample.
Code Sample Specs
This code sample uses the following main tooling versions:
- Vue
v3.2.31 - Auth0 Vue SDK (Beta)
1.0.0-beta.1
The Vue 3 project dependency installations were tested with npm
v8.1.2. Running the Vue 3 application was tested using Node.jsv16.13.1.
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:
- 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:
Scroll down and click the "Save Changes" button.
Next, locate the "Basic Information" section.
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:
Set Up and Run the Vue 3 Composition API Project
Start by cloning the project into your local machine:
git clone https://github.com/auth0-developer-hub/spa_vue-3_javascript_hello-world_composition-api.git --branch basic-authentication
You are checking out the basic-authentication branch, which holds all the Vue 3 code related to implementing user login with Auth0.
Make the project directory your current working directory:
cd spa_vue-3_javascript_hello-world_composition-api
Next, install the Vue 3 project dependencies:
npm install
Create a .env file under the project directory and populate it as follows:
VITE_API_SERVER_URL=http://localhost:6060VITE_AUTH0_DOMAIN=AUTH0-DOMAINVITE_AUTH0_CLIENT_ID=AUTH0-CLIENT-IDVITE_AUTH0_AUDIENCE=https://hello-world.example.comVITE_AUTH0_CALLBACK_URL=http://localhost:4040/callback
Run the Vue 3 application by issuing the following command:
npm run dev
To access the application, you can now visit http://localhost:4040/ to access the application.
Next, click on the "Log In" button, Vue 3 takes you to the Auth0 Universal Login page.
When you use Auth0, you don't need to build any login or sign-up forms! Your users can log in to your application through a page hosted by Auth0, which provides a secure, standards-based login experience. You can customize the Auth0 login page with your branding and enable different authentication methods, such as logging in with a username/password combination or a social provider like Facebook or Google.
Once you log in, visit the "Profile" page, http://localhost:4040/profile, to see all the user profile information that Auth0 securely shares with your application using ID tokens. As this /profile route renders a component that displays private information, it is critical to restrict access to this route to only logged-in users, which you accomplish using Vue Router guards.
Let's see these navigation guards in action:
- Click on the Log out button to close your session.
- Then, visit the "Profile" page directly:
http://localhost:4040/profile. - Since the
/profileroute requires authentication for access, Vue 3 redirects you to the Auth0 Universal Login page to enter your credentials and log in to your application.
The /public, /protected, and /admin pages call an external API using access tokens. Before you can do that, you need to set up and configure an API with Auth0. It'll be quick!
Make Requests to an External API
Let's simulate an essential feature of client applications: requesting data from an API server.
You can pair this client application with an API server that matches the technology stack you use at work. This "Hello World" client application can communicate with any of our "Hello World" API server samples.
You can simulate a secure full-stack application system in no time. Each API server sample gives you clear instructions to quickly get it up and running.
Once set up, you can test the client-server connection using any of the following pages:
- The "Public" page,
http://localhost:4040/public, to see an Code sample of a page that does not require user login to access its information. - The "Protected" page,
http://localhost:4040/protected, or the "Admin" page,http://localhost:4040/admin, to see more examples of pages that require user login to access their information.
Pick an API code sample in your preferred backend framework and language:
