Building a Nuxt.js Passkey Login

‍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

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:

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.

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.

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:

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

If you now run

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

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.

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

• 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".

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

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:

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.

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

You should see the following screen:

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

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.