@atlasauth/svelte 0.7.0 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @atlasauth/svelte changelog
 
+## 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
+
+- `@atlasauth/js` 0.15.0: referral capture for any referral program and any consent manager (pass a custom program's reader page-wide with `configureReferralCapture({ referralSource })`).
+
+### Fixed
+
+- Development instances: sign-in from `localhost` keeps working where the browser blocks the instance's cookie as third-party (Chrome, Safari). On a `pk_test_` key the SDK keeps the session's refresh token in `localStorage` and sends it as `x-refresh-token`; production keys never do.
+- After a sign-in completes, the panel says "You're signed in" only once this browser holds the session, and says plainly when the browser didn't keep it, instead of "you are signed in where you started". That message is now shown only for a sign-in completed on another device.
+- `<SignIn>` shows "No account? Sign up" on every step (`signUpUrl`; default the hosted sign-up page with the visitor's referral, `null` hides it), so a newcomer on a password-only instance always has a way to create an account.
+
 ## 0.7.0
 - **Referral attribution.** The prebuilt forms send the referral the visitor arrived with on sign-in and sign-up (through `@atlasauth/js` 0.13.0) when the instance has referrals on, and show the captcha for a referred sign-up when the instance requires it. New init options: `referral?: false` and `referralConsent?`.
 

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, 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,6 +156,11 @@ 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). */

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, } 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;
@@ -115,11 +145,12 @@ function createFlow() {
                     return;
                 // The ticket is exchanged by a normal request, so no session token has
                 // ever appeared in a URL.
-                await client.post('/v1/client/tickets/exchange', {
+                const res = await client.post('/v1/client/tickets/exchange', {
                     attempt_id: next.attempt.id,
                     ticket,
                 });
-                await atlas.reload();
+                const kept = res.ok && (await atlas.reload());
+                state.update((current) => ({ ...current, sessionKept: kept }));
             })();
         }, 2_000);
     }
@@ -127,18 +158,29 @@ function createFlow() {
     // for cookies over a same-origin request — FAPI is cross-origin to the app
     // and cannot set the cookie on the completion response itself — THEN
     // re-boot so the rest of the app sees a signed-in user.
+    // Stays busy until this browser actually holds the session: the completion
+    // alone says nothing about whether the cookie was kept.
     async function finish(next) {
-        state.set(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;
             if (next.ticket) {
-                await client.post('/v1/client/tickets/exchange', {
+                const res = await client.post('/v1/client/tickets/exchange', {
                     attempt_id: next.attempt.id,
                     ticket: next.ticket,
                 });
+                exchanged = res.ok;
             }
-            await atlas.reload();
+            const kept = exchanged && (await atlas.reload());
+            state.set({ ...next, busy: false, sessionKept: kept });
             return;
         }
+        state.set(next);
         maybeStartPolling();
     }
     function submit(values) {
@@ -155,6 +197,56 @@ function createFlow() {
             await finish(await createSignUp(client, values, { consent, captcha: signUpCaptcha, t }));
         })();
     }
+    function createWithPasskey(values, consent = true) {
+        void (async () => {
+            state.update((current) => ({ ...current, busy: true, errors: [] }));
+            await finish(await createPasskeySignUp(client, values, { consent, captcha: signUpCaptcha, t }));
+        })();
+    }
+    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) {
         state.update((current) => ({ ...current, busy: true, errors: [] }));
         const next = await prepareFactor(client, get(state), strategy);
@@ -165,6 +257,8 @@ function createFlow() {
     function destroy() {
         stopPolling();
         unsubscribeCaptcha();
+        unsubscribeEnrollment();
+        unsubscribeEnrollmentStep();
         captcha.destroy();
         signUpCaptcha.destroy();
     }
@@ -172,8 +266,18 @@ 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,
         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';
 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,
@@ -11,11 +14,18 @@ import CaptchaSlot from "./CaptchaSlot.svelte";
 export let attempt = null;
 export let busy = false;
 export let errors = [];
+export let sessionKept = void 0;
 export let titleKey;
 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;
 const atlas = useAtlas();
 const cls = (key, base) => classFor(key, atlas.appearance, base);
 const t = (key, vars) => translate(atlas.catalog, key, vars);
@@ -41,6 +51,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 = {};
@@ -58,12 +93,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:
@@ -75,6 +111,8 @@ $: message = (() => {
     case "await_oauth":
       return t("signIn.magicLinkSent");
     case "done":
+      if (sessionKept === true) return t("signIn.signedIn");
+      if (sessionKept === false) return t("signIn.sessionNotKept");
       return t("signIn.checkOtherTab");
     case "restart":
       return t("error.generic");
@@ -91,7 +129,7 @@ $: message = (() => {
       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" && 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");
@@ -101,6 +139,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>
@@ -114,7 +158,11 @@ function handleSubmit(event) {
 
   <form on:submit={handleSubmit}>
     {#if message !== null}
-      <p>{message}</p>
+      {#if step.kind === 'done' && sessionKept === false}
+        <p class={cls('formFieldError', 'atlas-error')} role="alert">{message}</p>
+      {:else}
+        <p>{message}</p>
+      {/if}
     {:else}
       {#if step.kind === 'collect_captcha'}
         <!-- §5 the server withheld the attempt until a captcha clears. Solving
@@ -130,6 +178,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>
@@ -167,6 +311,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
@@ -187,8 +371,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: {
         /**
@@ -12,6 +12,7 @@ declare const __propDef: {
            */ attempt?: AttemptView | null;
         busy?: boolean;
         errors?: FieldError[];
+        /** `FlowState.sessionKept`: whether this browser kept the session the sign-in created. */ sessionKept?: boolean | undefined;
         titleKey: string;
         onSubmit: (values: Record<string, string>) => void;
         /**
@@ -27,6 +28,32 @@ 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;
     };
     events: {
         [evt: string]: CustomEvent<any>;