"use client"; import { AlertTriangle, Globe, Loader2, LogOut, Monitor, Smartphone, Tablet, } from "lucide-react"; import { useCallback, useState } from "react"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Separator } from "@/components/ui/separator"; import { cn } from "@/lib/utils"; export type DeviceType = "desktop" | "mobile" | "tablet" | "unknown"; export interface Session { id: string; deviceName: string; deviceType: DeviceType; browser?: string; os?: string; ipAddress?: string; location?: string; lastActive: Date; isCurrent: boolean; } export interface AuthSessionManagerProps { sessions?: Session[]; onRevoke?: (sessionId: string) => void; onRevokeAll?: () => void; className?: string; isLoading?: boolean; errors?: { general?: string; }; } const DEVICE_ICONS: Record< DeviceType, React.ComponentType<{ className?: string }> > = { desktop: Monitor, mobile: Smartphone, tablet: Tablet, unknown: Globe, }; function formatDate(date: Date): string { const year = date.getFullYear(); const month = date.toLocaleString("en-US", { month: "short" }); const day = date.getDate(); return `${month} ${day}, ${year}`; } function formatLastActive(date: Date): string { const now = new Date(); const diff = now.getTime() - date.getTime(); const minutes = Math.floor(diff / 60_000); const hours = Math.floor(diff / 3_600_000); const days = Math.floor(diff / 86_400_000); if (minutes < 1) return "Just now"; if (minutes < 60) return `${minutes}m ago`; if (hours < 24) return `${hours}h ago`; if (days === 1) return "Yesterday"; if (days < 7) return `${days}d ago`; return formatDate(date); } function SessionItem({ session, onRevoke, isLoading, }: { session: Session; onRevoke?: (sessionId: string) => void; isLoading?: boolean; }) { const DeviceIcon = DEVICE_ICONS[session.deviceType] || DEVICE_ICONS.unknown; return (

{session.deviceName}

{session.isCurrent && ( Current session )}

{session.browser && ( <> {session.browser} {session.os && } )} {session.os && {session.os}} {(session.browser || session.os) && session.location && ( )} {session.location && {session.location}}

Last active: {formatLastActive(session.lastActive)} {session.ipAddress && ( <> IP: {session.ipAddress} )}

{!session.isCurrent && onRevoke && ( Revoke session? This will sign out the session on {session.deviceName}. The user will need to sign in again to access their account from this device. Cancel onRevoke(session.id)} > Revoke session )}

); } export default function AuthSessionManager({ sessions = [], onRevoke, onRevokeAll, className, isLoading = false, errors, }: AuthSessionManagerProps) { const [revokingAll, setRevokingAll] = useState(false); const handleRevokeAll = useCallback(async () => { setRevokingAll(true); try { await onRevokeAll?.(); } finally { setRevokingAll(false); } }, [onRevokeAll]); const otherSessions = sessions.filter((s) => !s.isCurrent); const currentSession = sessions.find((s) => s.isCurrent); return (

Active sessions Manage devices that are signed in to your account

{otherSessions.length > 0 && onRevokeAll && ( Revoke all other sessions? This will sign out all other devices except this one. You will remain signed in on this device, but all other active sessions will be terminated. Cancel Revoke all sessions )}

{errors?.general && (

{errors.general}

)} {sessions.length === 0 ? (

No active sessions found

) : (

{currentSession && ( <>

Current session

{otherSessions.length > 0 && } )} {otherSessions.length > 0 && (

Other active sessions ({otherSessions.length})

{otherSessions.map((session) => ( ))}

)}

); }

Current session

MacBook Pro

Other active sessions (1)

iPhone 15

Example Usage