ActiveSessions

Code

import { ActiveSessions, type ActiveSession } from "@fadymondy/nasaq/web";declare const sessions: ActiveSession[];declare const api: { revoke(id: string): Promise<void>; revokeOthers(): Promise<void> };export function Sessions() {  return <ActiveSessions sessions={sessions} onRevoke={api.revoke} onRevokeOthers={api.revokeOthers} />;}

Security · beta

Live examples and controls: ActiveSessions in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/active-sessions.json

The "where you're signed in" list of an account's security page. It only draws the list; onRevoke and onRevokeOthers call your API.

When to useCopy Anchor Link

• The security page, next to PasskeyList and TwoFactorSetup.
• An admin view of one user's sessions.

When not to useCopy Anchor Link

• API tokens or connected apps: those are not device sessions.

ImportCopy Anchor Link

import { ActiveSessions } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { ActiveSessions, type ActiveSession } from "@fadymondy/nasaq/web";

declare const sessions: ActiveSession[];
declare const api: { revoke(id: string): Promise<void>; revokeOthers(): Promise<void> };

export function Sessions() {
  return <ActiveSessions sessions={sessions} onRevoke={api.revoke} onRevokeOthers={api.revokeOthers} />;
}

AnatomyCopy Anchor Link

ActiveSessions                    data-slot="active-sessions"
├─ Card header                    title, description, "Sign out other devices"
├─ Alert                          an error from a revoke
└─ ul  aria-label
   └─ li                          data-slot="active-session"
      ├─ device icon              desktop, mobile, tablet, other
      ├─ device · "This device" badge
      ├─ IP · place · Active <relative time>
      └─ Sign out                 ConfirmButton (not on the current device)

With only the current session, an empty state says no other device is signed in.

APICopy Anchor Link

ActiveSessions: every div prop except children, plus:

ActiveSession: { id, device?, kind?: "desktop" | "mobile" | "tablet" | "other", ip?, location?, lastActiveAt, createdAt?, current? }. Dates are Date, number or ISO string.

AccessibilityCopy Anchor Link

• The list is a labelled ul; each sign-out button names the device.
• Sign-out opens an AlertDialog; focus starts on Cancel.
• Times are <time> elements with the full date in a title.

RTL & i18nCopy Anchor Link

• English and Arabic strings follow the Nasaq locale; dates use the locale with Latin digits. IPs stay left to right.

Styling & tokensCopy Anchor Link

• Card, Badge, Alert, Button and --nq-* tokens. Target [data-slot="active-session"].

Do / Don'tCopy Anchor Link

• Do mark the current session on the server, not by guessing in the browser.
• Do end the session on the server before resolving onRevoke.
• Don't show the full user agent; a short "Chrome on macOS" reads better.

RelatedCopy Anchor Link

• PasskeyList
• TwoFactorSetup
• AccountSettings

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-security-active-sessions--docs