SessionManagerbeta

Lists the user's active sessions, one row per signed-in device 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

The live preview runs against a mocked demo API (injected via the fetcher prop): signing a session out updates the list. The snippet shows the production setup. Needs config.refreshToken rotation on the server; without it the list renders an unavailable message instead.

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

The current session carries a Badge with localized text, not colour alone, so the session you are sitting at stays distinguishable from the ones you might revoke for a reader who cannot rely on colour.

Only the row you acted on goes busy

During a revoke, only that row's button carries loading and disabled, so the rest of the list stays operable and blocks' Button exposes aria-busy on the row that is actually working.

Every sign-out button names its device

The visible text is just "Sign out", but each button carries an aria-label with the row's device description appended — "Sign out — Chrome · macOS". A reader tabbing the list hears which session each button ends instead of several identically named buttons, and because the name still begins with the visible word, voice control ("click Sign out") keeps working. The device string is the same heuristic the row shows, so an unrecognised user agent names the button "Sign out — Unknown device" rather than inventing one.

03 API Reference

8 props

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.
`preset`	`string`	—	Apply a named preset registered via `<BlocksProvider presets={{ SessionManager: { … } }}>`. Resolves after the provider defaults and before this instance's own `slotClasses`, so a project-wide look lives in one place instead of being repeated at every usage site.
`slotClasses`	`Partial<Record<'root' \| 'title' \| 'error' \| 'list' \| 'item' \| 'empty' \| 'badge', string>>`	—	Per-slot class overrides.
`t`	`PartialAuthLocale`	—	Locale overrides, deep-merged over the bundle registered for the active locale — English unless `registerAuthLocale` ran for it. Pass any subset, from a single string to a whole tree.
`unstyled`	`boolean`	—	Strip all default styling.

04 Types

Local type definitions used by this component.

5 types

Only referenced

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 bundle registered for the active locale — English unless `registerAuthLocale` ran for it — 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 by `mergeAuthLocale` over the bundle registered for the active locale — English unless `registerAuthLocale` ran for it — so component markup reads keys directly, without per-key `?? '…'` fallback literals. 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, so `{{…}}` here would render verbatim.

05 Installation

Import

import { SessionManager } from '@urbicon-ui/auth';

llm.txt