​
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={process.env.NEXT_PUBLIC_CORBADO_PROJECT_ID!}
      darkMode="off"
    >
      {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 { Login } from "@corbado/react";
import { useRouter } from "next/navigation";

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

  const onLoggedIn = () => {
    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