better-auth-ui 3.2.5

package/src/components/user-button.tsx

@@ -0,0 +1,409 @@
+"use client"
+import {
+    ChevronsUpDown,
+    LogInIcon,
+    LogOutIcon,
+    PlusCircleIcon,
+    SettingsIcon,
+    UserRoundPlus
+} from "lucide-react"
+import {
+    type ComponentProps,
+    Fragment,
+    type ReactNode,
+    useCallback,
+    useContext,
+    useEffect,
+    useMemo,
+    useRef,
+    useState
+} from "react"
+
+import { useIsHydrated } from "../hooks/use-hydrated"
+import { AuthUIContext } from "../lib/auth-ui-provider"
+import { cn, getLocalizedError } from "../lib/utils"
+import type { AuthLocalization } from "../localization/auth-localization"
+import type { AnyAuthClient } from "../types/any-auth-client"
+import type { User } from "../types/auth-client"
+import { Button } from "./ui/button"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger
+} from "./ui/dropdown-menu"
+import { UserAvatar, type UserAvatarClassNames } from "./user-avatar"
+import { UserView, type UserViewClassNames } from "./user-view"
+
+export interface UserButtonClassNames {
+    base?: string
+    skeleton?: string
+    trigger?: {
+        base?: string
+        avatar?: UserAvatarClassNames
+        user?: UserViewClassNames
+        skeleton?: string
+    }
+    content?: {
+        base?: string
+        user?: UserViewClassNames
+        avatar?: UserAvatarClassNames
+        menuItem?: string
+        separator?: string
+    }
+}
+
+export interface UserButtonProps {
+    className?: string
+    classNames?: UserButtonClassNames
+    align?: "center" | "start" | "end"
+    alignOffset?: number
+    side?: "top" | "right" | "bottom" | "left"
+    sideOffset?: number
+    additionalLinks?: {
+        href: string
+        icon?: ReactNode
+        label: ReactNode
+        signedIn?: boolean
+        separator?: boolean
+    }[]
+    trigger?: ReactNode
+    disableDefaultLinks?: boolean
+    /**
+     * @default authLocalization
+     * @remarks `AuthLocalization`
+     */
+    localization?: AuthLocalization
+}
+
+/**
+ * Displays an interactive user button with dropdown menu functionality
+ *
+ * Renders a user interface element that can be displayed as either an icon or full button:
+ * - Shows a user avatar or placeholder when in icon mode
+ * - Displays user name and email with dropdown indicator in full mode
+ * - Provides dropdown menu with authentication options (sign in/out, settings, etc.)
+ * - Supports multi-session functionality for switching between accounts
+ * - Can be customized with additional links and styling options
+ */
+export function UserButton({
+    className,
+    classNames,
+    align,
+    alignOffset,
+    side,
+    sideOffset,
+    trigger,
+    additionalLinks,
+    disableDefaultLinks,
+    localization: propLocalization,
+    size,
+    ...props
+}: UserButtonProps & ComponentProps<typeof Button>) {
+    const {
+        basePath,
+        hooks: { useSession, useListDeviceSessions },
+        mutators: { setActiveSession },
+        localization: contextLocalization,
+        multiSession,
+        account: accountOptions,
+        signUp,
+        toast,
+        viewPaths,
+        onSessionChange,
+        Link
+    } = useContext(AuthUIContext)
+
+    const localization = useMemo(
+        () => ({ ...contextLocalization, ...propLocalization }),
+        [contextLocalization, propLocalization]
+    )
+
+    let deviceSessions:
+        | AnyAuthClient["$Infer"]["Session"][]
+        | undefined
+        | null = null
+    let deviceSessionsPending = false
+
+    if (multiSession) {
+        const { data, isPending } = useListDeviceSessions()
+        deviceSessions = data
+        deviceSessionsPending = isPending
+    }
+
+    const { data: sessionData, isPending: sessionPending } = useSession()
+    const user = sessionData?.user
+    const [activeSessionPending, setActiveSessionPending] = useState(false)
+
+    const isHydrated = useIsHydrated()
+    const isPending = sessionPending || activeSessionPending || !isHydrated
+
+    const switchAccount = useCallback(
+        async (sessionToken: string) => {
+            setActiveSessionPending(true)
+
+            try {
+                await setActiveSession({ sessionToken })
+
+                onSessionChange?.()
+            } catch (error) {
+                toast({
+                    variant: "error",
+                    message: getLocalizedError({ error, localization })
+                })
+                setActiveSessionPending(false)
+            }
+        },
+        [setActiveSession, onSessionChange, toast, localization]
+    )
+
+    // biome-ignore lint/correctness/useExhaustiveDependencies: ignore
+    useEffect(() => {
+        if (!multiSession) return
+
+        setActiveSessionPending(false)
+    }, [sessionData, multiSession])
+
+    const warningLogged = useRef(false)
+
+    useEffect(() => {
+        if (size || warningLogged.current) return
+
+        console.warn(
+            "[Better Auth UI] The `size` prop of `UserButton` no longer defaults to `icon`. Please pass `size='icon'` to the `UserButton` component to get the same behaviour as before. This warning will be removed in a future release. It can be suppressed in the meantime by defining the `size` prop."
+        )
+
+        warningLogged.current = true
+    }, [size])
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger
+                asChild
+                className={cn(
+                    size === "icon" && "rounded-full",
+                    classNames?.trigger?.base
+                )}
+            >
+                {trigger ||
+                    (size === "icon" ? (
+                        <Button
+                            size="icon"
+                            className="size-fit rounded-full"
+                            variant="ghost"
+                        >
+                            <UserAvatar
+                                key={user?.image}
+                                isPending={isPending}
+                                className={cn(className, classNames?.base)}
+                                classNames={classNames?.trigger?.avatar}
+                                user={user}
+                                aria-label={localization.ACCOUNT}
+                                localization={localization}
+                            />
+                        </Button>
+                    ) : (
+                        <Button
+                            className={cn(
+                                "!p-2 h-fit",
+                                className,
+                                classNames?.trigger?.base
+                            )}
+                            size={size}
+                            {...props}
+                        >
+                            <UserView
+                                size={size}
+                                user={
+                                    !(user as User)?.isAnonymous ? user : null
+                                }
+                                isPending={isPending}
+                                classNames={classNames?.trigger?.user}
+                                localization={localization}
+                            />
+
+                            <ChevronsUpDown className="ml-auto" />
+                        </Button>
+                    ))}
+            </DropdownMenuTrigger>
+
+            <DropdownMenuContent
+                className={cn(
+                    "w-[--radix-dropdown-menu-trigger-width] min-w-56 max-w-64",
+                    classNames?.content?.base
+                )}
+                align={align}
+                alignOffset={alignOffset}
+                side={side}
+                sideOffset={sideOffset}
+                onCloseAutoFocus={(e) => e.preventDefault()}
+            >
+                <div className={cn("p-2", classNames?.content?.menuItem)}>
+                    {(user && !(user as User).isAnonymous) || isPending ? (
+                        <UserView
+                            user={user}
+                            isPending={isPending}
+                            classNames={classNames?.content?.user}
+                            localization={localization}
+                        />
+                    ) : (
+                        <div className="-my-1 text-muted-foreground text-xs">
+                            {localization.ACCOUNT}
+                        </div>
+                    )}
+                </div>
+
+                <DropdownMenuSeparator
+                    className={classNames?.content?.separator}
+                />
+
+                {additionalLinks?.map(
+                    ({ href, icon, label, signedIn, separator }, index) =>
+                        (signedIn === undefined ||
+                            (signedIn && !!sessionData) ||
+                            (!signedIn && !sessionData)) && (
+                            <Fragment key={index}>
+                                <Link href={href}>
+                                    <DropdownMenuItem
+                                        className={
+                                            classNames?.content?.menuItem
+                                        }
+                                    >
+                                        {icon}
+                                        {label}
+                                    </DropdownMenuItem>
+                                </Link>
+                                {separator && (
+                                    <DropdownMenuSeparator
+                                        className={
+                                            classNames?.content?.separator
+                                        }
+                                    />
+                                )}
+                            </Fragment>
+                        )
+                )}
+
+                {!user || (user as User).isAnonymous ? (
+                    <>
+                        <Link href={`${basePath}/${viewPaths.SIGN_IN}`}>
+                            <DropdownMenuItem
+                                className={classNames?.content?.menuItem}
+                            >
+                                <LogInIcon />
+
+                                {localization.SIGN_IN}
+                            </DropdownMenuItem>
+                        </Link>
+
+                        {signUp && (
+                            <Link href={`${basePath}/${viewPaths.SIGN_UP}`}>
+                                <DropdownMenuItem
+                                    className={classNames?.content?.menuItem}
+                                >
+                                    <UserRoundPlus />
+
+                                    {localization.SIGN_UP}
+                                </DropdownMenuItem>
+                            </Link>
+                        )}
+                    </>
+                ) : (
+                    <>
+                        {!disableDefaultLinks && accountOptions && (
+                            <Link
+                                href={`${accountOptions.basePath}/${accountOptions.viewPaths?.SETTINGS}`}
+                            >
+                                <DropdownMenuItem
+                                    className={classNames?.content?.menuItem}
+                                >
+                                    <SettingsIcon />
+
+                                    {localization.SETTINGS}
+                                </DropdownMenuItem>
+                            </Link>
+                        )}
+
+                        <Link href={`${basePath}/${viewPaths.SIGN_OUT}`}>
+                            <DropdownMenuItem
+                                className={classNames?.content?.menuItem}
+                            >
+                                <LogOutIcon />
+
+                                {localization.SIGN_OUT}
+                            </DropdownMenuItem>
+                        </Link>
+                    </>
+                )}
+
+                {user && multiSession && (
+                    <>
+                        <DropdownMenuSeparator
+                            className={classNames?.content?.separator}
+                        />
+
+                        {!deviceSessions && deviceSessionsPending && (
+                            <>
+                                <DropdownMenuItem
+                                    disabled
+                                    className={classNames?.content?.menuItem}
+                                >
+                                    <UserView
+                                        isPending={true}
+                                        classNames={classNames?.content?.user}
+                                    />
+                                </DropdownMenuItem>
+
+                                <DropdownMenuSeparator
+                                    className={classNames?.content?.separator}
+                                />
+                            </>
+                        )}
+
+                        {deviceSessions
+                            ?.filter(
+                                (sessionData) =>
+                                    sessionData.user.id !== user?.id
+                            )
+                            .map(({ session, user }) => (
+                                <Fragment key={session.id}>
+                                    <DropdownMenuItem
+                                        className={
+                                            classNames?.content?.menuItem
+                                        }
+                                        onClick={() =>
+                                            switchAccount(session.token)
+                                        }
+                                    >
+                                        <UserView
+                                            user={user}
+                                            classNames={
+                                                classNames?.content?.user
+                                            }
+                                        />
+                                    </DropdownMenuItem>
+
+                                    <DropdownMenuSeparator
+                                        className={
+                                            classNames?.content?.separator
+                                        }
+                                    />
+                                </Fragment>
+                            ))}
+
+                        <Link href={`${basePath}/${viewPaths.SIGN_IN}`}>
+                            <DropdownMenuItem
+                                className={classNames?.content?.menuItem}
+                            >
+                                <PlusCircleIcon />
+
+                                {localization.ADD_ACCOUNT}
+                            </DropdownMenuItem>
+                        </Link>
+                    </>
+                )}
+            </DropdownMenuContent>
+        </DropdownMenu>
+    )
+}

package/src/components/user-view.tsx

@@ -0,0 +1,138 @@
+"use client"
+
+import { useContext, useMemo } from "react"
+import { AuthUIContext } from "../lib/auth-ui-provider"
+import { cn } from "../lib/utils"
+import type { AuthLocalization } from "../localization/auth-localization"
+import type { Profile } from "../types/profile"
+import { Skeleton } from "./ui/skeleton"
+import { UserAvatar, type UserAvatarClassNames } from "./user-avatar"
+
+export interface UserViewClassNames {
+    base?: string
+    avatar?: UserAvatarClassNames
+    content?: string
+    title?: string
+    subtitle?: string
+    skeleton?: string
+}
+
+export interface UserViewProps {
+    className?: string
+    classNames?: UserViewClassNames
+    isPending?: boolean
+    size?: "sm" | "default" | "lg" | null
+    user?: Profile | null
+    /**
+     * @default authLocalization
+     * @remarks `AuthLocalization`
+     */
+    localization?: AuthLocalization
+}
+
+/**
+ * Displays user information with avatar and details in a compact view
+ *
+ * Renders a user's profile information with appropriate fallbacks:
+ * - Shows avatar alongside user name and email when available
+ * - Shows loading skeletons when isPending is true
+ * - Falls back to generic "User" text when neither name nor email is available
+ * - Supports customization through classNames prop
+ */
+export function UserView({
+    className,
+    classNames,
+    isPending,
+    size,
+    user,
+    localization: propLocalization
+}: UserViewProps) {
+    const { localization: contextLocalization } = useContext(AuthUIContext)
+
+    const localization = useMemo(
+        () => ({ ...contextLocalization, ...propLocalization }),
+        [contextLocalization, propLocalization]
+    )
+
+    return (
+        <div
+            className={cn(
+                "flex items-center gap-2",
+                className,
+                classNames?.base
+            )}
+        >
+            <UserAvatar
+                className={cn(size !== "sm" && "my-0.5")}
+                classNames={classNames?.avatar}
+                isPending={isPending}
+                size={size}
+                user={user}
+                localization={localization}
+            />
+
+            <div
+                className={cn(
+                    "grid flex-1 text-left leading-tight",
+                    classNames?.content
+                )}
+            >
+                {isPending ? (
+                    <>
+                        <Skeleton
+                            className={cn(
+                                "max-w-full",
+                                size === "lg" ? "h-4.5 w-32" : "h-3.5 w-24",
+                                classNames?.title,
+                                classNames?.skeleton
+                            )}
+                        />
+                        {size !== "sm" && (
+                            <Skeleton
+                                className={cn(
+                                    "mt-1.5 max-w-full",
+                                    size === "lg" ? "h-3.5 w-40" : "h-3 w-32",
+                                    classNames?.subtitle,
+                                    classNames?.skeleton
+                                )}
+                            />
+                        )}
+                    </>
+                ) : (
+                    <>
+                        <span
+                            className={cn(
+                                "truncate font-semibold",
+                                size === "lg" ? "text-base" : "text-sm",
+                                classNames?.title
+                            )}
+                        >
+                            {user?.displayName ||
+                                user?.name ||
+                                user?.fullName ||
+                                user?.firstName ||
+                                user?.displayUsername ||
+                                user?.username ||
+                                user?.email ||
+                                localization?.USER}
+                        </span>
+
+                        {!user?.isAnonymous &&
+                            size !== "sm" &&
+                            (user?.name || user?.username) && (
+                                <span
+                                    className={cn(
+                                        "truncate opacity-70",
+                                        size === "lg" ? "text-sm" : "text-xs",
+                                        classNames?.subtitle
+                                    )}
+                                >
+                                    {user?.email}
+                                </span>
+                            )}
+                    </>
+                )}
+            </div>
+        </div>
+    )
+}