Active Sessions

1"use client"
2 
3import { useAuth, useListSessions, useSession } from "@better-auth-ui/react"
4import { Fragment } from "react"
5import { Card, CardContent } from "@/components/ui/card"
6import {
7  Item,
8  ItemContent,
9  ItemGroup,
10  ItemMedia,
11  ItemSeparator
12} from "@/components/ui/item"
13import { Skeleton } from "@/components/ui/skeleton"
14import { cn } from "@/lib/utils"
15import { ActiveSession } from "./active-session"
16 
17export type ActiveSessionsProps = {
18  className?: string
19}
20 
21/**
22 * Render a card listing all active sessions for the current user with revoke controls.
23 *
24 * Shows each session's browser, OS, IP address, and creation time. The current session is marked
25 * and navigates to sign-out on click, while other sessions can be revoked individually.
26 *
27 * @returns A JSX element containing the sessions card
28 */
29export function ActiveSessions({ className }: ActiveSessionsProps) {
30  const { authClient, localization } = useAuth()
31  const { data: session } = useSession(authClient)
32 
33  const { data: sessions, isPending } = useListSessions(authClient)
34 
35  const activeSessions = [...(sessions ?? [])].sort((activeSession) =>
36    activeSession.id === session?.session.id ? -1 : 1
37  )
38 
39  return (
40    <div>
41      <h2 className="text-sm font-semibold mb-3">
42        {localization.settings.activeSessions}
43      </h2>
44 
45      <Card className={cn("p-0", className)}>
46        <CardContent className="p-0">
47          {isPending ? (
48            <SessionRowSkeleton />
49          ) : (
50            <ItemGroup className="gap-0">
51              {activeSessions?.map((activeSession, index) => (
52                <Fragment key={activeSession.id}>
53                  {index > 0 && <ItemSeparator />}
54                  <ActiveSession activeSession={activeSession} />
55                </Fragment>
56              ))}
57            </ItemGroup>
58          )}
59        </CardContent>
60      </Card>
61    </div>
62  )
63}
64 
65function SessionRowSkeleton() {
66  return (
67    <Item>
68      <ItemMedia>
69        <Skeleton className="size-10 rounded-md" />
70      </ItemMedia>
71      <ItemContent>
72        <Skeleton className="h-4 w-20" />
73        <Skeleton className="h-3 w-32" />
74      </ItemContent>
75    </Item>
76  )
77}