AccountSettingsbeta

Self-service account panel: change name, email and password, and delete the account. Each section talks to the account handlers; mutations except the profile rename are password re-auth gated.

01 Usage

Basic

The live preview runs against a mocked demo API (injected via the fetcher prop) — the profile rename succeeds, deleting explains that it needs a real backend. The snippet shows the production setup, where user comes from your auth store or locals.user.

Account settings

Delete account

This permanently deletes your account and all associated data. This cannot be undone.

Current password

<script lang="ts">
  import { AccountSettings } from '@urbicon-ui/auth';
  import type { AuthUser } from '@urbicon-ui/auth';

  // `user` typically comes from your auth store or `locals.user`.
  let { user }: { user: AuthUser | null } = $props();
</script>

<AccountSettings {user} apiPath="/api/auth/account" />

02 Accessibility

One live region per block, not one per page

Profile, email and password each own a separate aria-live="polite" region inside their own <form>, and account deletion has a fourth in its section. With three save buttons on one page, a single shared region would report success with no way to tell which of the three it meant.

The danger zone is a named landmark

Account deletion sits in a <section> with aria-labelledby pointing at its own heading, so it is reachable and distinguishable from the three ordinary save forms above it. The button also stays disabled until the password is typed, so it cannot be triggered by a stray keypress while browsing the page.

The confirm step is a real modal dialog

Deletion routes through blocks' ConfirmDialog, which renders aria-modal="true", takes its accessible name from the dialog title, traps Tab inside itself, and returns focus to the trigger on close.

Autofill hints, and no focus movement

Every password field is autoComplete="current-password" except the new one (new-password), and the name and email fields are hinted too. What the page does not do is move focus: after a save, focus stays on the button and the result is announced by that form's live region.

03 API Reference

10 props 1 required

Prop	Type	Default	Description
`user` required	`AuthUser \| null`	—	The current authenticated user — its `name` pre-fills the profile field and its `email` is shown as the current address. Pass `locals.user` / your auth store's user. While `null` the panel renders nothing.
`apiPath`	`string`	`'/api/auth/account'`	API base path for the account 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.
`onDeleted`	`() => void`	—	Called after the account has been deleted (e.g. redirect to a goodbye page).
`onProfileUpdated`	`(user: AuthUser) => void`	—	Called with the refreshed user after a successful profile change (update your store here).
`slotClasses`	`Partial<Record<'root' \| 'title' \| 'section' \| 'sectionTitle' \| 'field' \| 'submit' \| 'danger', 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.

6 types

Only referenced

Name	Kind	Category	Used by	Description
AccountSettingsProps	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.
AuthUser	interface	helper	1	—
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 { AccountSettings } from '@urbicon-ui/auth';

llm.txt