---

## LoginPage
Pre-built login page with email/password, optional passkey, and remember-me.
Sends POST to `apiPath` (default `/api/auth/login`). Pair with `createLoginHandler(authDeps)` on the server.

**Import:** `import { LoginPage } from '@urbicon-ui/auth';`

### Examples
```svelte
<LoginPage {t} onSuccess={() => goto('/')} />
```

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| apiPath | `string` | no | '/api/auth/login' | API endpoint for the login 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. Only needed when the server overrides the defaults via `config.csrf`. Mutating requests echo the token automatically. |
| 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). |
| forgotPasswordUrl | `string` | no | '/auth/forgot-password' | URL for the forgot-password page link. |
| header | `Snippet` | no |  | Content rendered above the form (e.g. social login buttons, welcome text). |
| links | `Snippet` | no |  | Replaces the link area below the form. |
| mode | `'password' | 'passkey' | 'both'` | no | 'both' | Login mode. `'password'` shows only email/password, `'passkey'` shows only passkey button, `'both'` shows both with separator. |
| onSuccess | `() => void` | no |  | Called after successful login. |
| passkeyApiPath | `string` | no | undefined | Passkey API base path. Required when mode is `'passkey'` or `'both'`. |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ LoginPage: { … } }}>`. 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. |
| registerUrl | `string` | no | '/auth/register' | URL for the register page link. |
| rememberMe | `boolean` | no | false | Show a "Remember me" checkbox. When checked, sends `rememberMe: true` in the login request body. |
| 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. |
| twoFactorApiPath | `string` | no | '/api/auth/2fa/verify' | API endpoint for the 2FA verify step. When the login response signals `twoFactorRequired`, the page switches to a code-entry step that POSTs here. Pair with `createTwoFactorHandlers().verify`. |
| unstyled | `boolean` | no |  | Strip all default styling. |

### Types
```ts
type PartialAuthLocale = DeepPartial<AuthLocale>
```

```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[K]> } : T
```

- `interface AuthLocale` — 8 members, definition omitted (387 lines; full definition: packages/auth/src/lib/i18n/keys.ts)