React
Learn how to add the Corbado UI components to your React application.
1. Prerequisites
- Make sure that React (v18+) is installed in your project.
- Install Corbado’s React package:
npm install @corbado/react
- Set up your Corbado project in the developer panel
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 (
<CorbadoProvider
projectId='your-project-id'
darkMode='on'
>
<RouteProvider />
</CorbadoProvider>
);
}
const AuthPage = () => {
const navigate = useNavigate();
const onLoggedIn = () => {
navigate('/');
};
return (
<div className='min-h-screen flex items-center justify-center bg-lightBrown'>
<CorbadoAuth
onLoggedIn={onLoggedIn}
customerSupportEmail='support@company.com'
/>
</div>
);
};
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:
