--- ## RegisterPage Pre-built registration page with invitation-gated signup, password requirements checklist, and confirm field. Sends POST to `apiPath` (default `/api/auth/register`). Pair with `createRegisterHandler(authDeps)` on the server. **Import:** `import { RegisterPage } from '@urbicon-ui/auth';` ### Examples ```svelte goto('/')} /> ``` ### Api | Prop | Type | Required | Default | Description | | --- | --- | :---: | --- | --- | | token | `string` | yes | | The invitation token from the `?token=` query param. **Required to register**: possession of it is the entire proof of invitation, so without it the request is rejected before anything is looked up. Read it in your route the same way as `defaultEmail`: `token={page.url.searchParams.get('token') ?? ''}`. It is a credential: keep it out of logs and analytics, and do not put it in a page title or a shared screenshot. Required rather than optional-with-a-default on purpose: a page rendered without it can only ever produce a 400, and an optional prop makes that mistake type-check. This way the compiler names every call site. | | apiPath | `string` | no | '/api/auth/register' | API endpoint for the register request. | | class | `string` | no | | Extra classes on the root element. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. | | csrf | `CsrfClientOptions` | no | | CSRF cookie/header names, needed only when the server overrides the defaults via `config.csrf`. Mutating requests echo the token automatically. | | defaultEmail | `string` | no | '' | Pre-fills the email field. Pass the `?email=` query param from the invitation link (`createInvitationHandlers` builds `/auth/register?token=&email=`) so an invited user lands on a ready-to-submit form instead of retyping. Following the same explicit-prop pattern as `ResetPasswordPage`/`VerifyEmailPage`'s `token`, read it from the page in your route (SSR-safe), e.g. `defaultEmail={page.url.searchParams.get('email') ?? ''}`. Convenience only — the invitation names its own address, and registering with a different one is refused. | | fetcher | `typeof globalThis.fetch` | no | | 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` | no | | Content rendered below the form, above links (e.g. terms checkbox). | | header | `Snippet` | no | | Content rendered above the form (e.g. social login buttons). | | links | `Snippet` | no | | Replaces the link area. | | loginUrl | `string` | no | '/auth/login' | URL for the login page link. | | onSuccess | `() => void` | no | | Called after successful registration. | | passwordPolicy | `PasswordPolicy` | no | | 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 — useful for SSR, and the only way to gate correctly when the endpoint is not mounted. | | policyPath | `string | null` | no | '/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` | no | | Apply a named preset registered via ``. 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` | no | true | Show real-time password requirements checklist. | | slotClasses | `AuthPageSlotClasses` | no | | Per-slot class overrides. Keys: `root`, `card`, `title`, `form`, `field`, `submit`, `error`, `success`, `links`. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. | | t | `PartialAuthLocale` | no | | 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` | no | | Strip all default styling. | ### Types ```ts type PartialAuthLocale = DeepPartial ``` ```ts interface PasswordPolicy { /** Minimum length. @default 8 */ minLength: number; /** Require at least one `A-Z`. @default false */ requireUppercase: boolean; /** Require at least one `a-z`. @default false */ requireLowercase: boolean; /** Require at least one `0-9`. @default false */ requireDigit: boolean; /** Require at least one character outside `A-Za-z0-9`. @default false */ requireSpecial: boolean; } ``` ```ts interface CsrfClientOptions { cookieName?: string; headerName?: string; /** * Match the server's `csrf.useHostPrefix` — read the token from the * `__Host-`-prefixed cookie name. Leave `false` (default) unless the server * sets `useHostPrefix: true`. */ useHostPrefix?: boolean; } ``` ```ts interface AuthPageSlotClasses { /** Outermost wrapper element. */ root?: string; /** Card container around the form. */ card?: string; /** Page heading (h1). */ title?: string; /** Form element wrapping all fields. */ form?: string; /** Individual form field (Input). */ field?: string; /** Submit button. */ submit?: string; /** Error alert container. */ error?: string; /** Success message container. */ success?: string; /** Links area below the form (e.g. "Forgot password?"). */ links?: string; /** Password requirements checklist (RegisterPage, ResetPasswordPage). */ requirements?: string; } ``` ```ts type DeepPartial = T extends object ? { [K in keyof T]?: DeepPartial } : T ``` - `interface AuthLocale` — 8 members, definition omitted (387 lines; full definition: packages/auth/src/lib/i18n/keys.ts)