@oxy.so/services 12.2.1 → 12.4.0

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

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: