@oxy.so/services 6.0.0 → 6.2.0

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

@@ -0,0 +1,204 @@
+/**
+ * The pieces auth.oxy.so's account pages share (ADR 0029 D3): creating a
+ * passkey account, recovering one, deleting one. Each is a page of the IdP
+ * built from the same sign-in shell as `OxySignInPanel`, so they read as one
+ * product; the passkey belongs to auth.oxy.so, so none of them runs anywhere
+ * else.
+ */
+
+import type React from 'react';
+import { useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Button } from '@oxy.so/bloom/button';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { TextField, TextFieldHint, TextFieldInput, TextFieldLabel } from '@oxy.so/bloom/text-field';
+import { Text } from '@oxy.so/bloom/typography';
+import { EMAIL_CODE_LENGTH, EMAIL_VERIFICATION_ERROR_CODES, type EmailVerificationConfirmResponse } from '@oxy.so/contracts';
+import { useOxy } from '../../context/OxyContext';
+import { useI18n } from '../../hooks/useI18n';
+import type { Translate } from '../authChooser/types';
+import { SubtleLink } from '../authChooser/primitives';
+import { OxyAuthScreen, OxyAuthScreenHeader } from './OxyAuthScreen';
+import { describePasskeyError, isRateLimited } from './passkeyError';
+
+/** The API error code a thrown SDK error carries (`error.code`), if any. */
+function errorCode(error: unknown): string | undefined {
+  const code = (error as { code?: unknown } | null)?.code;
+  return typeof code === 'string' ? code : undefined;
+}
+
+/** A failure of an account page, in the person's language. */
+export function describeAccountFlowError(error: unknown, t: Translate): string {
+  switch (errorCode(error)) {
+    case EMAIL_VERIFICATION_ERROR_CODES.codeInvalid:
+      return t('emailCode.errors.codeInvalid');
+    case EMAIL_VERIFICATION_ERROR_CODES.tooManyAttempts:
+      return t('emailCode.errors.tooManyAttempts');
+    case EMAIL_VERIFICATION_ERROR_CODES.ticketInvalid:
+    case EMAIL_VERIFICATION_ERROR_CODES.ticketRequired:
+      return t('emailCode.errors.expired');
+    case EMAIL_VERIFICATION_ERROR_CODES.unavailable:
+      return t('emailCode.errors.unavailable');
+    default:
+      if (isRateLimited(error)) return t('emailCode.errors.rateLimited');
+      return describePasskeyError(error, t);
+  }
+}
+
+/** Whether the confirmation this flow holds is gone and it must start again. */
+export function isTicketExpired(error: unknown): boolean {
+  const code = errorCode(error);
+  return code === EMAIL_VERIFICATION_ERROR_CODES.ticketInvalid || code === EMAIL_VERIFICATION_ERROR_CODES.ticketRequired;
+}
+
+/** One labelled input, the way the sign-in screen draws its username. */
+export const AccountFlowField: React.FC<{
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit: () => void;
+  error: string | null;
+  disabled?: boolean;
+  placeholder?: string;
+  autoComplete?: 'username' | 'email' | 'one-time-code' | 'off';
+  keyboardType?: 'default' | 'email-address' | 'number-pad';
+  maxLength?: number;
+  testID: string;
+}> = ({ label, value, onChange, onSubmit, error, disabled, placeholder, autoComplete, keyboardType, maxLength, testID }) => (
+  <View style={styles.field}>
+    <TextFieldLabel>{label}</TextFieldLabel>
+    <TextField invalid={error !== null} disabled={disabled} radius={999} style={styles.input}>
+      <TextFieldInput
+        testID={testID}
+        label={label}
+        value={value}
+        onValueChange={onChange}
+        placeholder={placeholder}
+        autoComplete={autoComplete}
+        keyboardType={keyboardType}
+        maxLength={maxLength}
+        autoCapitalize="none"
+        autoCorrect={false}
+        autoFocus
+        returnKeyType="go"
+        onSubmitEditing={onSubmit}
+        aria-required
+      />
+    </TextField>
+    {error ? <TextFieldHint invalid>{error}</TextFieldHint> : null}
+  </View>
+);
+
+/** The screen's one primary action. */
+export const AccountFlowAction: React.FC<{
+  label: string;
+  onPress: () => void;
+  pending: boolean;
+  disabled?: boolean;
+  testID: string;
+}> = ({ label, onPress, pending, disabled, testID }) => (
+  <Button appearance="solid" tone="action" size="lg" fullWidth loading={pending} disabled={pending || disabled} onPress={onPress} testID={testID}>
+    {label}
+  </Button>
+);
+
+/** A line of body copy under the header. */
+export const AccountFlowNote: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const theme = useTheme();
+  return <Text style={[styles.note, { color: theme.colors.textSecondary }]}>{children}</Text>;
+};
+
+/** Why a step failed, where it happened. */
+export const AccountFlowErrorLine: React.FC<{ message: string }> = ({ message }) => {
+  const theme = useTheme();
+  return (
+    <Text accessibilityRole="alert" style={[styles.note, { color: theme.colors.error }]}>
+      {message}
+    </Text>
+  );
+};
+
+export interface EmailCodeStepProps {
+  /** What was sent, and where (or, for a recovery, where it may have gone). */
+  description: string;
+  verificationId: string;
+  onConfirmed: (confirmed: EmailVerificationConfirmResponse) => void;
+  /** Send a new code; resolves once it is on its way. */
+  onResend: () => Promise<void>;
+  /** "Use another email" / "Back" — the step before. */
+  back: { label: string; onPress: () => void };
+}
+
+/** "Check your email": the 6-digit code a verification sent. */
+export const EmailCodeStep: React.FC<EmailCodeStepProps> = ({ description, verificationId, onConfirmed, onResend, back }) => {
+  const theme = useTheme();
+  const { t } = useI18n();
+  const { oxyServices } = useOxy();
+  const [code, setCode] = useState('');
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [notice, setNotice] = useState<string | null>(null);
+
+  const confirm = () => {
+    const digits = code.replace(/\D/g, '');
+    if (digits.length !== EMAIL_CODE_LENGTH || pending) {
+      setError(t('emailCode.errors.codeInvalid'));
+      return;
+    }
+    setError(null);
+    setPending(true);
+    oxyServices
+      .confirmEmailVerification(verificationId, digits)
+      .then(onConfirmed)
+      .catch((reason: unknown) => setError(describeAccountFlowError(reason, t)))
+      .finally(() => setPending(false));
+  };
+
+  const resend = () => {
+    setError(null);
+    setNotice(null);
+    setCode('');
+    onResend()
+      .then(() => setNotice(t('emailCode.resent')))
+      .catch((reason: unknown) => setError(describeAccountFlowError(reason, t)));
+  };
+
+  return (
+    <OxyAuthScreen>
+      <OxyAuthScreenHeader title={t('emailCode.title')} description={description} />
+      <AccountFlowField
+        label={t('emailCode.label')}
+        value={code}
+        onChange={(value) => {
+          setCode(value);
+          if (error) setError(null);
+        }}
+        onSubmit={confirm}
+        error={error}
+        disabled={pending}
+        placeholder="000000"
+        autoComplete="one-time-code"
+        keyboardType="number-pad"
+        maxLength={EMAIL_CODE_LENGTH}
+        testID="email-code"
+      />
+      {notice ? <Text style={[styles.note, { color: theme.colors.textSecondary }]}>{notice}</Text> : null}
+      <AccountFlowAction label={t('signin.actions.continue')} onPress={confirm} pending={pending} testID="email-code-continue" />
+      <SubtleLink label={t('emailCode.resend')} theme={theme} onPress={resend} disabled={pending} testID="email-code-resend" />
+      <SubtleLink label={back.label} theme={theme} onPress={back.onPress} disabled={pending} testID="email-code-back" />
+    </OxyAuthScreen>
+  );
+};
+
+const styles = StyleSheet.create({
+  field: {
+    gap: 6,
+  },
+  input: {
+    height: 40,
+  },
+  note: {
+    fontSize: 16,
+    lineHeight: 24,
+  },
+});

package/src/ui/components/signIn/signInMethods.ts

@@ -1,34 +1,38 @@
 /**
  * Which sign-in methods a surface offers, from where it runs.
  *
- * One screen everywhere; only the transport behind each block changes:
+ * One screen everywhere, and sign-in happens IN it (ADR 0029 D1):
  *
- *  - auth.oxy.so (`page`) is where the web signs in: the embedded Commons QR
- *    (the split card's right column from `md`, "Continue with Oxy" below it),
- *    the username with its Continue, and the passkey — asserted right here,
- *    on the one origin every Oxy passkey belongs to;
- *  - an app's account dialog on the web (`dialog`) opens that screen in a
- *    window over the app ("Continue with Oxy"), like "Sign in with Google":
- *    the browser's session lives on auth.oxy.so, so every Oxy app shares it;
- *  - native signs in with Commons: "Continue with Oxy", or "Get Commons" on a
- *    device that has no Commons to continue with.
+ *  - the COMMONS way in — on the web the embedded QR (the split card's right
+ *    column from `md`, with "Continue with Oxy" below `md`, where the screen
+ *    is the phone that would scan it); on native "Continue with Oxy", and
+ *    "Get Commons" on a device that has no Commons to continue with;
+ *  - the PASSKEY — it belongs to `oxy.so`, so it runs right here on auth.oxy.so
+ *    (`page`: the username with its Continue, and the discoverable passkey), and
+ *    in an app's dialog on the web it opens auth.oxy.so's window for that one
+ *    step (with account creation); native has none, Commons holds the identity.
  */
 
 import type { CommonsAvailability } from '@oxy.so/core';
 
 /**
- * `qr`          — auth.oxy.so: the embedded QR from `md`, "Continue with Oxy" below.
- * `window`      — an app on the web: "Continue with Oxy" opens auth.oxy.so's window.
+ * `qr`          — the web: the embedded QR from `md`, "Continue with Oxy" below.
  * `continue`    — native "Continue with Oxy": Oxy picks the route (shared
  *                 keychain, Commons on this device, a push, or the QR view).
  * `get-commons` — native, and Commons is not installed here.
  */
-export type CommonsEntry = 'qr' | 'window' | 'continue' | 'get-commons';
+export type CommonsEntry = 'qr' | 'continue' | 'get-commons';
+
+/**
+ * `here`   — auth.oxy.so: the username and the passkey run on this page.
+ * `window` — an app's dialog on the web: the passkey opens auth.oxy.so's window.
+ * `none`   — native.
+ */
+export type PasskeyEntry = 'here' | 'window' | 'none';
 
 export interface SignInMethods {
   commons: CommonsEntry;
-  /** The username and passkey block: only on auth.oxy.so. */
-  passkey: boolean;
+  passkey: PasskeyEntry;
 }
 
 export interface SignInSurfaceFacts {
@@ -42,10 +46,10 @@ export interface SignInSurfaceFacts {
 
 export function resolveSignInMethods(facts: SignInSurfaceFacts): SignInMethods {
   if (facts.web) {
-    return facts.host === 'page' ? { commons: 'qr', passkey: true } : { commons: 'window', passkey: false };
+    return { commons: 'qr', passkey: facts.host === 'page' ? 'here' : 'window' };
   }
   return {
     commons: facts.commonsAvailability === 'unavailable' ? 'get-commons' : 'continue',
-    passkey: false,
+    passkey: 'none',
   };
 }

package/src/ui/context/OxyContext.tsx

@@ -10,6 +10,7 @@ import {
 } from 'react';
 import { Linking, Platform } from 'react-native';
 import { DeviceManager, OxyServices, oxyClient, type OxyAuthScreen } from '@oxy.so/core';
+import type { LoginSessionResult } from '@oxy.so/contracts';
 import type {
   User,
   SessionLoginResponse,
@@ -720,7 +721,7 @@ export const OxyRuntimeProvider: React.FC<OxyRuntimeProviderProps> = ({
   // Public `handleWebSession`: commit a session from the QR device flow. It is a
   // deliberate sign-in on THIS device, so it activates the account.
   const handleWebSession = useCallback(
-    async (session: SessionLoginResponse): Promise<void> => {
+    async (session: SessionLoginResponse | LoginSessionResult): Promise<void> => {
       if (!session?.user || !session?.sessionId || !session.accessToken) {
         throw new Error('Session response did not include a usable session');
       }
@@ -784,10 +785,10 @@ export const OxyRuntimeProvider: React.FC<OxyRuntimeProviderProps> = ({
     [webAuthMode, oxyServices, clientId, authorizeBaseUrl, isIdentityBound, user?.id],
   );
 
-  // On the web an Oxy app signs in and creates accounts in auth.oxy.so's
-  // window over the app, like "Sign in with Google": the passkey belongs to
-  // that origin, and the browser's session lives there, shared by every Oxy
-  // app. A blocked window falls back to the same page in this tab.
+  // What only auth.oxy.so can do for an Oxy app on the web — assert the
+  // `oxy.so` passkey, create or recover a passkey account — runs in its window
+  // over the app, for that one step. A blocked window falls back to the same
+  // page in this tab.
   const continueOnAuth = useCallback(
     (screen: OxyAuthScreen): Promise<WebOAuthSignInResult> =>
       startWebOAuthSignInForContext({

package/src/ui/context/__tests__/passkeyFlow.test.ts

@@ -12,7 +12,8 @@
 import type { LoginSessionResult } from '@oxy.so/contracts';
 import {
   runPasskeyLogin,
-    runPasskeyAdd,
+  runPasskeyAdd,
+  runPasskeyRegisterSignIn,
   PASSKEY_UNSUPPORTED_MESSAGE,
   type RunPasskeyLoginDeps,
   type RunPasskeyAddDeps,
@@ -179,3 +180,60 @@ describe('runPasskeyAdd', () => {
     expect(deps.onLinked).not.toHaveBeenCalled();
   });
 });
+
+describe('runPasskeyRegisterSignIn', () => {
+  it('runs options → ceremony → verify → commit, and commits the session it minted', async () => {
+    const order: string[] = [];
+    const commit = jest.fn(async (result: LoginSessionResult) => {
+      order.push('commit');
+      expect(result).toBe(sessionResult);
+    });
+    await runPasskeyRegisterSignIn({
+      isSupported: () => true,
+      getRegisterOptions: async () => {
+        order.push('register-options');
+        return { challenge: 'c' };
+      },
+      runCeremony: async (options) => {
+        order.push('ceremony');
+        expect(options).toEqual({ challenge: 'c' });
+        return { id: 'cred' };
+      },
+      registerVerify: async (response) => {
+        order.push('verify');
+        expect(response).toEqual({ id: 'cred' });
+        return sessionResult;
+      },
+      commit,
+    });
+    expect(order).toEqual(['register-options', 'ceremony', 'verify', 'commit']);
+  });
+
+  it('refuses a verify that linked instead of signing in', async () => {
+    const commit = jest.fn();
+    await expect(
+      runPasskeyRegisterSignIn({
+        isSupported: () => true,
+        getRegisterOptions: async () => ({}),
+        runCeremony: async () => ({}),
+        registerVerify: async () => linkResult,
+        commit,
+      }),
+    ).rejects.toThrow('without signing in');
+    expect(commit).not.toHaveBeenCalled();
+  });
+
+  it('fails before any ceremony where passkeys are unsupported', async () => {
+    const getRegisterOptions = jest.fn();
+    await expect(
+      runPasskeyRegisterSignIn({
+        isSupported: () => false,
+        getRegisterOptions,
+        runCeremony: jest.fn(),
+        registerVerify: jest.fn(),
+        commit: jest.fn(),
+      }),
+    ).rejects.toThrow(PASSKEY_UNSUPPORTED_MESSAGE);
+    expect(getRegisterOptions).not.toHaveBeenCalled();
+  });
+});

package/src/ui/context/oxyContextTypes.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { LoginSessionResult } from '@oxy.so/contracts';
 import type { OxyServices, User, SessionLoginResponse, AccountNode, CreateAccountInput, ClientSession, AccountDialogController, AccountDialogView, ApiError, SessionClient, SessionMode, OxyAuthScreen } from '@oxy.so/core';
 import type { UseFollowHook } from '../hooks/useFollow.types';
 import type { useLanguageManagement } from '../hooks/useLanguageManagement';
@@ -104,7 +105,12 @@ export interface OxyContextState {
   removePasskey: (credentialId: string) => Promise<void>;
 
   revokeSuspiciousSignIn: () => Promise<void>;
-  handleWebSession: (session: SessionLoginResponse) => Promise<void>;
+  /**
+   * Commit a session a first-party sign-in minted on THIS origin — an OAuth
+   * code exchange, or a passkey registration on auth.oxy.so (sign-up,
+   * recovery) — as the active one.
+   */
+  handleWebSession: (session: SessionLoginResponse | LoginSessionResult) => Promise<void>;
 
   /**
    * Run a WEB third-party OAuth sign-in (authorization code + PKCE) end to end
@@ -125,10 +131,10 @@ export interface OxyContextState {
   startWebOAuthSignIn: (options: StartWebOAuthSignInOptions) => Promise<WebOAuthSignInResult>;
 
   /**
-   * Sign in (`signin`), create an account (`signup`) or recover one
-   * (`recover`) in auth.oxy.so's window over the app, where the browser's
-   * shared Oxy session lives. Web only; call it from the press, so the window
-   * opens with the gesture.
+   * The passkey sign-in (`signin`), account creation (`signup`) or recovery
+   * (`recover`) in auth.oxy.so's window over the app — the one step the
+   * account dialog cannot run itself, since the passkey belongs to `oxy.so`.
+   * Web only; call it from the press, so the window opens with the gesture.
    */
   continueOnAuth: (screen: OxyAuthScreen) => Promise<WebOAuthSignInResult>;
 

package/src/ui/context/passkeyFlow.ts

@@ -115,3 +115,31 @@ export async function runPasskeyAdd(deps: RunPasskeyAddDeps): Promise<void> {
   }
   deps.onLinked();
 }
+
+/** Injected dependencies for {@link runPasskeyRegisterSignIn}. */
+export interface RunPasskeyRegisterSignInDeps {
+  isSupported: () => boolean;
+  getRegisterOptions: () => Promise<unknown>;
+  runCeremony: (optionsJSON: unknown) => Promise<unknown>;
+  registerVerify: (response: unknown) => Promise<PasskeyRegisterVerifyResult>;
+  commit: (result: LoginSessionResult) => Promise<void>;
+}
+
+/**
+ * Register a passkey SIGNED OUT and sign in with the account it belongs to —
+ * a new passkey account (username + confirmed recovery email), or a recovery's
+ * new passkey (ADR 0029 D3). Options, ceremony, verify, then commit; the verify
+ * must mint a session, since there is no bearer to link to.
+ */
+export async function runPasskeyRegisterSignIn(deps: RunPasskeyRegisterSignInDeps): Promise<void> {
+  if (!deps.isSupported()) {
+    throw new Error(PASSKEY_UNSUPPORTED_MESSAGE);
+  }
+  const options = await deps.getRegisterOptions();
+  const response = await deps.runCeremony(options);
+  const result = await deps.registerVerify(response);
+  if (!('sessionId' in result)) {
+    throw new Error('The passkey was registered without signing in.');
+  }
+  await deps.commit(result);
+}

package/src/ui/hooks/useSurfaceFrameWidth.ts

@@ -0,0 +1,21 @@
+import { createContext, useContext, useLayoutEffect } from 'react';
+
+/**
+ * A screen's say in how wide its surface is.
+ *
+ * `SurfaceScreen` is the ONE host that declares the surface's dialog frame, so
+ * a screen whose views need different widths (the account dialog: the 420 menu,
+ * the sign-in's 880 split card) hands its width to that host rather than
+ * declaring a second frame. A change morphs the centered card to it.
+ */
+export const SurfaceFrameWidthContext = createContext<((maxWidth: number | null) => void) | null>(null);
+
+/** Ask the surface for `maxWidth` (px) while this is mounted; `null` keeps the surface's own. */
+export function useSurfaceFrameWidth(maxWidth: number | null): void {
+  const setWidth = useContext(SurfaceFrameWidthContext);
+  useLayoutEffect(() => {
+    if (!setWidth) return;
+    setWidth(maxWidth);
+    return () => setWidth(null);
+  }, [setWidth, maxWidth]);
+}

package/src/ui/screens/EditProfileFieldScreen.tsx

@@ -30,7 +30,7 @@ import { SurfaceHeaderAction } from '../components/SurfaceHeaderAction';
 import { useOxy } from '../context/OxyContext';
 import { useProfileEditing } from '../hooks/useProfileEditing';
 import { toast } from '@oxy.so/bloom/toast';
-import { EMAIL_REGEX, DISPLAY_NAME_INVALID_MESSAGE, isValidDisplayName } from '@oxy.so/core';
+import { DISPLAY_NAME_INVALID_MESSAGE, isValidDisplayName } from '@oxy.so/core';
 import { getLinkTitle, getLinkDescription, linksToListItems } from './linkFormat';
 
 /**
@@ -39,7 +39,6 @@ import { getLinkTitle, getLinkDescription, linksToListItems } from './linkFormat
 export type ProfileFieldType =
     | 'displayName'
     | 'username'
-    | 'email'
     | 'bio'
     | 'phone'
     | 'address'
@@ -214,7 +213,6 @@ function buildInitialProfileState(
             fieldValues.address = String(userData.address || '');
             break;
         case 'username':
-        case 'email':
         case 'bio':
         case 'phone':
             fieldValues[fieldType] = String(userData[fieldType] || '');
@@ -318,30 +316,6 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
                         },
                     ],
                 };
-            case 'email':
-                return {
-                    title: t('editProfile.items.email.title') || 'Email',
-                    subtitle: t('editProfile.items.email.subtitle') || 'Your primary email address',
-                    fields: [
-                        {
-                            key: 'email',
-                            label: t('editProfile.items.email.label') || 'Email Address',
-                            placeholder: t('editProfile.items.email.placeholder') || 'Enter your email address',
-                            type: 'email',
-                            validation: (value) => {
-                                if (!EMAIL_REGEX.test(value)) {
-                                    return t('editProfile.items.email.invalid') || 'Please enter a valid email address';
-                                }
-                                return undefined;
-                            },
-                            inputProps: {
-                                keyboardType: 'email-address',
-                                autoCapitalize: 'none',
-                                autoCorrect: false,
-                            },
-                        },
-                    ],
-                };
             case 'bio':
                 return {
                     title: t('editProfile.items.bio.title') || 'Bio',

package/src/ui/screens/EditProfileScreen.tsx

@@ -89,12 +89,6 @@ const EditProfileScreen: React.FC<BaseScreenProps> = ({ navigate }) => {
                         description={user?.username ? `@${user.username}` : notSet}
                         onPress={() => goToField('username')}
                     />
-                    <SettingsListItem
-                        icon={<SettingsIcon name="email" color={bloomTheme.colors.success} />}
-                        title={t('editProfile.items.email.title') || 'Email'}
-                        description={user?.email || notSet}
-                        onPress={() => goToField('email')}
-                    />
                     <SettingsListItem
                         icon={<SettingsIcon name="phone" color={bloomTheme.colors.warning} />}
                         title={t('editProfile.items.phone.title') || 'Phone Number'}

package/src/ui/screens/ManageAccountScreen.tsx

@@ -323,10 +323,10 @@ const ManageAccountScreen: React.FC<BaseScreenProps> = ({
             );
             return;
         }
-        // Web: deleting an account is signed with its identity key, which only
-        // auth.oxy.so can unseal — the deletion happens there, never on this page.
+        // Web: a passkey account confirms its deletion with its passkey, which
+        // only auth.oxy.so asserts — the deletion happens there, never on this page.
         if (isWebBrowser()) {
-            await Linking.openURL(`${AUTH_WEB_ORIGIN}/identity`).catch(() => {
+            await Linking.openURL(`${AUTH_WEB_ORIGIN}/delete-account`).catch(() => {
                 toast.error(t('accountSwitcher.linkOpenFailed'));
             });
             return;

package/src/ui/utils/accountDeletionHandoff.ts

@@ -100,12 +100,12 @@ export async function runAccountDeletionHandoff(
     return 'handled';
   }
 
-  const site = `${AUTH_WEB_ORIGIN.replace(/^https?:\/\//, '')}/identity`;
+  const site = `${AUTH_WEB_ORIGIN.replace(/^https?:\/\//, '')}/delete-account`;
   await surfaces.confirm({
     title: text('deleteAccount.handoff.elsewhereTitle', 'Delete your account where your identity is'),
     description: text(
       'deleteAccount.handoff.elsewhereMessage',
-      `Deleting your account needs your identity key, and it isn't on this device. Open Oxy Commons on the device that holds your identity and go to Settings > Delete account, or open ${site} in a browser that holds it.`,
+      `Deleting your account needs your identity key, and it isn't on this device. Open Oxy Commons on the device that holds it and go to Settings > Delete account. An account that uses a passkey is deleted at ${site}.`,
       { site },
     ),
     confirmLabel: text('deleteAccount.handoff.gotIt', 'Got it'),