@oxy.so/services 8.1.1 → 8.3.0

package/lib/typescript/module/ui/types/navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../../../src/ui/types/navigation.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../../../src/ui/types/navigation.ts"],"names":[],"mappings":"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"}

package/lib/typescript/module/ui/utils/buildId.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The identity of the JS bundle that is running, used as the buster for every
+ * persisted query cache the SDK owns.
+ *
+ * A persisted cache is restored and served before any refetch (offline-first),
+ * so data written by an older build reaches components in whatever shape that
+ * build used. Busting on the build means no app ever has to remember to bump a
+ * version when a query's shape changes: a new build simply starts from the
+ * network. Inbox shipped exactly that crash when a hand-kept buster was missed.
+ *
+ * `@oxy.so/app-preset`'s Babel config replaces `process.env.OXY_BUILD_ID` with
+ * the commit at bundle time, node_modules included. An app that does not use
+ * the preset gets a constant, which behaves like a buster that is never bumped.
+ */
+export declare function getOxyBuildId(): string;
+//# sourceMappingURL=buildId.d.ts.map

package/lib/typescript/module/ui/utils/buildId.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildId.d.ts","sourceRoot":"","sources":["../../../../../src/ui/utils/buildId.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,IAAI,MAAM,CAGtC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxy.so/services",
-  "version": "8.1.1",
+  "version": "8.3.0",
   "description": "OxyHQ Expo/React Native SDK — UI components, screens, and native features",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -155,7 +155,7 @@
   },
   "dependencies": {
     "@expo/config-plugins": "57.0.9",
-    "@oxy.so/contracts": "^4.0.0",
+    "@oxy.so/contracts": "^4.1.0",
     "color": "^4.2.3"
   },
   "devDependencies": {
@@ -163,7 +163,7 @@
     "@commitlint/cli": "^21.2.1",
     "@commitlint/config-conventional": "^21.2.0",
     "@expo/vector-icons": "^15.0.3",
-    "@oxy.so/core": "3.0.2",
+    "@oxy.so/core": "3.1.0",
     "@react-native-async-storage/async-storage": "^2.0.0",
     "@react-native-community/netinfo": "^12.0.1",
     "@react-native/babel-preset": "^0.86.2",
@@ -178,7 +178,7 @@
     "@types/jest": "^30.0.0",
     "@types/node": "^20.19.43",
     "@types/react": "*",
-    "@oxy.so/bloom": "^4.26.0",
+    "@oxy.so/bloom": "^4.31.0",
     "copyfiles": "^2.4.1",
     "expo-constants": "~57.0.5",
     "expo-file-system": "~57.0.1",
@@ -211,11 +211,11 @@
     "typescript": "^5.9.2",
     "zustand": "^5.0.14"
   },
-  "//@oxy.so/bloom": "RE-RAISE THIS FLOOR ON EVERY BREAKING BLOOM RELEASE, in the same commit as the root package.json catalog entry and the code that requires it. The breaking position is the MAJOR, so `^3.0.1` means `>=3.0.1 <4.0.0`: 3.x minors are admitted on semver's additive promise, and Bloom 4.0.0 is refused until someone raises this deliberately. The CAP is the part that is load-bearing. An earlier revision of this key recorded the opposite trade -- an uncapped `>=` floor, accepted so that intentionally-breaking Bloom 0.x minors would not be blocked -- and that trade is closed by evidence rather than by preference: an unbounded range is exactly what let `bun install` pair this package with Bloom 1.0.0 and emit no warning at all, and 1.0.0 broke it four ways (a deleted provider, a renamed confirm option, a renamed Chip fill, and two REMOVED SUBPATHS that fail at bundle time, before any typecheck runs). A floor is a claim about what was measured; a cap is the claim that nothing beyond it was. RAISED TO 3.0.1 from `^2.1.0`. Bloom 3.0.0 breaks exactly two things -- `PageHeader` defaults to `presentation=\"floating\"` and stops hiding the title under `transparent`, and `Field disabled` now reaches the control that reads the field context -- and THIS PACKAGE IMPORTS NEITHER: it renders no `PageHeader` and no `Field`, and 3.0 removes no subpath (unlike 2.0.0, which is why that floor cost code changes and this one does not). Its six `transparent` occurrences are CSS colour values, not the PageHeader prop. The cap had to move rather than widen to a union, because leaving `^2.1.0` in place is what made `bun install` resolve a SECOND, nested Bloom 2.12.4 under this package for any app on Bloom 3 -- two copies of a library whose 3.0 contracts (`control-surface`, `TopEdgeProvider`, `ScrollOffsetProvider`) are React contexts, so a provider from one copy cannot be read by a consumer from the other. Mention's `oxyRuntimeCompatibility` test is what caught it; nothing in a typecheck can. RAISED AGAIN TO 3.2.0 from `^3.0.1`, for the same class of reason the 2.x note records, only in the other direction: 3.2.0 ADDS the per-glyph icon subpaths (`@oxy.so/bloom/icons/RiAtLine`) that this package's screens now import instead of the `@oxy.so/bloom/icons` barrel, and a missing subpath fails at bundle time, in the consumer's Metro, long after this package has typechecked and shipped. `^3.0.1` would have admitted Bloom 3.0.1 and 3.1.0, neither of which has those subpaths, so the floor is the only thing standing between a consumer and a red build. Nothing else about 3.1.0 or 3.2.0 is required here; the cap stays at the major. RAISED TO ^4.2.0: FollowButton now delegates its visuals to Bloom media-header FollowButton with loading, textStyle and large size; the new shared UI contracts require one Bloom4 context across Services and its consumer.",
+  "//@oxy.so/bloom": "RE-RAISE THIS FLOOR ON EVERY BREAKING BLOOM RELEASE, in the same commit as the root package.json catalog entry and the code that requires it. The breaking position is the MAJOR, so `^3.0.1` means `>=3.0.1 <4.0.0`: 3.x minors are admitted on semver's additive promise, and Bloom 4.0.0 is refused until someone raises this deliberately. The CAP is the part that is load-bearing. An earlier revision of this key recorded the opposite trade -- an uncapped `>=` floor, accepted so that intentionally-breaking Bloom 0.x minors would not be blocked -- and that trade is closed by evidence rather than by preference: an unbounded range is exactly what let `bun install` pair this package with Bloom 1.0.0 and emit no warning at all, and 1.0.0 broke it four ways (a deleted provider, a renamed confirm option, a renamed Chip fill, and two REMOVED SUBPATHS that fail at bundle time, before any typecheck runs). A floor is a claim about what was measured; a cap is the claim that nothing beyond it was. RAISED TO 3.0.1 from `^2.1.0`. Bloom 3.0.0 breaks exactly two things -- `PageHeader` defaults to `presentation=\"floating\"` and stops hiding the title under `transparent`, and `Field disabled` now reaches the control that reads the field context -- and THIS PACKAGE IMPORTS NEITHER: it renders no `PageHeader` and no `Field`, and 3.0 removes no subpath (unlike 2.0.0, which is why that floor cost code changes and this one does not). Its six `transparent` occurrences are CSS colour values, not the PageHeader prop. The cap had to move rather than widen to a union, because leaving `^2.1.0` in place is what made `bun install` resolve a SECOND, nested Bloom 2.12.4 under this package for any app on Bloom 3 -- two copies of a library whose 3.0 contracts (`control-surface`, `TopEdgeProvider`, `ScrollOffsetProvider`) are React contexts, so a provider from one copy cannot be read by a consumer from the other. Mention's `oxyRuntimeCompatibility` test is what caught it; nothing in a typecheck can. RAISED AGAIN TO 3.2.0 from `^3.0.1`, for the same class of reason the 2.x note records, only in the other direction: 3.2.0 ADDS the per-glyph icon subpaths (`@oxy.so/bloom/icons/RiAtLine`) that this package's screens now import instead of the `@oxy.so/bloom/icons` barrel, and a missing subpath fails at bundle time, in the consumer's Metro, long after this package has typechecked and shipped. `^3.0.1` would have admitted Bloom 3.0.1 and 3.1.0, neither of which has those subpaths, so the floor is the only thing standing between a consumer and a red build. Nothing else about 3.1.0 or 3.2.0 is required here; the cap stays at the major. RAISED TO ^4.2.0: FollowButton now delegates its visuals to Bloom media-header FollowButton with loading, textStyle and large size; the new shared UI contracts require one Bloom4 context across Services and its consumer. RAISED TO ^4.31.0: the sign-in and account screens type one-time codes into `InputOtp` with `type=\"alphanumeric\"` (the long sign-in code and backup codes), which 4.31.0 adds; older 4.x drops the letters.",
   "peerDependencies": {
     "@expo/vector-icons": "^15.0.3",
-    "@oxy.so/bloom": "^4.26.0",
-    "@oxy.so/core": "^3.0.0",
+    "@oxy.so/bloom": "^4.31.0",
+    "@oxy.so/core": "^3.1.0",
     "@react-native-async-storage/async-storage": "^2.0.0",
     "@react-native-community/netinfo": ">=11.4.1",
     "@tanstack/query-async-storage-persister": "^5.101",

package/src/index.ts

@@ -306,6 +306,8 @@ export type {
 // wall before the device-first cold boot resolves. Opens the ONE account dialog.
 export { RequireOxyAuth } from './ui/components/RequireOxyAuth';
 export type { RequireOxyAuthProps, RequireOxyAuthPrompt } from './ui/components/RequireOxyAuth';
+// `OxyProvider`'s `accountQueries`: the app's per-account offline cache.
+export type { AccountQueriesConfig } from './ui/hooks/accountQueryPersistence';
 
 export { default as FollowButton } from './ui/components/FollowButton';
 export type { FollowButtonProps, SingleFollowButtonProps, MultiFollowButtonProps } from './ui/components/FollowButton';

package/src/ui/components/OxyProvider.tsx

@@ -88,6 +88,7 @@ const OxyProvider: FC<OxyProviderProps> = ({
     sessionMode = 'account',
     webAuthMode = 'popup',
     queryClient: providedQueryClient,
+    accountQueries,
     requireAuth = 'off',
     backgroundSession = false,
     language,
@@ -102,6 +103,8 @@ const OxyProvider: FC<OxyProviderProps> = ({
     const queryClientRef = useRef<ReturnType<typeof createQueryClient> | null>(null);
     const persistenceUnsubRef = useRef<(() => void) | null>(null);
     const ownsQueryClientRef = useRef(providedQueryClient === undefined);
+    // `accountQueries` is read once, at mount, like the client itself.
+    const accountMutationKeysRef = useRef(accountQueries?.mutationKeys);
     const [platformStorage, setPlatformStorage] = useState<StorageInterface | null>(null);
 
     // If the consumer supplied their own QueryClient we use it as-is and skip
@@ -135,7 +138,7 @@ const OxyProvider: FC<OxyProviderProps> = ({
             setPlatformStorage(storage);
             const client = queryClientRef.current;
             if (!client || !ownsQueryClientRef.current) return;
-            const persistence = attachQueryPersistence(client, storage);
+            const persistence = attachQueryPersistence(client, storage, accountMutationKeysRef.current);
             persistenceUnsubRef.current = persistence.unsubscribe;
             await persistence.restored;
         };
@@ -240,6 +243,7 @@ const OxyProvider: FC<OxyProviderProps> = ({
                 webAuthMode={webAuthMode}
                 backgroundSession={backgroundSession}
                 platformStorage={platformStorage}
+                accountQueries={accountQueries}
                 onAuthStateChange={onAuthStateChange as OxyRuntimeProviderProps['onAuthStateChange']}
             >
                 {productAnalytics ? <ProductAnalyticsObserver analytics={productAnalytics} /> : null}

package/src/ui/components/RequireOxyAuth.tsx

@@ -75,7 +75,7 @@ export const RequireOxyAuth: React.FC<RequireOxyAuthProps> = ({
   bannerMessage,
   bannerActionLabel,
 }) => {
-  const { canUsePrivateApi, isPrivateApiPending, openAccountDialog } = useOxy();
+  const { canUsePrivateApi, isPrivateApiPending, isAccountCacheReady, openAccountDialog } = useOxy();
 
   // Public app: render straight through. Cheap enough to short-circuit before
   // touching any gate UI.
@@ -83,8 +83,13 @@ export const RequireOxyAuth: React.FC<RequireOxyAuthProps> = ({
     return <>{children}</>;
   }
 
-  // Signed in (and token ready): render the protected subtree in every mode.
+  // Signed in (and token ready): render the protected subtree in every mode,
+  // once the account's offline cache (`accountQueries`) has restored. Before
+  // that it would render with no rows, or with the previous account's.
   if (canUsePrivateApi) {
+    if (!isAccountCacheReady) {
+      return loadingFallback ? <>{loadingFallback}</> : <NeutralLoading />;
+    }
     return <>{children}</>;
   }
 

package/src/ui/components/signIn/OxyAuthenticatorPanel.tsx

@@ -30,8 +30,8 @@ import { OxyAuthLoading, OxyAuthScreen, OxyAuthScreenHeader } from './OxyAuthScr
 import { ReauthStep } from './ReauthStep';
 import {
   AccountFlowAction,
+  AccountFlowCodeField,
   AccountFlowErrorLine,
-  AccountFlowField,
   AccountFlowNote,
   describeSignInError,
 } from './accountFlowParts';
@@ -161,16 +161,12 @@ export const OxyAuthenticatorPanel: React.FC<OxyAuthenticatorPanelProps> = ({ on
               {enrollment.secret.replace(/(.{4})/g, '$1 ').trim()}
             </Text>
           </View>
-          <AccountFlowField
+          <AccountFlowCodeField
             label={t('signInSecurity.totp.codeLabel')}
             value={code}
-            onChange={(value) => setCode(value.replace(/\D/g, '').slice(0, TOTP_DIGITS))}
-            onSubmit={() => undefined}
+            onChange={setCode}
             error={null}
-            placeholder="000000"
-            autoComplete="one-time-code"
-            keyboardType="number-pad"
-            maxLength={TOTP_DIGITS}
+            length={TOTP_DIGITS}
             testID="totp-enroll-code"
           />
         </ReauthStep>

package/src/ui/components/signIn/OxySignInPanel.tsx

@@ -10,9 +10,12 @@
  *                 photo carousel, in the right column (the account dialog grows to
  *                 that card); below `md` it is "Continue with Oxy" at the top. On
  *                 native it is "Continue with Oxy" ("Get Commons" without Commons).
- *   check-email   one email carries a code and a link. The code is typed here (6
- *                 digits, or the 10-character long code); meanwhile the screen asks
- *                 whether the link was opened in this browser, and signs in when it was.
+ *   check-email   one email carries a code and a link. The code is typed here: 6
+ *                 digits, or — "Does your code have letters?" — the 10-character
+ *                 long code an account past its daily guessing ceiling is sent
+ *                 (the start response does not say which, by design); meanwhile
+ *                 the screen asks whether the link was opened in this browser,
+ *                 and signs in when it was.
  *   password      the alternative for an account that has one.
  *   second-factor the authenticator's code, or a backup code, when the account has one.
  *
@@ -32,6 +35,7 @@ import { toast } from '@oxy.so/bloom/toast';
 import { Text } from '@oxy.so/bloom/typography';
 import type { SwitcherContextRow } from '@oxy.so/core/session';
 import {
+  EMAIL_CODE_LENGTH,
   EMAIL_SIGNIN_LONG_CODE_LENGTH,
   SIGN_IN_ERROR_CODES,
   TOTP_DIGITS,
@@ -54,11 +58,12 @@ import { OxyAccountPicker } from './OxyAccountPicker';
 import { OxyAuthScreen, OxyAuthScreenHeader, OxyAuthSplit, OxyAuthTerms } from './OxyAuthScreen';
 import {
   AccountFlowAction,
+  AccountFlowCodeField,
   AccountFlowField,
   AccountFlowNote,
+  BACKUP_CODE_LENGTH,
   describeSignInError,
   errorCode,
-  formatSignInCodeInput,
   isCompleteSignInCode,
   isRateLimited,
   retryAfterSeconds,
@@ -79,6 +84,8 @@ interface SavedSignInFlow {
   identifier: string;
   showForm: boolean;
   useBackupCode: boolean;
+  /** The code field takes the 10-character long code ("Does your code have letters?"). */
+  longCode: boolean;
   /** When "Send a new email" may be pressed again (ms). */
   resendUntil: number;
 }
@@ -139,6 +146,7 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
   const [password, setPassword] = useState('');
   const [secondFactorCode, setSecondFactorCode] = useState('');
   const [useBackupCode, setUseBackupCode] = useState(saved?.useBackupCode ?? false);
+  const [longCode, setLongCode] = useState(saved?.longCode ?? false);
   const [pending, setPending] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [notice, setNotice] = useState<string | null>(null);
@@ -153,9 +161,10 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
       identifier,
       showForm,
       useBackupCode,
+      longCode,
       resendUntil: Date.now() + resendSeconds * 1000,
     } satisfies SavedSignInFlow);
-  }, [flowOwner, step, identifier, showForm, useBackupCode, resendSeconds]);
+  }, [flowOwner, step, identifier, showForm, useBackupCode, longCode, resendSeconds]);
   const blocked = pending || rateLimitSeconds > 0;
 
   // The countdown after a 429: one tick a second until the person may retry.
@@ -244,7 +253,9 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
         }
         setCode('');
         setResendSeconds(EMAIL_RESEND_COOLDOWN_SECONDS);
+        // A resend keeps the field as the person set it; a new request starts at 6 digits.
         if (step.name === 'check-email') setNotice(t('signin.checkEmail.resent'));
+        else setLongCode(false);
         setStep({ name: 'check-email', identifier: name, requestId: started.requestId, requestSecret: started.requestSecret });
       })
       .catch(fail)
@@ -362,6 +373,7 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
     setError(null);
     setNotice(null);
     setCode('');
+    setLongCode(false);
     setPassword('');
     setStep({ name: 'start' });
   };
@@ -443,24 +455,34 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
             title={t('signin.checkEmail.title')}
             description={t('signin.checkEmail.description', { identifier: request.identifier })}
           />
-          <AccountFlowField
+          <AccountFlowCodeField
+            key={longCode ? 'long' : 'digits'}
             label={t('signin.checkEmail.codeLabel')}
             value={code}
             onChange={(value) => {
-              const typed = formatSignInCodeInput(value);
-              setCode(typed);
+              setCode(value);
               clearError();
-              if (isCompleteSignInCode(typed)) submitCode(typed);
             }}
-            onSubmit={() => submitCode(code)}
+            onComplete={submitCode}
             error={shownError}
             disabled={blocked}
-            placeholder="000000"
-            autoComplete="one-time-code"
-            maxLength={EMAIL_SIGNIN_LONG_CODE_LENGTH + 1}
+            length={longCode ? EMAIL_SIGNIN_LONG_CODE_LENGTH : EMAIL_CODE_LENGTH}
+            type={longCode ? 'alphanumeric' : 'numeric'}
+            groupEvery={longCode ? EMAIL_SIGNIN_LONG_CODE_LENGTH / 2 : undefined}
             hint={t('signin.checkEmail.codeHint')}
             testID="signin-code"
           />
+          <SubtleLink
+            label={longCode ? t('signin.checkEmail.codeDigitsOnly') : t('signin.checkEmail.codeHasLetters')}
+            theme={theme}
+            onPress={() => {
+              setLongCode(!longCode);
+              setCode('');
+              setError(null);
+            }}
+            disabled={pending}
+            testID="signin-code-letters"
+          />
           {notice ? <AccountFlowNote testID="signin-notice">{notice}</AccountFlowNote> : null}
           <AccountFlowAction
             label={t('signin.actions.continue')}
@@ -553,28 +575,20 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
             title={t('signin.secondFactor.title')}
             description={useBackupCode ? t('signin.secondFactor.backupDescription') : t('signin.secondFactor.description')}
           />
-          <AccountFlowField
+          <AccountFlowCodeField
             key={useBackupCode ? 'backup' : 'totp'}
             label={useBackupCode ? t('signin.secondFactor.backupLabel') : t('signin.secondFactor.label')}
             value={secondFactorCode}
             onChange={(value) => {
-              if (useBackupCode) {
-                setSecondFactorCode(value);
-                clearError();
-                return;
-              }
-              const digits = value.replace(/\D/g, '').slice(0, TOTP_DIGITS);
-              setSecondFactorCode(digits);
+              setSecondFactorCode(value);
               clearError();
-              if (digits.length === TOTP_DIGITS) submitSecondFactor(digits);
             }}
-            onSubmit={() => submitSecondFactor(secondFactorCode)}
+            onComplete={submitSecondFactor}
             error={shownError}
             disabled={blocked}
-            placeholder={useBackupCode ? 'xxxxx-xxxxx' : '000000'}
-            autoComplete="one-time-code"
-            keyboardType={useBackupCode ? 'default' : 'number-pad'}
-            maxLength={useBackupCode ? 11 : TOTP_DIGITS}
+            length={useBackupCode ? BACKUP_CODE_LENGTH : TOTP_DIGITS}
+            type={useBackupCode ? 'alphanumeric' : 'numeric'}
+            groupEvery={useBackupCode ? BACKUP_CODE_LENGTH / 2 : undefined}
             testID="signin-second-factor"
           />
           <AccountFlowAction

package/src/ui/components/signIn/ReauthStep.tsx

@@ -9,16 +9,18 @@
 import type React from 'react';
 import { useState } from 'react';
 import { useTheme } from '@oxy.so/bloom/theme';
-import { EMAIL_CODE_LENGTH, type ReauthAction, type ReauthProof } from '@oxy.so/contracts';
+import { EMAIL_CODE_LENGTH, TOTP_DIGITS, type ReauthAction, type ReauthProof } from '@oxy.so/contracts';
 import { useOxy } from '../../context/OxyContext';
 import { useI18n } from '../../hooks/useI18n';
 import { SubtleLink } from '../authChooser/primitives';
 import { OxyAuthScreen, OxyAuthScreenHeader } from './OxyAuthScreen';
 import {
   AccountFlowAction,
+  AccountFlowCodeField,
   AccountFlowErrorLine,
   AccountFlowField,
   AccountFlowNote,
+  BACKUP_CODE_LENGTH,
   describeSignInError,
 } from './accountFlowParts';
 
@@ -64,6 +66,7 @@ export const ReauthStep: React.FC<ReauthStepProps> = ({
   const [emailCode, setEmailCode] = useState('');
   const [password, setPassword] = useState('');
   const [totpCode, setTotpCode] = useState('');
+  const [useBackupCode, setUseBackupCode] = useState(false);
   const [pending, setPending] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -138,17 +141,13 @@ export const ReauthStep: React.FC<ReauthStepProps> = ({
       ) : verificationId ? (
         <>
           <AccountFlowNote>{t('reauth.codeSent')}</AccountFlowNote>
-          <AccountFlowField
+          <AccountFlowCodeField
             label={t('reauth.codeLabel')}
             value={emailCode}
-            onChange={(value) => setEmailCode(value.replace(/\D/g, '').slice(0, EMAIL_CODE_LENGTH))}
-            onSubmit={submit}
+            onChange={setEmailCode}
             error={null}
             disabled={pending}
-            placeholder="000000"
-            autoComplete="one-time-code"
-            keyboardType="number-pad"
-            maxLength={EMAIL_CODE_LENGTH}
+            length={EMAIL_CODE_LENGTH}
             testID="reauth-code"
           />
         </>
@@ -156,19 +155,32 @@ export const ReauthStep: React.FC<ReauthStepProps> = ({
         <AccountFlowNote>{t('reauth.emailDescription')}</AccountFlowNote>
       )}
       {totpEnabled && !needsCode ? (
-        <AccountFlowField
-          label={t('reauth.totpLabel')}
-          value={totpCode}
-          onChange={setTotpCode}
-          onSubmit={submit}
-          error={null}
-          disabled={pending}
-          placeholder="000000"
-          autoComplete="one-time-code"
-          autoFocus={false}
-          maxLength={11}
-          testID="reauth-totp"
-        />
+        <>
+          <AccountFlowCodeField
+            key={useBackupCode ? 'backup' : 'totp'}
+            label={useBackupCode ? t('signin.secondFactor.backupLabel') : t('signin.secondFactor.label')}
+            value={totpCode}
+            onChange={setTotpCode}
+            error={null}
+            disabled={pending}
+            length={useBackupCode ? BACKUP_CODE_LENGTH : TOTP_DIGITS}
+            type={useBackupCode ? 'alphanumeric' : 'numeric'}
+            groupEvery={useBackupCode ? BACKUP_CODE_LENGTH / 2 : undefined}
+            autoFocus={false}
+            testID="reauth-totp"
+          />
+          <SubtleLink
+            label={useBackupCode ? t('signin.secondFactor.useAuthenticator') : t('signin.secondFactor.useBackup')}
+            theme={theme}
+            onPress={() => {
+              setUseBackupCode(!useBackupCode);
+              setTotpCode('');
+              setError(null);
+            }}
+            disabled={pending}
+            testID="reauth-toggle-backup"
+          />
+        </>
       ) : null}
       {error ? <AccountFlowErrorLine message={error} /> : null}
       <AccountFlowAction

package/src/ui/components/signIn/accountFlowParts.tsx

@@ -1,6 +1,7 @@
 /**
  * The pieces every Oxy sign-in and account screen shares: the error vocabulary,
- * one labelled field, the one primary action, a note, and the email-code step.
+ * one labelled field, one one-time-code field, the one primary action, a note,
+ * and the email-code step.
  * Each screen is built from the same shell as `OxySignInPanel`
  * (`OxyAuthScreen`), so they read as one product in the account dialog, in an
  * app's settings and on auth.oxy.so.
@@ -10,6 +11,8 @@ import type React from 'react';
 import { useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Button } from '@oxy.so/bloom/button';
+import { Field } from '@oxy.so/bloom/field';
+import { InputOtp } from '@oxy.so/bloom/input-otp';
 import { useTheme } from '@oxy.so/bloom/theme';
 import { TextField, TextFieldHint, TextFieldInput, TextFieldLabel } from '@oxy.so/bloom/text-field';
 import { Text } from '@oxy.so/bloom/typography';
@@ -105,9 +108,7 @@ const LONG_CODE = new RegExp(`^[${EMAIL_SIGNIN_LONG_CODE_ALPHABET}]{${EMAIL_SIGN
 
 /**
  * Whether a typed sign-in code is complete: 6 digits, or the 10-character long
- * code (`XXXXX-XXXXX`, any case, with or without its dash). Six digits count
- * only when typed without a separator: the long code is shown with its dash
- * after the fifth character, so a long code being typed never reads as 6 digits.
+ * code (`XXXXX-XXXXX`, any case, with or without its dash) in its own alphabet.
  */
 export function isCompleteSignInCode(typed: string): boolean {
   const trimmed = typed.trim();
@@ -115,10 +116,8 @@ export function isCompleteSignInCode(typed: string): boolean {
   return LONG_CODE.test(normalizeEmailSignInCode(trimmed));
 }
 
-/** A typed sign-in code as it shows in its field: upper-case, the long code's dash kept. */
-export function formatSignInCodeInput(typed: string): string {
-  return typed.toUpperCase().replace(/[^0-9A-Z-\s]/g, '').slice(0, EMAIL_SIGNIN_LONG_CODE_LENGTH + 1);
-}
+/** Characters in a backup code (`xxxxx-xxxxx`, its dash not counted). */
+export const BACKUP_CODE_LENGTH = 10;
 
 /** One labelled input, the way the sign-in screen draws its fields. */
 export const AccountFlowField: React.FC<{
@@ -129,11 +128,10 @@ export const AccountFlowField: React.FC<{
   error: string | null;
   disabled?: boolean;
   placeholder?: string;
-  autoComplete?: 'username' | 'email' | 'one-time-code' | 'off' | 'current-password' | 'new-password';
-  keyboardType?: 'default' | 'email-address' | 'number-pad';
+  autoComplete?: 'username' | 'email' | 'off' | 'current-password' | 'new-password';
+  keyboardType?: 'default' | 'email-address';
   secureTextEntry?: boolean;
   autoFocus?: boolean;
-  maxLength?: number;
   hint?: string;
   testID: string;
 }> = ({
@@ -148,7 +146,6 @@ export const AccountFlowField: React.FC<{
   keyboardType,
   secureTextEntry,
   autoFocus = true,
-  maxLength,
   hint,
   testID,
 }) => (
@@ -164,7 +161,6 @@ export const AccountFlowField: React.FC<{
         autoComplete={autoComplete}
         keyboardType={keyboardType}
         secureTextEntry={secureTextEntry}
-        maxLength={maxLength}
         autoCapitalize="none"
         autoCorrect={false}
         autoFocus={autoFocus}
@@ -177,6 +173,57 @@ export const AccountFlowField: React.FC<{
   </View>
 );
 
+/**
+ * A one-time code: Bloom's `InputOtp`, one box per character, named by the
+ * field's label (the boxes are the field's `multiple` case). `numeric` codes
+ * are the email's 6 digits and the authenticator's; `alphanumeric` ones are
+ * the long sign-in code and a backup code, both `XXXXX-XXXXX` — upper-cased,
+ * the dash dropped, so a pasted code fills every box.
+ */
+export const AccountFlowCodeField: React.FC<{
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  /** Every box is filled. */
+  onComplete?: (value: string) => void;
+  error: string | null;
+  disabled?: boolean;
+  length: number;
+  type?: 'numeric' | 'alphanumeric';
+  groupEvery?: number;
+  autoFocus?: boolean;
+  hint?: string;
+  testID: string;
+}> = ({
+  label,
+  value,
+  onChange,
+  onComplete,
+  error,
+  disabled,
+  length,
+  type = 'numeric',
+  groupEvery,
+  autoFocus = true,
+  hint,
+  testID,
+}) => (
+  <Field label={label} multiple description={hint} error={error} disabled={disabled}>
+    <InputOtp
+      length={length}
+      type={type}
+      groupEvery={groupEvery}
+      value={value}
+      onChange={onChange}
+      onComplete={onComplete}
+      invalid={error !== null}
+      disabled={disabled}
+      autoFocus={autoFocus}
+      testID={testID}
+    />
+  </Field>
+);
+
 /** The screen's one primary action. */
 export const AccountFlowAction: React.FC<{
   label: string;
@@ -270,22 +317,17 @@ export const EmailCodeStep: React.FC<EmailCodeStepProps> = ({ description, verif
   return (
     <OxyAuthScreen>
       <OxyAuthScreenHeader title={t('emailCode.title')} description={description} />
-      <AccountFlowField
+      <AccountFlowCodeField
         label={t('emailCode.label')}
         value={code}
         onChange={(value) => {
-          const digits = value.replace(/\D/g, '').slice(0, EMAIL_CODE_LENGTH);
-          setCode(digits);
+          setCode(value);
           if (error) setError(null);
-          if (digits.length === EMAIL_CODE_LENGTH) confirm(digits);
         }}
-        onSubmit={() => confirm(code)}
+        onComplete={confirm}
         error={error}
         disabled={pending}
-        placeholder="000000"
-        autoComplete="one-time-code"
-        keyboardType="number-pad"
-        maxLength={EMAIL_CODE_LENGTH}
+        length={EMAIL_CODE_LENGTH}
         testID="email-code"
       />
       {notice ? <Text style={[styles.note, { color: theme.colors.textSecondary }]}>{notice}</Text> : null}