Components
UserButton
A drop-in user avatar button that shows a dropdown menu with the user's profile and a sign-out button. Only renders when a user is signed in.
Usage
tsx
import { UserButton } from "@authon/react";
// Drop into your header/navbar
function Header() {
return (
<nav>
<UserButton />
</nav>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| afterSignOutUrl | string | provider default | Redirect URL after sign out |
| showName | boolean | false | Show the user's name next to the avatar |
| size | "sm" | "md" | "lg" | "md" | Avatar button size |
With Name
tsx
<UserButton showName afterSignOutUrl="/" />Avatar Display
The UserButton displays the user's avatar in priority order:
- 1.Profile photo from OAuth provider (Google, GitHub, etc.)
- 2.Custom avatar uploaded by the user
- 3.Generated initials avatar based on display name