Components

SignUp

A pre-built sign-up component that handles user registration with email/password and OAuth providers. Shows email verification flow when required.

Usage

tsx

import { SignUp } from "@authon/react";

// Popup mode
<SignUp mode="popup" />

// Inline mode
<SignUp mode="inline" afterSignUpUrl="/onboarding" />

Props

Prop	Type	Default	Description
mode	"popup" \| "inline"	"popup"	How the sign-up UI is displayed
afterSignUpUrl	string	afterSignInUrl	URL to redirect to after registration
className	string	—	CSS class for trigger button
children	ReactNode	"Sign up"	Button content (popup mode)

Registration Flow

When email verification is enabled in your project settings, the SignUp component automatically handles the multi-step flow:

User enters email + password (or chooses OAuth)

Verification email is sent with a 6-digit code

User enters the code and is signed in automatically

Dedicated Sign-Up Page

app/sign-up/page.tsx

import { SignUp } from "@authon/react";

export default function SignUpPage() {
  return (
    <div className="flex min-h-screen items-center justify-center">
      <SignUp
        mode="inline"
        afterSignUpUrl="/onboarding"
      />
    </div>
  );
}