ResetPasswordPage

A form to set a new password from a reset link, with a confirmation field.

01 Usage

Basic

Reset password

<script lang="ts">
  import { ResetPasswordPage } from '@urbicon-ui/auth';
  import { page } from '$app/state';

  // Token from the reset link, e.g. /auth/reset-password?token=...
  const token = $derived(page.url.searchParams.get('token') ?? '');
</script>

<ResetPasswordPage {token} />

02 Accessibility

Both failures land in the same place

The mismatch check runs in the browser before anything is sent, and it writes to the same page-level role="alert" region as the server's invalid-token error. One region means a reader learns every way this page can fail from one spot, instead of having to hunt for which of two messages appeared. The confirmation after a successful reset uses the polite role="status" region beside it, so a success never interrupts.

A mismatch is reported at the page level

A confirm-password mismatch shows as page-level text rather than an error on either field, so the reader hears that the passwords differ, not which field to fix. With exactly two fields that is easy to recover from.

Autofill hints

Both fields are autoComplete="new-password", so a password manager offers to generate and then store the new secret rather than refilling the old one.

03 API Reference

16 props 1 required

Prop	Type	Default	Description
`token` required	`string`	—	Reset token from URL query parameter.
`apiPath`	`string`	`'/api/auth/reset-password'`	API endpoint for the reset request.
`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.
`footer`	`Snippet`	—	Content rendered below the form, above links.
`header`	`Snippet`	—	Content rendered between the heading and the form.
`links`	`Snippet`	—	Replaces the link area below the form.
`loginUrl`	`string`	`'/auth/login'`	URL for the login page link.
`passwordPolicy`	`PasswordPolicy`	—	The password policy to gate against, when you already have it server-side (`resolvePasswordPolicy(config.password)` in a `+page.server.ts` load). 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={{ ResetPasswordPage: { … } }}>`. 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.
`slotClasses`	`AuthPageSlotClasses`	—	Per-slot class overrides. Keys: `root`, `card`, `title`, `form`, `field`, `requirements`, `submit`, `error`, `success`, `links`.
`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
ResetPasswordPageProps	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.
CsrfClientOptions	interface	helper	1	—
AuthPageSlotClasses	interface	helper	1	Per-slot CSS class overrides for auth page components (LoginPage, RegisterPage, etc.). Each key targets a specific visual area of the page. Only the slots you override are affected.
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 { ResetPasswordPage } from '@urbicon-ui/auth';

llm.txt