@atlasauth/svelte 0.8.0 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlasauth/svelte changelog
 
+## 0.10.0 — 2026-10-24
+
+### Added
+
+- **Policy acceptance** in `<SignUp>` and `<SignIn>` (consent block with in-page viewer, clickwrap line, unskippable scroll dialog, the `needs_policy_acceptance` step), plus `<PolicyGate>`, `<PolicyConsent>`, `<PolicyClickwrap>`, `<PolicyAcceptStep>`; `signUp()` exposes `policies`. New `policy.*` strings.
+
+## 0.9.0 — 2026-10-23
+
+### Added
+
+- `<OrganizationAuditLog/>` and `getOrganizationAuditLog()` (a store with `loadMore()` / `reload()`): the active organization's audit trail for its admins, paged, with labels as props. Renders nothing for a member who may not read it. Appearance `elements` gain `list` and `listItem`.
+- **Recovery codes after enrolment.** Setting up a second factor at sign-in now shows the account's one-time recovery codes before the sign-in finishes, as the hosted page does: copy them, download them as a .txt file, then "I've saved my codes" continues. Before, the sign-in completed straight away and the codes were never shown. The codes are kept in memory only, never on the attempt or in storage. New strings (`mfa.recoveryCodesTitle`, `mfa.recoveryCodesHelp`, `mfa.recoveryCodesCopy`, `mfa.recoveryCodesCopied`, `mfa.recoveryCodesDownload`, `mfa.recoveryCodesSaved`) are in the catalog and in every `@atlasauth/localizations` bundle.
+- **MFA enrolment at sign-in works end to end.** When the app requires a second factor and the account has none, `<SignIn>` now fetches the authenticator setup and shows its QR code and the setup key, then asks for the code (one or two, as the app requires). Before, the step asked for codes without ever showing the setup.
+- **Text-message enrolment** where the app offers texted codes and can send them: the user picks "Use text messages", enters a phone number, and confirms with the texted code. When both methods are offered the user chooses, and can switch.
+- **"Text me a code instead"** at the second-factor step where the app offers texted codes, beside the existing "Email me a code instead".
+- The new strings are in the catalog (`mfa.enrollChoose`, `mfa.enrollTotpOption`, `mfa.enrollSmsOption`, `mfa.enrollScan`, `mfa.enrollQrAlt`, `mfa.enrollSetupKey`, `mfa.enrollPreparing`, `mfa.phoneLabel`, `mfa.phoneHint`, `mfa.sendCode`, `mfa.codeTextedTo`, `mfa.smsCodeOption`) and in every `@atlasauth/localizations` bundle.
+- Texted codes are offered only where the server says the app can text (`account.mfa` on `/v1/appearance`). A server that does not say gets the authenticator app only.
+
+### Changed
+
+- Built on `@atlasauth/js` 0.16.0.
+
 ## 0.8.0
 
 ### Changed

package/dist/accessors.d.ts

@@ -1,5 +1,5 @@
 import { type Readable } from 'svelte/store';
-import { type CaptchaController, type FlowState, type InstanceSettings, type ProviderToken, type SignOutOptions, type SignOutResult } from '@atlasauth/js';
+import { type OrganizationAuditLogOptions, type OrganizationAuditLogState, type CaptchaController, type FlowState, type InstanceSettings, type ProviderToken, type SignOutOptions, type SignOutResult, PolicyAcceptanceController, type MfaChoices, type MfaEnrollmentController, type MfaEnrollmentState } from '@atlasauth/js';
 import { type AuthStatus } from './context';
 import { type ProtectCondition } from './protect';
 import type { AtlasOrganizationMembership, AtlasSession, AtlasUser } from './types';
@@ -66,6 +66,18 @@ export interface UseOrganization {
     setActive(organizationId: string | null): Promise<void>;
 }
 export declare function getOrganization(): Readable<UseOrganization>;
+/**
+ * The active organization's audit trail, for its admins: a store of
+ * `{ entries, loading, forbidden, hasMore }` (one page at a time, newest first)
+ * with `loadMore()` and `reload()`. `action` narrows it (exact, or a prefix
+ * ending in `.`). `forbidden` is true when the signed-in member may not read it.
+ * Follows the active organization while it has subscribers.
+ */
+export interface OrganizationAuditLogStore extends Readable<OrganizationAuditLogState> {
+    loadMore(): Promise<void>;
+    reload(): Promise<void>;
+}
+export declare function getOrganizationAuditLog(options?: OrganizationAuditLogOptions): OrganizationAuditLogStore;
 /** Refresh-if-stale, then hand over the JWT. The `useAuth().getToken` shortcut. */
 export declare function getToken(): Promise<string | null>;
 /**
@@ -93,6 +105,45 @@ export interface FlowController {
      * then posted with {@link submit}.
      */
     create(values: Record<string, string>, consent?: boolean): void;
+    /** Start a passkey-only sign-up (`POST /v1/client/sign_ups/passkey`): no password. */
+    createWithPasskey(values: Record<string, string>, consent?: boolean): void;
+    /** The passkey-only sign-up's last step: create the passkey, and with it the account. */
+    createPasskey(): void;
+    /**
+     * "Email me a code instead" at the second factor (the instance's
+     * `account.emailSecondFactor`): mails a code to the account's verified email;
+     * it is then posted with {@link submit} like any 2FA code.
+     */
+    sendEmailSecondFactor(): Promise<{
+        sentTo?: string;
+        error?: string;
+    }>;
+    /**
+     * "Text me a code instead" at the second factor (where the app offers texted
+     * codes, `mfaChoices().sms`): texts a code to the account's enrolled phone;
+     * it is then posted with {@link submit}.
+     */
+    sendSmsSecondFactor(): Promise<{
+        sentTo?: string;
+        error?: string;
+    }>;
+    /** What the app lets the MFA steps offer (from {@link settings}). */
+    mfaChoices(): MfaChoices;
+    /**
+     * The MFA enrolment step (`needs_mfa_enrollment`): the authenticator app's
+     * setup (QR code, setup key) or a texted code. Started and reset with the flow.
+     */
+    enrollment: MfaEnrollmentController;
+    /** {@link enrollment}'s state as a store. */
+    enrollmentState: Readable<MfaEnrollmentState>;
+    /**
+     * "I've saved my codes": after an enrolment the flow holds its one-time
+     * recovery codes (`pendingRecoveryCodes($state)`, in memory only) and waits
+     * for this before exchanging the ticket and finishing the sign-in.
+     */
+    saveRecoveryCodes(): void;
+    /** Resend a sign-up's emailed code / link (the earlier one stops working). Resolves whether it was sent. */
+    resendSignUp(): Promise<boolean>;
     /**
      * Ask the server to email a sign-in code or link on the first-factor step
      * (`POST …/prepare_first_factor`). Resolves true once it was sent; the code is
@@ -105,10 +156,24 @@ export interface FlowController {
      * or when the server could not be reached.
      */
     settings: Readable<InstanceSettings | null>;
+    /**
+     * The method this browser last signed in with (`password`, `oauth_github`, …)
+     * for the "Last used" hint; null when none, or the instance turned it off.
+     */
+    lastMethod: Readable<string | null>;
     /** The sign-in captcha (identifier step / `needs_captcha` challenge). */
     captcha: CaptchaController;
     /** The sign-up captcha (the create-account step). */
     signUpCaptcha: CaptchaController;
+    /**
+     * The instance's policies (terms, privacy, …) for the create-account form:
+     * `create` sends their acceptances and reloads them after a refusal.
+     */
+    policies: PolicyAcceptanceController;
+    /** Load the sign-up's policies into {@link policies} (`<SignUp>` calls it on mount). */
+    loadPolicies(): Promise<void>;
+    /** The user declined a policy a sign-in was waiting on: cancels the attempt and says why. */
+    declinePolicy(title: string): void;
     /** Stop the magic-link poll loop and remove the captcha widgets — call from `onDestroy`. */
     destroy(): void;
 }

package/dist/accessors.js

@@ -1,5 +1,5 @@
-import { derived, get, writable } from 'svelte/store';
-import { FapiClient, advanceWithCaptcha, atlasCaptchaLabels, createCaptchaController, createSignUp, fetchInstanceSettings, flowNeedsCaptcha, signInCaptchaOptions, flowFromPending, pollAttempt, prepareFactor, shouldKeepPolling, } from '@atlasauth/js';
+import { derived, get, readable, writable } from 'svelte/store';
+import { FapiClient, advanceWithCaptcha, atlasCaptchaLabels, createCaptchaController, createPasskeySignUp, createSignUp, finishPasskeySignUp, fetchInstanceSettings, fetchLastSignInMethod, flowNeedsCaptcha, signInCaptchaOptions, flowFromPending, pollAttempt, prepareFactor, shouldKeepPolling, createOrganizationAuditLog, createMfaEnrollment, acknowledgeRecoveryCodes, pendingRecoveryCodes, mfaChoicesFrom, prepareSecondFactorCode, resendSignUpVerification, PolicyAcceptanceController, loadPolicies as loadPolicyList, initialFlow as emptyFlow, } from '@atlasauth/js';
 import { useAtlas } from './context';
 import { translate } from './i18n';
 import { evaluate } from './protect';
@@ -50,6 +50,32 @@ export function getOrganization() {
         };
     });
 }
+export function getOrganizationAuditLog(options = {}) {
+    const atlas = useAtlas();
+    const organization = getOrganization();
+    const log = createOrganizationAuditLog(new FapiClient({
+        publishableKey: atlas.publishableKey,
+        baseUrl: atlas.frontendApi,
+        locale: atlas.locale,
+        sdk: ATLAS_SVELTE_SDK,
+    }), options);
+    const state = readable(log.getState(), (set) => {
+        const offState = log.subscribe(set);
+        let shown;
+        const offOrganization = organization.subscribe(($org) => {
+            const id = $org.organization?.id ?? null;
+            if (id === shown)
+                return;
+            shown = id;
+            void log.load(id);
+        });
+        return () => {
+            offOrganization();
+            offState();
+        };
+    });
+    return { subscribe: state.subscribe, loadMore: log.loadMore, reload: log.reload };
+}
 /* ------------------------------------------------------------------ actions */
 /** Refresh-if-stale, then hand over the JWT. The `useAuth().getToken` shortcut. */
 export function getToken() {
@@ -75,6 +101,7 @@ function createFlow() {
     // factor), so the user resumes at the demanded step instead of starting over.
     const state = writable(flowFromPending(atlas.pendingAttempt));
     const settings = writable(null);
+    const lastMethod = writable(null);
     const t = (key) => translate(atlas.catalog, key);
     // §5 the per-flow captcha, driven by the instance's settings so turning it on
     // in the dashboard needs no code change. Kept in step with the settings and
@@ -93,6 +120,9 @@ function createFlow() {
         void fetchInstanceSettings(client).then((loaded) => {
             if (loaded)
                 settings.set(loaded);
+            if (loaded?.account.lastSignInMethod) {
+                void fetchLastSignInMethod(client).then((m) => lastMethod.set(m));
+            }
         });
     }
     let pollTimer = null;
@@ -131,6 +161,11 @@ function createFlow() {
     // Stays busy until this browser actually holds the session: the completion
     // alone says nothing about whether the cookie was kept.
     async function finish(next) {
+        // An enrolment's recovery codes are shown first; `saveRecoveryCodes` finishes.
+        if (pendingRecoveryCodes(next)) {
+            state.set({ ...next, busy: false });
+            return;
+        }
         if (next.attempt?.status === 'complete') {
             state.set({ ...next, busy: true });
             let exchanged = true;
@@ -156,10 +191,67 @@ function createFlow() {
             await finish(out.state);
         })();
     }
+    const policies = new PolicyAcceptanceController([]);
+    async function loadPolicies() {
+        policies.setPolicies(await loadPolicyList(client, { locale: atlas.locale ?? undefined }));
+    }
+    function declinePolicy(title) {
+        state.set({ ...emptyFlow, errors: [{ code: 'POLICY_DECLINED', message: translate(atlas.catalog, 'policy.declined', { policy: title }) }] });
+    }
     function create(values, consent = true) {
         void (async () => {
             state.update((current) => ({ ...current, busy: true, errors: [] }));
-            await finish(await createSignUp(client, values, { consent, captcha: signUpCaptcha, t }));
+            await finish(await createSignUp(client, values, { consent, captcha: signUpCaptcha, t, policies }));
+        })();
+    }
+    function createWithPasskey(values, consent = true) {
+        void (async () => {
+            state.update((current) => ({ ...current, busy: true, errors: [] }));
+            await finish(await createPasskeySignUp(client, values, { consent, captcha: signUpCaptcha, t, policies }));
+        })();
+    }
+    async function sendSecondFactorCode(strategy) {
+        const id = get(state).attempt?.id;
+        if (!id)
+            return { error: t('error.generic') };
+        try {
+            return await prepareSecondFactorCode(client, id, strategy);
+        }
+        catch (error) {
+            return { error: error instanceof Error ? error.message : t('error.generic') };
+        }
+    }
+    const sendEmailSecondFactor = () => sendSecondFactorCode('email_code');
+    const sendSmsSecondFactor = () => sendSecondFactorCode('sms');
+    // The MFA enrolment step: started while the flow is at needs_mfa_enrollment.
+    const mfaChoices = () => mfaChoicesFrom(get(settings)?.account);
+    const enrollment = createMfaEnrollment(client, mfaChoices);
+    const enrollmentState = writable(enrollment.state);
+    const unsubscribeEnrollment = enrollment.subscribe((next) => enrollmentState.set(next));
+    let enrollingFor = null;
+    const unsubscribeEnrollmentStep = state.subscribe((flow) => {
+        const id = flow.attempt?.status === 'needs_mfa_enrollment' ? (flow.attempt.id ?? null) : null;
+        if (id === enrollingFor)
+            return;
+        enrollingFor = id;
+        if (id)
+            enrollment.start(id);
+        else
+            enrollment.reset();
+    });
+    function saveRecoveryCodes() {
+        void finish(acknowledgeRecoveryCodes(get(state)));
+    }
+    async function resendSignUp() {
+        state.update((current) => ({ ...current, busy: true, errors: [] }));
+        const next = await resendSignUpVerification(client, get(state));
+        state.set(next);
+        return next.errors.length === 0;
+    }
+    function createPasskey() {
+        void (async () => {
+            state.update((current) => ({ ...current, busy: true, errors: [] }));
+            await finish(await finishPasskeySignUp(client, get(state), { t }));
         })();
     }
     async function prepare(strategy) {
@@ -172,6 +264,8 @@ function createFlow() {
     function destroy() {
         stopPolling();
         unsubscribeCaptcha();
+        unsubscribeEnrollment();
+        unsubscribeEnrollmentStep();
         captcha.destroy();
         signUpCaptcha.destroy();
     }
@@ -179,10 +273,23 @@ function createFlow() {
         state: { subscribe: state.subscribe },
         submit,
         create,
+        createWithPasskey,
+        createPasskey,
+        sendEmailSecondFactor,
+        sendSmsSecondFactor,
+        mfaChoices,
+        enrollment,
+        enrollmentState: { subscribe: enrollmentState.subscribe },
+        saveRecoveryCodes,
+        resendSignUp,
         prepare,
         settings: { subscribe: settings.subscribe },
+        lastMethod: { subscribe: lastMethod.subscribe },
         captcha,
         signUpCaptcha,
+        policies,
+        loadPolicies,
+        declinePolicy,
         destroy,
     };
 }

package/dist/appearance.d.ts

@@ -31,7 +31,7 @@ export interface DesignTokens {
     spacingUnit?: string;
 }
 /** Every element a customer may target. Named for what it IS, not where it sits. */
-export type ElementKey = 'root' | 'card' | 'headerTitle' | 'headerSubtitle' | 'formField' | 'formFieldLabel' | 'formFieldInput' | 'formFieldError' | 'formButtonPrimary' | 'formButtonSecondary' | 'socialButton' | 'dividerText' | 'footerAction' | 'avatar' | 'menu' | 'menuItem' | 'badge';
+export type ElementKey = 'root' | 'card' | 'headerTitle' | 'headerSubtitle' | 'formField' | 'formFieldLabel' | 'formFieldInput' | 'formFieldError' | 'formButtonPrimary' | 'formButtonSecondary' | 'socialButton' | 'dividerText' | 'footerAction' | 'avatar' | 'menu' | 'menuItem' | 'list' | 'listItem' | 'badge' | 'alert' | 'text' | 'link';
 export interface Appearance extends DesignAppearance {
     /** A prebuilt token theme to start from (pre-design-system themes). */
     baseTheme?: keyof typeof THEMES;

package/dist/components/AttemptFlow.svelte

@@ -1,4 +1,7 @@
 <script>import {
+  awaitingSignUpLink,
+  enrollmentSubmitKey,
+  groupSetupKey,
   localizedErrorMessage,
   nextStep,
   offeredFirstFactors,
@@ -8,6 +11,7 @@ import { useAtlas } from "../context";
 import { classFor } from "../appearance";
 import { translate } from "../i18n";
 import CaptchaSlot from "./CaptchaSlot.svelte";
+import PolicyAcceptStep from "./PolicyAcceptStep.svelte";
 export let attempt = null;
 export let busy = false;
 export let errors = [];
@@ -17,6 +21,13 @@ export let onSubmit;
 export let captcha = null;
 export let emailDelivery = null;
 export let onPrepare = null;
+export let onEmailSecondFactor = null;
+export let onSmsSecondFactor = null;
+export let enrollment = null;
+export let enrollmentState = null;
+export let emailVerification = "code";
+export let onResend = null;
+export let onPolicyDecline = null;
 const atlas = useAtlas();
 const cls = (key, base) => classFor(key, atlas.appearance, base);
 const t = (key, vars) => translate(atlas.catalog, key, vars);
@@ -42,6 +53,31 @@ $: if (step.kind === "collect_first_factor" && onPrepare && plan.autoSend && att
 }
 $: sending = step.kind === "collect_first_factor" && sent === null && !!onPrepare && !plan.password && emailOptions.length > 0;
 $: identifier = attempt?.identifier ?? "";
+let emailed = null;
+$: emailedNow = emailed && emailed.attemptId === (attempt?.id ?? null) ? emailed : null;
+async function emailSecondFactor() {
+  if (!onEmailSecondFactor) return;
+  const attemptId = attempt?.id ?? null;
+  emailed = { attemptId, busy: true };
+  const r = await onEmailSecondFactor();
+  emailed = r.error ? { attemptId, error: r.error } : { attemptId, sentTo: r.sentTo ?? "" };
+}
+let texted = null;
+$: textedNow = texted && texted.attemptId === (attempt?.id ?? null) ? texted : null;
+async function smsSecondFactor() {
+  if (!onSmsSecondFactor) return;
+  const attemptId = attempt?.id ?? null;
+  texted = { attemptId, busy: true };
+  const r = await onSmsSecondFactor();
+  texted = r.error ? { attemptId, error: r.error } : { attemptId, sentTo: r.sentTo ?? "" };
+}
+$: enrolling = step.kind === "enroll_second_factor" && !!enrollment && !!enrollmentState;
+$: enrolSubmitKey = enrolling && enrollmentState ? enrollmentSubmitKey(enrollmentState) : null;
+function chooseMethod(m) {
+  values = {};
+  void enrollment?.choose(m);
+}
+$: linkOnly = awaitingSignUpLink(attempt, emailVerification);
 function usePassword() {
   prepared = null;
   values = {};
@@ -59,12 +95,13 @@ $: fields = (() => {
     case "collect_second_factor":
       return [{ name: "code", labelKey: "mfa.codeLabel", type: "text" }];
     case "enroll_second_factor":
+      if (enrollment && enrollmentState) return [];
       return [
         { name: "code", labelKey: "mfa.enrollFirstCodeLabel", type: "text" },
         { name: "secondCode", labelKey: "mfa.enrollSecondCodeLabel", type: "text" }
       ];
     case "collect_email_code":
-      return [{ name: "code", labelKey: "signIn.emailCodeLabel", type: "text" }];
+      return linkOnly ? [] : [{ name: "code", labelKey: "signIn.emailCodeLabel", type: "text" }];
     case "collect_new_password":
       return [{ name: "password", labelKey: "reset.newPasswordLabel", type: "password" }];
     default:
@@ -89,12 +126,13 @@ $: message = (() => {
     case "enroll_second_factor":
     case "collect_email_code":
     case "collect_new_password":
+    case "accept_policies":
       return null;
     default:
       return t("error.generic");
   }
 })();
-$: showSubmit = step.kind !== "done" && step.kind !== "await_oauth" && message === null && // Only emailed factors on offer: the option buttons are the way forward.
+$: showSubmit = (!enrolling || enrolSubmitKey !== null) && step.kind !== "done" && step.kind !== "await_oauth" && step.kind !== "accept_policies" && message === null && !linkOnly && // Only emailed factors on offer: the option buttons are the way forward.
 (step.kind !== "collect_first_factor" || fields.length > 0);
 $: showEmailOptions = step.kind === "collect_first_factor" && message === null && sent === null && emailOptions.length > 0 && !(sending && busy);
 $: showCaptcha = !!captcha && (step.kind === "collect_identifier" || step.kind === "collect_captcha");
@@ -104,6 +142,12 @@ function handleSubmit(event) {
     onSubmit(sent === "email_code" ? { code: values.code ?? "" } : { password: values.password ?? "" });
     return;
   }
+  if (enrolling && enrollment) {
+    void enrollment.submit(values).then((next) => {
+      if (next) onSubmit(next);
+    });
+    return;
+  }
   onSubmit(values);
 }
 </script>
@@ -123,6 +167,10 @@ function handleSubmit(event) {
         <p>{message}</p>
       {/if}
     {:else}
+      {#if step.kind === 'accept_policies'}
+        <!-- A required policy changed: scroll-mode ones in their dialog, the rest as checkboxes. -->
+        <PolicyAcceptStep {attempt} {busy} {onSubmit} onDecline={(policy) => onPolicyDecline?.(policy.title)} />
+      {/if}
       {#if step.kind === 'collect_captcha'}
         <!-- §5 the server withheld the attempt until a captcha clears. Solving
              the widget resubmits the identifier on its own; the button retries. -->
@@ -137,6 +185,102 @@ function handleSubmit(event) {
       {#if sending}
         <p class="atlas-text" aria-live="polite">{t('signIn.sending')}</p>
       {/if}
+      {#if linkOnly}
+        <p class="atlas-text" data-atlas-link-sent aria-live="polite">{t('signUp.linkSentTo', { email: identifier })}</p>
+        {#if onResend}
+          <button
+            class={cls('formButtonSecondary', 'atlas-button-secondary')}
+            type="button"
+            data-atlas-resend
+            disabled={busy}
+            on:click={() => void onResend?.()}
+          >
+            {t('signIn.resendLink')}
+          </button>
+        {/if}
+      {/if}
+      {#if enrolling && enrollmentState}
+        {#if enrollmentState.method === null}
+          <p class="atlas-text">{t('mfa.enrollChoose')}</p>
+          {#each enrollmentState.options as m (m)}
+            <button
+              class={cls('formButtonSecondary', 'atlas-button-secondary')}
+              type="button"
+              data-atlas-mfa-method={m}
+              disabled={busy || enrollmentState.busy}
+              on:click={() => chooseMethod(m)}
+            >
+              {t(m === 'totp' ? 'mfa.enrollTotpOption' : 'mfa.enrollSmsOption')}
+            </button>
+          {/each}
+        {:else if enrollmentState.method === 'totp'}
+          {#if !enrollmentState.enrollment}
+            <p class="atlas-text" aria-live="polite">{enrollmentState.busy ? t('mfa.enrollPreparing') : ''}</p>
+          {:else}
+            <p class="atlas-text">{t('mfa.enrollScan')}</p>
+            {#if enrollmentState.enrollment.qrCode}
+              <img class="atlas-mfa-qr" data-atlas="mfa-qr" src={enrollmentState.enrollment.qrCode} alt={t('mfa.enrollQrAlt')} width="180" height="180" />
+            {/if}
+            {#if enrollmentState.enrollment.secret}
+              <p class="atlas-text" data-atlas="mfa-setup-key">
+                {t('mfa.enrollSetupKey')}: <code>{groupSetupKey(enrollmentState.enrollment.secret)}</code>
+              </p>
+            {/if}
+            <label class="atlas-field">
+              <span>{t('mfa.enrollFirstCodeLabel')}</span>
+              <input class={cls('formFieldInput', 'atlas-input')} type="text" name="code" autocomplete="one-time-code" inputmode="numeric" value={values.code ?? ''} on:input={(e) => (values.code = e.currentTarget.value)} />
+            </label>
+            {#if enrollmentState.totpCodes >= 2}
+              <label class="atlas-field">
+                <span>{t('mfa.enrollSecondCodeLabel')}</span>
+                <input class={cls('formFieldInput', 'atlas-input')} type="text" name="secondCode" autocomplete="one-time-code" inputmode="numeric" value={values.secondCode ?? ''} on:input={(e) => (values.secondCode = e.currentTarget.value)} />
+              </label>
+            {/if}
+            {#each errors.filter((e) => e.param === 'codes') as error (error.code)}
+              <span class={cls('formFieldError', 'atlas-error')}>{errorText(error)}</span>
+            {/each}
+          {/if}
+        {:else if !enrollmentState.enrollment}
+          <label class="atlas-field">
+            <span>{t('mfa.phoneLabel')}</span>
+            <input class={cls('formFieldInput', 'atlas-input')} type="tel" name="phone" autocomplete="tel" value={values.phone ?? ''} on:input={(e) => (values.phone = e.currentTarget.value)} />
+          </label>
+          <p class="atlas-text">{t('mfa.phoneHint')}</p>
+        {:else}
+          <p class="atlas-text" data-atlas="mfa-code-texted" aria-live="polite">
+            {t('mfa.codeTextedTo', { phone: enrollmentState.enrollment.phone ?? '' })}
+          </p>
+          <label class="atlas-field">
+            <span>{t('mfa.codeLabel')}</span>
+            <input class={cls('formFieldInput', 'atlas-input')} type="text" name="code" autocomplete="one-time-code" inputmode="numeric" value={values.code ?? ''} on:input={(e) => (values.code = e.currentTarget.value)} />
+          </label>
+          <button
+            class={cls('formButtonSecondary', 'atlas-button-secondary')}
+            type="button"
+            data-atlas-resend
+            disabled={busy || enrollmentState.busy}
+            on:click={() => void enrollment?.resend()}
+          >
+            {t('signIn.resendCode')}
+          </button>
+        {/if}
+        {#each enrollmentState.errors as error (`${error.code}-${error.param ?? ''}`)}
+          <p class={cls('formFieldError', 'atlas-error')} role="alert">{error.message}</p>
+        {/each}
+        {#if enrollmentState.method !== null && enrollmentState.options.length > 1}
+          {#each enrollmentState.options.filter((m) => m !== enrollmentState?.method) as other (other)}
+            <button
+              class={cls('formButtonSecondary', 'atlas-button-secondary')}
+              type="button"
+              data-atlas-mfa-method={other}
+              disabled={busy || enrollmentState.busy}
+              on:click={() => chooseMethod(other)}
+            >
+              {t(other === 'totp' ? 'mfa.enrollTotpOption' : 'mfa.enrollSmsOption')}
+            </button>
+          {/each}
+        {/if}
+      {/if}
       {#each fields as f (f.name)}
         <label class="atlas-field">
           <span>{t(f.labelKey)}</span>
@@ -174,6 +318,46 @@ function handleSubmit(event) {
           </button>
         {/if}
       {/if}
+      {#if step.kind === 'collect_second_factor' && onSmsSecondFactor}
+        {#if textedNow && textedNow.sentTo !== undefined}
+          <p class="atlas-text" data-atlas="sms-second-factor-sent" aria-live="polite">
+            {t('mfa.codeTextedTo', { phone: textedNow.sentTo })}
+          </p>
+        {:else}
+          <button
+            class={cls('formButtonSecondary', 'atlas-button-secondary')}
+            type="button"
+            data-atlas="sms-second-factor"
+            disabled={busy || !!textedNow?.busy}
+            on:click={() => void smsSecondFactor()}
+          >
+            {textedNow?.busy ? t('signIn.sending') : t('mfa.smsCodeOption')}
+          </button>
+          {#if textedNow?.error}
+            <p class={cls('formFieldError', 'atlas-error')} role="alert">{textedNow.error}</p>
+          {/if}
+        {/if}
+      {/if}
+      {#if step.kind === 'collect_second_factor' && onEmailSecondFactor}
+        {#if emailedNow && emailedNow.sentTo !== undefined}
+          <p class="atlas-text" data-atlas="email-second-factor-sent" aria-live="polite">
+            {t('signIn.codeSentTo', { email: emailedNow.sentTo })}
+          </p>
+        {:else}
+          <button
+            class={cls('formButtonSecondary', 'atlas-button-secondary')}
+            type="button"
+            data-atlas="email-second-factor"
+            disabled={busy || !!emailedNow?.busy}
+            on:click={() => void emailSecondFactor()}
+          >
+            {emailedNow?.busy ? t('signIn.sending') : t('signIn.emailCodeOption')}
+          </button>
+          {#if emailedNow?.error}
+            <p class={cls('formFieldError', 'atlas-error')} role="alert">{emailedNow.error}</p>
+          {/if}
+        {/if}
+      {/if}
       {#if showEmailOptions}
         {#each emailOptions as strategy (strategy)}
           <button
@@ -194,8 +378,8 @@ function handleSubmit(event) {
     {/if}
 
     {#if showSubmit}
-      <button class={cls('formButtonPrimary', 'atlas-button')} disabled={busy} type="submit">
-        {t('signIn.submit')}
+      <button class={cls('formButtonPrimary', 'atlas-button')} disabled={busy || (enrolling && !!enrollmentState?.busy)} type="submit">
+        {t(enrolSubmitKey ?? 'signIn.submit')}
       </button>
     {/if}
   </form>

package/dist/components/AttemptFlow.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import { type AttemptView, type CaptchaController, type EmailDelivery, type FieldError } from '@atlasauth/js';
+import { type AttemptView, type CaptchaController, type EmailDelivery, type FieldError, type MfaEnrollmentController, type MfaEnrollmentState } from '@atlasauth/js';
 declare const __propDef: {
     props: {
         /**
@@ -28,6 +28,33 @@ declare const __propDef: {
            * Ask the server to email a sign-in code or link (`FlowController.prepare`).
            * Without it the first-factor step offers the password only.
            */ onPrepare?: ((strategy: "email_code" | "email_link") => Promise<boolean>) | null;
+        /**
+           * "Email me a code instead" at the second factor (`account.emailSecondFactor`).
+           * Null: the step asks for the code only.
+           */ onEmailSecondFactor?: (() => Promise<{
+            sentTo?: string;
+            error?: string;
+        }>) | null;
+        /**
+           * "Text me a code instead" at the second factor (where the app offers texted
+           * codes). Null: the step offers no texted code.
+           */ onSmsSecondFactor?: (() => Promise<{
+            sentTo?: string;
+            error?: string;
+        }>) | null;
+        /**
+           * The MFA enrolment step (`FlowController.enrollment` and its state): the
+           * authenticator app's QR code and setup key, or a texted code. Null: the step
+           * asks for two authenticator codes only.
+           */ enrollment?: MfaEnrollmentController | null;
+        enrollmentState?: MfaEnrollmentState | null;
+        /**
+           * The instance's `account.emailVerification`. On `link` a sign-up's
+           * verification step has nothing to type: it says to open the emailed link
+           * while the flow polls, and offers a resend (`onResend`).
+           */ emailVerification?: string;
+        onResend?: (() => Promise<boolean>) | null;
+        /** The user declined a policy the sign-in was waiting on (`needs_policy_acceptance`): cancel the attempt. */ onPolicyDecline?: ((title: string) => void) | null;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/ImpersonationBanner.svelte

@@ -0,0 +1,38 @@
+<script>import { createEventDispatcher } from "svelte";
+import { derived } from "svelte/store";
+import { actorFromClaims } from "@atlasauth/js";
+import { useAtlas } from "../context";
+import { classFor } from "../appearance";
+import { translate } from "../i18n";
+const atlas = useAtlas();
+const dispatch = createEventDispatcher();
+const t = (key, vars) => translate(atlas.catalog, key, vars);
+const state = derived([atlas.claims, atlas.session, atlas.user], ([$claims, $session, $user]) => {
+  const actor = actorFromClaims($claims) ?? $session?.actor ?? null;
+  const name = [$user?.first_name, $user?.last_name].filter(Boolean).join(" ") || $user?.username || $user?.email_addresses?.find((e) => e.primary)?.email_address || $user?.id || "";
+  return { impersonating: actor !== null, canReturn: actor !== null && Boolean($session?.actor_session_id), name };
+});
+let busy = false;
+async function end() {
+  busy = true;
+  try {
+    dispatch("ended", await atlas.endImpersonation());
+  } finally {
+    busy = false;
+  }
+}
+</script>
+
+{#if $state.impersonating}
+  <div class={classFor('card', atlas.appearance, 'atlas-alert atlas-impersonation-banner')} role="status">
+    <span class={classFor('headerSubtitle', atlas.appearance, 'atlas-text')}>{t('impersonation.banner', { name: $state.name })}</span>
+    <button
+      type="button"
+      class={classFor('formButtonPrimary', atlas.appearance, 'atlas-button')}
+      disabled={busy}
+      on:click={() => void end()}
+    >
+      {$state.canReturn ? t('impersonation.returnToAdmin') : t('impersonation.end')}
+    </button>
+  </div>
+{/if}