@better-auth-ui/heroui 1.6.0

package/src/components/settings/account/manage-account.tsx

@@ -0,0 +1,123 @@
+import {
+  useAuth,
+  useRevokeMultiSession,
+  useSetActiveSession,
+  useUser
+} from "@better-auth-ui/react"
+import {
+  ArrowRightArrowLeft,
+  ArrowRightFromSquare,
+  Ellipsis
+} from "@gravity-ui/icons"
+import { Button, Dropdown, Spinner, toast } from "@heroui/react"
+import type { Session, User } from "better-auth"
+
+import { UserView } from "../../user/user-view"
+
+export type DeviceSession = {
+  session: Session
+  user: User
+}
+
+export type ManageAccountProps = {
+  deviceSession?: DeviceSession | null
+  isPending?: boolean
+}
+
+/**
+ * Render a single account row with user info and a dropdown for switch/sign-out actions.
+ *
+ * Shows the user's avatar and info. A three-dot menu provides options to
+ * switch account (for non-active sessions) and sign out.
+ *
+ * @param deviceSession - The device session object containing session and user data
+ * @returns A JSX element containing the account row
+ */
+export function ManageAccount({
+  deviceSession,
+  isPending
+}: ManageAccountProps) {
+  const { localization } = useAuth()
+  const { data: user } = useUser()
+
+  const { mutate: setActiveSession, isPending: isSwitching } =
+    useSetActiveSession({
+      onError: (error) => toast.danger(error.error?.message || error.message)
+    })
+
+  const { mutate: revokeSession, isPending: isRevoking } =
+    useRevokeMultiSession({
+      onError: (error) => toast.danger(error.error?.message || error.message),
+      onSuccess: () => toast.success(localization.settings.revokeSessionSuccess)
+    })
+
+  const isActive = deviceSession?.session.userId === user?.id
+  const isBusy = isSwitching || isRevoking
+
+  return (
+    <div className="flex items-center justify-between gap-3">
+      <UserView user={deviceSession?.user} isPending={isPending} size="md" />
+
+      {deviceSession && isActive && (
+        <Button
+          className="shrink-0"
+          variant="outline"
+          size="sm"
+          onPress={() =>
+            revokeSession({ sessionToken: deviceSession.session.token })
+          }
+          isDisabled={isBusy}
+        >
+          {isRevoking ? (
+            <Spinner color="current" size="sm" />
+          ) : (
+            <ArrowRightFromSquare />
+          )}
+          {localization.auth.signOut}
+        </Button>
+      )}
+
+      {deviceSession && !isActive && (
+        <Dropdown>
+          <Button
+            isIconOnly
+            variant="ghost"
+            className="shrink-0"
+            size="sm"
+            isDisabled={isBusy}
+          >
+            <Ellipsis />
+          </Button>
+
+          <Dropdown.Popover>
+            <Dropdown.Menu>
+              <Dropdown.Item
+                textValue={localization.auth.switchAccount}
+                onAction={() =>
+                  setActiveSession({
+                    sessionToken: deviceSession.session.token
+                  })
+                }
+              >
+                <ArrowRightArrowLeft className="text-muted" />
+                {localization.auth.switchAccount}
+              </Dropdown.Item>
+
+              <Dropdown.Item
+                textValue={localization.auth.signOut}
+                onAction={() =>
+                  revokeSession({
+                    sessionToken: deviceSession.session.token
+                  })
+                }
+              >
+                <ArrowRightFromSquare className="text-muted" />
+                {localization.auth.signOut}
+              </Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown.Popover>
+        </Dropdown>
+      )}
+    </div>
+  )
+}

package/src/components/settings/account/manage-accounts.tsx

@@ -0,0 +1,78 @@
+import {
+  useAuth,
+  useListDeviceSessions,
+  useSession
+} from "@better-auth-ui/react"
+import { Card, type CardProps, cn, toast } from "@heroui/react"
+import { ManageAccount } from "./manage-account"
+
+export type ManageAccountsProps = {
+  className?: string
+  variant?: CardProps["variant"]
+}
+
+/**
+ * Render a card that lists and manages all device sessions for the current user.
+ *
+ * Shows each session with user information and actions to switch to or revoke a session.
+ * When device session data is loading, a pending placeholder row is displayed.
+ *
+ * @returns A JSX element containing the accounts management card
+ */
+export function ManageAccounts({
+  className,
+  variant,
+  ...props
+}: ManageAccountsProps & CardProps) {
+  const { localization } = useAuth()
+  const { data: session } = useSession()
+
+  const { data: deviceSessions, isPending } = useListDeviceSessions({
+    throwOnError: (error) => {
+      if (error.error) toast.danger(error.error.message)
+      return false
+    }
+  })
+
+  const otherSessions = deviceSessions?.filter(
+    (deviceSession) => deviceSession.session.id !== session?.session.id
+  )
+
+  const allRows = [
+    {
+      key: "current",
+      deviceSession: !isPending ? session : null,
+      isPending
+    },
+    ...(otherSessions?.map((deviceSession) => ({
+      key: deviceSession.session.id,
+      deviceSession,
+      isPending: false
+    })) ?? [])
+  ]
+
+  return (
+    <div>
+      <h2 className={cn("text-sm font-semibold mb-3")}>
+        {localization.settings.manageAccounts}
+      </h2>
+
+      <Card className={cn(className)} variant={variant} {...props}>
+        <Card.Content className="gap-0">
+          {allRows.map((row, index) => (
+            <div key={row.key}>
+              {index > 0 && (
+                <div className="border-b border-dashed -mx-4 md:-mx-6 my-4" />
+              )}
+
+              <ManageAccount
+                deviceSession={row.deviceSession}
+                isPending={row.isPending}
+              />
+            </div>
+          ))}
+        </Card.Content>
+      </Card>
+    </div>
+  )
+}

package/src/components/settings/account/user-profile.tsx

@@ -0,0 +1,103 @@
+import { useAuth, useSession, useUpdateUser } from "@better-auth-ui/react"
+import {
+  Button,
+  Card,
+  type CardProps,
+  cn,
+  FieldError,
+  Fieldset,
+  Form,
+  Input,
+  Label,
+  Skeleton,
+  Spinner,
+  TextField,
+  toast
+} from "@heroui/react"
+import type { SyntheticEvent } from "react"
+import { ChangeAvatar } from "./change-avatar"
+
+export type UserProfileProps = {
+  className?: string
+  variant?: CardProps["variant"]
+}
+
+/**
+ * Render a profile card that lets the authenticated user view and update their display name and avatar.
+ *
+ * @returns A JSX element containing the user profile card with avatar upload and an editable name form
+ */
+export function UserProfile({
+  className,
+  variant,
+  ...props
+}: UserProfileProps & CardProps) {
+  const { localization } = useAuth()
+  const { data: session } = useSession()
+
+  const { mutate: updateUser, isPending } = useUpdateUser({
+    onError: (error) => toast.danger(error.error?.message || error.message),
+    onSuccess: () => toast.success(localization.settings.profileUpdatedSuccess)
+  })
+
+  function handleSubmit(e: SyntheticEvent<HTMLFormElement>) {
+    e.preventDefault()
+    const formData = new FormData(e.currentTarget)
+    updateUser({ name: formData.get("name") as string })
+  }
+
+  return (
+    <div>
+      <h2 className={cn("text-sm font-semibold mb-3")}>
+        {localization.settings.profile}
+      </h2>
+
+      <Card className={cn("p-4 gap-4", className)} variant={variant} {...props}>
+        <Card.Content>
+          <Form onSubmit={handleSubmit}>
+            <Fieldset className="w-full gap-4">
+              <ChangeAvatar />
+
+              <Fieldset.Group>
+                <TextField
+                  key={session?.user?.name}
+                  name="name"
+                  defaultValue={session?.user.name}
+                  isDisabled={isPending || !session}
+                >
+                  <Label>{localization.auth.name}</Label>
+
+                  {session ? (
+                    <Input
+                      autoComplete="name"
+                      placeholder={localization.auth.name}
+                      variant={
+                        variant === "transparent" ? "primary" : "secondary"
+                      }
+                    />
+                  ) : (
+                    <Skeleton className="h-10 md:h-9 w-full rounded-xl" />
+                  )}
+
+                  <FieldError />
+                </TextField>
+              </Fieldset.Group>
+
+              <Fieldset.Actions>
+                <Button
+                  type="submit"
+                  isPending={isPending}
+                  isDisabled={!session}
+                  size="sm"
+                >
+                  {isPending && <Spinner color="current" size="sm" />}
+                  {localization.settings.saveChanges}
+                </Button>
+              </Fieldset.Actions>
+            </Fieldset>
+          </Form>
+        </Card.Content>
+      </Card>
+    </div>
+  )
+}

package/src/components/settings/security/active-session.tsx

@@ -0,0 +1,123 @@
+import { useAuth, useRevokeSession, useSession } from "@better-auth-ui/react"
+import {
+  ArrowRightFromSquare,
+  Display,
+  Smartphone,
+  Xmark
+} from "@gravity-ui/icons"
+import { Button, Chip, Spinner, toast } from "@heroui/react"
+import type { Session } from "better-auth"
+import Bowser from "bowser"
+
+function timeAgo(date: Date) {
+  const seconds = Math.floor((Date.now() - date.getTime()) / 1000)
+  const rtf = new Intl.RelativeTimeFormat(undefined, { numeric: "auto" })
+
+  const UNITS: [Intl.RelativeTimeFormatUnit, number][] = [
+    ["year", 31536000],
+    ["month", 2592000],
+    ["week", 604800],
+    ["day", 86400],
+    ["hour", 3600],
+    ["minute", 60],
+    ["second", 1]
+  ]
+
+  for (const [unit, threshold] of UNITS) {
+    if (seconds >= threshold) {
+      return rtf.format(-Math.floor(seconds / threshold), unit)
+    }
+  }
+
+  return rtf.format(0, "second")
+}
+
+export type ActiveSessionProps = {
+  activeSession: Session
+}
+
+/**
+ * Render a single active session row with device info and revoke control.
+ *
+ * Shows the session's browser, OS, IP address, and creation time. The current session is marked
+ * and navigates to sign-out on click, while other sessions can be revoked individually.
+ *
+ * @param session - The session object containing id, token, userAgent, ipAddress, and createdAt
+ * @returns A JSX element containing the active session row
+ */
+export function ActiveSession({ activeSession }: ActiveSessionProps) {
+  const { basePaths, localization, viewPaths, navigate } = useAuth()
+  const { data: session } = useSession({ refetchOnMount: false })
+
+  const { mutate: revokeSession, isPending: isRevoking } = useRevokeSession({
+    onError: (error) => toast.danger(error.error?.message || error.message),
+    onSuccess: () => toast.success(localization.settings.revokeSessionSuccess)
+  })
+
+  const isCurrentSession = activeSession.token === session?.session.token
+  const ua = Bowser.parse(activeSession.userAgent || "")
+  const isMobile =
+    ua.platform.type === "mobile" || ua.platform.type === "tablet"
+
+  return (
+    <div className="flex items-center gap-3">
+      <div className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-surface-secondary">
+        {isMobile ? (
+          <Smartphone className="size-4.5" />
+        ) : (
+          <Display className="size-4.5" />
+        )}
+      </div>
+
+      <div className="flex flex-col min-w-0">
+        <span className="text-sm font-medium truncate">
+          {ua.browser.name || "Unknown Browser"}
+          {ua.os.name ? `, ${ua.os.name}` : ""}
+        </span>
+
+        {isCurrentSession ? (
+          <Chip color="accent" size="sm">
+            {localization.settings.currentSession}
+          </Chip>
+        ) : (
+          activeSession.createdAt && (
+            <span className="text-xs text-muted capitalize">
+              {timeAgo(activeSession.createdAt)}
+            </span>
+          )
+        )}
+      </div>
+
+      <Button
+        className="ml-auto shrink-0"
+        variant="outline"
+        size="sm"
+        onPress={() =>
+          isCurrentSession
+            ? navigate({
+                to: `${basePaths.auth}/${viewPaths.auth.signOut}`
+              })
+            : revokeSession(activeSession)
+        }
+        isPending={isRevoking}
+        aria-label={
+          isCurrentSession
+            ? localization.auth.signOut
+            : localization.settings.revokeSession
+        }
+      >
+        {isRevoking ? (
+          <Spinner color="current" size="sm" />
+        ) : isCurrentSession ? (
+          <ArrowRightFromSquare />
+        ) : (
+          <Xmark />
+        )}
+
+        {isCurrentSession
+          ? localization.auth.signOut
+          : localization.settings.revoke}
+      </Button>
+    </div>
+  )
+}

package/src/components/settings/security/active-sessions.tsx

@@ -0,0 +1,77 @@
+import { useAuth, useListSessions, useSession } from "@better-auth-ui/react"
+import { Card, type CardProps, cn, Skeleton, toast } from "@heroui/react"
+import { ActiveSession } from "./active-session"
+
+export type ActiveSessionsProps = {
+  className?: string
+  variant?: CardProps["variant"]
+}
+
+/**
+ * Render a card listing all active sessions for the current user with revoke controls.
+ *
+ * Shows each session's browser, OS, IP address, and creation time. The current session is marked
+ * and navigates to sign-out on click, while other sessions can be revoked individually.
+ *
+ * @returns A JSX element containing the sessions card
+ */
+export function ActiveSessions({
+  className,
+  variant,
+  ...props
+}: ActiveSessionsProps & CardProps) {
+  const { localization } = useAuth()
+  const { data: session } = useSession()
+
+  const { data: sessions, isPending } = useListSessions({
+    throwOnError: (error) => {
+      if (error.error) toast.danger(error.error.message)
+      return false
+    }
+  })
+
+  const activeSessions = sessions?.toSorted((activeSession) =>
+    activeSession.id === session?.session.id ? -1 : 1
+  )
+
+  return (
+    <div>
+      <h2 className={cn("text-sm font-semibold mb-3")}>
+        {localization.settings.activeSessions}
+      </h2>
+
+      <Card className={cn(className)} variant={variant} {...props}>
+        <Card.Content className="gap-0">
+          {isPending ? (
+            <SessionRowSkeleton />
+          ) : (
+            activeSessions?.map((activeSession, index) => (
+              <div key={activeSession.id}>
+                {index > 0 && (
+                  <div className="border-b border-dashed -mx-4 md:-mx-6 my-4" />
+                )}
+
+                <ActiveSession activeSession={activeSession} />
+              </div>
+            ))
+          )}
+        </Card.Content>
+      </Card>
+    </div>
+  )
+}
+
+function SessionRowSkeleton() {
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center gap-3">
+        <Skeleton className="size-10 rounded-xl" />
+
+        <div className="flex flex-col gap-1">
+          <Skeleton className="h-4 w-32 rounded-lg" />
+          <Skeleton className="h-3 w-24 rounded-lg" />
+        </div>
+      </div>
+    </div>
+  )
+}