"use client"; import { AlertTriangle, Globe, Loader2, LogOut, Monitor, Smartphone, Tablet, } from "lucide-react"; import { useCallback, useState } from "react"; import { cn } from "@/lib/utils"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/registry/new-york/ui/alert-dialog"; import { Badge } from "@/registry/new-york/ui/badge"; import { Button } from "@/registry/new-york/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/registry/new-york/ui/card"; import { Separator } from "@/registry/new-york/ui/separator"; 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); } interface ErrorAlertProps { message: string; } function ErrorAlert({ message }: ErrorAlertProps) { return (

); } interface EmptyStateProps { message?: string; } function EmptyState({ message = "No active sessions found" }: EmptyStateProps) { return (

{message}

); } interface RevokeSessionDialogProps { deviceName: string; isLoading: boolean; onRevoke: (sessionId: string) => void; sessionId: string; } function RevokeSessionDialog({ deviceName, isLoading, onRevoke, sessionId, }: RevokeSessionDialogProps) { return ( Revoke session? This will sign out the session on {deviceName}. The user will need to sign in again to access their account from this device. Cancel onRevoke(sessionId)} > Revoke session ); } interface SessionItemProps { isLoading: boolean; onRevoke?: (sessionId: string) => void; session: Session; } function SessionItem({ session, onRevoke, isLoading }: SessionItemProps) { 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 && ( )}

); } interface RevokeAllDialogProps { isLoading: boolean; onRevokeAll: () => void; revokingAll: boolean; } function RevokeAllDialog({ isLoading, onRevokeAll, revokingAll, }: RevokeAllDialogProps) { return ( 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 ); } interface CurrentSessionSectionProps { isLoading: boolean; onRevoke?: (sessionId: string) => void; session: Session; } function CurrentSessionSection({ session, onRevoke, isLoading, }: CurrentSessionSectionProps) { return (

Current session

); } interface OtherSessionsSectionProps { isLoading: boolean; onRevoke?: (sessionId: string) => void; sessions: Session[]; } function OtherSessionsSection({ sessions, onRevoke, isLoading, }: OtherSessionsSectionProps) { if (sessions.length === 0) return null; return (

Other active sessions ({sessions.length})

{sessions.map((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 && ( )}

{errors?.general && } {sessions.length === 0 ? ( ) : (

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

)}

); }

Current session

MacBook Pro

Other active sessions (1)

iPhone 15

Example Usage

Current session

MacBook Pro

Other active sessions (1)

iPhone 15