ResetPasswordPage

Pre-built reset-password page with password confirmation.

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 aria-live="polite" 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 mismatch is not tied to either field

Unlike RegisterPage — which passes the mismatch to the field as error and gets aria-invalid — this page reports it only as page-level text. The reader hears that the passwords differ, not which field to fix. With exactly two fields that is recoverable, but it is a real difference between the two pages.

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

12 props 1 required

Prop	Type	Default	Description
`token` required	`string`	—	Reset token from URL query parameter.
`apiPath`	`string`	`'/api/auth/reset-password'`	ApiPath property for the ResetPasswordPage component
`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.
`slotClasses`	`AuthPageSlotClasses`	—	Per-slot class overrides. Keys: `root`, `card`, `title`, `form`, `field`, `submit`, `error`, `success`, `links`.
`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
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 active built-in bundle, so overriding a single string never silently blanks the rest.
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 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 { ResetPasswordPage } from '@urbicon-ui/auth';

llm.txt