Session List
Active sign-ins, with the current one pinned and unrevokable from here. Signing yourself out of the session you are using is a footgun, so it is simply not offered.
src/components/ui/session-list.tsxAbout
From the component's own source, where it was written.
Active sessions, revocable.
The current session is marked and cannot be revoked from this list — revoking it logs you out mid-action, which reads as a crash rather than a choice. "Sign out everywhere else" is the safe form of that intent and is offered separately.
Location is labelled as approximate. It comes from IP geolocation, which is routinely a different city and sometimes a different country; presenting it as fact makes people hunt for a breach that is actually a VPN endpoint.
Install
npx astralyx-ui add session-list
Usage
import { SessionList } from '@/components/ui/session-list'
<SessionList sessions={sessions} onRevoke={revoke} onRevokeOthers={revokeAll} />Composer
Change the props and the source below follows.
Chrome 141on macOS 27This device
London, UK (approx.)81.2.69.142active
Safarion iOS 27
London, UK (approx.)81.2.69.142active
Firefox 139on Windows 11Unusual
Frankfurt, DE (approx.)45.83.220.11active
Chrome 138on Android 16
Manchester, UK (approx.)92.40.11.7active
<SessionList sessions={sessions} onRevoke={revoke} onRevokeOthers={revokeAll} />Examples
One session flagged as suspicious
<SessionList sessions={sessions} now={now} onRevoke={revoke} onRevokeOthers={revokeOthers} />Only this device
<SessionList sessions={[current]} now={now} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
SessionList
Extends ComponentProps<'div'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | 'Active sessions' | — |
| sessions | Session[] | required | { id, device, browser?, os?, ip?, location?, lastActive?, current?, suspicious? }. |
| onRevoke | (id: string) => void | — | — |
| onRevokeOthers | () => void | — | The "sign out everywhere" action. This is what someone reaching this screen after a scare actually wants. |
| now | Date | — | — |
| locale | string | 'en-GB' | — |
| currentLabel | ReactNode | 'This device' | — |
| suspiciousLabel | ReactNode | 'Unusual' | — |
| unknownBrowserLabel | ReactNode | 'Unknown browser' | Stand-in when a session reports no browser. |
| onLabel | ReactNode | 'on' | Joins browser and OS — "Chrome 141 on macOS". |
| approxLabel | ReactNode | '(approx.)' | Qualifies the IP-derived location. |
| activeLabel | ReactNode | 'active' | Precedes the last-active time. |
| signOutLabel | ReactNode | 'Sign out' | — |
| signOutOthersLabel | (count: number) => ReactNode | DEFAULT_SIGN_OUT_OTHERS_LABEL | Takes the count, so the plural is yours to form. |
| confirmNote | ReactNode | 'This device will need to sign in again.' | — |
| confirmLabel | ReactNode | 'Sign out' | — |
| cancelLabel | ReactNode | 'Cancel' | — |
Types
Session
Active sessions, revocable.
| Field | Type | Description |
|---|---|---|
| id | string | — |
| device | 'desktop' | 'mobile' | 'tablet' | 'unknown' | — |
| browser? | ReactNode | — |
| os? | ReactNode | — |
| ip? | string | — |
| location? | ReactNode | Labelled as approximate. IP geolocation is routinely a hundred miles out, and presenting it as fact leads people to dismiss a real intrusion. |
| lastActive? | Date | — |
| createdAt? | Date | — |
| current? | boolean | Pins the session to the top and hides its revoke control. |
| suspicious? | boolean | Your judgement, not the component's — it renders the marker, it does not decide what is suspicious. |