In this article, you will learn how to build a simple Vue 3 application and add biometric authentication using Passage.
Users will log in to your application using the biometrics built into their devices (e.g. Face ID, Windows Hello, etc) or with magic links sent to their email. This app is built such that it only allows authenticated users to view a simple dashboard and blocks unauthenticated users. This guide will walk through creating a Vue 3 app using the Vue CLI, creating basic components, and adding authentication to the application using Passage.
If you are already familiar with Vue, you can go straight to our full example application on GitHub or skip to the "Add Authentication with Passage" section to learn how to integrate biometric authentication into an existing application.
To get started, first install the Vue CLI. The Vue CLI lets you get up and running quickly with pre-configured build settings.
Then create a new application using the Vue CLI. The tool will provide you with options to manually select versions and features you want. For this tutorial, use the "Manually select features" option and select the "Router" feature. Make sure to select Vue 3. You can just hit enter through the remaining features.
You can test your app by running the following command and then visiting http://localhost:8080.
You can leave this up and running throughout the tutorial to see your progress.
Our application will have two pages, a home page with a login screen and a dashboard page that is authenticated. First, create the directory structure and routes for those pages. Create the following directories and files to set up for the router and our two main components.
Now let's start filling out these files. Copy the following code into the router/index.js file to replace the default router.
Create a banner component that will be used on both the home and dashboard pages. Copy the following code to components/Banner.vue.
Replace the template and script tags in App.vue to use the router and add some simple styling.
and add the router and banner to main.js.
This means that once the components are created, the home page will be accessible at http://localhost:8080/ and the dashboard will be at http://localhost:8080/dashboard.
Add the following code to views/Home.vue to create the home page.
Add the following code to views/Dashboard.vue to create the simple dashboard page.
Now it is time to add authentication to our application using Passage! First, install Passage from the root directory of your example app.
Then import the package in the module where you intend to use the custom element, in this case the Home.vue view.
Importing this script will register the Passage custom element for use in your Vue components. For more information about custom elements refer to the online documentation.
Create an application in the Passage Console with the following settings:
Once you've created your application, copy your Application ID out the console and into a .env file in the root of your example repository.
In the Home component, import Passage and add the custom element to the template.
Your application now has a full login and register experience!
You might notice a warning in the console about the custom element. Vue works with custom elements out of the box, but by default it will log a warning to the console that it could not resolve the component for the custom element. To configure Vue with information that the <passage-auth> tag is a custom element and suppress this warning, you need to add this configuration to your vue.config.js file. Create this file at the top-level directory of your repository.
Once you’ve added this, you will need to restart the server for the changes to take effect.
Last but not least, the application needs to prevent unauthenticated users from accessing the dashboard page. You will set up protections that will show an error message to unauthenticated users trying to access the dashboard, but that does not prevent them from reading any data that might be on the dashboard, since it is all stored in the JavaScript files.
For simplicity, there is not a backend server in this example. A simple authentication check using the PassageUser class will be implemented to protect the dashboard page from unauthorized access.
💡 Please keep in mind that this dashboard protection will not protect sensitive API endpoints. Your server should always use one of the Passage backend libraries to authorize users before returning sensitive data.
This check is implemented by creating a composable to check the authentication status of the current user using Passage. Create a file called useAuthStatus.js in the composables directory.
Copy the following code into that file. This code uses Passage to check if the current user is authenticated.
Next, incorporate this check into the Dashboard component, since authentication is required before showing the dashboard. The dashboard will show two different messages based on the result of the authentication check. The final Dashboard.vue will look like this.
Unauthenticated users who try to visit /dashboard will be shown an "Unauthorized" message, while authorized users will see the dashboard that includes their Passage User ID.
Now you can try out the biometrics authentication in the application you just built! Your application should look something like this and you can see the login experience as your users would.
.png)
To recap, you have just:
Keep an eye out for part 2 of this post, where we show you how to use Passage to protect your backend API endpoints in a Vue.js + Express.js web application!
To learn more about Passage and biometric authentication for web applications, you can:
Passage is in beta and actively seeking feedback on the product. If you have feedback, bug reports, or feature requests, we would love to hear from you. You can email me at anna@passage.id or fill out this form.