​
1. Prerequisites

First, you need to set up a Corbado project.

To get started with the integration, install the Corbado React Package.

npm install @corbado/react

Further information on the React package can be found here

​
2. Add the React Package to Your Next.js Project

First, 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>
    );
}

Now you’re ready to integrate the CorbadoAuth component to allow your users to login and sign up.

page.tsx
"use client";

import { CorbadoAuth } from "@corbado/react";
import { useRouter } from "next/navigation";

export default function Auth() {
    const router = useRouter();

    const onLoggedIn = () => {
        //post login actions can be performed here.
        //router.push("/profile");
    };

    return <CorbadoAuth onLoggedIn={onLoggedIn} />;
}

If you need access to user data on the server, also take a look at our Corbado Node.js SDK.

​
3. Read the blog post

To find a step-by-step tutorial on how to integrate passkeys into Next.js, please check out our blog post:

Corbado Logo
AngularNuxt.js