Composants

UserButton

Un bouton avatar utilisateur clé en main qui affiche un menu déroulant avec le profil de l'utilisateur et un bouton de déconnexion. S'affiche uniquement lorsqu'un utilisateur est connecté.

Utilisation

tsx

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

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

Props

Prop	Type	Défaut	Description
afterSignOutUrl	string	provider default	URL de redirection après la déconnexion
showName	boolean	false	Afficher le nom de l'utilisateur à côté de l'avatar
size	"sm" \| "md" \| "lg"	"md"	Taille du bouton avatar

Avec le nom

tsx

<UserButton showName afterSignOutUrl="/" />

Affichage de l'avatar

Le UserButton affiche l'avatar de l'utilisateur par ordre de priorité :

1.Photo de profil du fournisseur OAuth (Google, GitHub, etc.)
2.Avatar personnalisé téléchargé par l'utilisateur
3.Avatar d'initiales généré basé sur le nom d'affichage