Active sessions and devices: this device first, browser, system, place and last activity, sign out one session or all others behind a confirmation, busy and error states. From the Auth & Access Kit → ai.osagi.finance/kits/auth-access
"use client";
import { useCallback, useMemo } from "react";
import {
type DeviceSession,
SessionsList,
} from "@/components/ui/sessions-list";
const settings = {
failRevoke: false,
latencyMs: 500,
readOnly: false,
};
const MINUTE = 60_000;
const wait = (ms: number) =>
new Promise<void>((resolve) => {
setTimeout(resolve, ms);
});
/** Four sessions, this device first: sign one out or all the others; `failRevoke` shows a failure. */
export default function Demo(props: Partial<typeof settings>) {
const { failRevoke, latencyMs, readOnly } = { ...settings, ...props };
const sessions = useMemo<DeviceSession[]>(() => {
const now = Date.now();
const ago = (minutes: number) =>
new Date(now - minutes * MINUTE).toISOString();
return [
{
browser: "Safari",
device: "phone",
id: "s-phone",
ip: "198.51.100.24",
lastActive: ago(42),
location: "Lisbon, Portugal",
os: "iOS 19",
},
{
browser: "Chrome",
current: true,
device: "desktop",
id: "s-this",
ip: "203.0.113.7",
lastActive: ago(0),
location: "Lisbon, Portugal",
os: "macOS",
},
{
browser: "Firefox",
device: "desktop",
id: "s-office",
ip: "192.0.2.15",
lastActive: ago(60 * 26),
location: "Berlin, Germany",
os: "Windows 11",
},
{
browser: "Chrome",
device: "tablet",
id: "s-tablet",
lastActive: ago(60 * 24 * 6),
location: "Porto, Portugal",
os: "Android 16",
},
];
}, []);
const fake = useCallback(async () => {
await wait(latencyMs);
if (failRevoke) {
throw new Error(
"The server did not answer. Nothing was signed out: try again."
);
}
}, [failRevoke, latencyMs]);
return (
<div className="flex min-h-[520px] w-full items-start justify-center bg-background p-6">
<div className="w-full max-w-2xl">
<SessionsList
onRevoke={readOnly ? undefined : fake}
onRevokeOthers={readOnly ? undefined : fake}
sessions={sessions}
/>
</div>
</div>
);
}