@oxy.so/services 12.3.0 → 12.4.0

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). */

package/src/ui/screens/AccountSecurityPanelScreen.tsx

@@ -1,6 +1,6 @@
 /**
  * The frame the account's own security panels render in when presented as a
- * surface (`showBottomSheet('DeleteAccount' | 'LinkCommons' | 'SignInPassword'
+ * surface (`showBottomSheet('DeleteAccount' | 'LinkCommons' | 'SignInEmail' | 'SignInPassword'
  * | 'SignInAuthenticator')`): the panel draws its own large header, so the bar
  * holds only the way back, and the body keeps the dialog's screen gutter.
  */

package/src/ui/screens/ManageAccountScreen.tsx

@@ -4,7 +4,6 @@ import { SpinnerIcon } from '@oxy.so/bloom/loading';
 import type React from 'react';
 import { useCallback, useMemo, useState } from 'react';
 import { View, StyleSheet, Linking, Platform } from 'react-native';
-import Ionicons from '../icons/Ionicons';
 import { toast } from '@oxy.so/bloom/toast';
 import { surfaces } from '@oxy.so/bloom/surfaces';
 import { useTheme } from '@oxy.so/bloom/theme';
@@ -16,7 +15,6 @@ import {
   getNormalizedUserHandle,
   logger as loggerUtil,
   packageInfo,
-  type DeviceLinkedSession,
 } from '@oxy.so/core';
 import type { BaseScreenProps } from '../types/navigation';
 import ProfileSummaryCard from '../components/ProfileSummaryCard';
@@ -29,46 +27,14 @@ import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import { isWebBrowser } from '../utils/isWebBrowser';
 import { useCurrentUser } from '../hooks/queries/useAccountQueries';
 import { useUserSubscription } from '../hooks/queries/usePaymentQueries';
-import { useDeviceSessions } from '../hooks/queries/useServicesQueries';
-import { deviceSessionTitle } from '../utils/deviceSessionTitle';
-
-type DeviceSessionRow = DeviceLinkedSession;
-
-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();
-};
 
 /**
  * Unified "Manage your Oxy Account" screen.
  *
  * Replaces AccountOverview + AccountSettings + the per-account half of
- * SessionManagement. Lists ONLY the active user's profile, sessions on this
- * device, and security/destructive actions for THIS account. Multi-account
+ * SessionManagement. Lists ONLY the active user's profile, its sign-in and
+ * security page (`SignInSecurity`: methods and sessions), and the destructive
+ * actions for THIS account. Multi-account
  * surface lives in the unified `OxyAccountDialogScreen` — keep these concerns separate.
  */
 interface ManageAccountScreenProps extends BaseScreenProps {
@@ -91,7 +57,6 @@ const ManageAccountScreen: React.FC<ManageAccountScreenProps> = ({
     user: contextUser,
     isAuthenticated,
     oxyServices,
-    activeSessionId,
     logout,
     openAvatarPicker,
     accounts,
@@ -110,14 +75,6 @@ const ManageAccountScreen: React.FC<ManageAccountScreenProps> = ({
   const user = userFromQuery ?? contextUser;
 
   const { data: subscription } = useUserSubscription({ enabled: isAuthenticated });
-  const {
-    data: deviceSessions,
-    isLoading: deviceSessionsLoading,
-    refetch: refetchDeviceSessions,
-  } = useDeviceSessions({ enabled: isAuthenticated && !!activeSessionId });
-
-  const [removingDeviceId, setRemovingDeviceId] = useState<string | null>(null);
-  const [signingOutAllDevices, setSigningOutAllDevices] = useState(false);
   const [signingOut, setSigningOut] = useState(false);
 
   const displayName = useMemo(
@@ -159,91 +116,6 @@ const ManageAccountScreen: React.FC<ManageAccountScreenProps> = ({
     }
   }, [signingOut, logout, t, onClose]);
 
-  const confirmRemoveDevice = useCallback(
-    async (device: DeviceSessionRow) => {
-      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: 'ManageAccountScreen' },
-          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 otherDeviceCount = ((deviceSessions ?? []) as DeviceSessionRow[]).filter(
-      (device) => !device.isCurrent,
-    ).length;
-    const confirmed = await surfaces.confirm({
-      title: t('manageAccount.confirms.signOutAllDevicesTitle') || 'Sign out of all other devices',
-      description:
-        t('manageAccount.confirms.signOutAllDevices', { count: otherDeviceCount }) ||
-        `End ${otherDeviceCount} 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: 'ManageAccountScreen' },
-        error as unknown,
-      );
-      toast.error(
-        t('manageAccount.toasts.allDevicesFailed') || 'Failed to sign out from other devices',
-      );
-    } finally {
-      setSigningOutAllDevices(false);
-    }
-  }, [
-    activeSessionId,
-    signingOutAllDevices,
-    deviceSessions,
-    oxyServices,
-    refetchDeviceSessions,
-    t,
-  ]);
-
   // The signed, open-format export (`GET /users/me/export`): one JSON bundle
   // carrying Oxy's provenance attestation — the "credible exit" snapshot.
   const handleDownloadData = useCallback(async () => {
@@ -347,9 +219,6 @@ const ManageAccountScreen: React.FC<ManageAccountScreenProps> = ({
     );
   }
 
-  const deviceRows: DeviceSessionRow[] = (deviceSessions ?? []) as DeviceSessionRow[];
-  const otherDevices = deviceRows.filter((d) => !d.isCurrent);
-
   return (
     <>
       <View className="px-screen-margin pb-space-24">
@@ -432,117 +301,15 @@ const ManageAccountScreen: React.FC<ManageAccountScreenProps> = ({
               </GroupedSection>
             ) : null}
 
-            {/* Sessions section */}
-            <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>
-
-            {/* Security section */}
+            {/* Security: one page for how the account signs in and where. */}
             <GroupedSection title={t('manageAccount.sections.security') || 'Security'}>
               <GroupedSectionItem
                 icon={<SettingsIcon name="shield-check" color={bloomTheme.colors.primary} />}
-                title={t('manageAccount.items.security.title') || 'Security settings'}
-                description={
-                  t('manageAccount.items.security.subtitle') || 'Password, 2FA, recovery'
-                }
-                onPress={() => navigate?.('PrivacySettings')}
+                title={t('signInSecurity.title')}
+                description={t('signInSecurity.subtitle')}
+                onPress={() => navigate?.('SignInSecurity')}
+                testID="manage-account-sign-in-security"
               />
-              {user && !user.publicKey ? (
-                <>
-                  <GroupedSectionItem
-                    icon={<SettingsIcon name="key" color={bloomTheme.colors.primary} />}
-                    title={t('signInSecurity.password.title')}
-                    description={t('signInSecurity.password.row')}
-                    onPress={() => navigate?.('SignInPassword')}
-                  />
-                  <GroupedSectionItem
-                    icon={<SettingsIcon name="shield-check" color={bloomTheme.colors.primary} />}
-                    title={t('signInSecurity.totp.title')}
-                    description={t('signInSecurity.totp.row')}
-                    onPress={() => navigate?.('SignInAuthenticator')}
-                  />
-                  <GroupedSectionItem
-                    icon={<SettingsIcon name="link" color={bloomTheme.colors.primary} />}
-                    title={t('linkCommons.title')}
-                    description={t('linkCommons.row')}
-                    onPress={() => navigate?.('LinkCommons')}
-                  />
-                </>
-              ) : null}
               {user?.isPremium || subscription?.status === 'active' ? (
                 <GroupedSectionItem
                   icon={<SettingsIcon name="credit-card" color={bloomTheme.colors.success} />}