@oxy.so/services 6.1.0 → 8.0.0

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

@@ -16,7 +16,7 @@ import { RiArrowRightSLine } from '@oxy.so/bloom/icons/RiArrowRightSLine';
 import { RiUserAddLine } from '@oxy.so/bloom/icons/RiUserAddLine';
 import { useTheme } from '@oxy.so/bloom/theme';
 import { Text } from '@oxy.so/bloom/typography';
-import { showsPrincipalHeaders, type SwitcherContextRow, type SwitcherPrincipalRow } from '@oxy.so/core';
+import { showsPrincipalHeaders, type SwitcherContextRow, type SwitcherPrincipalRow } from '@oxy.so/core/session';
 import { useI18n } from '../../hooks/useI18n';
 import { AccountRow } from '../authChooser/primitives';
 import { authChooserStyles } from '../authChooser/styles';

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

@@ -66,20 +66,29 @@ export const OxyAuthScreen: React.FC<{ children: React.ReactNode; className?: st
   <View className={`w-full max-w-[448px] self-center gap-6 ${className ?? ''}`}>{children}</View>
 );
 
-/** The split card: `children` on the left and, from `md`, `aside` on the right. */
-export const OxyAuthSplit: React.FC<{ children: React.ReactNode; aside: React.ReactNode }> = ({ children, aside }) => {
+/**
+ * The split card: `children` on the left and, from `md`, `aside` on the right.
+ * `bare` inside a surface that already is the card (the account dialog): no
+ * border of its own, and the right column is a rounded tile within the
+ * dialog's margins.
+ */
+export const OxyAuthSplit: React.FC<{ children: React.ReactNode; aside: React.ReactNode; bare?: boolean }> = ({
+  children,
+  aside,
+  bare = false,
+}) => {
   const theme = useTheme();
   return (
     <View
-      className="w-full self-center md:max-w-[880px] md:flex-row md:rounded-3xl md:border md:border-border md:bg-card md:overflow-hidden"
+      className={`w-full self-center md:max-w-[880px] md:flex-row ${bare ? 'md:gap-8' : 'md:rounded-3xl md:border md:border-border md:bg-card md:overflow-hidden'}`}
     >
       {/* Padding on an inner box: a padded flex item cannot shrink its base
           size below its padding, which breaks the two equal tracks. */}
       <View className="md:flex-1 md:basis-0 md:min-w-0">
-        <View className="md:p-8">{children}</View>
+        <View className={bare ? '' : 'md:p-8'}>{children}</View>
       </View>
       <View
-        className="hidden md:flex md:flex-1 md:basis-0 md:min-w-0 items-center justify-center overflow-hidden p-8"
+        className={`hidden md:flex md:flex-1 md:basis-0 md:min-w-0 items-center justify-center overflow-hidden p-8 ${bare ? 'rounded-[20px]' : ''}`}
         style={{ backgroundColor: theme.colors.backgroundSecondary }}
       >
         {aside}

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

@@ -0,0 +1,294 @@
+/**
+ * The account's authenticator app (TOTP), from its settings:
+ *
+ *   off  → "Set up" → the QR (`otpauth://`) and its setup key → the app's
+ *          first code, confirmed like any sensitive change → the backup codes,
+ *          shown once
+ *   on   → new backup codes, or turn it off — each confirmed like any
+ *          sensitive change (with the authenticator's code too)
+ *
+ * Once on, every sign-in (email code, link or password) asks for the app's code
+ * as a second step, or a backup code.
+ */
+
+import type React from 'react';
+import { useState } from 'react';
+import { Clipboard, StyleSheet, View } from 'react-native';
+import QRCode from 'react-native-qrcode-svg';
+import { Button } from '@oxy.so/bloom/button';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { toast } from '@oxy.so/bloom/toast';
+import { Text } from '@oxy.so/bloom/typography';
+import { TOTP_DIGITS, type TotpEnrollResponse } from '@oxy.so/contracts';
+import { useQueryClient } from '@tanstack/react-query';
+import { useOxy } from '../../context/OxyContext';
+import { useSignInMethods } from '../../hooks/queries/useAuthMethods';
+import { queryKeys } from '../../hooks/queries/queryKeys';
+import { useI18n } from '../../hooks/useI18n';
+import { SubtleLink } from '../authChooser/primitives';
+import { OxyAuthLoading, OxyAuthScreen, OxyAuthScreenHeader } from './OxyAuthScreen';
+import { ReauthStep } from './ReauthStep';
+import {
+  AccountFlowAction,
+  AccountFlowErrorLine,
+  AccountFlowField,
+  AccountFlowNote,
+  describeSignInError,
+} from './accountFlowParts';
+
+/** High-contrast, un-themed on purpose: scan reliability. */
+const QR_PLATE_BG = '#FFFFFF';
+const QR_FOREGROUND = '#000000';
+const QR_SIZE = 184;
+
+type Step =
+  | { name: 'status' }
+  | { name: 'enroll'; enrollment: TotpEnrollResponse }
+  | { name: 'regenerate' }
+  | { name: 'disable' }
+  | { name: 'codes'; codes: string[] };
+
+export interface OxyAuthenticatorPanelProps {
+  /** The person is done here (after saving backup codes, or turning it off). */
+  onDone?: () => void;
+}
+
+export const OxyAuthenticatorPanel: React.FC<OxyAuthenticatorPanelProps> = ({ onDone }) => {
+  const theme = useTheme();
+  const { t } = useI18n();
+  const { oxyServices, user } = useOxy();
+  const queryClient = useQueryClient();
+  const keyed = Boolean(user?.publicKey);
+  const methods = useSignInMethods({ enabled: !keyed });
+  const [step, setStep] = useState<Step>({ name: 'status' });
+  const [code, setCode] = useState('');
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const refresh = () => void queryClient.invalidateQueries({ queryKey: queryKeys.signInMethods.all });
+
+  if (keyed) {
+    return (
+      <OxyAuthScreen>
+        <OxyAuthScreenHeader title={t('signInSecurity.totp.title')} description={t('linkCommons.already')} />
+      </OxyAuthScreen>
+    );
+  }
+  if (!methods.data) return <OxyAuthLoading />;
+  const { hasPassword, totpEnabled, backupCodesRemaining } = methods.data;
+
+  const setUp = () => {
+    if (pending) return;
+    setError(null);
+    setPending(true);
+    oxyServices
+      .auth.totp.enroll()
+      .then((enrollment) => {
+        setCode('');
+        setStep({ name: 'enroll', enrollment });
+      })
+      .catch((reason: unknown) => setError(describeSignInError(reason, t)))
+      .finally(() => setPending(false));
+  };
+
+  const back = { label: t('common.cancel'), onPress: () => setStep({ name: 'status' }) };
+
+  switch (step.name) {
+    case 'codes':
+      return (
+        <OxyAuthScreen>
+          <OxyAuthScreenHeader title={t('signInSecurity.totp.backupTitle')} description={t('signInSecurity.totp.backupDescription')} />
+          <View style={[styles.codes, { borderColor: theme.colors.border }]} testID="totp-backup-codes">
+            {step.codes.map((backupCode) => (
+              <Text key={backupCode} style={[styles.code, { color: theme.colors.text }]}>
+                {backupCode}
+              </Text>
+            ))}
+          </View>
+          <Button
+            appearance="outline"
+            tone="neutral"
+            size="lg"
+            fullWidth
+            onPress={() => {
+              Promise.resolve()
+                .then(() => Clipboard.setString(step.codes.join('\n')))
+                .then(() => toast.success(t('signInSecurity.totp.copied')))
+                .catch(() => undefined);
+            }}
+            testID="totp-copy-codes"
+          >
+            {t('signInSecurity.totp.copy')}
+          </Button>
+          <AccountFlowAction
+            label={t('signInSecurity.totp.savedThem')}
+            onPress={() => {
+              setStep({ name: 'status' });
+              onDone?.();
+            }}
+            pending={false}
+            testID="totp-codes-done"
+          />
+        </OxyAuthScreen>
+      );
+    case 'enroll': {
+      const { enrollment } = step;
+      return (
+        <ReauthStep
+          title={t('signInSecurity.totp.title')}
+          description={t('signInSecurity.totp.scan')}
+          action="totp"
+          allowPassword={hasPassword}
+          totpEnabled={false}
+          submitLabel={t('signInSecurity.totp.enable')}
+          validate={() => (new RegExp(`^\\d{${TOTP_DIGITS}}$`).test(code.trim()) ? null : t('signin.errors.secondFactorInvalid'))}
+          onSubmit={async (reauth) => {
+            const codes = await oxyServices.auth.totp.confirm(code.trim(), reauth);
+            refresh();
+            toast.success(t('signInSecurity.totp.enabled'));
+            setStep({ name: 'codes', codes });
+          }}
+          secondary={back}
+        >
+          <View style={styles.plateRow}>
+            <View style={[styles.plate, { borderColor: theme.colors.border }]} testID="totp-qr">
+              <QRCode value={enrollment.otpauthUri} size={QR_SIZE} backgroundColor={QR_PLATE_BG} color={QR_FOREGROUND} />
+            </View>
+          </View>
+          <View style={styles.secret}>
+            <Text style={[styles.secretLabel, { color: theme.colors.textSecondary }]}>{t('signInSecurity.totp.secretLabel')}</Text>
+            <Text selectable style={[styles.secretValue, { color: theme.colors.text }]} testID="totp-secret">
+              {enrollment.secret.replace(/(.{4})/g, '$1 ').trim()}
+            </Text>
+          </View>
+          <AccountFlowField
+            label={t('signInSecurity.totp.codeLabel')}
+            value={code}
+            onChange={(value) => setCode(value.replace(/\D/g, '').slice(0, TOTP_DIGITS))}
+            onSubmit={() => undefined}
+            error={null}
+            placeholder="000000"
+            autoComplete="one-time-code"
+            keyboardType="number-pad"
+            maxLength={TOTP_DIGITS}
+            testID="totp-enroll-code"
+          />
+        </ReauthStep>
+      );
+    }
+    case 'regenerate':
+      return (
+        <ReauthStep
+          title={t('signInSecurity.totp.regenerate')}
+          description={t('signInSecurity.totp.regenerateDescription')}
+          action="totp"
+          allowPassword={hasPassword}
+          totpEnabled
+          submitLabel={t('signInSecurity.totp.regenerate')}
+          onSubmit={async (reauth) => {
+            const codes = await oxyServices.auth.totp.regenerateBackupCodes(reauth);
+            refresh();
+            setStep({ name: 'codes', codes });
+          }}
+          secondary={back}
+        />
+      );
+    case 'disable':
+      return (
+        <ReauthStep
+          title={t('signInSecurity.totp.disable')}
+          description={t('signInSecurity.totp.description')}
+          action="totp"
+          allowPassword={hasPassword}
+          totpEnabled
+          submitLabel={t('signInSecurity.totp.disable')}
+          destructive
+          onSubmit={async (reauth) => {
+            await oxyServices.auth.totp.disable(reauth);
+            refresh();
+            toast.success(t('signInSecurity.totp.disabled'));
+            setStep({ name: 'status' });
+            onDone?.();
+          }}
+          secondary={back}
+        />
+      );
+    default:
+      return (
+        <OxyAuthScreen>
+          <OxyAuthScreenHeader
+            title={t('signInSecurity.totp.title')}
+            description={totpEnabled ? t('signInSecurity.totp.enabled') : t('signInSecurity.totp.description')}
+          />
+          {totpEnabled ? (
+            <>
+              <AccountFlowNote testID="totp-remaining">
+                {t('signInSecurity.totp.remaining', { count: backupCodesRemaining })}
+              </AccountFlowNote>
+              <AccountFlowAction
+                label={t('signInSecurity.totp.regenerate')}
+                onPress={() => setStep({ name: 'regenerate' })}
+                pending={false}
+                testID="totp-regenerate"
+              />
+              <SubtleLink
+                label={t('signInSecurity.totp.disable')}
+                theme={theme}
+                onPress={() => setStep({ name: 'disable' })}
+                testID="totp-disable"
+              />
+            </>
+          ) : (
+            <>
+              {error ? <AccountFlowErrorLine message={error} /> : null}
+              <AccountFlowAction label={t('signInSecurity.totp.setUp')} onPress={setUp} pending={pending} testID="totp-set-up" />
+            </>
+          )}
+        </OxyAuthScreen>
+      );
+  }
+};
+
+const styles = StyleSheet.create({
+  plateRow: {
+    alignItems: 'center',
+  },
+  plate: {
+    padding: 12,
+    borderRadius: 16,
+    borderWidth: StyleSheet.hairlineWidth,
+    backgroundColor: QR_PLATE_BG,
+  },
+  secret: {
+    gap: 4,
+    alignItems: 'center',
+  },
+  secretLabel: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  secretValue: {
+    fontSize: 16,
+    lineHeight: 24,
+    fontWeight: '600',
+    letterSpacing: 1,
+    textAlign: 'center',
+  },
+  codes: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+    padding: 16,
+    borderRadius: 16,
+    borderWidth: StyleSheet.hairlineWidth,
+    justifyContent: 'center',
+  },
+  code: {
+    width: '45%',
+    fontSize: 16,
+    lineHeight: 24,
+    fontWeight: '600',
+    letterSpacing: 1,
+    textAlign: 'center',
+  },
+});

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

@@ -1,106 +1,93 @@
 /**
- * Deleting a passkey account (ADR 0029 D3), auth.oxy.so's `/delete-account`.
+ * Deleting an account that has no key of its own, from the account's settings
+ * (the account dialog's "Manage your account", or the Accounts app):
  *
- * A passkey account has no key to sign its deletion with, so the person types
- * the username and asserts one of the account's passkeys — on auth.oxy.so, the
- * one origin that asserts them — over a challenge the API minted for the
- * account. An account with a Commons key is deleted in Commons, with its key.
- * The page must be signed in as the account; the host renders sign-in first.
+ *   type the username → a code sent to the account's email (+ the
+ *   authenticator's code when it has one) → deleted, and signed out
+ *
+ * An account with a Commons key is deleted with that key — in Commons, or in
+ * an app that holds it (`ManageAccountScreen`); this panel says so instead.
+ * It must be rendered signed in as the account.
  */
 
 import type React from 'react';
 import { useState } from 'react';
 import { useOxy } from '../../context/OxyContext';
+import { useSignInMethods } from '../../hooks/queries/useAuthMethods';
 import { useI18n } from '../../hooks/useI18n';
-import { isPasskeySupported, runAuthenticationCeremony } from '../../../webauthn/passkeyClient';
-import { PASSKEY_UNSUPPORTED_MESSAGE } from '../../context/passkeyFlow';
-import { OxyAuthScreen, OxyAuthScreenHeader } from './OxyAuthScreen';
-import {
-  AccountFlowAction,
-  AccountFlowErrorLine,
-  AccountFlowField,
-  AccountFlowNote,
-  describeAccountFlowError,
-} from './accountFlowParts';
+import { OxyAuthLoading, OxyAuthScreen, OxyAuthScreenHeader } from './OxyAuthScreen';
+import { ReauthStep } from './ReauthStep';
+import { AccountFlowField, AccountFlowNote } from './accountFlowParts';
 
 export interface OxyDeleteAccountPanelProps {
   /** The account is gone and this origin signed out of it. */
   onDeleted?: () => void;
+  /** "Cancel". */
+  onCancel?: () => void;
 }
 
-export const OxyDeleteAccountPanel: React.FC<OxyDeleteAccountPanelProps> = ({ onDeleted }) => {
+export const OxyDeleteAccountPanel: React.FC<OxyDeleteAccountPanelProps> = ({ onDeleted, onCancel }) => {
   const { t } = useI18n();
   const { user, oxyServices, logout } = useOxy();
+  const keyed = Boolean(user?.publicKey);
+  const methods = useSignInMethods({ enabled: !keyed });
   const [confirmText, setConfirmText] = useState('');
-  const [pending, setPending] = useState(false);
-  const [error, setError] = useState<string | null>(null);
   const [deleted, setDeleted] = useState(false);
 
   if (deleted) {
     return (
       <OxyAuthScreen>
-        <OxyAuthScreenHeader title={t('deleteAccount.passkey.done')} description={t('deleteAccount.passkey.closeWindow')} />
+        <OxyAuthScreenHeader title={t('deleteAccount.keyless.done')} description={t('deleteAccount.keyless.doneDescription')} />
       </OxyAuthScreen>
     );
   }
 
-  const username = user?.username ?? '';
-  if (user?.publicKey) {
+  if (keyed) {
     return (
       <OxyAuthScreen>
-        <OxyAuthScreenHeader title={t('deleteAccount.handoff.commonsTitle')} description={t('deleteAccount.passkey.commons')} />
+        <OxyAuthScreenHeader title={t('deleteAccount.handoff.commonsTitle')} description={t('deleteAccount.keyless.keyed')} />
       </OxyAuthScreen>
     );
   }
 
-  // The ceremony opens the browser's passkey prompt, so it starts from the press.
-  const remove = () => {
-    if (pending) return;
-    if (confirmText.trim() !== username) {
-      setError(t('deleteAccount.confirmLabel', { username }));
-      return;
-    }
-    setError(null);
-    setPending(true);
-    (async () => {
-      if (!isPasskeySupported()) throw new Error(PASSKEY_UNSUPPORTED_MESSAGE);
-      const options = await oxyServices.getAccountDeletionOptions();
-      const assertion = await runAuthenticationCeremony(options);
-      await oxyServices.deleteAccountWithPasskey(confirmText.trim(), assertion);
-      await logout().catch(() => undefined);
-      setDeleted(true);
-      onDeleted?.();
-    })()
-      .catch((reason: unknown) => setError(describeAccountFlowError(reason, t)))
-      .finally(() => setPending(false));
-  };
+  if (!methods.data) return <OxyAuthLoading />;
+
+  const username = user?.username ?? '';
 
   return (
-    <OxyAuthScreen>
-      <OxyAuthScreenHeader title={t('deleteAccount.title')} description={t('deleteAccount.passkey.subtitle', { username })} />
+    <ReauthStep
+      title={t('deleteAccount.title')}
+      description={t('deleteAccount.keyless.subtitle', { username })}
+      action="delete_account"
+      totpEnabled={methods.data.totpEnabled}
+      submitLabel={t('deleteAccount.keyless.action')}
+      destructive
+      validate={() => (confirmText.trim() === username ? null : t('deleteAccount.confirmLabel', { username }))}
+      onSubmit={async (proof) => {
+        if (!proof.emailCode) throw new Error(t('reauth.errors.invalid'));
+        await oxyServices.users.deleteMe(confirmText.trim(), {
+          reauth: {
+            emailCode: proof.emailCode,
+            ...(proof.totpCode ? { totpCode: proof.totpCode } : {}),
+          },
+        });
+        await logout().catch(() => undefined);
+        setDeleted(true);
+        onDeleted?.();
+      }}
+      secondary={onCancel ? { label: t('common.cancel'), onPress: onCancel } : undefined}
+    >
       <AccountFlowNote>{t('deleteAccount.warning')}</AccountFlowNote>
       <AccountFlowField
         label={t('deleteAccount.confirmLabel', { username })}
         value={confirmText}
-        onChange={(value) => {
-          setConfirmText(value);
-          if (error) setError(null);
-        }}
-        onSubmit={remove}
+        onChange={setConfirmText}
+        onSubmit={() => undefined}
         error={null}
-        disabled={pending}
         placeholder={username}
         autoComplete="off"
         testID="delete-account-confirm"
       />
-      {error ? <AccountFlowErrorLine message={error} /> : null}
-      <AccountFlowAction
-        label={t('deleteAccount.passkey.action')}
-        onPress={remove}
-        pending={pending}
-        disabled={confirmText.trim() !== username}
-        testID="delete-account-passkey"
-      />
-    </OxyAuthScreen>
+    </ReauthStep>
   );
 };

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

@@ -1,14 +1,14 @@
 /**
- * Linking Commons to a passkey account (ADR 0029 D3), auth.oxy.so's
- * `/link-commons`:
+ * Linking Commons to an account that has no key of its own, from the account's
+ * settings (the account dialog's "Manage your account", or the Accounts app):
  *
  *   QR → Commons scans and signs with its key → both screens show the same
- *   code → the person confirms here with the passkey → linked
+ *   code → the person confirms it's them with a code sent to the account's
+ *   email (+ the authenticator's code) → linked
  *
  * Afterwards the account is self-custodied: its root is the key Commons holds,
- * its recovery email is deleted, and its phrase in Commons is how it gets back
- * in. The passkey keeps signing in on the web. The page must be signed in as
- * the account; the host renders sign-in first.
+ * its email, password and authenticator are deleted, and its phrase in Commons
+ * is how it gets back in. It must be rendered signed in as the account.
  */
 
 import type React from 'react';
@@ -18,14 +18,14 @@ import QRCode from 'react-native-qrcode-svg';
 import { Button } from '@oxy.so/bloom/button';
 import { useTheme } from '@oxy.so/bloom/theme';
 import { Text } from '@oxy.so/bloom/typography';
-import { deriveIdentityLinkCode } from '@oxy.so/core';
+import { deriveIdentityLinkCode } from '@oxy.so/core/crypto';
 import type { IdentityLinkCreateResponse } from '@oxy.so/contracts';
 import { useOxy } from '../../context/OxyContext';
-import { PASSKEY_UNSUPPORTED_MESSAGE } from '../../context/passkeyFlow';
+import { useSignInMethods } from '../../hooks/queries/useAuthMethods';
 import { useI18n } from '../../hooks/useI18n';
-import { isPasskeySupported, runAuthenticationCeremony } from '../../../webauthn/passkeyClient';
 import { OxyAuthScreen, OxyAuthScreenHeader } from './OxyAuthScreen';
-import { AccountFlowAction, AccountFlowErrorLine, AccountFlowNote, describeAccountFlowError } from './accountFlowParts';
+import { ReauthStep } from './ReauthStep';
+import { AccountFlowAction, AccountFlowErrorLine, AccountFlowNote, describeSignInError } from './accountFlowParts';
 
 /** How often the page asks whether Commons has signed. */
 export const IDENTITY_LINK_POLL_MS = 2000;
@@ -39,6 +39,7 @@ type Step =
   | { name: 'opening' }
   | { name: 'qr'; link: IdentityLinkCreateResponse }
   | { name: 'matching'; link: IdentityLinkCreateResponse; code: string }
+  | { name: 'confirm'; link: IdentityLinkCreateResponse }
   | { name: 'expired' }
   | { name: 'done' };
 
@@ -52,18 +53,18 @@ export const OxyLinkCommonsPanel: React.FC<OxyLinkCommonsPanelProps> = ({ onLink
   const { t } = useI18n();
   const { user, oxyServices } = useOxy();
   const [step, setStep] = useState<Step>({ name: 'opening' });
-  const [pending, setPending] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const alreadyLinked = Boolean(user?.publicKey);
+  const methods = useSignInMethods({ enabled: !alreadyLinked });
 
   const open = useCallback(() => {
     setError(null);
     setStep({ name: 'opening' });
     oxyServices
-      .createIdentityLink()
+      .identity.links.create()
       .then((link) => setStep({ name: 'qr', link }))
       .catch((reason: unknown) => {
-        setError(describeAccountFlowError(reason, t));
+        setError(describeSignInError(reason, t));
         setStep({ name: 'expired' });
       });
   }, [oxyServices, t]);
@@ -89,7 +90,7 @@ export const OxyLinkCommonsPanel: React.FC<OxyLinkCommonsPanelProps> = ({ onLink
         return;
       }
       try {
-        const state = await oxyServices.getIdentityLink(link.linkId);
+        const state = await oxyServices.identity.links.get(link.linkId);
         if (stopped) return;
         if (state.status === 'signed' && state.publicKey) {
           setStep({ name: 'matching', link, code: deriveIdentityLinkCode(link.linkId, state.publicKey) });
@@ -111,25 +112,8 @@ export const OxyLinkCommonsPanel: React.FC<OxyLinkCommonsPanelProps> = ({ onLink
     };
   }, [link, oxyServices]);
 
-  // The ceremony opens the browser's passkey prompt, so it starts from the press.
-  const confirm = (confirmed: IdentityLinkCreateResponse) => {
-    if (pending) return;
-    setError(null);
-    setPending(true);
-    (async () => {
-      if (!isPasskeySupported()) throw new Error(PASSKEY_UNSUPPORTED_MESSAGE);
-      const options = await oxyServices.getIdentityLinkAssertionOptions(confirmed.linkId, confirmed.challenge);
-      const assertion = await runAuthenticationCeremony(options);
-      await oxyServices.completeIdentityLink(confirmed.linkId, assertion);
-      setStep({ name: 'done' });
-      onLinked?.();
-    })()
-      .catch((reason: unknown) => setError(describeAccountFlowError(reason, t)))
-      .finally(() => setPending(false));
-  };
-
   const cancel = (cancelled: IdentityLinkCreateResponse) => {
-    void oxyServices.cancelIdentityLink(cancelled.linkId).catch(() => undefined);
+    void oxyServices.identity.links.cancel(cancelled.linkId).catch(() => undefined);
     setStep({ name: 'expired' });
   };
 
@@ -142,6 +126,26 @@ export const OxyLinkCommonsPanel: React.FC<OxyLinkCommonsPanelProps> = ({ onLink
   }
 
   switch (step.name) {
+    case 'confirm':
+      return (
+        <ReauthStep
+          title={t('linkCommons.confirmTitle')}
+          description={t('linkCommons.confirmDescription')}
+          action="link_commons"
+          totpEnabled={methods.data?.totpEnabled ?? false}
+          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 } : {}),
+            });
+            setStep({ name: 'done' });
+            onLinked?.();
+          }}
+          secondary={{ label: t('linkCommons.cancel'), onPress: () => cancel(step.link) }}
+        />
+      );
     case 'done':
       return (
         <OxyAuthScreen>
@@ -167,9 +171,13 @@ export const OxyLinkCommonsPanel: React.FC<OxyLinkCommonsPanelProps> = ({ onLink
           >
             {`${step.code.slice(0, 3)} ${step.code.slice(3)}`}
           </Text>
-          {error ? <AccountFlowErrorLine message={error} /> : null}
-          <AccountFlowAction label={t('linkCommons.confirm')} onPress={() => confirm(step.link)} pending={pending} testID="link-commons-confirm" />
-          <Button appearance="plain" tone="neutral" size="lg" fullWidth disabled={pending} onPress={() => cancel(step.link)} testID="link-commons-cancel">
+          <AccountFlowAction
+            label={t('linkCommons.confirm')}
+            onPress={() => setStep({ name: 'confirm', link: step.link })}
+            pending={false}
+            testID="link-commons-confirm"
+          />
+          <Button appearance="plain" tone="neutral" size="lg" fullWidth onPress={() => cancel(step.link)} testID="link-commons-cancel">
             {t('linkCommons.cancel')}
           </Button>
         </OxyAuthScreen>