Komponenten

SignIn

Eine vorgefertigte Anmelde-Komponente, die E-Mail-/Passwort-Authentifizierung und OAuth-Anbieter-Flows verarbeitet. Verfügbar im Popup- und Inline-Modus.

Verwendung

tsx

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

// Popup mode — triggers a modal on click
<SignIn mode="popup" />

// Inline mode — renders the form directly on the page
<SignIn mode="inline" />

Props

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

Popup-Modus

Der Popup-Modus rendert eine Schaltfläche, die das Anmelde-Modal beim Klicken öffnet. Sie können das Erscheinungsbild der Schaltfläche anpassen:

tsx

<SignIn mode="popup" className="my-custom-btn">
  Sign in to your account
</SignIn>

Inline-Modus

Der Inline-Modus rendert das Anmeldeformular direkt. Nützlich für dedizierte Anmeldeseiten:

app/sign-in/page.tsx

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

export default function SignInPage() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-slate-950">
      <SignIn
        mode="inline"
        afterSignInUrl="/dashboard"
      />
    </div>
  );
}

Anpassung

Die Anmelde-UI wird mit den Anpassungseinstellungen aus Ihrem Authon Dashboard → Anpassen-Tab gestaltet. Sie können konfigurieren:

Markenname und Logo
Primäre Verlaufsfarben
Kartenhintergrundfarbe
Rahmenradius
OAuth-Anbieter-Reihenfolge