How To Integrate Passkeys in React Apps

1. Introduction

In this blog post, we’ll be walking through the process of building a sample application with passkey authentication using React. We’ll cover how to embed the Corbado web component and implement 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:

2. Prerequisites

This tutorial assumes basic familiarity with React, 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 (full GitHub repo):

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

4. Set up the React project

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

Let’s start out by initializing a new React project. In this tutorial, we’re using React version 18.2.0:

npx create-react-app react-example

If you’re asked to proceed, click “Yes”. Then execute:

cd react-example

If you run

npm start

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

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 the passkey sign-up in action here!).

In the appearing project wizard, select “Integration guide”. Then, 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.

Then, jump over to the integration guide that helps to set up all required settings.

In step 1, we need to define a new authorized origin, which is http://localhost:3000 in the case of our React application (you can give it any name you want, e.g. “local”).

In this example, the creation of an API secret is optional. You would need it if you want to request protected user data from the Corbado backend or use Corbado’s session management for protecting your own resources.

Next, we 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
The last two steps in the integration guide (“Add Corbado session management and protect your routes” and “Start using passkeys”) will be covered below.‍

5.2 Embed the web component in the frontend

Now, let’s jump back to the code we created from step 4.

Then, we need to install the web component:

npm i @corbado/webcomponent

Next, we create a .env file where we put in the Corbado project ID:

Then, we add a new file Home.js. This file contains the sign up / login web component. As HTML attribute “project-id”, we past the project ID from the developer panel into the .env file and read it from there.

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

Moreover, we install the “react-router-dom” package.

npm i react-router-dom

Then, we add routing to index.js:

Restart your React web app (via npm start) and open http://localhost:3000 in the browser. You should see the following screen with the Corbado web component to sign up and log in:

‍

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 a Profile.js file and add the following code:

Also adapt index.js to provide adequate routing:

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 start

You should see the following screen:

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

![Passkey Profile Page(https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g0i6w7ztyqpqw0h5qia7.png)

‍

6. Conclusion

This tutorial showed how easy it is to add passwordless authentication with passkeys to a React 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.

Comments

[Ade]

Great! Very helpful.

There is no pricing page on the app.corbado.com
Any link for the pricing of that service?

[vdelitz]

Sure, here: corbado.com/pricing
Pleasel et me know if you have any more questions or feature requests :)

[Ade]

Please write another post integrating your service with sveltekit.

[vdelitz]

We already have one for SvelteKit on our blog :) corbado.com/blog/sveltekit-passkeys

[Ade]

Add that post here on Dev.io for discoverability. You're awesome and good luck with this product. I hope it gets the traction that it deserves in the webapps sphere.

[vdelitz]

Thanks so much! :)

[Ade]

You're awesome and good luck with this product. I hope get the traction that it deserves in the webapps sphere.