@oxy.so/services 12.3.0 → 12.5.0

package/src/ui/components/authChooser/__tests__/profileColors.test.ts

@@ -0,0 +1,13 @@
+import { resolveAccentHex } from '../types';
+import { APP_COLOR_PRESETS } from '@oxy.so/bloom/color-presets';
+
+jest.mock('@oxy.so/bloom/theme', () => jest.requireActual('@oxy.so/bloom/color-presets'));
+
+it('preserves the account identity for every app using the shared chooser', () => {
+  expect(resolveAccentHex('grove', '#fff')).toBe(APP_COLOR_PRESETS.grove.hex);
+  expect(resolveAccentHex('amber', '#fff')).toBe(APP_COLOR_PRESETS.yellow.hex);
+  expect(resolveAccentHex('#ABC', '#fff')).toBe('#aabbcc');
+  expect(resolveAccentHex('#123456', '#fff')).toBe('#123456');
+  expect(resolveAccentHex(null, '#fff')).toBe('#fff');
+  expect(resolveAccentHex('unknown', '#fff')).toBe('#fff');
+});

package/src/ui/components/authChooser/types.ts

@@ -1,3 +1,4 @@
+import { APP_COLOR_NAMES } from '@oxy.so/bloom/color-presets';
 /**
  * Shared types + per-account color resolution for the auth chooser's views.
  *
@@ -8,12 +9,7 @@
  */
 
 import type { AccountStorageUsageResponse } from '@oxy.so/core';
-import {
-  APP_COLOR_NAMES,
-  APP_COLOR_PRESETS,
-  type AppColorName,
-  type useTheme,
-} from '@oxy.so/bloom/theme';
+import { APP_COLOR_PRESETS, type useTheme } from '@oxy.so/bloom/theme';
 import type { AccountDialogMenuSection } from '../../navigation/accountDialogManager';
 import type { useI18n } from '../../hooks/useI18n';
 
@@ -132,14 +128,19 @@ export interface SignInAlternatives {
  * renders in EVERY consumer regardless of NativeWind availability.
  */
 export function resolveAccentHex(color: string | null, fallback: string): string {
-  const preset = toPreset(color);
-  return preset ? APP_COLOR_PRESETS[preset].hex : fallback;
-}
+  const normalized = color?.trim().toLowerCase();
+  if (!normalized) return fallback;
+
+  if (/^#[0-9a-f]{3}$/i.test(normalized)) {
+    return `#${normalized[1]}${normalized[1]}${normalized[2]}${normalized[2]}${normalized[3]}${normalized[3]}`;
+  }
+  if (/^#[0-9a-f]{6}$/i.test(normalized)) return normalized;
 
-/** Narrow a stored color string to a known `AppColorName`, or `undefined`. */
-export function toPreset(color: string | null): AppColorName | undefined {
-  if (!color) return undefined;
-  return (APP_COLOR_NAMES as readonly string[]).includes(color)
-    ? (color as AppColorName)
-    : undefined;
+  // `amber` was the retired name for `yellow`; existing user records are
+  // migrated, but inboxes can still render cached account data during rollout.
+  const preset = normalized === 'amber' ? 'yellow' : normalized;
+  if (APP_COLOR_NAMES.includes(preset as (typeof APP_COLOR_NAMES)[number])) {
+    return APP_COLOR_PRESETS[preset as (typeof APP_COLOR_NAMES)[number]].hex;
+  }
+  return fallback;
 }

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

@@ -23,12 +23,11 @@ import type { TotpEnrollResponse } from '@oxy.so/contracts';
 import { TOTP_DIGITS } 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 { copyText } from '../../utils/clipboard';
 import { SubtleLink } from '../authChooser/primitives';
-import { OxyAuthLoading, OxyAuthScreen, OxyAuthScreenHeader } from './OxyAuthScreen';
+import { OxyAuthScreen, OxyAuthScreenHeader } from './OxyAuthScreen';
 import { ReauthStep } from './ReauthStep';
 import {
   AccountFlowAction,
@@ -38,6 +37,7 @@ import {
   AccountFlowProgress,
   describeSignInError,
 } from './accountFlowParts';
+import { accountSecurityFallback, useAccountSecurityState } from './accountSecurityState';
 
 /** High-contrast, un-themed on purpose: scan reliability. */
 const QR_PLATE_BG = '#FFFFFF';
@@ -60,10 +60,9 @@ export interface OxyAuthenticatorPanelProps {
 export const OxyAuthenticatorPanel: React.FC<OxyAuthenticatorPanelProps> = ({ onDone }) => {
   const theme = useTheme();
   const { t } = useI18n();
-  const { oxyServices, user } = useOxy();
+  const { oxyServices } = useOxy();
   const queryClient = useQueryClient();
-  const keyed = Boolean(user?.publicKey);
-  const methods = useSignInMethods({ enabled: !keyed });
+  const security = useAccountSecurityState();
   const [step, setStep] = useState<Step>({ name: 'status' });
   const [code, setCode] = useState('');
   const [pending, setPending] = useState(false);
@@ -72,7 +71,7 @@ export const OxyAuthenticatorPanel: React.FC<OxyAuthenticatorPanelProps> = ({ on
   const refresh = () =>
     void queryClient.invalidateQueries({ queryKey: queryKeys.signInMethods.all });
 
-  if (keyed) {
+  if (security.keyed) {
     return (
       <OxyAuthScreen>
         <OxyAuthScreenHeader
@@ -82,8 +81,9 @@ export const OxyAuthenticatorPanel: React.FC<OxyAuthenticatorPanelProps> = ({ on
       </OxyAuthScreen>
     );
   }
-  if (!methods.data) return <OxyAuthLoading />;
-  const { hasPassword, totpEnabled, backupCodesRemaining } = methods.data;
+  const fallback = accountSecurityFallback(security, t('signInSecurity.totp.title'), t);
+  if (fallback || !security.methods.data) return fallback;
+  const { hasEmail, hasPassword, totpEnabled, backupCodesRemaining } = security.methods.data;
 
   const setUp = () => {
     if (pending) return;
@@ -157,6 +157,7 @@ export const OxyAuthenticatorPanel: React.FC<OxyAuthenticatorPanelProps> = ({ on
           description={t('signInSecurity.totp.scan')}
           action="totp"
           allowPassword={hasPassword}
+          allowEmail={hasEmail}
           totpEnabled={false}
           submitLabel={t('signInSecurity.totp.enable')}
           validate={() =>
@@ -213,6 +214,7 @@ export const OxyAuthenticatorPanel: React.FC<OxyAuthenticatorPanelProps> = ({ on
           description={t('signInSecurity.totp.regenerateDescription')}
           action="totp"
           allowPassword={hasPassword}
+          allowEmail={hasEmail}
           totpEnabled
           submitLabel={t('signInSecurity.totp.regenerate')}
           onSubmit={async (reauth) => {
@@ -230,6 +232,7 @@ export const OxyAuthenticatorPanel: React.FC<OxyAuthenticatorPanelProps> = ({ on
           description={t('signInSecurity.totp.description')}
           action="totp"
           allowPassword={hasPassword}
+          allowEmail={hasEmail}
           totpEnabled
           submitLabel={t('signInSecurity.totp.disable')}
           destructive

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

@@ -2,8 +2,9 @@
  * 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):
  *
- *   type the username → a code sent to the account's email (+ the
- *   authenticator's code when it has one) → deleted, and signed out
+ *   type the username → a code sent to the account's email, or its password
+ *   when it has no 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.
@@ -14,11 +15,11 @@ import type React from 'react';
 import { useState } from 'react';
 import { surfaces } from '@oxy.so/bloom/surfaces';
 import { useOxy } from '../../context/oxyRuntimeContext';
-import { useSignInMethods } from '../../hooks/queries/useAuthMethods';
 import { useI18n } from '../../hooks/useI18n';
-import { OxyAuthLoading, OxyAuthScreen, OxyAuthScreenHeader } from './OxyAuthScreen';
+import { OxyAuthScreen, OxyAuthScreenHeader } from './OxyAuthScreen';
 import { ReauthStep } from './ReauthStep';
 import { AccountFlowField, AccountFlowNotice } from './accountFlowParts';
+import { accountSecurityFallback, useAccountSecurityState } from './accountSecurityState';
 
 export interface OxyDeleteAccountPanelProps {
   /** The account is gone and this origin signed out of it. */
@@ -33,8 +34,7 @@ export const OxyDeleteAccountPanel: React.FC<OxyDeleteAccountPanelProps> = ({
 }) => {
   const { t } = useI18n();
   const { user, oxyServices, logout } = useOxy();
-  const keyed = Boolean(user?.publicKey);
-  const methods = useSignInMethods({ enabled: !keyed });
+  const security = useAccountSecurityState();
   const [confirmText, setConfirmText] = useState('');
   const [deleted, setDeleted] = useState(false);
 
@@ -49,7 +49,7 @@ export const OxyDeleteAccountPanel: React.FC<OxyDeleteAccountPanelProps> = ({
     );
   }
 
-  if (keyed) {
+  if (security.keyed) {
     return (
       <OxyAuthScreen>
         <OxyAuthScreenHeader title={t('deleteAccount.handoff.commonsTitle')} />
@@ -60,7 +60,9 @@ export const OxyDeleteAccountPanel: React.FC<OxyDeleteAccountPanelProps> = ({
     );
   }
 
-  if (!methods.data) return <OxyAuthLoading />;
+  const fallback = accountSecurityFallback(security, t('deleteAccount.title'), t);
+  if (fallback || !security.methods.data) return fallback;
+  const { hasEmail, totpEnabled } = security.methods.data;
 
   const username = user?.username ?? '';
 
@@ -69,14 +71,16 @@ export const OxyDeleteAccountPanel: React.FC<OxyDeleteAccountPanelProps> = ({
       title={t('deleteAccount.title')}
       description={t('deleteAccount.keyless.subtitle', { username })}
       action="delete_account"
-      totpEnabled={methods.data.totpEnabled}
+      // The mailbox proves it when there is one; the password only without.
+      allowPassword={!hasEmail}
+      allowEmail={hasEmail}
+      totpEnabled={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'));
         // The last word before it is gone: the proof is ready, and nothing has
         // been sent yet. Cancelling keeps the screen as it is, code and all.
         const confirmed = await surfaces.confirm({
@@ -87,12 +91,7 @@ export const OxyDeleteAccountPanel: React.FC<OxyDeleteAccountPanelProps> = ({
           destructive: true,
         });
         if (!confirmed) return;
-        await oxyServices.users.deleteMe(confirmText.trim(), {
-          reauth: {
-            emailCode: proof.emailCode,
-            ...(proof.totpCode ? { totpCode: proof.totpCode } : {}),
-          },
-        });
+        await oxyServices.users.deleteMe(confirmText.trim(), { reauth: proof });
         await logout().catch(() => undefined);
         setDeleted(true);
         onDeleted?.();

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

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

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

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