Device List
Devices trusted to skip the second factor, and when that trust lapses. A grant that expires in three days is worth seeing before you are asked for a code at an airport.
src/components/ui/device-list.tsxAbout
From the component's own source, where it was written.
Devices trusted to skip a second factor.
Distinct from SessionList: a session is a login that can be signed out, a trusted device is a standing exemption from 2FA that survives sign-out. They are revoked separately and confusing them is how someone "signs out everywhere" and is still not protected.
Trust expiry is shown, because these grants are time-boxed and a device listed as trusted with no end date reads as permanent.
Install
npx astralyx-ui add device-list
Usage
import { DeviceList } from '@/components/ui/device-list'
<DeviceList devices={devices} onRevoke={revoke} />Composer
Change the props and the source below follows.
Ada's MacBook ProThis device
macOS 27seen trusted until
iPhone 17
iOS 27seen trusted until
Studio iMacTrust expired
macOS 26seen expired
Revoking trust asks for a second factor next time. It does not sign the device out — do that from active sessions.
<DeviceList devices={devices} onRevoke={revoke} />Examples
Trusted devices
<DeviceList devices={devices} now={now} onRevoke={revoke} />Nothing trusted yet
<DeviceList devices={[]} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
DeviceList
Devices trusted to skip a second factor.
Extends ComponentProps<'div'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | 'Trusted devices' | — |
| devices | TrustedDevice[] | required | { id, name, kind, os?, addedAt?, lastSeen?, trustedUntil?, current? }. |
| onRevoke | (id: string) => void | — | Omit to render a read-only list. |
| now | Date | — | Reference for every relative time, so snapshots do not drift. |
| locale | string | 'en-GB' | — |
| emptyLabel | ReactNode | 'No trusted devices' | — |
| currentLabel | ReactNode | 'This device' | Badge on the device being used right now. |
| expiredLabel | ReactNode | 'Trust expired' | Badge on a device whose trust grant has lapsed. |
| revokeLabel | ReactNode | 'Revoke' | — |
| seenLabel | ReactNode | 'seen' | Precedes the last-seen time. |
| trustedUntilLabel | ReactNode | 'trusted until' | Precedes the expiry date while the grant still holds. |
| expiredPrefix | ReactNode | 'expired' | Precedes the expiry date once it has lapsed. |
| footer | ReactNode | 'Revoking trust asks for a second factor next time. It does not sign the device out — do that from active sessions.' | Explanatory note beneath the list. Pass null to drop it. |
Types
TrustedDevice
| Field | Type | Description |
|---|---|---|
| id | string | — |
| name | ReactNode | — |
| kind | 'desktop' | 'mobile' | 'tablet' | — |
| os? | ReactNode | — |
| addedAt? | Date | — |
| lastSeen? | Date | — |
| trustedUntil? | Date | Expiry of the trust grant. Shown as a countdown while near, and marked expired once past — an expired grant is not a revoked device. |
| current? | boolean | — |