Building a Vue.js Passkey Login

1. Introduction

2. Prerequisites

3. Repository structure

4. Set up the Vue.js project

5. Set up the Corbado web component for passkey authentication

      5.1 Set up your Corbado account and project

      5.2 Embed the web component in your frontend

      5.3 Set up the profile page

      5.4 Start using passkeys

6. Conclusion

‍

In this blog post, we’ll be walking through the process of building a sample application with passkey authentication using Vue.js. We’ll cover how to embed the Corbado web component and implement passkey login functionality for a seamless user experience.

If you want to see the finished code, please have a look at our sample application repository on GitHub.

The result looks as follows:

This tutorial assumes basic familiarity with Vue.js, HTML, CSS and JavaScript. Let’s dive in! Moreover, you need to have Node and NPM installed on your machine.

Moreover, we’re using the Composition API and Vue 3 in this example.

‍

Let’s first discuss the structure of our project (full GitHub repo):

The rest of the files of this project can be ignored for the purpose of this tutorial.

‍

In the following, we explain step-by-step what needs to be done to successfully set up the Vue.js project.

Let’s start out by initializing a new Vue.js project. In this tutorial, we’re using Vue.js version 15.2.9:

In the installation guide steps, we select the following:

• Ok to proceed: Yes
• Project name: passkeys-demo-vuejs
• Add TypeScript: No
• Add JSX Support: No
• Add Vue Router for SPA: Yes
• Add Pinia for state management: No
• Add Vitest for unit testing: No
• Add E2E testing solution: No
• Add ESLint for code quality: No

Then run

If you run

the sample skeleton application starts at http://localhost:5173:

Visit the Corbado developer panel to sign up and create your account (you'll see the passkey sign-up in action here!).

In the appearing project wizard, select “Integration guide”. Then, select “Web app” as type of app and afterward select “No existing users” as we’re building a new app from scratch. Moreover, providing some details regarding your frontend and backend tech stack as well as the main goal you want to achieve with Corbado helps us to customize and smooth your developer experience.

Then, jump over to the integration guide that helps to set up all required settings.

In step 1, we need to define a new authorized origin, which is http://localhost:5173 in the case of our Vue.js application (you can give it any name you want, e.g. “local”).

In this example, the creation of an API secret is optional. You would need it if you want to request protected user data from the Corbado backend or use Corbado’s session management for protecting your own resources.

Next, we set the Application URL, Redirect URL and Relying Party ID to the following values (see explanation below):

• Application URL: Provide the URL where you embedded the web component, here: http://localhost:5173
• Redirect URL: Provide the URL your app should redirect to after successful authentication and which gets sent a short-term session cookie, here: http://localhost:5173/profile
• Relying Party ID: Provide the domain (no protocol, no port and no path) where passkeys should be bound to, here: localhost

The last two steps in the integration guide (“Add Corbado session management and protect your routes” and “Start using passkeys”) will be covered below.

‍

Now, let’s jump back to the code we created from step 4.

Delete the entire /src/components folder to clean up the project and rename the /src/views/AboutView.vue file to /src/views/ProfileView.vue so it fits our logic better.

Open the /src/router/index.js file and change the /about route to /profile (change the name accordingly and don’t forget to import the component):

Clean up App.vue file, so that only routing information will be added:

Then, we need to install the web component:

Next, we create a .env file where we put in the Corbado project ID:

Then, we add the web component code to HomeView.vue. As HTML attribute “project-id”, we paste the project ID from the developer panel into the .env file and read it from there.

Optionally, you can modify the styling (via CSS classes) and text / behavior (via the developer panel or via HTML attributes).

If your Vue.js web app is still running in the browser (via npm run dev) and you open http://localhost:5173, a white screen with an input element might occur:

Having a look in the browser console provides more details: “Failed to resolve component: corbado-auth. If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.” So this is what we do and add some more information to vite.config.js:

You can check http://localhost:5173 again and you should see the corbado web component to sign up / login:

‍

After successful authentication, the Corbado web component redirects the user to the provided Redirect URL (https://localhost:5173/profile). This page renders basic user information (user ID and email) and provides a button to logout. Create a ProfileView.vue file and add the following code:

This page has content that should only be visible to authenticated users. Therefore, we use Corbado session management in the code above.

‍

If everything is set up and installed, run the application with

You should see the following screen:

After successful sign up / login, you see the profile page:

‍

This tutorial showed how easy it is to add passwordless authentication with passkeys to a Vue.js app using Corbado. Besides the passkey-first authentication, Corbado provides simple session management, that we used for a retrieval of basic user data. If you want to read more about how you can leverage Corbado’s session management to retrieve backend data, please check out our documentation here or if you want to add Corbado to your existing app with existing users, please see our documentation here.