Multi Session

1"use client"
2 
3import {
4  type MultiSessionAuthClient,
5  useAuth,
6  useAuthPlugin,
7  useListDeviceSessions,
8  useSession
9} from "@better-auth-ui/react"
10import { Fragment } from "react"
11 
12import { Card, CardContent } from "@/components/ui/card"
13import { ItemGroup, ItemSeparator } from "@/components/ui/item"
14import { multiSessionPlugin } from "@/lib/auth/multi-session-plugin"
15import { cn } from "@/lib/utils"
16import { ManageAccount } from "./manage-account"
17 
18export type ManageAccountsProps = {
19  className?: string
20}
21 
22/**
23 * Render a card that lists and manages all device sessions for the current user.
24 *
25 * Shows each session with user information and actions to switch to or revoke a session.
26 * When device session data is loading, a pending placeholder row is displayed.
27 *
28 * @returns A JSX element containing the accounts management card
29 */
30export function ManageAccounts({ className }: ManageAccountsProps) {
31  const { authClient } = useAuth()
32  const { localization: multiSessionLocalization } =
33    useAuthPlugin(multiSessionPlugin)
34  const { data: session } = useSession(authClient)
35 
36  const { data: deviceSessions, isPending } = useListDeviceSessions(
37    authClient as MultiSessionAuthClient
38  )
39 
40  const otherSessions = deviceSessions?.filter(
41    (deviceSession) => deviceSession.session.id !== session?.session.id
42  )
43 
44  const allRows = [
45    {
46      key: session?.session.id ?? "current",
47      deviceSession: !isPending ? session : null,
48      isPending
49    },
50    ...(otherSessions?.map((deviceSession) => ({
51      key: deviceSession.session.id,
52      deviceSession,
53      isPending: false
54    })) ?? [])
55  ]
56 
57  return (
58    <div>
59      <h2 className="text-sm font-semibold mb-3">
60        {multiSessionLocalization.manageAccounts}
61      </h2>
62 
63      <Card className={cn("p-0", className)}>
64        <CardContent className="p-0">
65          <ItemGroup className="gap-0">
66            {allRows.map((row, index) => (
67              <Fragment key={row.key}>
68                {index > 0 && <ItemSeparator />}
69                <ManageAccount
70                  deviceSession={row.deviceSession}
71                  isPending={row.isPending}
72                />
73              </Fragment>
74            ))}
75          </ItemGroup>
76        </CardContent>
77      </Card>
78    </div>
79  )
80}