User Button

1"use client"
2 
3import {
4  type MultiSessionAuthClient,
5  useAuth,
6  useSession,
7  useSetActiveSession
8} from "@better-auth-ui/react"
9import {
10  ChevronsUpDown,
11  LogIn,
12  LogOut,
13  Settings,
14  UserPlus2
15} from "lucide-react"
16import { isValidElement, type ReactElement, type ReactNode } from "react"
17 
18import { buttonVariants } from "@/components/ui/button"
19import {
20  DropdownMenu,
21  DropdownMenuContent,
22  DropdownMenuGroup,
23  DropdownMenuItem,
24  DropdownMenuLabel,
25  DropdownMenuSeparator,
26  DropdownMenuTrigger
27} from "@/components/ui/dropdown-menu"
28import { cn } from "@/lib/utils"
29import { UserAvatar } from "./user-avatar"
30import { UserView } from "./user-view"
31 
32/** Auth states a `UserButton` link can be visible in. */
33export type UserButtonLinkVisibility =
34  | "authenticated"
35  | "unauthenticated"
36  | "always"
37 
38/** A simple link entry rendered as a `DropdownMenuItem` in the `UserButton` menu. */
39export type UserButtonLink = {
40  /** Visible label. */
41  label: ReactNode
42  /** Destination URL. */
43  href: string
44  /** Optional leading icon. Sized/coloured to match built-in items. */
45  icon?: ReactNode
46  /** Forwarded to the underlying `DropdownMenuItem`. */
47  variant?: "default" | "destructive"
48  /**
49   * When this link is visible based on auth state.
50   * @default "always"
51   */
52  visibility?: UserButtonLinkVisibility
53}
54 
55export type UserButtonProps = {
56  className?: string
57  align?: "center" | "end" | "start" | undefined
58  sideOffset?: number
59  size?: "default" | "icon"
60  variant?:
61    | "default"
62    | "destructive"
63    | "ghost"
64    | "link"
65    | "outline"
66    | "secondary"
67  /** Additional menu entries rendered above the built-in items. */
68  links?: (UserButtonLink | ReactElement)[]
69  /** Hide the built-in "Settings" link. Useful when replacing it via `links`. */
70  hideSettings?: boolean
71}
72 
73function renderUserLink(
74  link: UserButtonLink | ReactElement,
75  navigate: (options: { to: string; replace?: boolean }) => void,
76  fallbackKey: string
77): ReactNode {
78  if (isValidElement(link)) return link
79 
80  const { label, href, icon, variant } = link
81  return (
82    <DropdownMenuItem
83      key={fallbackKey}
84      variant={variant}
85      onClick={() => navigate({ to: href })}
86    >
87      {icon}
88      {label}
89    </DropdownMenuItem>
90  )
91}
92 
93/**
94 * Render a user dropdown button that shows user info, settings, theme controls, and authentication actions.
95 *
96 * Includes user profile, settings link, optional multi-session account switching, theme picker,
97// … truncated