ActiveSessions

The devices signed in to an account, with device type, IP, place and last activity, the current device first, and sign out per device or for every other device behind a confirmation.

PreviewOpen ↗

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.

Install

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 use

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

When not to use

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

Import

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

Quick start

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} />;
}

Anatomy

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.

API

ActiveSessions: every div prop except children, plus:

Prop	Type	Default	Description
`sessions`	`readonly ActiveSession[]`	required	Order does not matter; the current one is shown first.
`onRevoke`	`(id) => Promise<void \| { error? }>`		Shows "Sign out" on other devices. Return `{ error }` to show it.
`onRevokeOthers`	`() => Promise<void \| { error? }>`		Shows "Sign out other devices" when there are others.
`labels`	`Partial<ActiveSessionsLabels>`		Override any string.

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