​
1. Prerequisites

npm install @corbado/react

Note: Corbado supports React v18+

​
2. Add UI Components to your React code

This example shows how the CorbadoProvider and the CorbadoAuth component can be implemented in React code.

Find a list and description of all the Corbado UI Components here.

App.tsx
import { CorbadoAuth, CorbadoProvider } from "@corbado/react";
import HomePage from "./pages/HomePage";
import {
    createBrowserRouter,
    RouterProvider,
    useNavigate
} from "react-router-dom";

const App = () => {
    return (
        <CorbadoProvider projectId="your-project-id">
            <RouteProvider />
        </CorbadoProvider>
    );
};

const AuthPage = () => {
    const navigate = useNavigate();

    const onLoggedIn = () => {
        //post login actions can be performed here.
        //navigate("/");
    };

    return (
        <div>
            <CorbadoAuth onLoggedIn={onLoggedIn} />
        </div>
    );
};

const RouteProvider = () => {
    const routes = [
        {
            path: "/auth",
            element: <AuthPage />
        }
        // other public and protected routes
    ];

    return <RouterProvider router={createBrowserRouter(routes)} />;
};

export default App;

After integrating Corbado into your application, you can now make use of the useCorbado hook that makes user’s authentication state available throughout your application.

​
3. Read the blog post

To find a step-by-step tutorial on how to integrate passkeys into React, please check out our blog post:

Corbado Logo
Existing application (with existing users)useCorbado()