Profil

Vorgefertigte Profilkomponente, die Benutzerinformationen anzeigt und Kontoverwaltungsfunktionen bietet.

Grundlegende Verwendung

import { Profile } from 'authsafe-react';

function App() {
  return (
    <div>
      <h1>My App</h1>
      <Profile />
    </div>
  );
}

Funktionen

Die Profilkomponente enthält folgende Funktionen:

• Benutzeravatar-Anzeige mit Initialen-Fallback
• Anzeige von vollständigem Namen und E-Mail
• E-Mail-Verifizierungsstatus-Anzeige
• MFA-Verwaltung mit TOTP und E-Mail-OTP
• Anpassbares Branding (Theme, Farben, Logo)
• Lade- und Fehlerzustände

Anpassung

Passen Sie die Profilkomponente an, indem Sie Ihre eigene Branding-Konfiguration übergeben:

import { useAuth } from 'authsafe-react';

function CustomProfile() {
  const { user, isAuthenticated } = useAuth();

  if (!isAuthenticated) return null;

  return (
    <div>
      <img src={user?.picture} alt={user?.name} />
      <h2>{user?.name}</h2>
      <p>{user?.email}</p>
    </div>
  );
}

Verwandte Hooks

• useAuth() — useAuth — Zugriff auf den Authentifizierungsstatus
• useLogin() — useLogin — Login-Flow auslösen
• useLogout() — useLogout — Logout-Flow auslösen