AccountSettingsbeta

Self-service account panel to change name, email and password, and delete the account. Every change except the profile rename asks for the current password first.

01 Usage

Basic

The live preview runs against a mocked demo API (injected via the fetcher prop): the profile rename succeeds, and 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

Profile, email and password each have their own pair of regions inside their own <form> — an assertive role="alert" for the refusal and a polite role="status" for the confirmation — and account deletion has a fourth pair in its section. With three save buttons on one page, one pair per form is what lets a reader tell which save just succeeded; "Profile updated." is announced politely, so it waits for whatever the reader is saying.

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 delete button stays disabled until the password is typed, so enabling it takes a deliberate entry.

The confirm step is a modal dialog

Deletion routes through blocks' ConfirmDialog, which renders aria-modal="true", takes its accessible name from the dialog title, keeps Tab within the dialog, and moves focus back to the trigger on close.

Autofill hints, and focus stays put

Every password field is autoComplete="current-password" except the new one (new-password), and the name and email fields are hinted too. After a save, focus stays on the button and that form's live region announces the result.

03 API Reference

14 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` nothing renders.
`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).
`passwordPolicy`	`PasswordPolicy`	—	The password policy the new-password field gates against, when you already have it server-side (`resolvePasswordPolicy(config.password)`). Supplying it skips the `policyPath` request.
`policyPath`	`string \| null`	`'/api/auth/password-policy'`	Endpoint serving `createPasswordPolicyHandler`, read once on mount so the checklist and the submit gate match what the server enforces. `null` disables the request and falls back to the package defaults (min 8, no character classes).
`preset`	`string`	—	Apply a named preset registered via `<BlocksProvider presets={{ AccountSettings: { … } }}>`. 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.
`showRequirements`	`boolean`	`true`	Show the real-time password requirements checklist under the new password.
`slotClasses`	`Partial<Record<'root' \| 'title' \| 'section' \| 'sectionTitle' \| 'field' \| 'requirements' \| 'submit' \| 'danger', 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.

7 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 bundle registered for the active locale — English unless `registerAuthLocale` ran for it — so overriding a single string never silently blanks the rest.
PasswordPolicy	interface	helper	1	The password policy in force, with every default already applied — what `validatePasswordStrength` measures a password against, and what `createPasswordPolicyHandler` ships to the browser so the client-side gate cannot disagree with the server. Deliberately NOT `PasswordConfig`: that type also carries `pbkdf2Iterations`, a hashing work factor that is nobody's business on the wire. This shape is the projection, and it is the only thing the endpoint serializes.
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 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 { AccountSettings } from '@urbicon-ui/auth';

llm.txt