PasskeyManager
Admin panel for managing passkeys (WebAuthn credentials). Allows registering new passkeys and deleting existing ones.
01 Usage
Basic
Passkeys
<script lang="ts">
import { PasskeyManager } from '@urbicon-ui/auth';
</script>
<PasskeyManager apiPath="/api/auth/passkey" />
02 Accessibility
Every delete button says what it deletes
The visible text is just "Delete", but each button carries aria-label with the passkey's name appended. A reader
tabbing the list hears "Delete — MacBook Pro" rather than four identical buttons, and because
the accessible name still begins with the visible word, voice control ("click Delete") keeps
working.
Errors announce in place
WebAuthn failures — a cancelled prompt, an unsupported authenticator, a rejected
registration — land in the always-mounted aria-live="polite" region above the list, so the outcome
of a flow that happened inside the browser's own credential UI is reported back in the page.
The list is a list
Registered passkeys render as <ul> / <li> with the name and the creation/last-used
dates as text. The "Add passkey" button is disabled with aria-busy while registration runs.
The credential prompt is the browser’s
Once registration starts, the platform takes over with its own dialog for Touch ID, Windows Hello or a security key. Its accessibility is the operating system's, not this component's — the component's job is to report what came back, which it does through the live region.
03 API Reference
Prop | Type | Default | Description | |
|---|---|---|---|---|
apiPath | string | '/api/auth/passkey' | API base path for passkey operations. | |
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', string>> | — | Per-slot class overrides. See component source for available slot keys. | |
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 | |
|---|---|---|---|---|---|
PasskeyManagerProps | 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 { PasskeyManager } from '@urbicon-ui/auth';