Componentes

UserButton

Un botón de avatar de usuario integrado que muestra un menú desplegable con el perfil del usuario y un botón para cerrar sesión. Solo se renderiza cuando hay un usuario con sesión iniciada.

Uso

tsx

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

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

Props

Prop	Tipo	Valor predeterminado	Descripción
afterSignOutUrl	string	provider default	URL de redirección después de cerrar sesión
showName	boolean	false	Mostrar el nombre del usuario junto al avatar
size	"sm" \| "md" \| "lg"	"md"	Tamaño del botón de avatar

Con nombre

tsx

<UserButton showName afterSignOutUrl="/" />

Visualización del avatar

El UserButton muestra el avatar del usuario en orden de prioridad:

1.Foto de perfil del proveedor OAuth (Google, GitHub, etc.)
2.Avatar personalizado subido por el usuario
3.Avatar de iniciales generado basado en el nombre de pantalla