Next.js CorbadoAuth
Before we can begin to render the Corbado Authentication UI, the CorbadoProvider has to be integrated. Find more here.

​
Integration

The Authentication UI allows the user to log in or register with Corbado. Once the user is logged in, the onLoggedIn callback is executed.
app/auth/page.tsx
"use client";

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

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

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

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

​
Customize Styling and Translations

Corbado UI Components can be customized to match your application’s design and language preferences. You can adjust the styling and translations of the components to create a seamless user experience:

Custom Styling

Custom Translations

​
Next

Let your users manage their passkeys with the PasskeyList.