@oxy.so/services 12.3.0 → 12.5.0

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={() => {

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

@@ -0,0 +1,218 @@
+/**
+ * "Where you're signed in": the signed-in account's sessions on every device,
+ * from the server (`oxy.devices.sessions`). Removing one ends that session;
+ * "Sign out of all other devices" ends every session but this one
+ * (`oxy.devices.logoutAll`) — it never signs this device out.
+ */
+
+import type React from 'react';
+import { useCallback, useState } from 'react';
+import { GroupedSection, GroupedSectionItem } from '@oxy.so/bloom/grouped-section';
+import { SpinnerIcon } from '@oxy.so/bloom/loading';
+import { surfaces } from '@oxy.so/bloom/surfaces';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { toast } from '@oxy.so/bloom/toast';
+import { logger as loggerUtil, type DeviceLinkedSession } from '@oxy.so/core';
+import { useOxy } from '../../context/oxyRuntimeContext';
+import { useDeviceSessions } from '../../hooks/queries/useServicesQueries';
+import { useI18n } from '../../hooks/useI18n';
+import Ionicons from '../../icons/Ionicons';
+import { deviceSessionTitle } from '../../utils/deviceSessionTitle';
+import { SettingsIcon } from '../SettingsIcon';
+
+const formatRelative = (dateString?: string): string => {
+  if (!dateString) {
+    return '—';
+  }
+  const date = new Date(dateString);
+  const now = new Date();
+  const diffMs = date.getTime() - now.getTime();
+  const absMin = Math.abs(diffMs) / 60000;
+  const isFuture = diffMs > 0;
+  if (absMin < 1) {
+    return isFuture ? 'in moments' : 'just now';
+  }
+  if (absMin < 60) {
+    const v = Math.floor(absMin);
+    return isFuture ? `in ${v}m` : `${v}m ago`;
+  }
+  const hrs = absMin / 60;
+  if (hrs < 24) {
+    const v = Math.floor(hrs);
+    return isFuture ? `in ${v}h` : `${v}h ago`;
+  }
+  const days = hrs / 24;
+  if (days < 7) {
+    const v = Math.floor(days);
+    return isFuture ? `in ${v}d` : `${v}d ago`;
+  }
+  return date.toLocaleDateString();
+};
+
+export const SessionsSection: React.FC = () => {
+  const bloomTheme = useTheme();
+  const { t } = useI18n();
+  const { isAuthenticated, oxyServices, activeSessionId } = useOxy();
+  const {
+    data: deviceSessions,
+    isLoading: deviceSessionsLoading,
+    refetch: refetchDeviceSessions,
+  } = useDeviceSessions({ enabled: isAuthenticated && !!activeSessionId });
+
+  const [removingDeviceId, setRemovingDeviceId] = useState<string | null>(null);
+  const [signingOutAllDevices, setSigningOutAllDevices] = useState(false);
+
+  const deviceRows: DeviceLinkedSession[] = (deviceSessions ?? []) as DeviceLinkedSession[];
+  const otherDevices = deviceRows.filter((d) => !d.isCurrent);
+
+  const confirmRemoveDevice = useCallback(
+    async (device: DeviceLinkedSession) => {
+      if (!activeSessionId) {
+        return;
+      }
+      const confirmed = await surfaces.confirm({
+        title: t('manageAccount.confirms.removeDeviceTitle') || 'Remove device',
+        description: t('manageAccount.confirms.removeDevice', {
+          name: deviceSessionTitle(device, t),
+        }),
+        confirmLabel: t('common.remove') || 'Remove',
+        cancelLabel: t('common.cancel') || 'Cancel',
+        destructive: true,
+      });
+      if (!confirmed) {
+        return;
+      }
+      setRemovingDeviceId(device.sessionId);
+      try {
+        await oxyServices.session.logout(activeSessionId, device.sessionId);
+        await refetchDeviceSessions();
+        toast.success(
+          t('manageAccount.toasts.deviceRemoved', { name: deviceSessionTitle(device, t) }),
+        );
+      } catch (error) {
+        loggerUtil.warn('Remove device failed', { component: 'SessionsSection' }, error as unknown);
+        toast.error(t('manageAccount.toasts.deviceRemoveFailed') || 'Failed to remove device');
+      } finally {
+        setRemovingDeviceId(null);
+      }
+    },
+    [activeSessionId, oxyServices, refetchDeviceSessions, t],
+  );
+
+  const handleSignOutAllDevices = useCallback(async () => {
+    if (!activeSessionId || signingOutAllDevices) {
+      return;
+    }
+    const confirmed = await surfaces.confirm({
+      title: t('manageAccount.confirms.signOutAllDevicesTitle') || 'Sign out of all other devices',
+      description:
+        t('manageAccount.confirms.signOutAllDevices', { count: otherDevices.length }) ||
+        `End ${otherDevices.length} other device session(s)? This won't sign you out here.`,
+      confirmLabel: t('common.actions.signOut') || 'Sign out',
+      cancelLabel: t('common.cancel') || 'Cancel',
+      destructive: true,
+    });
+    if (!confirmed) {
+      return;
+    }
+    setSigningOutAllDevices(true);
+    try {
+      await oxyServices.devices.logoutAll(activeSessionId);
+      await refetchDeviceSessions();
+      toast.success(
+        t('manageAccount.toasts.allDevicesSignedOut') || 'Signed out from all other devices',
+      );
+    } catch (error) {
+      loggerUtil.warn(
+        'Sign out all devices failed',
+        { component: 'SessionsSection' },
+        error as unknown,
+      );
+      toast.error(
+        t('manageAccount.toasts.allDevicesFailed') || 'Failed to sign out from other devices',
+      );
+    } finally {
+      setSigningOutAllDevices(false);
+    }
+  }, [
+    activeSessionId,
+    signingOutAllDevices,
+    otherDevices.length,
+    oxyServices,
+    refetchDeviceSessions,
+    t,
+  ]);
+
+  return (
+    <GroupedSection title={t('manageAccount.sections.sessions') || 'Sessions & devices'}>
+      {deviceSessionsLoading ? (
+        <GroupedSectionItem
+          icon={<SettingsIcon name="sync" color={bloomTheme.colors.primary} />}
+          title={t('manageAccount.sessions.loading') || 'Loading sessions…'}
+          rightElement={null}
+          showChevron={false}
+          disabled
+        />
+      ) : deviceRows.length === 0 ? (
+        <GroupedSectionItem
+          icon={<SettingsIcon name="cellphone" color={bloomTheme.colors.textTertiary} />}
+          title={t('manageAccount.sessions.empty') || 'No active sessions'}
+          showChevron={false}
+          disabled
+        />
+      ) : (
+        deviceRows.map((device) => (
+          <GroupedSectionItem
+            key={`device-${device.sessionId}`}
+            icon={
+              <SettingsIcon
+                name={device.isCurrent ? 'cellphone' : 'cellphone-basic'}
+                color={device.isCurrent ? bloomTheme.colors.success : bloomTheme.colors.primary}
+              />
+            }
+            title={deviceSessionTitle(device, t)}
+            description={
+              t('manageAccount.sessions.lastActive', {
+                relative: formatRelative(device.lastActive),
+              }) || `Last active ${formatRelative(device.lastActive)}`
+            }
+            onPress={device.isCurrent ? undefined : () => confirmRemoveDevice(device)}
+            disabled={device.isCurrent || removingDeviceId === device.sessionId}
+            rightElement={
+              !device.isCurrent ? (
+                removingDeviceId === device.sessionId ? (
+                  <SpinnerIcon color={bloomTheme.colors.error} size={16} />
+                ) : (
+                  <Ionicons name="log-out-outline" size={18} color={bloomTheme.colors.error} />
+                )
+              ) : undefined
+            }
+            showChevron={false}
+          />
+        ))
+      )}
+      {otherDevices.length > 0 ? (
+        <GroupedSectionItem
+          icon={<SettingsIcon name="logout" color={bloomTheme.colors.error} />}
+          title={
+            t('manageAccount.sessions.signOutAllOnThisDevice') || 'Sign out of all other devices'
+          }
+          description={
+            t('manageAccount.sessions.signOutAllSubtitle', {
+              count: otherDevices.length,
+            }) || `End ${otherDevices.length} other device session(s)`
+          }
+          onPress={handleSignOutAllDevices}
+          destructive
+          showChevron={false}
+          disabled={signingOutAllDevices}
+          rightElement={
+            signingOutAllDevices ? (
+              <SpinnerIcon color={bloomTheme.colors.error} size={16} />
+            ) : undefined
+          }
+        />
+      ) : null}
+    </GroupedSection>
+  );
+};

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

@@ -87,6 +87,12 @@ export function describeSignInError(error: unknown, t: Translate): string {
       return t('signup.username.taken');
     case SIGN_IN_ERROR_CODES.emailAccountsFull:
       return t('signin.errors.emailAccountsFull');
+    case SIGN_IN_ERROR_CODES.lastSignInMethod:
+      return t('signInSecurity.errors.lastSignInMethod');
+    case SIGN_IN_ERROR_CODES.passwordRequired:
+      return t('signInSecurity.errors.passwordRequired');
+    case SIGN_IN_ERROR_CODES.emailUnchanged:
+      return t('signInSecurity.errors.emailUnchanged');
     case EMAIL_VERIFICATION_ERROR_CODES.codeInvalid:
       return t('emailCode.errors.codeInvalid');
     case EMAIL_VERIFICATION_ERROR_CODES.tooManyAttempts:

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

@@ -0,0 +1,75 @@
+/**
+ * What every security panel of the signed-in account reads first: whether it
+ * holds a Commons key (it signs in with Commons, nothing here applies),
+ * whether it is a personal account (only those sign in with an email, a
+ * password or an authenticator — the API refuses the rest), and how it signs
+ * in. A panel that cannot show its methods says why instead of spinning.
+ */
+
+import type React from 'react';
+import { Button } from '@oxy.so/bloom/button';
+import type { SignInMethods } from '@oxy.so/contracts';
+import type { UseQueryResult } from '@tanstack/react-query';
+import { useOxy } from '../../context/oxyRuntimeContext';
+import { useSignInMethods } from '../../hooks/queries/useAuthMethods';
+import type { Translate } from '../authChooser/types';
+import { OxyAuthLoading, OxyAuthScreen, OxyAuthScreenHeader } from './OxyAuthScreen';
+import { AccountFlowNotice } from './accountFlowParts';
+
+export interface AccountSecurityState {
+  /** The account holds a Commons key. */
+  keyed: boolean;
+  /** A personal account (an organization, project or bot signs in through its people). */
+  personal: boolean;
+  methods: UseQueryResult<SignInMethods>;
+}
+
+export function useAccountSecurityState(): AccountSecurityState {
+  const { user } = useOxy();
+  const keyed = Boolean(user?.publicKey);
+  const personal = !user?.kind || user.kind === 'personal';
+  const methods = useSignInMethods({ enabled: !keyed && personal });
+  return { keyed, personal, methods };
+}
+
+/**
+ * The screen a panel shows while its methods are not there to act on: not a
+ * personal account, the read failed (with a retry), or still loading. `null`
+ * once `methods.data` is ready.
+ */
+export function accountSecurityFallback(
+  state: AccountSecurityState,
+  title: string,
+  t: Translate,
+): React.ReactElement | null {
+  if (!state.personal) {
+    return (
+      <OxyAuthScreen>
+        <OxyAuthScreenHeader title={title} />
+        <AccountFlowNotice testID="account-security-not-personal">
+          {t('signInSecurity.notPersonal')}
+        </AccountFlowNotice>
+      </OxyAuthScreen>
+    );
+  }
+  if (state.methods.isError && !state.methods.data) {
+    return (
+      <OxyAuthScreen>
+        <OxyAuthScreenHeader title={title} />
+        <AccountFlowNotice type="error" testID="account-security-failed">
+          {t('signInSecurity.loadFailed')}
+        </AccountFlowNotice>
+        <Button
+          appearance="outline"
+          size="lg"
+          onPress={() => void state.methods.refetch()}
+          testID="account-security-retry"
+        >
+          {t('signInSecurity.retry')}
+        </Button>
+      </OxyAuthScreen>
+    );
+  }
+  if (!state.methods.data) return <OxyAuthLoading />;
+  return null;
+}

package/src/ui/navigation/routes.ts

@@ -41,7 +41,9 @@ export type RouteName =
   | 'Preferences' // General user preferences (theme, reduce-motion, etc.)
   | 'DeleteAccount' // Delete an account without a key, with a code by email
   | 'LinkCommons' // Link Commons: the account becomes self-custodied
-  | 'SignInPassword' // Set or change the account's password
+  | 'SignInSecurity' // How the account signs in, and where it is signed in
+  | 'SignInEmail' // Add, change or remove the account's email
+  | 'SignInPassword' // Set, change or remove the account's password
   | 'SignInAuthenticator' // The account's authenticator app and backup codes
   | 'AccountDialog'; // Unified account switcher + sign-in surface (OxyAccountDialogScreen body)
 
@@ -114,6 +116,8 @@ const ROUTES: ReadonlySet<string> = new Set([
   'Preferences',
   'DeleteAccount',
   'LinkCommons',
+  'SignInSecurity',
+  'SignInEmail',
   'SignInPassword',
   'SignInAuthenticator',
   'AccountDialog',

package/src/ui/navigation/screenComponents.ts

@@ -39,6 +39,8 @@ import ConnectedAppsScreenComponent from '../screens/ConnectedAppsScreen';
 import PreferencesScreenComponent from '../screens/PreferencesScreen';
 import DeleteAccountScreenComponent from '../screens/DeleteAccountScreen';
 import LinkCommonsScreenComponent from '../screens/LinkCommonsScreen';
+import SignInSecurityScreenComponent from '../screens/SignInSecurityScreen';
+import SignInEmailScreenComponent from '../screens/SignInEmailScreen';
 import SignInPasswordScreenComponent from '../screens/SignInPasswordScreen';
 import SignInAuthenticatorScreenComponent from '../screens/SignInAuthenticatorScreen';
 import AccountDialogScreenComponent from '../components/OxyAccountDialogScreen';
@@ -87,6 +89,8 @@ export const screenComponents: Record<RouteName, ComponentType<never>> = {
   // The account's own sign-in security, in its settings.
   DeleteAccount: DeleteAccountScreenComponent,
   LinkCommons: LinkCommonsScreenComponent,
+  SignInSecurity: SignInSecurityScreenComponent,
+  SignInEmail: SignInEmailScreenComponent,
   SignInPassword: SignInPasswordScreenComponent,
   SignInAuthenticator: SignInAuthenticatorScreenComponent,
   // Unified account switcher + sign-in surface. Its body lives in the

package/src/ui/navigation/surfaceRegistry.ts

@@ -81,6 +81,8 @@ export interface SurfaceRegistry {
   Preferences: SurfaceRoute;
   DeleteAccount: SurfaceRoute;
   LinkCommons: SurfaceRoute;
+  SignInSecurity: SurfaceRoute;
+  SignInEmail: SurfaceRoute;
   SignInPassword: SurfaceRoute;
   SignInAuthenticator: SurfaceRoute;
   /** Unified account switcher + sign-in surface (folded `OxyAccountDialogScreen` body). */