Tutorial: How to Implement Passkeys in Vue.js Apps
Tags: vue, web3, javascript, beginners
Published: 2024-05-14 17:52:00

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

```bash
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](https://app.corbado.com/signin) 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:

```javascript
// 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`:

```javascript
// 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:

```html
// 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](https://docs.corbado.com/overview/welcome).