Komponenten

SignUp

Eine vorgefertigte Registrierungs-Komponente, die die Benutzerregistrierung mit E-Mail/Passwort und OAuth-Anbietern verarbeitet. Zeigt den E-Mail-Verifizierungs-Flow an, wenn erforderlich.

Verwendung

tsx

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

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

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

Props

Prop	Typ	Standard	Beschreibung
mode	"popup" \| "inline"	"popup"	Wie die Registrierungs-UI angezeigt wird
afterSignUpUrl	string	afterSignInUrl	URL, zu der nach der Registrierung weitergeleitet wird
className	string	—	CSS-Klasse für die Auslöse-Schaltfläche
children	ReactNode	"Sign up"	Schaltflächeninhalt (Popup-Modus)

Registrierungs-Flow

Wenn die E-Mail-Verifizierung in Ihren Projekteinstellungen aktiviert ist, verarbeitet die SignUp-Komponente automatisch den mehrstufigen Flow:

Benutzer gibt E-Mail + Passwort ein (oder wählt OAuth)

Bestätigungs-E-Mail wird mit einem 6-stelligen Code gesendet

Benutzer gibt den Code ein und wird automatisch angemeldet

Dedizierte Registrierungsseite

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