Building a Passkey Login page with JavaScript

‍1. Introduction

2. Javascript passkey project prerequisites

3. Repository structure for JavaScript passkey project

4. Set up your Corbado account and project

5. Create plain HTML/Javascript app

      5.1. Create passkey login page

      5.2. Make use of the corbado-auth-provider HTML element

      5.3. Embed the passkey authentication webcomponent

      5.4. Add profile page

6. Start using passkeys with our JavaScript implementation

7. Conclusion

In this blog post, we’ll be walking through the process of building a sample application with passkey authentication using plain old JavaScript. 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.

The result looks as follows:

This tutorial assumes basic familiarity with HTML and JavaScript. Let’s dive in! Moreover, you need to have Node and NPM installed on your machine. (We will use a npm package as webserver which you need to run the project)

This repository contains only two HTML files: The login page as well as the profile page which is only accessible once you are logged in.

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 and afterward 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 smooth your developer experience.

Next, we navigate to Settings > General > URLs and set the Application URL, Redirect URL and Relying Party ID to the following values (We will use a simple http server to host our HTML files on port 8080):

• ApplicationURL: Provide the URL where you embedded the web component, http://localhost:8080
• RedirectURL: Provide the URL your app should redirect to after successfulauthentication and which gets sent a short-term session cookie, here: http://localhost:8080/profile
• RelyingParty ID: Provide the domain (no protocol, no port and no path) where passkeysshould be bound to, here: localhost

Create a folder for your project and place an index.html file in it. Inside that file, paste the following HTML frame. This includes a script from Corbado which we need in the next steps. Don’t forget to paste your Corbado project ID.

We add the corbado-auth-provider HTML element to our login.html file to make displaying content depending on the login status of the user easier. Your login.html file should look like this afterwards:

Inside the corbado-auth-provider element we can place “authed” and “unauthed” divs as seen above. The content of the “authed”-slot is then displayed if the user is authenticated while the content of the “unauthed”-slot is shown if no one is logged in.

In the “unauthed”-slot we now place the Corbado webcomponent (<corbado-auth/>) which will handle all means (e.g. fallbacks, user detection, passkey management) of authentication:

After successful authentication, the Corbado web component redirects the user to the provided Redirect URL (https://localhost:8080/profile). This page gives information about the login status and provides a button to log out. Create a profile.html file and add the following code. Like our login page, it uses the corbado-auth-provider HTML element to show different content dependent on the authentication status of the user.

The corbado-auth-provider HTML element uses Corbado’s session management internally, so we don’t have to worry about sessions, cookies or tokens.

To start our application, we need a simple webserver which runs locally on our machine. We chose http-server for this task. Install it with

Afterwards enter the folder which contains the HTML files and start the webserver by typing

When visiting http://localhost:8080 you should see the following screen:

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

This tutorial showed how easy it is to add passwordless authentication with passkeys to a plain HTML/JavaScript 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 out our documentation here or if you want to add Corbado to your existing app with existing users, please see our documentation here.