Tutorial: How to Implement Passkeys in Vue.js Apps

1. Introduction: Vue.js Passkeys

In this guide, we will walk through the process of integrating passkey authentication into a Vue.js application. This tutorial leverages Corbado’s web-js UI components to create a seamless and secure login experience. If you prefer to see the final product, you can check out our sample application on GitHub.

2. Prerequisites for Adding Passkeys to Vue.js

To follow along with this tutorial, you should be familiar with Vue.js, HTML, CSS, and JavaScript. Ensure that Node.js and NPM are installed on your machine. This example uses the Composition API and Vue 3.

3. Repository Structure

Here is a brief overview of the project structure you’ll be working with:

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

4. Setting Up the Vue.js Project

Start by initializing a new Vue.js project: npm init vue@latest

Choose the following options during setup:

• 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: No Navigate to your project directory and install the Corbado web-js dependency:

cd passkeys-demo-vuejs
npm i @corbado/web-js

5. Setting Up Corbado UI Components for Passkey Authentication

5.1 Create a Corbado Account and Project

Sign up on the Corbado developer panel and create a new project. Select “Corbado Complete” and specify your technology stack. Choose “Web app” and Vue as your framework. Define your application URL and Relying Party ID (e.g., http://localhost:5173 and localhost respectively). Store your Project ID in your environment file:

VITE_CORBADO_PROJECT_ID=<your-project-id>

5.2 Embed the UI Component in Your Frontend

Delete the /src/components folder and rename /src/views/AboutView.vue to /src/views/ProfileView.vue. Update the router configuration:

// 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;

Initialize the Corbado project in App.vue:

// 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>

5.3 Set Up the Profile Page

Create ProfileView.vue to display user information and provide a logout button:

// 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>
    <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>

5.4 Start Using Passkeys in Vue.js Apps

Run the application with:

npm run dev

You should see the login screen, and upon successful authentication, you will be redirected to the profile page.

6. Conclusion: Vue.js Passkeys

This tutorial demonstrates how to integrate passkey authentication in a Vue.js application using Corbado. By following these steps, you can provide a secure and user-friendly login experience. For more information on session management and other features, check out Corbado’s documentation.