VerifyEmailPage

A page that verifies the email token from the URL on mount and shows the result. It has no loginUrl of its own; render the onward link through the links snippet.

01 Usage

Basic

The live preview mocks a successful verification via the fetcher prop (the static docs site has no auth backend). The snippet shows the production setup.

Verify email

Verifying your email...

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

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

<VerifyEmailPage {token} />

02 Accessibility

One region for a process the user never started

Verification fires on mount from the token in the URL, so the user takes no action and has nothing to watch. The spinner and the success share one polite role="status" region, so their swap is a single announced change; a rejected link goes to the assertive role="alert" region beside it. The Spinner is a live region in its own right, and here it renders without one: nested regions leave the same text carrying two urgencies at once, and ARIA does not say which wins. The page keeps to its own regions instead of the shell's shared ones, which would put two regions on the page for the same event.

The spinner has words next to it

The loading state renders the localized "verifying" text inside the live region alongside the spinner. A spinner alone conveys nothing to a screen reader; the text is what actually gets announced.

Focus stays where it was

Nothing on this page moves focus when the result arrives. The live region carries the announcement instead. A user who tabs away mid-verification is not returned to the result.

03 API Reference

12 props 1 required

Prop	Type	Default	Description
`token` required	`string`	—	Verification token from URL query parameter.
`apiPath`	`string`	`'/api/auth/verify-email'`	API endpoint for the verify-email 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.
`preset`	`string`	—	Apply a named preset registered via `<BlocksProvider presets={{ VerifyEmailPage: { … } }}>`. 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.
`slotClasses`	`AuthPageSlotClasses`	—	Per-slot class overrides. Keys: `root`, `card`, `title`, `form`, `field`, `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.

6 types

Only referenced

Name	Kind	Category	Used by	Description
VerifyEmailPageProps	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.
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 { VerifyEmailPage } from '@urbicon-ui/auth';

llm.txt