Vue.js Passkeys: How to Implement Passkeys in Vue.js Apps

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-js UI components 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 Vue.js passkey application repository on GitHub.

The result looks as follows:

Corbado Auth Component

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.

We're using the Composition API and Vue 3 in this example.

Let's first discuss the structure of our project (full Vue.js passkeys GitHub repo):

.
├── .env
├── package.json
├── vite.config.js
└── src
    ├── router
    |   └── login.component.ts
    ├── views
    |   ├── HomeView.vue
    |   └── ProfileView.vue
    ├── App.vue
    └── main.js

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

Become part of our Passkeys Community for updates & support.

Join

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, were using Vue.js version 3.3.4:

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 an End-to-End Testing Solution?: No
• Add ESLint for code quality: No
• Add Vue DevTools 7 extension for debugging? (experimental): No

Then run

cd passkeys-demo-vuejs

Let's also install the Corbado web-js dependency:

npm i @corbado/web-js

If you run

npm run dev

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 project setup wizard, begin by selecting an appropriate name for your project. For the product selection, opt for "Corbado Complete". Subsequently, specify your technology stack and select "DEV" along with "Corbado session management" options. Afterwards, you'll get more foundational setup guidance.

Next, choose "Web app" as an application type and Vue.js as your framework. In the application settings, define your Application URL and Relying Party ID as follows:

• Application URL: Provide the URL where you embedded the UI component, here: http://localhost:5173.
• Relying Party ID: Provide the domain (no protocol, no port and no path) where passkeys should be bound to, here: localhost

Lastly, retrieve your project ID from the developer panel and store it in your environment file. You can find it here under Corbado API access.

Your environment file should look like this:

VITE_CORBADO_PROJECT_ID=<your-project-id>

You'll need it later to embed the Corbado UI component in your Vue.js app.

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):

// src/router/index.js
 
import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";
import ProfileView from "@/views/ProfileView.vue";
 
const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        {
            path: "/",
            name: "home",
            component: HomeView,
        },
        {
            path: "/profile",
            name: "profile",
            component: ProfileView,
        },
    ],
});
 
export default router;

In the App.vue file, import the global Corbado object and use it to initialize the Corbado project. We need to hand it our project ID from the .env file and set the dark mode to "on". After the initialization, we set isInitialized to true to show our page:

<!-- src/App.vue -->
 
<script setup>
import { RouterView } from "vue-router";
import Corbado from "@corbado/web-js";
import { ref } from "vue";
 
const isInitialized = ref(false);
 
Corbado.load({
    projectId: import.meta.env.VITE_CORBADO_PROJECT_ID,
    darkMode: "on",
}).then(() => {
    isInitialized.value = true;
});
</script>
 
<template>
    <div v-if="isInitialized">
        <RouterView />
    </div>
</template>

Then, we use the global Corbado object to mount the authentication UI in the HomeView.vue file. We'll make it redirect the user to the /profile page once he authenticates or if he's already signed in.

<!-- src/views/HomeView.vue -->
 
<script setup>
import { onMounted, ref } from "vue";
import Corbado from "@corbado/web-js";
import { useRouter } from "vue-router";
 
const router = useRouter();
const authElement = ref(null);
 
onMounted(() => {
    if (Corbado.isAuthenticated) {
        router.push("/profile");
    }
    Corbado.mountAuthUI(authElement.value, {
        onLoggedIn: () => {
            router.push("/profile");
        },
        isDevMode: true,
    });
});
</script>
 
<template>
    <div ref="authElement"></div>
</template>

After successful authentication, the Corbado auth component redirects the user to the profile page. This page renders basic user information (user ID and name) and provides a button to logout. It makes use of the Corbado object to retrieve the user data and logs him out if needed.

Create a ProfileView.vue file and add the following code:

<!-- src/views/ProfileView.vue -->
<script setup>
    import { useRouter } from "vue-router";
    import Corbado from "@corbado/web-js";
    import { ref, onMounted } from "vue";
 
    const user = ref(null);
    const router = useRouter();
 
    function redirectToHome() {
        router.push("/");
    }
 
    async function handleLogout() {
        user.value = null;
        await Corbado.logout();
        redirectToHome();
    }
 
    onMounted(() => {
        user.value = Corbado.user;
    });
</script>
 
<template>
    <div>
        <div v-if="user">
            <h1>Profile Page</h1>
            <p>
                User-ID: {{ user.sub }}
                <br />
                Name: {{ user.name }}
            </p>
            <button @click="handleLogout">Logout</button>
        </div>
 
        <!-- Show the "not logged in" message if the user is not logged in -->
        <div v-else>
            <p>You're not logged in.</p>
            <p>Please go back to <a @click="redirectToHome">home</a> to log in.</p>
        </div>
    </div>
</template>

If the user isn't logged in, we also provide him with the option to go back to the home page and log in.

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

npm run dev

You should see the following screen:

Corbado Auth Component

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

Add passkeys to your Vue.js app.

Start For Free

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 our documentation hereor if you want to add Corbado to your existing app with existing users, please see our documentation here.