Building a Nuxt.js Passkey Login
Implementation

Building a Nuxt.js Passkey Login

In this blog post, we’ll be walking through the process of building a sample application with passkey authentication using Nuxt.js. We’ll cover the setup of the Corbado web component as well as the implementation of passkey login functionality for a seamless user experience.

1. Introduction

2. Prerequisites

3. Repository structure

4. Set up the Nuxt.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 Nuxt.js. We’ll cover the setup of the Corbado web component as well as the implementation of 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:

Nuxt.js Passkey Login Page

2. Prerequisites

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

3. Repository structure

Let’s first discuss the structure of our project:

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

4. Set up the Nuxt.js project

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

Let’s start out by initializing a new Nuxt.js project:

npx nuxi@latest init passkeys-demo-nuxtjs

Select npm as package manager and press enter. After initialization, execute the following commands to set up your project:

cd passkeys-demo-nuxtjs
npm install

If you now run

npm run dev

the sample skeleton application starts at http://localhost:3000.

Nuxt.js Skeleton

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 passkey sign-up in action here!). In the appearing project wizard, select “Web app” as type of app.

Developer Panel Integration Guide

Afterwards, select “No existing users” as we’re building a new app from scratch.

Developer Panel Integration Guide

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 smoothen your developer experience.

Once the project is created, navigate to Settings > General > URLs. Set the Application URL, Redirect URL and Relying Party ID to the following values (see explanation below):

Developer Panel URL Settings
  • Application URL: Provide the URL where you embedded the web component, here: http://localhost:3000
  • 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:3000/profile
  • Relying Party ID: Provide the domain (no protocol, no port and no path) where passkeys should be bound to, here: localhost

Also, authorize your origin in the developer panel. For this example to work, you should set http://localhost:3000 as authorized origin and can give it any name you like, e.g. "localhost".

5.2. Embed the web component in the frontend

Now, let’s jump back to the code we created in step 4. First, disable server-side-rendering (SSR), otherwise the Corbado web component won’t work.

Integrate the vue router in the app.vue file :

Install the Corbado web component with

npm i @corbado/webcomponent

Also create a .env file where the Corbado project ID will be put in:

Finally, add the login page under pages/index.vue. Here, we use the Corbado project ID from the .env file.

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

You can check http://localhost:3000 again, and you should see the working Corbado web component:

Nuxt.js Passkeys 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:3000/profile). This page renders basic user information (user ID and email) and provides a button to logout. Create the file pages/profile.vue 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:

Nuxt.js Passkeys Login Page

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

Nuxt.js Passkeys Profile Page

6. Conclusion

This tutorial showed how easy it is to add passwordless authentication with passkeys to a Nuxt.js app using Corbado. Besides the passkey-first authentication, Corbado provides simple session management, that we used for the 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 checkout 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!