@oxy.so/services 12.3.0 → 12.4.0

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

@@ -0,0 +1,258 @@
+/**
+ * The account's email, from its settings: add one, change it, or remove it.
+ *
+ *   add / change: the new address → a code sent to IT, plus the person's
+ *   proof (the password, or a code to the current email; + the
+ *   authenticator's) → saved, and every other session signed out
+ *
+ *   remove: only with a password set, confirmed with that password (+ the
+ *   authenticator's) → the account signs in, and is recovered, with its
+ *   password alone
+ *
+ * Sign-in codes, links and security notices go to this address. An account
+ * with a Commons key has no email; this panel says so instead.
+ */
+
+import type React from 'react';
+import { useState } from 'react';
+import { toast } from '@oxy.so/bloom/toast';
+import { EMAIL_CODE_LENGTH, checkContract, emailAddressCheck } from '@oxy.so/contracts/client';
+import { useQueryClient } from '@tanstack/react-query';
+import { useOxy } from '../../context/oxyRuntimeContext';
+import { queryKeys } from '../../hooks/queries/queryKeys';
+import { useI18n } from '../../hooks/useI18n';
+import { SubtleLink } from '../authChooser/primitives';
+import { OxyAuthScreen, OxyAuthScreenHeader } from './OxyAuthScreen';
+import { ReauthStep } from './ReauthStep';
+import {
+  AccountFlowAction,
+  AccountFlowCodeField,
+  AccountFlowField,
+  AccountFlowNote,
+  AccountFlowNotice,
+  describeSignInError,
+} from './accountFlowParts';
+import { accountSecurityFallback, useAccountSecurityState } from './accountSecurityState';
+
+type Step =
+  | { name: 'status' }
+  | { name: 'address' }
+  | { name: 'confirm'; email: string; verificationId: string }
+  | { name: 'remove' };
+
+export interface OxyEmailPanelProps {
+  /** The email was added, changed or removed. */
+  onDone?: () => void;
+}
+
+export const OxyEmailPanel: React.FC<OxyEmailPanelProps> = ({ onDone }) => {
+  const { t } = useI18n();
+  const { oxyServices, user } = useOxy();
+  const queryClient = useQueryClient();
+  const security = useAccountSecurityState();
+  const [step, setStep] = useState<Step>({ name: 'status' });
+  const [address, setAddress] = useState('');
+  const [code, setCode] = useState('');
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  if (security.keyed) {
+    return (
+      <OxyAuthScreen>
+        <OxyAuthScreenHeader
+          title={t('signInSecurity.email.title')}
+          description={t('linkCommons.already')}
+        />
+      </OxyAuthScreen>
+    );
+  }
+  const fallback = accountSecurityFallback(security, t('signInSecurity.email.title'), t);
+  if (fallback || !security.methods.data) return fallback;
+  const { hasEmail, hasPassword, totpEnabled } = security.methods.data;
+  const current = hasEmail ? (user?.email ?? null) : null;
+
+  const finish = (message: string) => {
+    void queryClient.invalidateQueries({ queryKey: queryKeys.signInMethods.all });
+    void queryClient.invalidateQueries({ queryKey: queryKeys.accounts.all });
+    toast.success(message);
+    setStep({ name: 'status' });
+    setAddress('');
+    setCode('');
+    onDone?.();
+  };
+
+  const sendCode = (email: string) => {
+    if (pending) return;
+    setError(null);
+    setPending(true);
+    oxyServices.auth.email
+      .startChange(email)
+      .then((started) => {
+        setCode('');
+        setStep({ name: 'confirm', email, verificationId: started.verificationId });
+      })
+      .catch((reason: unknown) => setError(describeSignInError(reason, t)))
+      .finally(() => setPending(false));
+  };
+
+  const submitAddress = () => {
+    const email = checkContract(emailAddressCheck, address);
+    if (!email) {
+      setError(t('signInSecurity.email.invalid'));
+      return;
+    }
+    if (email === current) {
+      setError(t('signInSecurity.errors.emailUnchanged'));
+      return;
+    }
+    sendCode(email);
+  };
+
+  switch (step.name) {
+    case 'address':
+      return (
+        <OxyAuthScreen>
+          <OxyAuthScreenHeader
+            title={hasEmail ? t('signInSecurity.email.change') : t('signInSecurity.email.add')}
+            description={t('signInSecurity.email.newDescription')}
+          />
+          <AccountFlowField
+            label={t('signInSecurity.email.newLabel')}
+            value={address}
+            onChange={(value) => {
+              setAddress(value);
+              if (error) setError(null);
+            }}
+            onSubmit={submitAddress}
+            error={error}
+            disabled={pending}
+            autoComplete="email"
+            keyboardType="email-address"
+            testID="email-new"
+          />
+          <AccountFlowAction
+            label={t('signInSecurity.email.sendCode')}
+            onPress={submitAddress}
+            pending={pending}
+            testID="email-send-code"
+          />
+          <SubtleLink
+            label={t('common.cancel')}
+            onPress={() => {
+              setError(null);
+              setStep({ name: 'status' });
+            }}
+            disabled={pending}
+            testID="email-cancel"
+          />
+        </OxyAuthScreen>
+      );
+    case 'confirm':
+      return (
+        <ReauthStep
+          title={t('signInSecurity.email.confirmTitle')}
+          description={t('signInSecurity.email.confirmDescription', { email: step.email })}
+          action="change_email"
+          allowPassword={hasPassword}
+          allowEmail={hasEmail}
+          totpEnabled={totpEnabled}
+          submitLabel={t('signInSecurity.email.save')}
+          validate={() =>
+            code.replace(/\D/g, '').length === EMAIL_CODE_LENGTH
+              ? null
+              : t('emailCode.errors.codeInvalid')
+          }
+          onSubmit={async (reauth) => {
+            await oxyServices.auth.email.change({
+              email: step.email,
+              verificationId: step.verificationId,
+              code: code.replace(/\D/g, ''),
+              reauth,
+            });
+            finish(t('signInSecurity.email.saved'));
+          }}
+          secondary={{ label: t('common.cancel'), onPress: () => setStep({ name: 'status' }) }}
+        >
+          <AccountFlowCodeField
+            label={t('signInSecurity.email.codeLabel')}
+            value={code}
+            onChange={setCode}
+            error={null}
+            length={EMAIL_CODE_LENGTH}
+            testID="email-new-code"
+          />
+          <SubtleLink
+            label={t('emailCode.resend')}
+            onPress={() => sendCode(step.email)}
+            disabled={pending}
+            testID="email-new-code-resend"
+          />
+          {error ? (
+            <AccountFlowNotice type="error" testID="email-new-code-error">
+              {error}
+            </AccountFlowNotice>
+          ) : null}
+        </ReauthStep>
+      );
+    case 'remove':
+      return (
+        <ReauthStep
+          title={t('signInSecurity.email.removeTitle')}
+          description={t('signInSecurity.email.removeDescription')}
+          action="change_email"
+          // Confirmed with the password it will rely on, never the mailbox it loses.
+          allowPassword
+          allowEmail={false}
+          totpEnabled={totpEnabled}
+          submitLabel={t('signInSecurity.email.remove')}
+          destructive
+          onSubmit={async (reauth) => {
+            await oxyServices.auth.email.remove(reauth);
+            finish(t('signInSecurity.email.removed'));
+          }}
+          secondary={{ label: t('common.cancel'), onPress: () => setStep({ name: 'status' }) }}
+        />
+      );
+    default:
+      return (
+        <OxyAuthScreen>
+          <OxyAuthScreenHeader
+            title={t('signInSecurity.email.title')}
+            description={
+              hasEmail
+                ? t('signInSecurity.email.description')
+                : t('signInSecurity.email.noneDescription')
+            }
+          />
+          {current ? <AccountFlowNote testID="email-current">{current}</AccountFlowNote> : null}
+          {!hasEmail ? (
+            <AccountFlowNotice type="warning" testID="email-none-warning">
+              {t('signInSecurity.noEmailWarning')}
+            </AccountFlowNotice>
+          ) : null}
+          <AccountFlowAction
+            label={hasEmail ? t('signInSecurity.email.change') : t('signInSecurity.email.add')}
+            onPress={() => {
+              setError(null);
+              setAddress('');
+              setStep({ name: 'address' });
+            }}
+            pending={false}
+            testID="email-change"
+          />
+          {hasEmail && hasPassword ? (
+            <SubtleLink
+              label={t('signInSecurity.email.remove')}
+              onPress={() => setStep({ name: 'remove' })}
+              testID="remove-email-link"
+            />
+          ) : null}
+          {hasEmail && !hasPassword ? (
+            <AccountFlowNote testID="email-remove-needs-password">
+              {t('signInSecurity.email.removeNeedsPassword')}
+            </AccountFlowNote>
+          ) : null}
+        </OxyAuthScreen>
+      );
+  }
+};

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

@@ -4,7 +4,8 @@
  *
  *   QR → Commons scans and signs with its key → both screens show the same
  *   code → the person confirms it's them with a code sent to the account's
- *   email (+ the authenticator's code) → linked
+ *   email, or its password when it has none (+ the authenticator's code) →
+ *   linked
  *
  * Afterwards the account is self-custodied: its root is the key Commons holds,
  * its email, password and authenticator are deleted, and its phrase in Commons
@@ -22,7 +23,6 @@ import { Text } from '@oxy.so/bloom/typography';
 import type { IdentityLinkCreateResponse } from '@oxy.so/contracts';
 import { useOxy } from '../../context/oxyRuntimeContext';
 import { loadIdentityCrypto } from '../../utils/identityCrypto';
-import { useSignInMethods } from '../../hooks/queries/useAuthMethods';
 import { useI18n } from '../../hooks/useI18n';
 import { OxyAuthScreen, OxyAuthScreenHeader } from './OxyAuthScreen';
 import { ReauthStep } from './ReauthStep';
@@ -32,6 +32,7 @@ import {
   AccountFlowNote,
   describeSignInError,
 } from './accountFlowParts';
+import { accountSecurityFallback, useAccountSecurityState } from './accountSecurityState';
 
 /** How often the page asks whether Commons has signed. */
 export const IDENTITY_LINK_POLL_MS = 2000;
@@ -57,11 +58,11 @@ export interface OxyLinkCommonsPanelProps {
 export const OxyLinkCommonsPanel: React.FC<OxyLinkCommonsPanelProps> = ({ onLinked }) => {
   const theme = useTheme();
   const { t } = useI18n();
-  const { user, oxyServices } = useOxy();
+  const { oxyServices } = useOxy();
   const [step, setStep] = useState<Step>({ name: 'opening' });
   const [error, setError] = useState<string | null>(null);
-  const alreadyLinked = Boolean(user?.publicKey);
-  const methods = useSignInMethods({ enabled: !alreadyLinked });
+  const security = useAccountSecurityState();
+  const alreadyLinked = security.keyed;
 
   const open = useCallback(() => {
     setError(null);
@@ -78,10 +79,10 @@ export const OxyLinkCommonsPanel: React.FC<OxyLinkCommonsPanelProps> = ({ onLink
   // One request per visit, opened once the page knows the account has no root.
   const opened = useRef(false);
   useEffect(() => {
-    if (alreadyLinked || opened.current) return;
+    if (alreadyLinked || !security.personal || opened.current) return;
     opened.current = true;
     open();
-  }, [alreadyLinked, open]);
+  }, [alreadyLinked, security.personal, open]);
 
   // While the QR shows, ask whether Commons has signed; a request only lives a
   // few minutes, and an expired one says so instead of waiting forever.
@@ -140,27 +141,38 @@ export const OxyLinkCommonsPanel: React.FC<OxyLinkCommonsPanelProps> = ({ onLink
     );
   }
 
+  if (!security.personal) return accountSecurityFallback(security, t('linkCommons.title'), t);
+
   switch (step.name) {
-    case 'confirm':
+    case 'confirm': {
+      // The proof depends on what the account has: wait for it rather than
+      // guess (an authenticator left out would only fail the confirmation).
+      const fallback = accountSecurityFallback(security, t('linkCommons.confirmTitle'), t);
+      if (fallback || !security.methods.data) return fallback;
+      const { hasEmail, totpEnabled } = security.methods.data;
       return (
         <ReauthStep
           title={t('linkCommons.confirmTitle')}
-          description={t('linkCommons.confirmDescription')}
+          description={
+            hasEmail
+              ? t('linkCommons.confirmDescription')
+              : t('linkCommons.confirmPasswordDescription')
+          }
           action="link_commons"
-          totpEnabled={methods.data?.totpEnabled ?? false}
+          // The mailbox proves it when there is one; the password only without.
+          allowPassword={!hasEmail}
+          allowEmail={hasEmail}
+          totpEnabled={totpEnabled}
           submitLabel={t('linkCommons.confirm')}
           onSubmit={async (proof) => {
-            if (!proof.emailCode) throw new Error(t('reauth.errors.invalid'));
-            await oxyServices.identity.links.complete(step.link.linkId, {
-              emailCode: proof.emailCode,
-              ...(proof.totpCode ? { totpCode: proof.totpCode } : {}),
-            });
+            await oxyServices.identity.links.complete(step.link.linkId, proof);
             setStep({ name: 'done' });
             onLinked?.();
           }}
           secondary={{ label: t('linkCommons.cancel'), onPress: () => cancel(step.link) }}
         />
       );
+    }
     case 'done':
       return (
         <OxyAuthScreen>

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

@@ -1,8 +1,9 @@
 /**
- * Setting or changing the account's password, from its settings. A password
- * is optional: the account signs in with a code by email without one. The
- * change is confirmed with the current password (when there is one) or a code
- * sent to the account's email, plus the authenticator's code when it has one.
+ * Setting, changing or removing the account's password, from its settings. A
+ * password is optional: the account signs in with a code by email without
+ * one, and it can be removed while the account has an email. Each change is
+ * confirmed with the current password (when there is one) or a code sent to
+ * the account's email, plus the authenticator's code when it has one.
  */
 
 import type React from 'react';
@@ -14,12 +15,13 @@ import { toast } from '@oxy.so/bloom/toast';
 import { PASSWORD_MAX_LENGTH, PASSWORD_MIN_LENGTH } from '@oxy.so/contracts/client';
 import { useQueryClient } from '@tanstack/react-query';
 import { useOxy } from '../../context/oxyRuntimeContext';
-import { useSignInMethods } from '../../hooks/queries/useAuthMethods';
 import { queryKeys } from '../../hooks/queries/queryKeys';
 import { useI18n } from '../../hooks/useI18n';
-import { OxyAuthLoading, OxyAuthScreen, OxyAuthScreenHeader } from './OxyAuthScreen';
+import { SubtleLink } from '../authChooser/primitives';
+import { OxyAuthScreen, OxyAuthScreenHeader } from './OxyAuthScreen';
 import { ReauthStep } from './ReauthStep';
 import { AccountFlowField } from './accountFlowParts';
+import { accountSecurityFallback, useAccountSecurityState } from './accountSecurityState';
 
 export interface OxyPasswordPanelProps {
   /** The password is saved. */
@@ -30,15 +32,15 @@ export interface OxyPasswordPanelProps {
 
 export const OxyPasswordPanel: React.FC<OxyPasswordPanelProps> = ({ onDone, onCancel }) => {
   const { t } = useI18n();
-  const { oxyServices, user } = useOxy();
+  const { oxyServices } = useOxy();
   const queryClient = useQueryClient();
-  const keyed = Boolean(user?.publicKey);
-  const methods = useSignInMethods({ enabled: !keyed });
+  const state = useAccountSecurityState();
+  const [removing, setRemoving] = useState(false);
   const [password, setPassword] = useState('');
   const [repeat, setRepeat] = useState('');
   const [signOutOthers, setSignOutOthers] = useState(false);
 
-  if (keyed) {
+  if (state.keyed) {
     return (
       <OxyAuthScreen>
         <OxyAuthScreenHeader
@@ -48,9 +50,33 @@ export const OxyPasswordPanel: React.FC<OxyPasswordPanelProps> = ({ onDone, onCa
       </OxyAuthScreen>
     );
   }
-  if (!methods.data) return <OxyAuthLoading />;
+  const fallback = accountSecurityFallback(state, t('signInSecurity.password.title'), t);
+  if (fallback || !state.methods.data) return fallback;
+  const { hasEmail, hasPassword, totpEnabled } = state.methods.data;
+  const refresh = () =>
+    void queryClient.invalidateQueries({ queryKey: queryKeys.signInMethods.all });
 
-  const hasPassword = methods.data.hasPassword;
+  if (removing) {
+    return (
+      <ReauthStep
+        title={t('signInSecurity.password.removeTitle')}
+        description={t('signInSecurity.password.removeDescription')}
+        action="change_password"
+        allowPassword
+        totpEnabled={totpEnabled}
+        submitLabel={t('signInSecurity.password.remove')}
+        destructive
+        onSubmit={async (reauth) => {
+          await oxyServices.auth.password.remove(reauth);
+          refresh();
+          toast.success(t('signInSecurity.password.removed'));
+          setRemoving(false);
+          onDone?.();
+        }}
+        secondary={{ label: t('common.cancel'), onPress: () => setRemoving(false) }}
+      />
+    );
+  }
 
   return (
     <ReauthStep
@@ -62,7 +88,8 @@ export const OxyPasswordPanel: React.FC<OxyPasswordPanelProps> = ({ onDone, onCa
       description={t('signInSecurity.password.description', { min: PASSWORD_MIN_LENGTH })}
       action="change_password"
       allowPassword={hasPassword}
-      totpEnabled={methods.data.totpEnabled}
+      allowEmail={hasEmail}
+      totpEnabled={totpEnabled}
       submitLabel={t('signInSecurity.password.save')}
       validate={() => {
         if (password.length < PASSWORD_MIN_LENGTH || password.length > PASSWORD_MAX_LENGTH) {
@@ -76,7 +103,7 @@ export const OxyPasswordPanel: React.FC<OxyPasswordPanelProps> = ({ onDone, onCa
           reauth,
           revokeOtherSessions: signOutOthers,
         });
-        void queryClient.invalidateQueries({ queryKey: queryKeys.signInMethods.all });
+        refresh();
         toast.success(t('signInSecurity.password.saved'));
         onDone?.();
       }}
@@ -112,6 +139,14 @@ export const OxyPasswordPanel: React.FC<OxyPasswordPanelProps> = ({ onDone, onCa
           testID="password-sign-out-others"
         />
       </Field>
+      {/* Without an email the password is the one way in: it stays. */}
+      {hasPassword && hasEmail ? (
+        <SubtleLink
+          label={t('signInSecurity.password.remove')}
+          onPress={() => setRemoving(true)}
+          testID="password-remove"
+        />
+      ) : null}
     </ReauthStep>
   );
 };

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

@@ -0,0 +1,147 @@
+/**
+ * "Sign-in & security": every way the signed-in account signs in, each with
+ * its state, and every place it is signed in. One page, rendered by the
+ * account dialog's "Manage your account" (`SignInSecurity`) and by the
+ * Accounts app's security page.
+ *
+ * Each method opens its own panel: the email (`SignInEmail`), the password
+ * (`SignInPassword`), the authenticator app (`SignInAuthenticator`) and
+ * linking Commons (`LinkCommons`). An account with a Commons key signs in with
+ * Commons, so it sees only that; an organization, project or bot has no
+ * methods of its own, only its sessions.
+ */
+
+import type React from 'react';
+import { View } from 'react-native';
+import { GroupedSection, GroupedSectionItem } from '@oxy.so/bloom/grouped-section';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { useOxy } from '../../context/oxyRuntimeContext';
+import { useI18n } from '../../hooks/useI18n';
+import type { RouteName } from '../../navigation/routes';
+import { SettingsIcon } from '../SettingsIcon';
+import { AccountFlowNotice } from './accountFlowParts';
+import { useAccountSecurityState } from './accountSecurityState';
+import { SessionsSection } from './SessionsSection';
+
+type SignInSecurityRoute = Extract<
+  RouteName,
+  'SignInEmail' | 'SignInPassword' | 'SignInAuthenticator' | 'LinkCommons'
+>;
+
+export interface OxySignInSecurityPanelProps {
+  /**
+   * Open one method's panel. Defaults to the provider's `showBottomSheet`;
+   * a surface passes its own `navigate` so the panel stacks inside it.
+   */
+  onOpen?: (route: SignInSecurityRoute) => void;
+}
+
+export const OxySignInSecurityPanel: React.FC<OxySignInSecurityPanelProps> = ({ onOpen }) => {
+  const theme = useTheme();
+  const { t } = useI18n();
+  const { user, showBottomSheet } = useOxy();
+  const { keyed, personal, methods } = useAccountSecurityState();
+  const open = (route: SignInSecurityRoute) => () =>
+    onOpen ? onOpen(route) : showBottomSheet?.(route);
+  const on = theme.colors.success;
+  const off = theme.colors.textTertiary;
+
+  const renderMethods = (): React.ReactNode => {
+    if (keyed) {
+      return (
+        <GroupedSectionItem
+          icon={<SettingsIcon name="key" color={on} />}
+          title={t('signInSecurity.commons.title')}
+          description={t('linkCommons.already')}
+          showChevron={false}
+          disabled
+        />
+      );
+    }
+    if (!personal) {
+      return (
+        <GroupedSectionItem
+          icon={<SettingsIcon name="information" color={off} />}
+          title={t('signInSecurity.notPersonal')}
+          showChevron={false}
+          disabled
+        />
+      );
+    }
+    if (!methods.data) {
+      return methods.isError ? (
+        <GroupedSectionItem
+          icon={<SettingsIcon name="alert-circle" color={theme.colors.error} />}
+          title={t('signInSecurity.loadFailed')}
+          description={t('signInSecurity.retry')}
+          onPress={() => void methods.refetch()}
+          testID="sign-in-security-retry"
+        />
+      ) : (
+        <GroupedSectionItem
+          icon={<SettingsIcon name="sync" color={theme.colors.primary} />}
+          title={t('common.status.loading')}
+          showChevron={false}
+          disabled
+        />
+      );
+    }
+    const { hasEmail, hasPassword, totpEnabled, backupCodesRemaining } = methods.data;
+    return (
+      <>
+        <GroupedSectionItem
+          icon={<SettingsIcon name="email" color={hasEmail ? on : off} />}
+          title={t('signInSecurity.email.title')}
+          description={
+            hasEmail
+              ? (user?.email ?? t('signInSecurity.status.on'))
+              : t('signInSecurity.email.none')
+          }
+          onPress={open('SignInEmail')}
+          testID="sign-in-security-email"
+        />
+        <GroupedSectionItem
+          icon={<SettingsIcon name="key" color={hasPassword ? on : off} />}
+          title={t('signInSecurity.password.title')}
+          description={
+            hasPassword ? t('signInSecurity.status.on') : t('signInSecurity.password.row')
+          }
+          onPress={open('SignInPassword')}
+          testID="sign-in-security-password"
+        />
+        <GroupedSectionItem
+          icon={<SettingsIcon name="shield-check" color={totpEnabled ? on : off} />}
+          title={t('signInSecurity.totp.title')}
+          description={
+            totpEnabled
+              ? t('signInSecurity.totp.onWithCodes', { count: backupCodesRemaining })
+              : t('signInSecurity.totp.row')
+          }
+          onPress={open('SignInAuthenticator')}
+          testID="sign-in-security-totp"
+        />
+        <GroupedSectionItem
+          icon={<SettingsIcon name="link" color={theme.colors.primary} />}
+          title={t('linkCommons.title')}
+          description={t('linkCommons.row')}
+          onPress={open('LinkCommons')}
+          testID="sign-in-security-commons"
+        />
+      </>
+    );
+  };
+
+  const noEmail = personal && !keyed && methods.data?.hasEmail === false;
+
+  return (
+    <View>
+      <GroupedSection title={t('signInSecurity.methodsTitle')}>{renderMethods()}</GroupedSection>
+      {noEmail ? (
+        <AccountFlowNotice type="warning" testID="sign-in-security-no-email">
+          {t('signInSecurity.noEmailWarning')}
+        </AccountFlowNotice>
+      ) : null}
+      <SessionsSection />
+    </View>
+  );
+};

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

@@ -1,8 +1,9 @@
 /**
  * "Confirm it's you": the fresh proof a sensitive change carries (`reauth`) —
  * a code sent to the account's email for THIS change, or the current password
- * where the change accepts one — plus the authenticator's code (or a backup
- * code) when the account has one. The screen that needs it puts its own fields
+ * where the change accepts one (the only proof of an account without an
+ * email) — plus the authenticator's code (or a backup code) when the account
+ * has one. The screen that needs it puts its own fields
  * above (`children`) and names its own action; this owns the proof.
  */
 
@@ -34,6 +35,11 @@ export interface ReauthStepProps {
   action: ReauthAction;
   /** The account has a password, and this change accepts it. */
   allowPassword?: boolean;
+  /**
+   * The account has an email, and this change accepts a code sent to it.
+   * Without it the proof is the password alone.
+   */
+  allowEmail?: boolean;
   /** The account has an authenticator: its code is required too. */
   totpEnabled: boolean;
   /** The screen's action, once the proof is ready. */
@@ -53,6 +59,7 @@ export const ReauthStep: React.FC<ReauthStepProps> = ({
   description,
   action,
   allowPassword = false,
+  allowEmail = true,
   totpEnabled,
   submitLabel,
   destructive,
@@ -63,7 +70,9 @@ export const ReauthStep: React.FC<ReauthStepProps> = ({
 }) => {
   const { t } = useI18n();
   const { oxyServices } = useOxy();
-  const [mode, setMode] = useState<'email' | 'password'>(allowPassword ? 'password' : 'email');
+  const [mode, setMode] = useState<'email' | 'password'>(
+    allowPassword || !allowEmail ? 'password' : 'email',
+  );
   const [verificationId, setVerificationId] = useState<string | null>(null);
   const [emailCode, setEmailCode] = useState('');
   const [password, setPassword] = useState('');
@@ -221,7 +230,7 @@ export const ReauthStep: React.FC<ReauthStepProps> = ({
           testID="reauth-resend"
         />
       ) : null}
-      {allowPassword ? (
+      {allowPassword && allowEmail ? (
         <SubtleLink
           label={mode === 'password' ? t('reauth.useEmail') : t('reauth.usePassword')}
           onPress={() => {