Building a Vue.js Passkey Login

Building a Vue.js Passkey Login

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.

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

1. Introduction

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:

Vue.js Passkey Login Page

2. Prerequisites

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.

3. Repository structure

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.

4. Set up the Vue.js project

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:

npm init vue@latest

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

cd passkeys-demo-vuejs

If you run

npm run dev

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

Vue.js Start Page

5. Set up the Corbado web component for passkey authentication

5.1 Set up your Corbado account and project

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

Corbado Developer Panel Sign-up

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.

Corbado Integration Guide

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”).

Add authorized origin

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 Redirect URL Relying Party ID
  • 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.

5.2 Embed the web component in the frontend

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:

npm i @corbado/webcomponent

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:

Vue.js Passkey Troubleshooting

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:

Vue.js Passkey Login Page

5.3 Set up the profile page

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.

5.4 Start using passkeys

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

npm run dev

You should see the following screen:

Vue.js Passkey Login Page

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

Vue.js Passkey Profile Page

6. Conclusion

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.

Enjoyed this read?

Stay up to date with the latest news, strategies and insights about passkeys sent straight to your inbox!