Links

React

Learn how to add the Corbado web component to your React application.

1. Prerequisites

To get started with the integration in React, install the dependencies and get all required setup data, please follow the guide of web component integration first.

2. Add the web component to React code

App.js
1
import './App.css';
2
import React from 'react';
3
import '@corbado/webcomponent'
4
import '@corbado/webcomponent/pkg/auth_cui.css'
5
6
const CORBADO_PROJECT_ID = process.env.REACT_APP_CORBADO_PROJECT_ID;
7
8
function App() {
9
return (
10
<div className="App">
11
<corbado-auth project-id={CORBADO_PROJECT_ID} conditional="yes">
12
<input name="username" id="corbado-username"
13
required autoComplete="webauthn"/>
14
</corbado-auth>
15
</div>
16
);
17
}
18
19
export default App;

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: