--- ## TwoFactorManager **Stability:** beta — the API shape is settled and documented; behaviour-level fixes may still land as breaking changes in a minor. Self-service two-factor (TOTP) management: enrol with an authenticator app, show one-time backup codes, and disable with a password re-auth. Talks to `apiPath` (default `/api/auth/account/2fa`); pair with `createTwoFactorHandlers` — this panel uses its `setup`, `enable` and `disable` groups. The core stays zero-dependency, so QR rendering is delegated to the `qr` snippet — without it the otpauth URI + Base32 secret are shown for manual entry. **Import:** `import { TwoFactorManager } from '@urbicon-ui/auth';` ### Examples ```svelte auth.checkStatus()}> {#snippet qr({ uri })} {/snippet} ``` ### Api | Prop | Type | Required | Default | Description | | --- | --- | :---: | --- | --- | | user | `AuthUser | null` | yes | | The current authenticated user: its `totpEnabled` seeds the initial state and its `email` labels the otpauth entry. While `null` nothing renders. Resolve `user` before mount, or remount with `{#key user?.id}…{/key}` to re-seed after an async load. | | apiPath | `string` | no | '/api/auth/account/2fa' | API base path for the 2FA account endpoints. | | 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. | | onDisabled | `() => void` | no | | Called after 2FA was disabled. | | onEnabled | `() => void` | no | | Called after 2FA was successfully enabled (e.g. refresh your auth store). | | 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. | | qr | `Snippet<[{ uri: string; secret: string }]>` | no | | QR-code renderer for the otpauth URI shown during setup. Receives the `otpauth://` `uri` and the Base32 `secret`. Optional: the package ships no QR encoder (zero-dep), so without this snippet only the URI and secret are shown for manual entry. | | slotClasses | `Partial>` | no | | Per-slot class overrides. 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 AuthUser { id: string; email: string; name: string; role: R; emailVerified: boolean; /** * Whether TOTP two-factor authentication is active on the account. A public * account-status flag in the same spirit as `emailVerified` — it drives the * `TwoFactorManager` UI and the login two-step, and never carries the secret * itself. `false` for every user until they finish 2FA setup, and for * consumers who don't wire 2FA at all (the adapter defaults a missing column * to `false`). */ totpEnabled: 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 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) ### Slots (slotClasses keys) `root`, `title`, `section`, `sectionTitle`, `field`, `submit`, `error`, `code`, `backupCode`