React
Setup
Learn how to add the Corbado React package to your React application.
Installation
First, you need to set up a Corbado project.
To get started with the integration, install the Corbado React package:
npm install @corbado/react
If your project uses TypeScript, you should also install the types for the package:
npm install -D @corbado/types
Set up CorbadoProvider
Integrate the CorbadoProvider into the root of your application:
App.tsx
import { CorbadoProvider } from '@corbado/react';
function App() {
return (
<CorbadoProvider projectId="pro-XXX">
{/* Your application */}
</CorbadoProvider>
);
}
export default App;
Configuration
Most configuration is done in the . The following options are available:
| Name | Type | Default | Description |
|---|---|---|---|
| projectId | string (e.g. pro-1234567890) | required | The ID of your Corbado project. This setting is mandatory and can be found in the Developer Panel. |
| autoDetectLanguage | boolean | true | If set to true the language used in UI components will be derived from the browser. |
| defaultLanguage | string | en | The default language to be used if auto-detection is disabled or fails. Corbado supports “en”, “de” and “fr”. You can define custom translations though. |
| customTranslations | object | null | A map from language (e.g. “en”) to an object containing your custom translation overrides. Find more details here |
| darkMode | on | off | auto | auto | Controls if your components are rendered in dark mode. If set to auto the darkMode setting will be derived from the browser. |
| theme | string | undefined | Controls the style of your components. Currently, the only alternative theme that can be set here is emerald-funk. To create your own custom theme find all information here. |
| customerSupportEmail | string | undefined | Email address for customer support in case of critical errors. |
| isDevMode | boolean | false | If set to true, the UI components will log debug messages to console. |
| frontendApiUrl | string | Set to your Frontend API URL | Please set this value when you go live to your defined CNAME. |
| setShortSessionCookie | boolean | false | If set to true, a cbo_short_session cookie will be set automatically by the Corbado component for the current domain. This setting makes sense if you are running a full stack application (e.g. Next.js) or a multi page application (e.g. PHP). |
| apiTimeout | number | 30000 | Front-end api timeout time in miliseconds |
Next
- Add authentication UI components to your application.
- Let your users manage their passkeys with the PasskeyList.
- Learn how you can access the users authentication state.
Was this page helpful?