Komponenten

UserButton

Eine sofort einsatzfähige Benutzer-Avatar-Schaltfläche, die ein Dropdown-Menü mit dem Benutzerprofil und einer Abmelde-Schaltfläche anzeigt. Wird nur gerendert, wenn ein Benutzer angemeldet ist.

Verwendung

tsx

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

// Drop into your header/navbar
function Header() {
  return (
    <nav>
      <UserButton />
    </nav>
  );
}

Props

Prop	Typ	Standard	Beschreibung
afterSignOutUrl	string	provider default	Weiterleitungs-URL nach der Abmeldung
showName	boolean	false	Den Namen des Benutzers neben dem Avatar anzeigen
size	"sm" \| "md" \| "lg"	"md"	Größe der Avatar-Schaltfläche

Mit Name

tsx

<UserButton showName afterSignOutUrl="/" />

Avatar-Anzeige

Der UserButton zeigt den Avatar des Benutzers in Prioritätsreihenfolge an:

1.Profilfoto vom OAuth-Anbieter (Google, GitHub usw.)
2.Benutzerdefinierter Avatar, hochgeladen vom Benutzer
3.Generierter Initialen-Avatar basierend auf dem Anzeigenamen