SessionManager
Lists the user's active sessions (refresh-token families) with a device label, last-active time and a 'this device' badge, and lets them sign out one session or all other devices. Requires refresh-token rotation on the server.
01 Usage
Basic
config.refreshToken rotation on the server; without it the component reports itself unavailable.Active sessions
<script lang="ts">
import { SessionManager } from '@urbicon-ui/auth';
</script>
<SessionManager apiPath="/api/auth/sessions" />
02 Accessibility
Sessions are a list
The devices render as a <ul> of <li>, so a screen reader announces how many
sessions exist before reading them and the user can jump between them with list
navigation.
The current device is marked with a word, not a colour
The current session is marked with a Badge containing
localized text. Nothing on this page relies on colour alone to distinguish the session you are
sitting at from the ones you are about to revoke — which matters because that distinction is
the difference between signing out a stranger and signing out yourself.
Only the row you acted on goes busy
Revoking one session sets loading and disabled on that row's button alone, so the rest of
the list stays operable and blocks' Button reports aria-busy only where something is actually happening.
The per-row buttons share one accessible name
Each row's sign-out button has no aria-label, so
its accessible name is just the localized "Sign out" — five sessions produce five
identically named buttons, and context has to come from list navigation. PasskeyManager
and InvitationManager solve the same problem by appending the row's subject to the label;
this list does not yet.
03 API Reference
Prop | Type | Default | Description | |
|---|---|---|---|---|
apiPath | string | '/api/auth/sessions' | API base path for the session endpoints. | |
class | string | — | Extra classes on the root element. | |
csrf | CsrfClientOptions | — | CSRF cookie/header names — only needed when the server overrides the defaults via config.csrf. Mutating requests echo the token automatically. | |
fetcher | typeof globalThis.fetch | — | Custom fetch implementation for all API calls. Defaults to the global fetch. Useful for mock backends in demos/tests or custom retry/auth layers. | |
slotClasses | Partial<Record<'root' | 'title' | 'error' | 'list' | 'item' | 'empty' | 'badge', string>> | — | Per-slot class overrides. | |
t | PartialAuthLocale | — | Locale overrides, deep-merged over the active built-in bundle (resolved from the i18n context). Pass any subset — a single string or a whole tree. | |
unstyled | boolean | — | Strip all default styling. |
04 Types
Local type definitions used by this component.
Name | Kind | Category | Used by | Description | |
|---|---|---|---|---|---|
SessionManagerProps | interface | props | 0 | — | |
PartialAuthLocale | type | helper | 1 | Consumer-facing locale input: any subset of AuthLocale. Components
accept this as their t prop and deep-merge it over the active built-in
bundle, so overriding a single string never silently blanks the rest. | |
CsrfClientOptions | interface | helper | 1 | — | |
DeepPartial | type | helper | 0 | Recursive partial: every branch and leaf becomes optional. | |
AuthLocale | interface | helper | 0 | The complete auth locale bundle. Every key is required: the bundles this
package ships (en, de) satisfy the full shape, and consumer overrides
enter as PartialAuthLocale — deep-merged over the active built-in
bundle by mergeAuthLocale — so component markup reads keys directly,
without per-key ?? '…' fallback literals (review R19).
Placeholder convention: dynamic values use **single-brace** tokens
({n}, {name}, {email}) that the consuming component substitutes itself
via String.replace('{token}', value). There is deliberately **no**
{{…}} runtime interpolator in this package — the key-based translator twin
(authT/at) was removed in R21 — so {{…}} here would render verbatim. |
05 Installation
Import
import { SessionManager } from '@urbicon-ui/auth';