@oxy.so/services 8.2.0 → 8.4.0

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

@@ -13,9 +13,9 @@
 
 import type React from 'react';
 import { useState } from 'react';
-import { Clipboard, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import QRCode from 'react-native-qrcode-svg';
-import { Button } from '@oxy.so/bloom/button';
+import { CodeBlock } from '@oxy.so/bloom/code';
 import { useTheme } from '@oxy.so/bloom/theme';
 import { toast } from '@oxy.so/bloom/toast';
 import { Text } from '@oxy.so/bloom/typography';
@@ -25,6 +25,7 @@ import { useOxy } from '../../context/OxyContext';
 import { useSignInMethods } from '../../hooks/queries/useAuthMethods';
 import { queryKeys } from '../../hooks/queries/queryKeys';
 import { useI18n } from '../../hooks/useI18n';
+import { copyText } from '../../utils/clipboard';
 import { SubtleLink } from '../authChooser/primitives';
 import { OxyAuthLoading, OxyAuthScreen, OxyAuthScreenHeader } from './OxyAuthScreen';
 import { ReauthStep } from './ReauthStep';
@@ -33,6 +34,7 @@ import {
   AccountFlowCodeField,
   AccountFlowErrorLine,
   AccountFlowNote,
+  AccountFlowProgress,
   describeSignInError,
 } from './accountFlowParts';
 
@@ -46,7 +48,8 @@ type Step =
   | { name: 'enroll'; enrollment: TotpEnrollResponse }
   | { name: 'regenerate' }
   | { name: 'disable' }
-  | { name: 'codes'; codes: string[] };
+  /** `enrolling`: the last step of turning it on, rather than new codes for one that is on. */
+  | { name: 'codes'; codes: string[]; enrolling: boolean };
 
 export interface OxyAuthenticatorPanelProps {
   /** The person is done here (after saving backup codes, or turning it off). */
@@ -92,34 +95,36 @@ export const OxyAuthenticatorPanel: React.FC<OxyAuthenticatorPanelProps> = ({ on
   };
 
   const back = { label: t('common.cancel'), onPress: () => setStep({ name: 'status' }) };
+  // Turning it on is two steps: scan and confirm, then save the backup codes.
+  const enrolSteps = [t('signInSecurity.totp.title'), t('signInSecurity.totp.backupTitle')];
+
+  const copyCodes = async (codes: string) => {
+    try {
+      await copyText(codes);
+    } catch (reason) {
+      toast.error(t('appInfo.toasts.copyFailed'));
+      // Rethrown so the copy button keeps its copy glyph: nothing was copied.
+      throw reason;
+    }
+    toast.success(t('signInSecurity.totp.copied'));
+  };
 
   switch (step.name) {
     case 'codes':
       return (
         <OxyAuthScreen>
           <OxyAuthScreenHeader title={t('signInSecurity.totp.backupTitle')} description={t('signInSecurity.totp.backupDescription')} />
-          <View style={[styles.codes, { borderColor: theme.colors.border }]} testID="totp-backup-codes">
-            {step.codes.map((backupCode) => (
-              <Text key={backupCode} style={[styles.code, { color: theme.colors.text }]}>
-                {backupCode}
-              </Text>
-            ))}
-          </View>
-          <Button
-            appearance="outline"
-            tone="neutral"
-            size="lg"
-            fullWidth
-            onPress={() => {
-              Promise.resolve()
-                .then(() => Clipboard.setString(step.codes.join('\n')))
-                .then(() => toast.success(t('signInSecurity.totp.copied')))
-                .catch(() => undefined);
-            }}
-            testID="totp-copy-codes"
-          >
-            {t('signInSecurity.totp.copy')}
-          </Button>
+          {step.enrolling ? <AccountFlowProgress steps={enrolSteps} current={1} testID="totp-progress" /> : null}
+          {/* One code per line, with the block's own copy button (it shows a
+              check once the codes are on the clipboard). */}
+          <CodeBlock
+            code={step.codes.join('\n')}
+            filename={t('signInSecurity.totp.remaining', { count: step.codes.length })}
+            lineNumbers={false}
+            labels={{ copy: t('signInSecurity.totp.copy'), copied: t('signInSecurity.totp.copied') }}
+            onCopy={copyCodes}
+            testID="totp-backup-codes"
+          />
           <AccountFlowAction
             label={t('signInSecurity.totp.savedThem')}
             onPress={() => {
@@ -146,10 +151,11 @@ export const OxyAuthenticatorPanel: React.FC<OxyAuthenticatorPanelProps> = ({ on
             const codes = await oxyServices.auth.totp.confirm(code.trim(), reauth);
             refresh();
             toast.success(t('signInSecurity.totp.enabled'));
-            setStep({ name: 'codes', codes });
+            setStep({ name: 'codes', codes, enrolling: true });
           }}
           secondary={back}
         >
+          <AccountFlowProgress steps={enrolSteps} current={0} testID="totp-progress" />
           <View style={styles.plateRow}>
             <View style={[styles.plate, { borderColor: theme.colors.border }]} testID="totp-qr">
               <QRCode value={enrollment.otpauthUri} size={QR_SIZE} backgroundColor={QR_PLATE_BG} color={QR_FOREGROUND} />
@@ -184,7 +190,7 @@ export const OxyAuthenticatorPanel: React.FC<OxyAuthenticatorPanelProps> = ({ on
           onSubmit={async (reauth) => {
             const codes = await oxyServices.auth.totp.regenerateBackupCodes(reauth);
             refresh();
-            setStep({ name: 'codes', codes });
+            setStep({ name: 'codes', codes, enrolling: false });
           }}
           secondary={back}
         />
@@ -229,7 +235,6 @@ export const OxyAuthenticatorPanel: React.FC<OxyAuthenticatorPanelProps> = ({ on
               />
               <SubtleLink
                 label={t('signInSecurity.totp.disable')}
-                theme={theme}
                 onPress={() => setStep({ name: 'disable' })}
                 testID="totp-disable"
               />
@@ -270,21 +275,4 @@ const styles = StyleSheet.create({
     letterSpacing: 1,
     textAlign: 'center',
   },
-  codes: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: 8,
-    padding: 16,
-    borderRadius: 16,
-    borderWidth: StyleSheet.hairlineWidth,
-    justifyContent: 'center',
-  },
-  code: {
-    width: '45%',
-    fontSize: 16,
-    lineHeight: 24,
-    fontWeight: '600',
-    letterSpacing: 1,
-    textAlign: 'center',
-  },
 });

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

@@ -12,12 +12,13 @@
 
 import type React from 'react';
 import { useState } from 'react';
+import { surfaces } from '@oxy.so/bloom/surfaces';
 import { useOxy } from '../../context/OxyContext';
 import { useSignInMethods } from '../../hooks/queries/useAuthMethods';
 import { useI18n } from '../../hooks/useI18n';
 import { OxyAuthLoading, OxyAuthScreen, OxyAuthScreenHeader } from './OxyAuthScreen';
 import { ReauthStep } from './ReauthStep';
-import { AccountFlowField, AccountFlowNote } from './accountFlowParts';
+import { AccountFlowField, AccountFlowNotice } from './accountFlowParts';
 
 export interface OxyDeleteAccountPanelProps {
   /** The account is gone and this origin signed out of it. */
@@ -45,7 +46,8 @@ export const OxyDeleteAccountPanel: React.FC<OxyDeleteAccountPanelProps> = ({ on
   if (keyed) {
     return (
       <OxyAuthScreen>
-        <OxyAuthScreenHeader title={t('deleteAccount.handoff.commonsTitle')} description={t('deleteAccount.keyless.keyed')} />
+        <OxyAuthScreenHeader title={t('deleteAccount.handoff.commonsTitle')} />
+        <AccountFlowNotice testID="delete-account-keyed">{t('deleteAccount.keyless.keyed')}</AccountFlowNotice>
       </OxyAuthScreen>
     );
   }
@@ -65,6 +67,16 @@ export const OxyDeleteAccountPanel: React.FC<OxyDeleteAccountPanelProps> = ({ on
       validate={() => (confirmText.trim() === username ? null : t('deleteAccount.confirmLabel', { username }))}
       onSubmit={async (proof) => {
         if (!proof.emailCode) throw new Error(t('reauth.errors.invalid'));
+        // The last word before it is gone: the proof is ready, and nothing has
+        // been sent yet. Cancelling keeps the screen as it is, code and all.
+        const confirmed = await surfaces.confirm({
+          title: t('deleteAccount.title'),
+          description: t('deleteAccount.warning'),
+          confirmLabel: t('deleteAccount.confirm'),
+          cancelLabel: t('common.cancel'),
+          destructive: true,
+        });
+        if (!confirmed) return;
         await oxyServices.users.deleteMe(confirmText.trim(), {
           reauth: {
             emailCode: proof.emailCode,
@@ -77,7 +89,9 @@ export const OxyDeleteAccountPanel: React.FC<OxyDeleteAccountPanelProps> = ({ on
       }}
       secondary={onCancel ? { label: t('common.cancel'), onPress: onCancel } : undefined}
     >
-      <AccountFlowNote>{t('deleteAccount.warning')}</AccountFlowNote>
+      <AccountFlowNotice type="warning" testID="delete-account-warning">
+        {t('deleteAccount.warning')}
+      </AccountFlowNotice>
       <AccountFlowField
         label={t('deleteAccount.confirmLabel', { username })}
         value={confirmText}

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

@@ -13,9 +13,10 @@
 
 import type React from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { ActivityIndicator, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import QRCode from 'react-native-qrcode-svg';
 import { Button } from '@oxy.so/bloom/button';
+import { Loading } from '@oxy.so/bloom/loading';
 import { useTheme } from '@oxy.so/bloom/theme';
 import { Text } from '@oxy.so/bloom/typography';
 import { deriveIdentityLinkCode } from '@oxy.so/core/crypto';
@@ -203,7 +204,7 @@ export const OxyLinkCommonsPanel: React.FC<OxyLinkCommonsPanelProps> = ({ onLink
         <OxyAuthScreen>
           <OxyAuthScreenHeader title={t('linkCommons.title')} description={t('linkCommons.subtitle')} />
           <View style={styles.plateRow}>
-            <ActivityIndicator size="large" color={theme.colors.primary} />
+            <Loading variant="spinner" size="large" accessibilityLabel={t('common.status.loading')} />
           </View>
         </OxyAuthScreen>
       );

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

@@ -7,11 +7,10 @@
 
 import type React from 'react';
 import { useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { Field } from '@oxy.so/bloom/field';
 import { Switch } from '@oxy.so/bloom/switch';
-import { useTheme } from '@oxy.so/bloom/theme';
 import { toast } from '@oxy.so/bloom/toast';
-import { Text } from '@oxy.so/bloom/typography';
 import { PASSWORD_MAX_LENGTH, PASSWORD_MIN_LENGTH } from '@oxy.so/contracts';
 import { useQueryClient } from '@tanstack/react-query';
 import { useOxy } from '../../context/OxyContext';
@@ -30,7 +29,6 @@ export interface OxyPasswordPanelProps {
 }
 
 export const OxyPasswordPanel: React.FC<OxyPasswordPanelProps> = ({ onDone, onCancel }) => {
-  const theme = useTheme();
   const { t } = useI18n();
   const { oxyServices, user } = useOxy();
   const queryClient = useQueryClient();
@@ -94,10 +92,11 @@ export const OxyPasswordPanel: React.FC<OxyPasswordPanelProps> = ({ onDone, onCa
         autoFocus={false}
         testID="password-repeat"
       />
-      <View style={styles.row}>
-        <Text style={[styles.label, { color: theme.colors.text }]}>{t('signInSecurity.password.signOutOthers')}</Text>
+      {/* The field names the switch ("Sign out everywhere else, switch, off")
+          and, on web, its label toggles it. One row: label, then the switch. */}
+      <Field label={t('signInSecurity.password.signOutOthers')} style={styles.row}>
         <Switch value={signOutOthers} onValueChange={setSignOutOthers} testID="password-sign-out-others" />
-      </View>
+      </Field>
     </ReauthStep>
   );
 };
@@ -109,9 +108,4 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     gap: 12,
   },
-  label: {
-    flex: 1,
-    fontSize: 16,
-    lineHeight: 24,
-  },
 });

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

@@ -60,7 +60,7 @@ import {
   AccountFlowAction,
   AccountFlowCodeField,
   AccountFlowField,
-  AccountFlowNote,
+  AccountFlowNotice,
   BACKUP_CODE_LENGTH,
   describeSignInError,
   errorCode,
@@ -440,7 +440,14 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
     );
   }
 
-  const shownError = rateLimitSeconds > 0 ? t('signin.errors.rateLimited', { seconds: rateLimitSeconds }) : error;
+  // A 429 is not something the person typed wrong: it is a wait, counted down
+  // in a notice above the action it holds back, never the field's error.
+  const rateLimitNotice =
+    rateLimitSeconds > 0 ? (
+      <AccountFlowNotice type="warning" testID="signin-rate-limit">
+        {t('signin.errors.rateLimited', { seconds: rateLimitSeconds })}
+      </AccountFlowNotice>
+    ) : null;
   const clearError = () => {
     if (error) setError(null);
   };
@@ -464,7 +471,7 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
               clearError();
             }}
             onComplete={submitCode}
-            error={shownError}
+            error={error}
             disabled={blocked}
             length={longCode ? EMAIL_SIGNIN_LONG_CODE_LENGTH : EMAIL_CODE_LENGTH}
             type={longCode ? 'alphanumeric' : 'numeric'}
@@ -474,7 +481,6 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
           />
           <SubtleLink
             label={longCode ? t('signin.checkEmail.codeDigitsOnly') : t('signin.checkEmail.codeHasLetters')}
-            theme={theme}
             onPress={() => {
               setLongCode(!longCode);
               setCode('');
@@ -483,7 +489,8 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
             disabled={pending}
             testID="signin-code-letters"
           />
-          {notice ? <AccountFlowNote testID="signin-notice">{notice}</AccountFlowNote> : null}
+          {notice ? <AccountFlowNotice testID="signin-notice">{notice}</AccountFlowNotice> : null}
+          {rateLimitNotice}
           <AccountFlowAction
             label={t('signin.actions.continue')}
             onPress={() => submitCode(code)}
@@ -498,21 +505,18 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
                   ? t('signin.checkEmail.resendIn', { seconds: resendSeconds })
                   : t('signin.checkEmail.resend')
               }
-              theme={theme}
               onPress={() => startEmail(request.identifier)}
               disabled={blocked || resendSeconds > 0}
               testID="signin-resend"
             />
             <SubtleLink
               label={t('signin.checkEmail.usePassword')}
-              theme={theme}
               onPress={() => toPassword(request.identifier)}
               disabled={pending}
               testID="signin-use-password"
             />
             <SubtleLink
               label={t('signin.checkEmail.differentAccount')}
-              theme={theme}
               onPress={backToIdentifier}
               disabled={pending}
               testID="signin-different-account"
@@ -535,12 +539,13 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
               clearError();
             }}
             onSubmit={submitPassword}
-            error={shownError}
+            error={error}
             disabled={blocked}
             autoComplete="current-password"
             secureTextEntry
             testID="signin-password"
           />
+          {rateLimitNotice}
           <AccountFlowAction
             label={t('signin.actions.continue')}
             onPress={submitPassword}
@@ -551,14 +556,12 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
           <View style={styles.links}>
             <SubtleLink
               label={t('signin.password.forgot')}
-              theme={theme}
               onPress={() => startEmail(request.identifier)}
               disabled={blocked}
               testID="signin-password-forgot"
             />
             <SubtleLink
               label={t('signin.checkEmail.differentAccount')}
-              theme={theme}
               onPress={backToIdentifier}
               disabled={pending}
               testID="signin-different-account"
@@ -584,13 +587,14 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
               clearError();
             }}
             onComplete={submitSecondFactor}
-            error={shownError}
+            error={error}
             disabled={blocked}
             length={useBackupCode ? BACKUP_CODE_LENGTH : TOTP_DIGITS}
             type={useBackupCode ? 'alphanumeric' : 'numeric'}
             groupEvery={useBackupCode ? BACKUP_CODE_LENGTH / 2 : undefined}
             testID="signin-second-factor"
           />
+          {rateLimitNotice}
           <AccountFlowAction
             label={t('signin.actions.continue')}
             onPress={() => submitSecondFactor(secondFactorCode)}
@@ -601,7 +605,6 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
           <View style={styles.links}>
             <SubtleLink
               label={useBackupCode ? t('signin.secondFactor.useAuthenticator') : t('signin.secondFactor.useBackup')}
-              theme={theme}
               onPress={() => {
                 setUseBackupCode(!useBackupCode);
                 setSecondFactorCode('');
@@ -612,7 +615,6 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
             />
             <SubtleLink
               label={t('signin.checkEmail.differentAccount')}
-              theme={theme}
               onPress={backToIdentifier}
               disabled={pending}
               testID="signin-different-account"
@@ -675,7 +677,7 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
                 clearError();
               }}
               onSubmit={submitIdentifier}
-              error={shownError}
+              error={error}
               disabled={blocked}
               placeholder={t('signin.identifier.placeholder')}
               autoComplete="username"
@@ -694,6 +696,7 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
                 {t('signin.createAccount')}
               </RNText>
             </Text>
+            {rateLimitNotice}
             <AccountFlowAction
               label={t('signin.actions.continue')}
               onPress={submitIdentifier}

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

@@ -14,7 +14,6 @@
 import type React from 'react';
 import { useEffect, useState } from 'react';
 import { Linking, Platform } from 'react-native';
-import { useTheme } from '@oxy.so/bloom/theme';
 import { toast } from '@oxy.so/bloom/toast';
 import { SIGN_IN_ERROR_CODES, emailAddressSchema, type EmailVerificationConfirmResponse } from '@oxy.so/contracts';
 import { useOxy } from '../../context/OxyContext';
@@ -29,6 +28,7 @@ import {
   AccountFlowAction,
   AccountFlowField,
   AccountFlowNote,
+  AccountFlowProgress,
   EmailCodeStep,
   describeSignInError,
   errorCode,
@@ -61,7 +61,6 @@ interface SavedSignUpFlow {
 const SIGN_UP_FLOW_KEY = 'signup';
 
 export const OxySignUpPanel: React.FC<OxySignUpPanelProps> = ({ onSignedIn, onSignIn, host = 'page' }) => {
-  const theme = useTheme();
   const { t } = useI18n();
   const { oxyServices, handleWebSession, accountDialogController } = useOxy();
   const snapshot = useAccountDialogSnapshot(accountDialogController);
@@ -149,6 +148,12 @@ export const OxySignUpPanel: React.FC<OxySignUpPanelProps> = ({ onSignedIn, onSi
       .catch(() => toast.error(t('accountSwitcher.linkOpenFailed')));
   };
 
+  // username → email → code, drawn as one segmented bar under each header.
+  const progressSteps = [t('signup.username.label'), t('signup.email.label'), t('emailCode.title')];
+  const progress = (current: number) => (
+    <AccountFlowProgress steps={progressSteps} current={current} testID="signup-progress" />
+  );
+
   switch (step.name) {
     case 'code':
       return (
@@ -158,12 +163,14 @@ export const OxySignUpPanel: React.FC<OxySignUpPanelProps> = ({ onSignedIn, onSi
           onConfirmed={createAccount}
           onResend={() => sendCode(email)}
           back={{ label: t('emailCode.changeEmail'), onPress: () => setStep({ name: 'email' }) }}
+          progress={progress(2)}
         />
       );
     case 'email':
       return (
         <OxyAuthScreen>
           <OxyAuthScreenHeader title={t('signup.email.title')} description={t('signup.email.subtitle')} />
+          {progress(1)}
           <AccountFlowField
             label={t('signup.email.label')}
             value={email}
@@ -181,7 +188,7 @@ export const OxySignUpPanel: React.FC<OxySignUpPanelProps> = ({ onSignedIn, onSi
           />
           <AccountFlowNote>{t('signup.laterNote')}</AccountFlowNote>
           <AccountFlowAction label={t('signin.actions.continue')} onPress={submitEmail} pending={pending} testID="signup-email-continue" />
-          <SubtleLink label={t('signin.actions.back')} theme={theme} onPress={() => setStep({ name: 'username' })} testID="signup-back" />
+          <SubtleLink label={t('signin.actions.back')} onPress={() => setStep({ name: 'username' })} testID="signup-back" />
           <OxyAuthTerms />
         </OxyAuthScreen>
       );
@@ -189,6 +196,7 @@ export const OxySignUpPanel: React.FC<OxySignUpPanelProps> = ({ onSignedIn, onSi
       return (
         <OxyAuthScreen>
           <OxyAuthScreenHeader title={t('signup.title')} description={t('signup.subtitle')} />
+          {progress(0)}
           <AccountFlowField
             label={t('signup.username.label')}
             value={username}
@@ -204,8 +212,8 @@ export const OxySignUpPanel: React.FC<OxySignUpPanelProps> = ({ onSignedIn, onSi
             testID="signup-username"
           />
           <AccountFlowAction label={t('signin.actions.continue')} onPress={submitUsername} pending={pending} testID="signup-username-continue" />
-          <SubtleLink label={t('signup.createInCommons')} theme={theme} onPress={createInCommons} testID="signup-commons-instead" />
-          <SubtleLink label={t('signup.backToSignInLink')} theme={theme} onPress={onSignIn} testID="back-to-sign-in" />
+          <SubtleLink label={t('signup.createInCommons')} onPress={createInCommons} testID="signup-commons-instead" />
+          <SubtleLink label={t('signup.backToSignInLink')} onPress={onSignIn} testID="back-to-sign-in" />
           <OxyAuthTerms />
         </OxyAuthScreen>
       );

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

@@ -8,7 +8,6 @@
 
 import type React from 'react';
 import { useState } from 'react';
-import { useTheme } from '@oxy.so/bloom/theme';
 import { EMAIL_CODE_LENGTH, TOTP_DIGITS, type ReauthAction, type ReauthProof } from '@oxy.so/contracts';
 import { useOxy } from '../../context/OxyContext';
 import { useI18n } from '../../hooks/useI18n';
@@ -20,6 +19,7 @@ import {
   AccountFlowErrorLine,
   AccountFlowField,
   AccountFlowNote,
+  AccountFlowNotice,
   BACKUP_CODE_LENGTH,
   describeSignInError,
 } from './accountFlowParts';
@@ -58,7 +58,6 @@ export const ReauthStep: React.FC<ReauthStepProps> = ({
   secondary,
   children,
 }) => {
-  const theme = useTheme();
   const { t } = useI18n();
   const { oxyServices } = useOxy();
   const [mode, setMode] = useState<'email' | 'password'>(allowPassword ? 'password' : 'email');
@@ -140,7 +139,7 @@ export const ReauthStep: React.FC<ReauthStepProps> = ({
         />
       ) : verificationId ? (
         <>
-          <AccountFlowNote>{t('reauth.codeSent')}</AccountFlowNote>
+          <AccountFlowNotice testID="reauth-code-sent">{t('reauth.codeSent')}</AccountFlowNotice>
           <AccountFlowCodeField
             label={t('reauth.codeLabel')}
             value={emailCode}
@@ -171,7 +170,6 @@ export const ReauthStep: React.FC<ReauthStepProps> = ({
           />
           <SubtleLink
             label={useBackupCode ? t('signin.secondFactor.useAuthenticator') : t('signin.secondFactor.useBackup')}
-            theme={theme}
             onPress={() => {
               setUseBackupCode(!useBackupCode);
               setTotpCode('');
@@ -191,12 +189,11 @@ export const ReauthStep: React.FC<ReauthStepProps> = ({
         testID={needsCode ? 'reauth-send-code' : 'reauth-submit'}
       />
       {mode === 'email' && verificationId ? (
-        <SubtleLink label={t('emailCode.resend')} theme={theme} onPress={sendCode} disabled={pending} testID="reauth-resend" />
+        <SubtleLink label={t('emailCode.resend')} onPress={sendCode} disabled={pending} testID="reauth-resend" />
       ) : null}
       {allowPassword ? (
         <SubtleLink
           label={mode === 'password' ? t('reauth.useEmail') : t('reauth.usePassword')}
-          theme={theme}
           onPress={() => {
             setError(null);
             setMode(mode === 'password' ? 'email' : 'password');
@@ -206,7 +203,7 @@ export const ReauthStep: React.FC<ReauthStepProps> = ({
         />
       ) : null}
       {secondary ? (
-        <SubtleLink label={secondary.label} theme={theme} onPress={secondary.onPress} disabled={pending} testID="reauth-cancel" />
+        <SubtleLink label={secondary.label} onPress={secondary.onPress} disabled={pending} testID="reauth-cancel" />
       ) : null}
     </OxyAuthScreen>
   );