Next.js
Setup
Learn how to add the Corbado React package to your Next.js application.
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:
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 on the client-side.
- Easily access user information on the server-side with the Node.js SDK.
- If you’re using the pages router, have a look at our dedicated page.
Was this page helpful?