Componentes

UserButton

Um botão de avatar drop-in que exibe um menu suspenso com o perfil do usuário e um botão de saída. Renderizado apenas quando um usuário está conectado.

Uso

tsx

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

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

Props

Prop	Tipo	Padrão	Descrição
afterSignOutUrl	string	provider default	URL de redirecionamento após o logout
showName	boolean	false	Exibir o nome do usuário ao lado do avatar
size	"sm" \| "md" \| "lg"	"md"	Tamanho do botão de avatar

Com Nome

tsx

<UserButton showName afterSignOutUrl="/" />

Exibição do Avatar

O UserButton exibe o avatar do usuário na seguinte ordem de prioridade:

1.Foto de perfil do provedor OAuth (Google, GitHub, etc.)
2.Avatar personalizado enviado pelo usuário
3.Avatar de iniciais gerado com base no nome de exibição