How To Integrate Passkeys in React Apps
Tags: authentication, passkeys, react, webdev
Published: 2023-09-11 16:24:40

## 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](https://github.com/corbado/example-passkeys-react).

The result looks as follows:

![Passkey Login Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tg0lf9lfm0tpqu6rtwz8.png)


## 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](https://github.com/corbado/example-passkeys-react)):

{% gist https://gist.github.com/vincentdelitz/4bca5d96adcc700a157e8b071d1a960a.js %}


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:

![React skeleton](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w6t7ebiahvmum8z1fl16.png)

## 5. Set up the Corbado web component for passkey authentication
### 5.1 Set up your Corbado account and project
Visit the [Corbado developer panel](https://app.corbado.com/signin#register) to sign up and create your account (you’ll see the passkey sign-up in action here!).

![Corbado developer panel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/64tbxytwwbcdbh0u0l6m.png)

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](https://app.corbado.com/app/getting-started/integration-guide) that helps to set up all required settings.

![Integration guide](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2meg9e2x0mljpz2mvsk2.png)

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”).


![Add authorized origin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5mw2iylu0w847e7eub9f.png)

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 Redirect URL Relying Party ID](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wgx9y5hocpilg86i6fdw.png)

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:

{% gist https://gist.github.com/vincentdelitz/42e3c2ba35ffbb45dea25363e92113c9 %}

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:

{% gist https://gist.github.com/vincentdelitz/9b2738dd83129ea519df5cf70b1fca78 %}

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:

![Passkey Login Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/paj5v0jkdj7y5cwk9im6.png)

‍

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

{% gist https://gist.github.com/vincentdelitz/59a8084fa8bea75e68217238cfc647af %}

Also adapt index.js to provide adequate routing:

{% gist https://gist.github.com/vincentdelitz/0095e9766b67cf2b0cc30262fb123203 %}

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:

![Passkey Login Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6eovqgijbnt9wvu0gk68.png)

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 ](https://docs.corbado.com/sessions/overview)or if you want to add Corbado to your existing app with existing users, please see our documentation [here](https://docs.corbado.com/products/corbado-connect).