The integration process is slightly different for the Next.js pages router. Make sure to have a look at our dedicated page, if you’re using the pages router.

​
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

Create a wrapper around the CorbadoProvider, to render it on the client:

ProviderWrapper.tsx
"use client";

import { CorbadoProvider } from "@corbado/react";

export default function ProviderWrapper({
    children
}: {
    children: React.ReactNode;
}) {
    return (
        <CorbadoProvider projectId="your-project-id">
            {children}
        </CorbadoProvider>
    );
}

Now, integrate the ProviderWrapper into your root layout:

layout.tsx
import ProviderWrapper from "./ProviderWrapper";

export default function RootLayout({
    children
}: {
    children: React.ReactNode;
}) {
    return (
        <html lang="en">
            <ProviderWrapper>
                <body>{children}</body>
            </ProviderWrapper>
        </html>
    );
}

​
Configuration

Most configuration is done in the . The following options are available:

NameTypeDefaultDescription
projectIdstring (e.g. pro-1234567890)requiredThe ID of your Corbado project. This setting is mandatory and can be found in the Developer Panel.
autoDetectLanguagebooleantrueIf set to true the language used in UI components will be derived from the browser.
defaultLanguagestringenThe default language to be used if auto-detection is disabled or fails. Corbado supports “en”, “de” and “fr”. You can define custom translations though.
customTranslationsobjectnullA map from language (e.g. “en”) to an object containing your custom translation overrides. Find more details here
darkModeon | off | autoautoControls if your components are rendered in dark mode. If set to auto the darkMode setting will be derived from the browser.
themestringundefinedControls 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.
customerSupportEmailstringundefinedEmail address for customer support in case of critical errors.
isDevModebooleanfalseIf set to true, the UI components will log debug messages to console.
frontendApiUrlstringSet to your Frontend API URLPlease set this value when you go live to your defined CNAME.
apiTimeoutnumber30000Front-end api timeout time in miliseconds

​
Next

  1. Add authentication UI components to your application.
  2. Let your users manage their passkeys with the PasskeyList.
  3. Learn how you can access the users authentication state on the client-side.
  4. Easily access user information on the server-side with the Node.js SDK.
  5. If you’re using the pages router, have a look at our dedicated page.

Was this page helpful?

TranslationsCorbadoAuth Component