1. Prerequisites

  • Make sure that React (v18+) is installed in your project.
  • Install Corbado’s React package:
npm install @corbado/react

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.

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

const App = () => {
  return (
      <RouteProvider />

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

  const onLoggedIn = () => {

  return (
    <div className='min-h-screen flex items-center justify-center bg-lightBrown'>

const RouteProvider = () => {
  const routes = [
      path: '/auth',
      element: <AuthPage />,
      path: '/',
      element: <HomePage />,

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

export default App;

Note: Instead of <CorbadoAuth/> you can also use <Signup/> and <Login/> component. This makes sense when you want to make them available under separate routes.

Find detailed documentation about the available configuration options for all UI components here.

After integration Corbado into your application you can now take a look at the useCorbado hook that makes authentication functionalities 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