コンポーネント
UserButton
ユーザープロファイルとサインアウトボタンを持つドロップダウンメニューを表示するドロップインユーザーアバターボタン。ユーザーがサインインしている場合のみレンダリングされます。
使い方
tsx
import { UserButton } from "@authon/react";
// Drop into your header/navbar
function Header() {
return (
<nav>
<UserButton />
</nav>
);
}Props
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
| afterSignOutUrl | string | provider default | サインアウト後のリダイレクトURL |
| showName | boolean | false | アバターの横にユーザー名を表示 |
| size | "sm" | "md" | "lg" | "md" | アバターボタンのサイズ |
名前を表示
tsx
<UserButton showName afterSignOutUrl="/" />アバター表示
UserButtonは次の優先順位でユーザーアバターを表示します：
- 1.OAuthプロバイダーのプロフィール写真（Google、GitHubなど）
- 2.ユーザーがアップロードしたカスタムアバター
- 3.表示名に基づいて生成されたイニシャルアバター