diff --git a/.changeset/totp-svelte-ui.md b/.changeset/totp-svelte-ui.md
new file mode 100644
index 0000000..f73c9e7
--- /dev/null
+++ b/.changeset/totp-svelte-ui.md
@@ -0,0 +1,13 @@
+---
+'@seamless-auth/svelte': minor
+---
+
+The bundled screens cover authenticator apps (TOTP).
+
+- `SaRegisterAuthenticator` (`/register-authenticator`) adds an authenticator app: a QR code drawn in the page with no extra dependency, the setup key with a copy button and an `otpauth://` link, and the first code to confirm it. It ends on a success state, then continues where passkey enrolment does.
+- `SaAuthenticatorCode` (`/authenticator-code`) signs in with a code from the app, and explains a wrong or reused code, a lockout and a rate limit.
+- `SaLogin` offers "Use an authenticator app" with the other sign-in options. `SaRegisterPasskey` offers it when the device cannot register a passkey (unless the application signs in with passkeys only, where the API would refuse the app), and always to a recovery session, which can no longer skip enrolment. Enrolling an authenticator app lifts the recovery restriction.
+- `SaAuthenticatorAppSettings` is a router-free settings section: status, set up, and turn off with a current code.
+- `authRoutePaths` gains `registerAuthenticator` and `authenticatorCode`, and the package re-exports the `TotpStatus` type.
+
+Mount the two new screens at their paths (or pass `paths` to `createKitNavigator`). Needs a server adapter that proxies the auth API's `/totp/*` routes.
diff --git a/packages/svelte/README.md b/packages/svelte/README.md
index 14aab4e..6f5048b 100644
--- a/packages/svelte/README.md
+++ b/packages/svelte/README.md
@@ -175,16 +175,27 @@ Put `requireGuest` only on the screens that start a sign-in (`login`, `passkey-l
 Mount each at its route. The paths below are what the screens navigate between by default; pass
 `paths` to `createKitNavigator` if you mount them elsewhere.
 
-| Default path        | Component                     | Purpose                                                     |
-| ------------------- | ----------------------------- | ----------------------------------------------------------- |
-| `/login`            | `SaLogin`                     | Sign in with an email or phone number, or create an account |
-| `/passkey-login`    | `SaPasskeyLogin`              | Sign in with a passkey alone                                |
-| `/verify-email-otp` | `SaVerifyOtp channel="email"` | Check an email code                                         |
-| `/verify-phone-otp` | `SaVerifyOtp channel="phone"` | Check a text message code                                   |
-| `/magic-link-sent`  | `SaMagicLinkSent`             | Wait for an emailed link to be used                         |
-| `/verify-magiclink` | `SaVerifyMagicLink`           | Where the emailed link lands. The auth API builds this URL  |
-| `/oauth/callback`   | `SaOAuthCallback`             | The OAuth redirect URI to register with providers           |
-| `/register-passkey` | `SaRegisterPasskey`           | Offer passkey enrolment after sign-up                       |
+| Default path              | Component                     | Purpose                                                     |
+| ------------------------- | ----------------------------- | ----------------------------------------------------------- |
+| `/login`                  | `SaLogin`                     | Sign in with an email or phone number, or create an account |
+| `/passkey-login`          | `SaPasskeyLogin`              | Sign in with a passkey alone                                |
+| `/verify-email-otp`       | `SaVerifyOtp channel="email"` | Check an email code                                         |
+| `/verify-phone-otp`       | `SaVerifyOtp channel="phone"` | Check a text message code                                   |
+| `/magic-link-sent`        | `SaMagicLinkSent`             | Wait for an emailed link to be used                         |
+| `/verify-magiclink`       | `SaVerifyMagicLink`           | Where the emailed link lands. The auth API builds this URL  |
+| `/oauth/callback`         | `SaOAuthCallback`             | The OAuth redirect URI to register with providers           |
+| `/register-passkey`       | `SaRegisterPasskey`           | Offer passkey enrolment after sign-up                       |
+| `/register-authenticator` | `SaRegisterAuthenticator`     | Add an authenticator app instead of a passkey               |
+| `/authenticator-code`     | `SaAuthenticatorCode`         | Sign in with a code from an authenticator app               |
+
+The sign-in screen always offers "Use an authenticator app" among the other ways in, since `/login`
+never lists it. `SaRegisterPasskey` offers it when the device cannot register a passkey (unless the application signs in with passkeys only, where the API would refuse the app), and always
+to a recovery session, which cannot skip enrolment: adding either factor lifts the recovery
+restriction.
+
+`SaAuthenticatorAppSettings` is a router-free settings section for a signed-in page: it shows
+whether an authenticator app is set up, adds one (QR code, setup key with a copy button, first code)
+and turns it off with a current code.
 
 The building blocks are exported too: `SaOtpInput` (bind with `bind:value`), `SaFallbackOptions`,
 `SaOAuthProviderButtons`, `SaAuthLayout`, and `authRoutePaths`.
@@ -204,7 +215,8 @@ The screens never import a router. They navigate through an `AuthNavigator` set
 
 Every screen is a thin view over a flow in `@seamless-auth/client` (`beginSignIn`,
 `registerWithEmail`, `verifyOtp`, `watchMagicLink`, `finishMagicLinkSignIn`,
-`confirmMagicLinkSignIn`, `startOAuthSignIn`, `completeOAuthCallback`, `enrollPasskey`, and helpers). A custom screen calls the same flows with the
+`confirmMagicLinkSignIn`, `startOAuthSignIn`, `completeOAuthCallback`, `enrollPasskey`,
+`signInWithTotp`, `qrCode`, and helpers). A custom screen calls the same flows with the
 session as its actions:
 
 ```ts
diff --git a/packages/svelte/src/index.ts b/packages/svelte/src/index.ts
index 0864333..3338ad5 100644
--- a/packages/svelte/src/index.ts
+++ b/packages/svelte/src/index.ts
@@ -15,6 +15,8 @@ export {
 export { authRoutePaths } from './navigation.js';
 export type { AuthNavigator, AuthScreen } from './navigation.js';
 
+export { default as SaAuthenticatorAppSettings } from './screens/AuthenticatorAppSettings.svelte';
+export { default as SaAuthenticatorCode } from './screens/AuthenticatorCode.svelte';
 export { default as SaAuthLayout } from './screens/AuthLayout.svelte';
 export { default as SaFallbackOptions } from './screens/FallbackOptions.svelte';
 export { default as SaLogin } from './screens/Login.svelte';
@@ -23,6 +25,7 @@ export { default as SaOAuthCallback } from './screens/OAuthCallback.svelte';
 export { default as SaOAuthProviderButtons } from './screens/OAuthProviderButtons.svelte';
 export { default as SaOtpInput } from './screens/OtpInput.svelte';
 export { default as SaPasskeyLogin } from './screens/PasskeyLogin.svelte';
+export { default as SaRegisterAuthenticator } from './screens/RegisterAuthenticator.svelte';
 export { default as SaRegisterPasskey } from './screens/RegisterPasskey.svelte';
 export { default as SaVerifyMagicLink } from './screens/VerifyMagicLink.svelte';
 export { default as SaVerifyOtp } from './screens/VerifyOtp.svelte';
@@ -52,5 +55,6 @@ export type {
   SeamlessAuthClient,
   SeamlessAuthResult,
   StepUpStatus,
+  TotpStatus,
   User,
 } from '@seamless-auth/client';
diff --git a/packages/svelte/src/navigation.ts b/packages/svelte/src/navigation.ts
index 5e01f33..c99bb9d 100644
--- a/packages/svelte/src/navigation.ts
+++ b/packages/svelte/src/navigation.ts
@@ -19,6 +19,8 @@ export const authRoutePaths = {
   verifyMagicLink: '/verify-magiclink',
   oauthCallback: '/oauth/callback',
   registerPasskey: '/register-passkey',
+  registerAuthenticator: '/register-authenticator',
+  authenticatorCode: '/authenticator-code',
   magicLinkSent: '/magic-link-sent',
 } as const;
 
diff --git a/packages/svelte/src/screens/AuthenticatorAppSettings.svelte b/packages/svelte/src/screens/AuthenticatorAppSettings.svelte
new file mode 100644
index 0000000..0c45771
--- /dev/null
+++ b/packages/svelte/src/screens/AuthenticatorAppSettings.svelte
@@ -0,0 +1,140 @@
+<!--
+  Copyright © 2026 Fells Code, LLC
+  Licensed under the Apache License, Version 2.0
+  See LICENSE file in the project root for full license information
+-->
+<!--
+  The signed-in user's authenticator app: whether one is set up, adding one,
+  and turning it off. Router-free, so it sits on any settings page.
+-->
+<script lang="ts">
+  import { TOTP_CODE_LENGTH, totpErrorMessage, type TotpStatus } from '@seamless-auth/client';
+  import { onMount } from 'svelte';
+
+  import { getSeamlessAuth } from '../context.js';
+  import AuthLayout from './AuthLayout.svelte';
+  import OtpInput from './OtpInput.svelte';
+  import TotpEnrollment from './TotpEnrollment.svelte';
+
+  const auth = getSeamlessAuth();
+
+  let status = $state.raw<TotpStatus | null>(null);
+  let loadError = $state('');
+  let mode = $state<'view' | 'enroll' | 'disable'>('view');
+  let notice = $state('');
+  let code = $state('');
+  let error = $state('');
+  let busy = $state(false);
+
+  const formatDate = (value: string) => new Date(value).toLocaleDateString();
+
+  onMount(() => {
+    void load();
+  });
+
+  async function load() {
+    loadError = '';
+    const { data, error: failure } = await auth.client.getTotpStatus();
+
+    if (failure) {
+      loadError = totpErrorMessage(failure, 'Could not load your authenticator app.');
+      return;
+    }
+
+    status = data;
+  }
+
+  function show(next: 'view' | 'enroll' | 'disable') {
+    mode = next;
+    notice = '';
+    error = '';
+    code = '';
+  }
+
+  async function enrolled() {
+    show('view');
+    notice = 'Authenticator app added.';
+    await load();
+  }
+
+  async function disable(event: SubmitEvent) {
+    event.preventDefault();
+    if (busy) return;
+    error = '';
+
+    if (code.length !== TOTP_CODE_LENGTH) {
+      error = `Enter the ${TOTP_CODE_LENGTH}-digit code from your authenticator app.`;
+      return;
+    }
+
+    busy = true;
+
+    try {
+      const { error: failure } = await auth.client.disableTotp(code);
+
+      if (failure) {
+        error = totpErrorMessage(failure, 'Could not turn off the authenticator app.');
+        code = '';
+        return;
+      }
+
+      show('view');
+      notice = 'Authenticator app turned off.';
+      await load();
+    } finally {
+      busy = false;
+    }
+  }
+</script>
+
+<AuthLayout>
+  <section aria-labelledby="seamless-authenticator-heading">
+    <h2 id="seamless-authenticator-heading" class="sa-heading">Authenticator app</h2>
+    <p class="sa-description">Sign in with a code from an app such as 1Password or Google Authenticator.</p>
+
+    {#if notice}
+      <p class="sa-success" role="status">{notice}</p>
+    {/if}
+
+    {#if loadError}
+      <p class="sa-error" role="alert">{loadError}</p>
+      <button type="button" class="sa-secondary" onclick={load}>Try again</button>
+    {:else if !status}
+      <div class="sa-center">
+        <div class="sa-spinner" aria-hidden="true"></div>
+        <span>Loading...</span>
+      </div>
+    {:else if mode === 'enroll'}
+      <TotpEnrollment onEnrolled={enrolled} />
+      <button type="button" class="sa-link" onclick={() => show('view')}>Cancel</button>
+    {:else if mode === 'disable'}
+      <form onsubmit={disable}>
+        <span class="sa-label">Enter a current code from your authenticator app to turn it off</span>
+        <OtpInput bind:value={code} length={TOTP_CODE_LENGTH} mode="numeric" name="totp-disable" />
+        {#if error}
+          <p class="sa-error" role="alert">{error}</p>
+        {/if}
+        <button type="submit" class="sa-button" disabled={busy}>
+          {busy ? 'Turning off...' : 'Turn off authenticator app'}
+        </button>
+        <button type="button" class="sa-link" disabled={busy} onclick={() => show('view')}>
+          Cancel
+        </button>
+      </form>
+    {:else if status.enabled}
+      <p class="sa-helper-text">
+        On{status.verifiedAt ? `, added ${formatDate(status.verifiedAt)}` : ''}{status.lastUsedAt
+          ? `, last used ${formatDate(status.lastUsedAt)}`
+          : ''}.
+      </p>
+      <button type="button" class="sa-secondary" onclick={() => show('disable')}>
+        Turn off
+      </button>
+    {:else}
+      <p class="sa-helper-text">Not set up.</p>
+      <button type="button" class="sa-button" onclick={() => show('enroll')}>
+        Set up authenticator app
+      </button>
+    {/if}
+  </section>
+</AuthLayout>
diff --git a/packages/svelte/src/screens/AuthenticatorCode.svelte b/packages/svelte/src/screens/AuthenticatorCode.svelte
new file mode 100644
index 0000000..9c28f19
--- /dev/null
+++ b/packages/svelte/src/screens/AuthenticatorCode.svelte
@@ -0,0 +1,71 @@
+<!--
+  Copyright © 2026 Fells Code, LLC
+  Licensed under the Apache License, Version 2.0
+  See LICENSE file in the project root for full license information
+-->
+<!-- Signs in with a code from an authenticator app, on the sign-in the login screen started. -->
+<script lang="ts">
+  import { signInWithTotp, TOTP_CODE_LENGTH } from '@seamless-auth/client';
+
+  import { getAuthNavigator, getSeamlessAuth } from '../context.js';
+  import AuthLayout from './AuthLayout.svelte';
+  import OtpInput from './OtpInput.svelte';
+
+  const auth = getSeamlessAuth();
+  const navigator = getAuthNavigator();
+
+  let code = $state('');
+  let error = $state('');
+  let loading = $state(false);
+
+  async function submit(event: SubmitEvent) {
+    event.preventDefault();
+    if (loading) return;
+    error = '';
+    loading = true;
+
+    try {
+      const result = await signInWithTotp(
+        { client: auth.client, refreshSession: auth.refreshSession },
+        code
+      );
+
+      if (result.error !== null) {
+        error = result.error;
+        code = '';
+        return;
+      }
+
+      await navigator.toApp();
+    } catch {
+      // Backstop for unexpected errors only.
+      error = 'Verification failed.';
+    } finally {
+      loading = false;
+    }
+  }
+</script>
+
+<AuthLayout>
+  <h2 class="sa-heading">Enter your authenticator code</h2>
+  <p class="sa-subtitle">Open your authenticator app and enter the code it shows for this account.</p>
+
+  {#if error}
+    <p class="sa-error" role="alert">{error}</p>
+  {/if}
+
+  <form onsubmit={submit}>
+    <div>
+      <span class="sa-label">Authenticator Code</span>
+      <OtpInput bind:value={code} length={TOTP_CODE_LENGTH} mode="numeric" name="totp" />
+    </div>
+
+    <button type="submit" class="sa-button" disabled={loading}>
+      {loading ? 'Verifying...' : 'Verify & Continue'}
+    </button>
+
+    <button type="button" class="sa-link" onclick={() => navigator.toScreen('login')}>
+      Back to login
+    </button>
+  </form>
+</AuthLayout>
diff --git a/packages/svelte/src/screens/FallbackOptions.svelte b/packages/svelte/src/screens/FallbackOptions.svelte
index bad4592..cf87b09 100644
--- a/packages/svelte/src/screens/FallbackOptions.svelte
+++ b/packages/svelte/src/screens/FallbackOptions.svelte
@@ -18,6 +18,7 @@
     onEmailOtp,
     onPhoneOtp,
     onPasskeyRetry,
+    onAuthenticatorApp,
   }: {
     identifier: string;
     /** Null while the methods are unknown; the options then stay permissive. */
@@ -26,6 +27,11 @@
     onEmailOtp?: () => void;
     onPhoneOtp: () => void;
     onPasskeyRetry?: () => void;
+    /**
+     * Offered whenever it is passed: `/login` never lists the authenticator
+     * app, and the API answers a code for any identifier alike.
+     */
+    onAuthenticatorApp?: () => void;
   } = $props();
 
   const options = $derived(
@@ -36,7 +42,7 @@
   );
 </script>
 
-{#if hasFallbackSignInOption(options)}
+{#if hasFallbackSignInOption(options) || onAuthenticatorApp}
   <div class="sa-fallback">
     <div class="sa-fallback-header">Choose a sign-in method</div>
     <p class="sa-fallback-description">Choose another secure sign-in method.</p>
@@ -60,6 +66,12 @@
           <span class="sa-action-subtext">Receive a one-time code via SMS</span>
         </button>
       {/if}
+      {#if onAuthenticatorApp}
+        <button type="button" class="sa-action" onclick={onAuthenticatorApp}>
+          <span class="sa-action-title">Use an authenticator app</span>
+          <span class="sa-action-subtext">Enter a code from your authenticator app</span>
+        </button>
+      {/if}
     </div>
 
     {#if options.passkeyRetry}
diff --git a/packages/svelte/src/screens/Login.svelte b/packages/svelte/src/screens/Login.svelte
index c7e4167..f3e404b 100644
--- a/packages/svelte/src/screens/Login.svelte
+++ b/packages/svelte/src/screens/Login.svelte
@@ -203,6 +203,7 @@
             onEmailOtp={sendEmailOtp}
             onPhoneOtp={sendPhoneOtp}
             onPasskeyRetry={auth.passkeySupported ? retryPasskey : undefined}
+            onAuthenticatorApp={() => navigator.toScreen('authenticatorCode')}
           />
         {/if}
 
diff --git a/packages/svelte/src/screens/RegisterAuthenticator.svelte b/packages/svelte/src/screens/RegisterAuthenticator.svelte
new file mode 100644
index 0000000..567337c
--- /dev/null
+++ b/packages/svelte/src/screens/RegisterAuthenticator.svelte
@@ -0,0 +1,49 @@
+<!--
+  Copyright © 2026 Fells Code, LLC
+  Licensed under the Apache License, Version 2.0
+  See LICENSE file in the project root for full license information
+-->
+<!--
+  Enrols an authenticator app in place of a passkey, for a device that cannot
+  register one or a recovery session that has to add a factor. Enrolling lifts
+  the recovery restriction just as a passkey does.
+-->
+<script lang="ts">
+  import { safeReturnPath } from '@seamless-auth/client';
+
+  import { getAuthNavigator } from '../context.js';
+  import AuthLayout from './AuthLayout.svelte';
+  import TotpEnrollment from './TotpEnrollment.svelte';
+
+  const navigator = getAuthNavigator();
+  const returnTo = navigator.state().returnTo;
+  const handOver = typeof returnTo === 'string' ? { returnTo } : undefined;
+  const finish = () =>
+    returnTo === undefined ? navigator.toApp() : navigator.toLocation(safeReturnPath(returnTo));
+
+  let enrolled = $state(false);
+</script>
+
+<AuthLayout>
+  {#if enrolled}
+    <h2 class="sa-heading">Authenticator app added</h2>
+    <p class="sa-success" role="status">
+      You can now sign in with a code from your authenticator app.
+    </p>
+    <button type="button" class="sa-button" onclick={finish}>Continue</button>
+  {:else}
+    <h2 class="sa-heading">Set up an authenticator app</h2>
+    <TotpEnrollment
+      onEnrolled={() => {
+        enrolled = true;
+      }}
+    />
+    <button
+      type="button"
+      class="sa-link"
+      onclick={() => navigator.toScreen('registerPasskey', handOver)}
+    >
+      Back
+    </button>
+  {/if}
+</AuthLayout>
diff --git a/packages/svelte/src/screens/RegisterPasskey.svelte b/packages/svelte/src/screens/RegisterPasskey.svelte
index 8d0cc44..acb356e 100644
--- a/packages/svelte/src/screens/RegisterPasskey.svelte
+++ b/packages/svelte/src/screens/RegisterPasskey.svelte
@@ -32,8 +32,11 @@
   let message = $state('');
 
   // With passkey as the only enabled method, a user who skipped would have no
-  // way back into the account they just made.
-  const canSkip = $derived(hasNonPasskeyLoginMethod(auth.loginMethods));
+  // way back into the account they just made. A recovery session stays
+  // restricted until it adds a factor, so it cannot skip either.
+  const canSkip = $derived(
+    !auth.recoverySession && hasNonPasskeyLoginMethod(auth.loginMethods)
+  );
   const busy = $derived(status === 'loading');
 
   onMount(() => {
@@ -60,6 +63,12 @@
     await finish();
   }
 
+  const useAuthenticator = () =>
+    navigator.toScreen(
+      'registerAuthenticator',
+      typeof returnTo === 'string' ? { returnTo } : undefined
+    );
+
   async function finishWithoutPasskey() {
     await auth.refreshSession();
     await finish();
@@ -75,10 +84,17 @@
   {:else if !auth.passkeySupported}
     <h2 class="sa-heading">Passkeys are not available here</h2>
     <p class="sa-description">
-      {canSkip
-        ? 'This device does not support passkeys. You can continue without one and add a passkey later from a device that does.'
-        : 'This device does not support passkeys, and this application requires one to sign in. Try again from a device or browser that supports them.'}
+      {auth.recoverySession
+        ? 'This device does not support passkeys. Set up an authenticator app to finish securing your account.'
+        : canSkip
+          ? 'This device does not support passkeys. You can continue without one and add a passkey later from a device that does.'
+          : 'This device does not support passkeys, and this application requires one to sign in. Try again from a device or browser that supports them.'}
     </p>
+    {#if auth.recoverySession || canSkip}
+      <button type="button" class="sa-secondary" onclick={useAuthenticator}>
+        Use an authenticator app
+      </button>
+    {/if}
     {#if canSkip}
       <button type="button" class="sa-button" onclick={finishWithoutPasskey}>Continue</button>
     {/if}
@@ -98,6 +114,11 @@
     >
       Use a security key instead
     </button>
+    {#if auth.recoverySession}
+      <button type="button" class="sa-secondary" disabled={busy} onclick={useAuthenticator}>
+        Use an authenticator app
+      </button>
+    {/if}
     {#if message}
       <p class={status === 'success' ? 'sa-success' : 'sa-error'} role="status">{message}</p>
     {/if}
diff --git a/packages/svelte/src/screens/TotpEnrollment.svelte b/packages/svelte/src/screens/TotpEnrollment.svelte
new file mode 100644
index 0000000..82d1a16
--- /dev/null
+++ b/packages/svelte/src/screens/TotpEnrollment.svelte
@@ -0,0 +1,148 @@
+<!--
+  Copyright © 2026 Fells Code, LLC
+  Licensed under the Apache License, Version 2.0
+  See LICENSE file in the project root for full license information
+-->
+<!--
+  Adds an authenticator app to the signed-in account: a QR code and setup key
+  to add it, then its first code to prove it works.
+-->
+<script lang="ts">
+  import {
+    formatTotpSecret,
+    qrCode,
+    TOTP_CODE_LENGTH,
+    totpErrorMessage,
+    type TotpEnrollmentStartResult,
+  } from '@seamless-auth/client';
+  import { onMount } from 'svelte';
+
+  import { getSeamlessAuth } from '../context.js';
+  import OtpInput from './OtpInput.svelte';
+
+  let { onEnrolled }: { onEnrolled: () => void | Promise<void> } = $props();
+
+  const auth = getSeamlessAuth();
+
+  let enrollment = $state.raw<TotpEnrollmentStartResult | null>(null);
+  let starting = $state(true);
+  let startError = $state('');
+  let code = $state('');
+  let error = $state('');
+  let verifying = $state(false);
+  let copyMessage = $state('');
+
+  const qr = $derived(enrollment ? qrCode(enrollment.otpauthUrl) : null);
+  // The URL comes from the server, so only an otpauth: one becomes a link.
+  const appLink = $derived(
+    enrollment?.otpauthUrl.startsWith('otpauth://') ? enrollment.otpauthUrl : null
+  );
+
+  onMount(() => {
+    void start();
+  });
+
+  async function start() {
+    starting = true;
+    startError = '';
+
+    const { data, error: failure } = await auth.client.startTotpEnrollment();
+
+    starting = false;
+    if (failure) {
+      startError = totpErrorMessage(failure, 'Could not start setting up an authenticator app.');
+      return;
+    }
+
+    enrollment = data;
+  }
+
+  async function copySecret() {
+    if (!enrollment) return;
+
+    try {
+      await globalThis.navigator.clipboard.writeText(enrollment.secret);
+      copyMessage = 'Setup key copied.';
+    } catch {
+      copyMessage = 'Could not copy. Select the key and copy it instead.';
+    }
+  }
+
+  async function verify(event: SubmitEvent) {
+    event.preventDefault();
+    if (verifying) return;
+    error = '';
+
+    if (code.length !== TOTP_CODE_LENGTH) {
+      error = `Enter the ${TOTP_CODE_LENGTH}-digit code from your authenticator app.`;
+      return;
+    }
+
+    verifying = true;
+
+    try {
+      const { error: failure } = await auth.client.verifyTotpEnrollment(code);
+
+      if (failure) {
+        error = totpErrorMessage(failure, 'That code could not be verified.');
+        code = '';
+        return;
+      }
+
+      await auth.refreshSession();
+      await onEnrolled();
+    } finally {
+      verifying = false;
+    }
+  }
+</script>
+
+{#if starting}
+  <div class="sa-center">
+    <div class="sa-spinner" aria-hidden="true"></div>
+    <span>Preparing your authenticator app...</span>
+  </div>
+{:else if !enrollment || !qr}
+  <p class="sa-error" role="alert">{startError}</p>
+  <button type="button" class="sa-secondary" onclick={start}>Try again</button>
+{:else}
+  <p class="sa-description">
+    Scan this QR code with your authenticator app, or enter the setup key by hand.
+  </p>
+  <div class="sa-center">
+    <svg
+      role="img"
+      aria-label="QR code for your authenticator app"
+      width="192"
+      height="192"
+      viewBox={`0 0 ${qr.size} ${qr.size}`}
+      shape-rendering="crispEdges"
+    >
+      <rect width={qr.size} height={qr.size} fill="#ffffff" />
+      <path d={qr.path} fill="#000000" />
+    </svg>
+  </div>
+
+  <span class="sa-label">Setup key</span>
+  <p class="sa-identifier"><code>{formatTotpSecret(enrollment.secret)}</code></p>
+  <button type="button" class="sa-secondary" onclick={copySecret}>Copy setup key</button>
+  {#if copyMessage}
+    <p class="sa-helper-text" role="status">{copyMessage}</p>
+  {/if}
+  {#if appLink}
+    <p class="sa-helper-text">
+      <a class="sa-link" href={appLink}>Open in an authenticator app on this device</a>
+    </p>
+  {/if}
+
+  <form onsubmit={verify}>
+    <span class="sa-label">Enter the code your authenticator app shows</span>
+    <OtpInput bind:value={code} length={TOTP_CODE_LENGTH} mode="numeric" name="totp" />
+    {#if error}
+      <p class="sa-error" role="alert">{error}</p>
+    {/if}
+    <button type="submit" class="sa-button" disabled={verifying}>
+      {verifying ? 'Verifying...' : 'Verify code'}
+    </button>
+  </form>
+{/if}
diff --git a/packages/svelte/tests/Harness.svelte b/packages/svelte/tests/Harness.svelte
index 28ec945..832c9ff 100644
--- a/packages/svelte/tests/Harness.svelte
+++ b/packages/svelte/tests/Harness.svelte
@@ -9,10 +9,13 @@
   import { setAuthNavigator, setSeamlessAuth, type SeamlessAuth } from '../src';
   import type { AuthNavigator } from '../src/navigation';
   import {
+    SaAuthenticatorAppSettings,
+    SaAuthenticatorCode,
     SaLogin,
     SaMagicLinkSent,
     SaOAuthCallback,
     SaPasskeyLogin,
+    SaRegisterAuthenticator,
     SaRegisterPasskey,
     SaVerifyMagicLink,
     SaVerifyOtp,
@@ -52,5 +55,11 @@
     <SaOAuthCallback />
   {:else if nav.current === 'registerPasskey'}
     <SaRegisterPasskey />
+  {:else if nav.current === 'registerAuthenticator'}
+    <SaRegisterAuthenticator />
+  {:else if nav.current === 'authenticatorCode'}
+    <SaAuthenticatorCode />
+  {:else if nav.current === 'settings'}
+    <SaAuthenticatorAppSettings />
   {/if}
 {/key}
diff --git a/packages/svelte/tests/fakeNavigator.svelte.ts b/packages/svelte/tests/fakeNavigator.svelte.ts
index 27f7773..f7f325e 100644
--- a/packages/svelte/tests/fakeNavigator.svelte.ts
+++ b/packages/svelte/tests/fakeNavigator.svelte.ts
@@ -11,11 +11,11 @@ import type { AuthNavigator, AuthScreen } from '../src/navigation';
  * `location` is what the address bar would show.
  */
 export function createFakeNavigator(start: {
-  screen: AuthScreen | 'app';
+  screen: AuthScreen | 'app' | 'settings';
   query?: string;
 }) {
   const nav = $state({
-    current: start.screen as AuthScreen | 'app',
+    current: start.screen as AuthScreen | 'app' | 'settings',
     path: '/',
     state: {} as Record<string, unknown>,
     query: new URLSearchParams(start.query ?? ''),
diff --git a/packages/svelte/tests/screens.test.ts b/packages/svelte/tests/screens.test.ts
index fa9e5d4..ab0454e 100644
--- a/packages/svelte/tests/screens.test.ts
+++ b/packages/svelte/tests/screens.test.ts
@@ -31,7 +31,7 @@ const ok = { body: { message: 'Success' } };
 let nav: ReturnType<typeof createFakeNavigator>['nav'];
 
 async function open(
-  start: AuthScreen,
+  start: AuthScreen | 'settings',
   routes: Record<string, AdapterReply | AdapterHandler>,
   options: {
     passkeys?: boolean;
@@ -632,6 +632,336 @@ describe('passkey screens', () => {
   });
 });
 
+const enrollment = {
+  body: {
+    message: 'Success',
+    secret: 'JBSWY3DPEHPK3PXPJBSWY3DP',
+    otpauthUrl:
+      'otpauth://totp/Example:ada%40example.com?secret=JBSWY3DPEHPK3PXPJBSWY3DP',
+    issuer: 'Example',
+    accountName: 'ada@example.com',
+    algorithm: 'SHA1',
+    digits: 6,
+    period: 30,
+  },
+};
+const totpRefused = { status: 401, body: { error: 'totp_verification_failed' } };
+
+describe('authenticator app sign-in', () => {
+  it('is offered with the other ways in, even though /login never lists it', async () => {
+    localStorage.setItem('seamlessauth_seen', 'true');
+    await open('login', {
+      'POST /login': { body: { loginMethods: ['passkey'] } },
+      'GET /system-config/public': { body: { loginMethods: ['passkey'] } },
+    });
+
+    await type('#identifier', 'ada@example.com');
+    await submit();
+
+    expect(text()).toContain('Choose a sign-in method');
+    expect(text()).not.toContain('Email Magic Link');
+    await click(/Use an authenticator app/);
+    expect(nav.current).toBe('authenticatorCode');
+    expect(heading()).toBe('Enter your authenticator code');
+  });
+
+  it('signs in with a code', async () => {
+    let session = signedOut;
+    const { adapter } = await open('authenticatorCode', {
+      'GET /users/me': () => session,
+      'POST /totp/verify-login': () => {
+        session = signedIn;
+        return ok;
+      },
+    });
+
+    await typeCode('123456');
+    await submit();
+
+    expect(bodyOf(adapter, 'POST', '/totp/verify-login')).toEqual({ code: '123456' });
+    expect(nav.current).toBe('app');
+  });
+
+  it('asks for a whole code before sending one', async () => {
+    const { adapter } = await open('authenticatorCode', {});
+    await submit();
+    expect(screen.getByRole('alert').textContent).toContain('Enter the 6-digit code');
+    expect(adapter.called('POST', '/totp/verify-login')).toHaveLength(0);
+  });
+
+  it('explains a wrong or reused code, a lockout and a rate limit', async () => {
+    let reply: AdapterReply = totpRefused;
+    await open('authenticatorCode', { 'POST /totp/verify-login': () => reply });
+
+    await typeCode('123456');
+    await submit();
+    expect(screen.getByRole('alert').textContent).toContain('Each code works once.');
+    expect(nav.current).toBe('authenticatorCode');
+
+    reply = { status: 423, body: { error: 'account_locked', retryAfterSeconds: 120 } };
+    await typeCode('234567');
+    await submit();
+    expect(screen.getByRole('alert').textContent).toContain('Try again in 2 minutes.');
+
+    reply = { status: 429, body: { error: 'too_many_requests' } };
+    await typeCode('345678');
+    await submit();
+    expect(screen.getByRole('alert').textContent).toContain('Too many attempts.');
+
+    await click('Back to login');
+    expect(nav.current).toBe('login');
+  });
+});
+
+describe('authenticator app enrollment', () => {
+  let clipboard: { writeText: ReturnType<typeof vi.fn> };
+
+  beforeEach(() => {
+    clipboard = { writeText: vi.fn().mockResolvedValue(undefined) };
+    Object.defineProperty(globalThis.navigator, 'clipboard', {
+      value: clipboard,
+      configurable: true,
+    });
+  });
+
+  it('shows a QR code and setup key, verifies the first code, and continues', async () => {
+    const { adapter } = await open(
+      'registerAuthenticator',
+      { 'POST /totp/enroll/start': enrollment, 'POST /totp/enroll/verify': ok },
+      { state: { returnTo: '/settings' } }
+    );
+    await waitSettled();
+
+    expect(heading()).toBe('Set up an authenticator app');
+    const qr = screen.getByRole('img', { name: 'QR code for your authenticator app' });
+    expect(qr.querySelector('rect')?.getAttribute('fill')).toBe('#ffffff');
+    expect(qr.querySelector('path')?.getAttribute('d')).toMatch(/^M/);
+    expect(text()).toContain('JBSW Y3DP EHPK 3PXP JBSW Y3DP');
+    expect(
+      screen.getByRole('link', { name: /Open in an authenticator app/ })
+    ).toHaveAttribute('href', enrollment.body.otpauthUrl);
+
+    await click('Copy setup key');
+    expect(clipboard.writeText).toHaveBeenCalledWith('JBSWY3DPEHPK3PXPJBSWY3DP');
+    expect(text()).toContain('Setup key copied.');
+
+    await typeCode('123456');
+    await submit();
+
+    expect(bodyOf(adapter, 'POST', '/totp/enroll/verify')).toEqual({ code: '123456' });
+    expect(heading()).toBe('Authenticator app added');
+    expect(screen.getByRole('status').textContent).toContain('sign in with a code');
+
+    await click('Continue');
+    expect(nav.current).toBe('app');
+    expect(nav.path).toBe('/settings');
+  });
+
+  it('reports a refused code and a failed copy, and lets the user go back', async () => {
+    clipboard.writeText.mockRejectedValue(new Error('denied'));
+    await open(
+      'registerAuthenticator',
+      { 'POST /totp/enroll/start': enrollment, 'POST /totp/enroll/verify': totpRefused },
+      { state: { returnTo: '/settings' } }
+    );
+    await waitSettled();
+
+    await click('Copy setup key');
+    expect(text()).toContain('Could not copy.');
+
+    await submit();
+    expect(screen.getByRole('alert').textContent).toContain('Enter the 6-digit code');
+
+    await typeCode('123456');
+    await submit();
+    expect(screen.getByRole('alert').textContent).toContain('That code did not work.');
+    expect(heading()).toBe('Set up an authenticator app');
+
+    await click('Back');
+    expect(nav.current).toBe('registerPasskey');
+    expect(nav.state).toEqual({ returnTo: '/settings' });
+  });
+
+  it('explains an enrollment that cannot start, and retries it', async () => {
+    let reply: AdapterReply = { status: 409, body: { error: 'secret_required' } };
+    await open('registerAuthenticator', { 'POST /totp/enroll/start': () => reply });
+    await waitSettled();
+
+    expect(screen.getByRole('alert').textContent).toContain(
+      'Authenticator apps are not available'
+    );
+
+    reply = {
+      body: { ...enrollment.body, otpauthUrl: 'javascript:alert(1)' },
+    };
+    await click('Try again');
+    expect(screen.getByRole('img', { name: /QR code/ })).toBeInTheDocument();
+    expect(screen.queryByRole('link')).toBeNull();
+  });
+
+  it('is offered when the device cannot register a passkey', async () => {
+    await open('registerPasskey', {
+      'GET /system-config/public': { body: { loginMethods: ['passkey', 'email_otp'] } },
+    });
+    await waitSettled();
+
+    expect(text()).toContain('You can continue without one');
+    await click('Use an authenticator app');
+    expect(nav.current).toBe('registerAuthenticator');
+  });
+
+  // A passkey-only application refuses authenticator sign-in, so an app set up
+  // here could never sign the user in.
+  it('is not offered when the application requires a passkey', async () => {
+    await open('registerPasskey', {
+      'GET /system-config/public': { body: { loginMethods: ['passkey'] } },
+    });
+    await waitSettled();
+
+    expect(text()).toContain('requires one to sign in');
+    expect(screen.queryByRole('button', { name: 'Use an authenticator app' })).toBeNull();
+  });
+
+  it('lets a recovery session finish with an authenticator app, and never skip', async () => {
+    let recovery = true;
+    const { auth } = await open(
+      'registerPasskey',
+      {
+        'GET /users/me': () => ({ body: { ...(signedIn.body as object), recovery } }),
+        'GET /system-config/public': { body: { loginMethods: ['passkey', 'email_otp'] } },
+        'POST /totp/enroll/start': enrollment,
+        'POST /totp/enroll/verify': () => {
+          recovery = false;
+          return ok;
+        },
+        'POST /refresh': ok,
+      },
+      { passkeys: true }
+    );
+    await waitSettled();
+
+    expect(auth.recoverySession).toBe(true);
+    expect(heading()).toBe('Secure Your Account with a Passkey');
+    expect(screen.queryByRole('button', { name: 'Skip for now' })).toBeNull();
+
+    await click('Use an authenticator app');
+    await waitSettled();
+    await typeCode('123456');
+    await submit();
+
+    expect(heading()).toBe('Authenticator app added');
+    expect(auth.recoverySession).toBe(false);
+  });
+
+  it('gives a recovery session on a device without passkeys a way forward', async () => {
+    await open('registerPasskey', {
+      'GET /users/me': { body: { ...(signedIn.body as object), recovery: true } },
+      'GET /system-config/public': { body: { loginMethods: ['passkey', 'email_otp'] } },
+    });
+    await waitSettled();
+
+    expect(text()).toContain(
+      'Set up an authenticator app to finish securing your account.'
+    );
+    expect(screen.queryByRole('button', { name: 'Continue' })).toBeNull();
+    expect(button('Use an authenticator app')).toBeInTheDocument();
+  });
+});
+
+describe('authenticator app settings', () => {
+  const status = (enabled: boolean) => ({
+    body: {
+      enabled,
+      verifiedAt: enabled ? '2026-10-01T12:00:00.000Z' : null,
+      lastUsedAt: enabled ? '2026-10-20T12:00:00.000Z' : null,
+    },
+  });
+
+  it('sets one up', async () => {
+    let enabled = false;
+    await open('settings', {
+      'GET /users/me': signedIn,
+      'GET /totp/status': () => status(enabled),
+      'POST /totp/enroll/start': enrollment,
+      'POST /totp/enroll/verify': () => {
+        enabled = true;
+        return ok;
+      },
+    });
+    await waitSettled();
+
+    expect(heading()).toBe('Authenticator app');
+    expect(text()).toContain('Not set up.');
+
+    await click('Set up authenticator app');
+    await waitSettled();
+    expect(screen.getByRole('img', { name: /QR code/ })).toBeInTheDocument();
+
+    await click('Cancel');
+    expect(text()).toContain('Not set up.');
+
+    await click('Set up authenticator app');
+    await waitSettled();
+    await typeCode('123456');
+    await submit();
+
+    expect(screen.getByRole('status').textContent).toContain('Authenticator app added.');
+    expect(text()).toContain('On, added ');
+    expect(text()).toContain('last used ');
+  });
+
+  it('turns one off with a current code', async () => {
+    let enabled = true;
+    let reply: AdapterReply = totpRefused;
+    const { adapter } = await open('settings', {
+      'GET /users/me': signedIn,
+      'GET /totp/status': () => status(enabled),
+      'POST /totp/disable': () => {
+        if (reply === ok) enabled = false;
+        return reply;
+      },
+    });
+    await waitSettled();
+
+    await click('Turn off');
+    await submit();
+    expect(screen.getByRole('alert').textContent).toContain('Enter the 6-digit code');
+    expect(adapter.called('POST', '/totp/disable')).toHaveLength(0);
+
+    await typeCode('123456');
+    await submit();
+    expect(screen.getByRole('alert').textContent).toContain('That code did not work.');
+
+    reply = ok;
+    await typeCode('234567');
+    await submit();
+
+    expect(bodyOf(adapter, 'POST', '/totp/disable')).toEqual({ code: '123456' });
+    expect(adapter.called('POST', '/totp/disable')).toHaveLength(2);
+    expect(screen.getByRole('status').textContent).toContain(
+      'Authenticator app turned off.'
+    );
+    expect(text()).toContain('Not set up.');
+  });
+
+  it('retries a status that will not load', async () => {
+    let reply: AdapterReply = { status: 500 };
+    await open('settings', {
+      'GET /users/me': signedIn,
+      'GET /totp/status': () => reply,
+    });
+    await waitSettled();
+
+    expect(screen.getByRole('alert').textContent).toContain(
+      'Could not load your authenticator app.'
+    );
+
+    reply = status(false);
+    await click('Try again');
+    expect(text()).toContain('Not set up.');
+  });
+});
+
 describe('stylesheet', () => {
   it('adds the stylesheet with a nonce, or not at all', async () => {
     await open('passkeyLogin', {}, { config: { cspNonce: 'n0nce' } });