How to Build a React Passkey Login

1. Introduction

2. Prerequisites

3. Repository Structure

4. Set up the React Project

5. Set up the Corbado React Component for Passkey Authentication

    5.1 Set up Your Corbado Account and Project

    5.2 Embed the React Component in Your Frontend

    5.3 Set up the Profile Page

    5.4 Start Using Passkeys

6. Conclusion

1. Introduction

In this blog post, well be walking through the process of building a sample application with passkey authentication using React. Well cover how to embed the Corbado React 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:

If you prefer watching a YouTube video on how to integrate Corbado into your React application, you can take a look here:

2. Prerequisites

This tutorial assumes basic familiarity with React, HTML, CSS and JavaScript. Lets dive in! Moreover, you need to have Node and NPM installed on your machine.

3. Repository structure

Lets first discuss the structure of our project (full GitHub repo):

.
├── .env
├── package.json
└── src
    ├── App.css
    ├── App.js
    ├── Home.js
    ├── index.css
    ├── index.js
    └── Profile.js

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

Become part of our Passkeys Community for updates and support.

Join

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.

Lets start out by initializing a new React project. In this tutorial, were using React version 18.2.0:

npx create-react-app example-passkeys-react

If youre asked to proceed, click Yes. Then execute:

cd example-passkeys-react

If you run

npm start

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

5. Set up the Corbado React Component for Passkey Authentication

Ben Gould

Head of Engineering

I’ve built hundreds of integrations in my time, including quite a few with identity providers and I’ve never been so impressed with a developer experience as I have been with Corbado.

10,000+ devs trust Corbado & make the Internet safer with passkeys. Got questions? We’ve written 150+ blog posts on passkeys.

Join Passkeys Community

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 project setup wizard, begin by selecting an appropriate name for your project. For the product selection, opt for "Corbado Complete". Subsequently, specify your technology stack and select "DEV along with "Corbado session management" options. Afterwards, youll get more foundational setup guidance. The subsequent sections of this article will delve into the integration part.

Next, we set the Application URL, Redirect URL and Relying Party ID inside Settings > General > URLs to the following values (see explanation below):

• Application URL: Provide the URL where you embedded the React component, here: http://localhost:3000.
• Redirect URL (previously): 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. This is only needed if you used the previous web component approach instead of the recent React component approach. In the React component, the redirect is handled by a callback of the CorbadoAuth component.
• Relying Party ID: Provide the domain (no protocol, no port and no path) where passkeys should be bound to, here: localhost

5.2 Embed the React component in the Frontend

First, we need to install the React component and the react-router-dom" package:

npm i @corbado/react react-router-dom

Now, create a Home.js file that will be responsible for displaying the CorbadoAuth component. It takes a callback function thats executed, once the user has successfully logged in. We want the user to be redirected to the profile page in this case:

import "./App.css"
import React from "react"
import { CorbadoAuth } from "@corbado/react"
import { useNavigate } from "react-router-dom"
 
export default function Home() {
    const navigate = useNavigate()
    const onLoggedIn = () => {
        navigate('/profile')
    }
 
    return (
        <div className='Auth' style={{display: 'flex', justifyContent: 'center', marginTop: '20px'}}>
            <CorbadoAuth
                onLoggedIn={onLoggedIn}
            />
        </div>
    )
}

Next, we create a .env file where we put in the Corbado project ID found under Settings > General > Project info:

REACT_APP_CORBADO_PROJECT_ID=<your-project-id>

Now we modify our App.js file. The Corbado React component requires us to wrap our application with the CorbadoProvider. Pass your Corbado project ID to it from the .env file. (A full list of configuration options can be found under in the docs but only the projectId is required). On top of that, well also add some basic routing:

import "./App.css"
import { CorbadoProvider } from "@corbado/react"
import { createBrowserRouter, RouterProvider } from "react-router-dom"
import Home from "./Home"
import Profile from "./Profile"
 
const CORBADO_PROJECT_ID = process.env.REACT_APP_CORBADO_PROJECT_ID;
 
const RouteProvider = () => {
    const routes = [
        {
            path: '/',
            element: <Home />,
        },
        {
            path: '/profile',
            element: <Profile />,
        },
    ];
 
    return <RouterProvider router={createBrowserRouter(routes)} />;
};
 
function App() {
    return (
        <div className='App'>
            <CorbadoProvider projectId={CORBADO_PROJECT_ID} darkMode='on'>
                <RouteProvider />
            </CorbadoProvider>
        </div>
    )
}
 
export default App

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 React component to sign up and log in:

Subscribe to our Passkeys Substack for the latest news, insights and strategies.

Subscribe

5.3 Set up the Profile Page

After successful authentication, the Corbado React component emits the onLoggedIn callback and the user will be redirected to the /profile page. 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:

import {useNavigate} from "react-router-dom"
import {useCorbadoSession, useCorbado} from "@corbado/react"
 
export default function Profile() {
    const navigate = useNavigate()
    const {isAuthenticated, user} = useCorbadoSession();
    const {logout} = useCorbado();
 
    const redirectToHome = () => {
        navigate("/")
    }
    const handleLogout = () => {
        logout()
        redirectToHome()
    }
 
    if (!isAuthenticated || !user) {
        return (
            <div>
                <p>You're not logged in.</p>
                <p>
                    Please go back to{" "}
                    <a href='/' onClick={redirectToHome}>
                        home
                    </a>{" "}
                    to log in.
                </p>
            </div>
        )
    } else {
        return (
            <div>
                <h1>Profile Page</h1>
                <p>
                    User-ID: {user.sub}
                    <br/>
                    Email: {user.email}
                </p>
                <button onClick={handleLogout}>Logout</button>
            </div>
 
        )
    }
}

The useCorbado() hook provides you with easy access to lots of information (a full list can be found in the docs for useCorbado()).

For this implementation, the user and isAuthenticated value are important, as we can use it to check the authentication state. Furthermore, a logout function is provided to handle proper logout for you.

Now, you can uncomment the Profile import and the Profile route inside your App.js file to integrate it into your web app.

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:

Add passkeys to your React app.

Start For Free

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 Corbados 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.