@oxy.so/services 4.0.7 → 6.1.0

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

@@ -0,0 +1,106 @@
+/**
+ * Deleting a passkey account (ADR 0029 D3), auth.oxy.so's `/delete-account`.
+ *
+ * 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.
+ */
+
+import type React from 'react';
+import { useState } from 'react';
+import { useOxy } from '../../context/OxyContext';
+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';
+
+export interface OxyDeleteAccountPanelProps {
+  /** The account is gone and this origin signed out of it. */
+  onDeleted?: () => void;
+}
+
+export const OxyDeleteAccountPanel: React.FC<OxyDeleteAccountPanelProps> = ({ onDeleted }) => {
+  const { t } = useI18n();
+  const { user, oxyServices, logout } = useOxy();
+  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')} />
+      </OxyAuthScreen>
+    );
+  }
+
+  const username = user?.username ?? '';
+  if (user?.publicKey) {
+    return (
+      <OxyAuthScreen>
+        <OxyAuthScreenHeader title={t('deleteAccount.handoff.commonsTitle')} description={t('deleteAccount.passkey.commons')} />
+      </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));
+  };
+
+  return (
+    <OxyAuthScreen>
+      <OxyAuthScreenHeader title={t('deleteAccount.title')} description={t('deleteAccount.passkey.subtitle', { username })} />
+      <AccountFlowNote>{t('deleteAccount.warning')}</AccountFlowNote>
+      <AccountFlowField
+        label={t('deleteAccount.confirmLabel', { username })}
+        value={confirmText}
+        onChange={(value) => {
+          setConfirmText(value);
+          if (error) setError(null);
+        }}
+        onSubmit={remove}
+        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>
+  );
+};

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

@@ -0,0 +1,222 @@
+/**
+ * Linking Commons to a passkey account (ADR 0029 D3), auth.oxy.so's
+ * `/link-commons`:
+ *
+ *   QR → Commons scans and signs with its key → both screens show the same
+ *   code → the person confirms here with the passkey → 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.
+ */
+
+import type React from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { ActivityIndicator, 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 { Text } from '@oxy.so/bloom/typography';
+import { deriveIdentityLinkCode } from '@oxy.so/core';
+import type { IdentityLinkCreateResponse } from '@oxy.so/contracts';
+import { useOxy } from '../../context/OxyContext';
+import { PASSKEY_UNSUPPORTED_MESSAGE } from '../../context/passkeyFlow';
+import { useI18n } from '../../hooks/useI18n';
+import { isPasskeySupported, runAuthenticationCeremony } from '../../../webauthn/passkeyClient';
+import { OxyAuthScreen, OxyAuthScreenHeader } from './OxyAuthScreen';
+import { AccountFlowAction, AccountFlowErrorLine, AccountFlowNote, describeAccountFlowError } from './accountFlowParts';
+
+/** How often the page asks whether Commons has signed. */
+export const IDENTITY_LINK_POLL_MS = 2000;
+
+/** High-contrast, un-themed on purpose: scan reliability. */
+const QR_PLATE_BG = '#FFFFFF';
+const QR_FOREGROUND = '#000000';
+const QR_SIZE = 200;
+
+type Step =
+  | { name: 'opening' }
+  | { name: 'qr'; link: IdentityLinkCreateResponse }
+  | { name: 'matching'; link: IdentityLinkCreateResponse; code: string }
+  | { name: 'expired' }
+  | { name: 'done' };
+
+export interface OxyLinkCommonsPanelProps {
+  /** Commons is linked. */
+  onLinked?: () => void;
+}
+
+export const OxyLinkCommonsPanel: React.FC<OxyLinkCommonsPanelProps> = ({ onLinked }) => {
+  const theme = useTheme();
+  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 open = useCallback(() => {
+    setError(null);
+    setStep({ name: 'opening' });
+    oxyServices
+      .createIdentityLink()
+      .then((link) => setStep({ name: 'qr', link }))
+      .catch((reason: unknown) => {
+        setError(describeAccountFlowError(reason, t));
+        setStep({ name: 'expired' });
+      });
+  }, [oxyServices, t]);
+
+  // One request per visit, opened once the page knows the account has no root.
+  const opened = useRef(false);
+  useEffect(() => {
+    if (alreadyLinked || opened.current) return;
+    opened.current = true;
+    open();
+  }, [alreadyLinked, 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.
+  const link = step.name === 'qr' ? step.link : null;
+  useEffect(() => {
+    if (!link) return;
+    let stopped = false;
+    const poll = async () => {
+      if (stopped) return;
+      if (Date.now() >= link.expiresAt) {
+        setStep({ name: 'expired' });
+        return;
+      }
+      try {
+        const state = await oxyServices.getIdentityLink(link.linkId);
+        if (stopped) return;
+        if (state.status === 'signed' && state.publicKey) {
+          setStep({ name: 'matching', link, code: deriveIdentityLinkCode(link.linkId, state.publicKey) });
+          return;
+        }
+        if (state.status === 'cancelled') {
+          setStep({ name: 'expired' });
+          return;
+        }
+      } catch {
+        // A missed poll is retried on the next tick.
+      }
+      if (!stopped) timer = setTimeout(() => void poll(), IDENTITY_LINK_POLL_MS);
+    };
+    let timer = setTimeout(() => void poll(), IDENTITY_LINK_POLL_MS);
+    return () => {
+      stopped = true;
+      clearTimeout(timer);
+    };
+  }, [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);
+    setStep({ name: 'expired' });
+  };
+
+  if (alreadyLinked) {
+    return (
+      <OxyAuthScreen>
+        <OxyAuthScreenHeader title={t('linkCommons.title')} description={t('linkCommons.already')} />
+      </OxyAuthScreen>
+    );
+  }
+
+  switch (step.name) {
+    case 'done':
+      return (
+        <OxyAuthScreen>
+          <OxyAuthScreenHeader title={t('linkCommons.doneTitle')} description={t('linkCommons.done')} />
+        </OxyAuthScreen>
+      );
+    case 'expired':
+      return (
+        <OxyAuthScreen>
+          <OxyAuthScreenHeader title={t('linkCommons.title')} description={t('linkCommons.expired')} />
+          {error ? <AccountFlowErrorLine message={error} /> : null}
+          <AccountFlowAction label={t('linkCommons.renew')} onPress={open} pending={false} testID="link-commons-renew" />
+        </OxyAuthScreen>
+      );
+    case 'matching':
+      return (
+        <OxyAuthScreen>
+          <OxyAuthScreenHeader title={t('linkCommons.compareTitle')} description={t('linkCommons.compare')} />
+          <Text
+            accessibilityLabel={step.code.split('').join(' ')}
+            style={[styles.code, { color: theme.colors.text }]}
+            testID="link-commons-code"
+          >
+            {`${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">
+            {t('linkCommons.cancel')}
+          </Button>
+        </OxyAuthScreen>
+      );
+    case 'qr':
+      return (
+        <OxyAuthScreen>
+          <OxyAuthScreenHeader title={t('linkCommons.title')} description={t('linkCommons.subtitle')} />
+          <View style={styles.plateRow}>
+            <View style={[styles.plate, { borderColor: theme.colors.border }]} testID="link-commons-qr">
+              <QRCode value={step.link.qrPayload} size={QR_SIZE} backgroundColor={QR_PLATE_BG} color={QR_FOREGROUND} />
+            </View>
+          </View>
+          <AccountFlowNote>{t('linkCommons.scan')}</AccountFlowNote>
+          <AccountFlowNote>{t('linkCommons.waiting')}</AccountFlowNote>
+          <Button appearance="plain" tone="neutral" size="lg" fullWidth onPress={() => cancel(step.link)} testID="link-commons-cancel">
+            {t('linkCommons.cancel')}
+          </Button>
+        </OxyAuthScreen>
+      );
+    default:
+      return (
+        <OxyAuthScreen>
+          <OxyAuthScreenHeader title={t('linkCommons.title')} description={t('linkCommons.subtitle')} />
+          <View style={styles.plateRow}>
+            <ActivityIndicator size="large" color={theme.colors.primary} />
+          </View>
+        </OxyAuthScreen>
+      );
+  }
+};
+
+const styles = StyleSheet.create({
+  plateRow: {
+    alignItems: 'center',
+  },
+  plate: {
+    padding: 12,
+    borderRadius: 16,
+    borderWidth: StyleSheet.hairlineWidth,
+    backgroundColor: QR_PLATE_BG,
+  },
+  code: {
+    fontSize: 40,
+    lineHeight: 48,
+    fontWeight: '700',
+    letterSpacing: 4,
+    textAlign: 'center',
+  },
+});

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

@@ -0,0 +1,154 @@
+/**
+ * Recovering a passkey account (ADR 0029 D3), auth.oxy.so's `/recover`:
+ *
+ *   username or email → the code sent to the recovery email → new passkey → signed in
+ *
+ * The first step answers the same whether or not the account exists, so it
+ * never says who has one. An account that uses Commons has no recovery email:
+ * it recovers in Commons with its phrase, and the first step says so. The new
+ * passkey joins the ones the account has; lost ones are removed afterwards in
+ * the account's security settings.
+ */
+
+import type React from 'react';
+import { useState } from 'react';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { DeviceManager } from '@oxy.so/core';
+import { useOxy } from '../../context/OxyContext';
+import { runPasskeyRegisterSignIn } from '../../context/passkeyFlow';
+import { useI18n } from '../../hooks/useI18n';
+import { isPasskeySupported, runRegistrationCeremony } from '../../../webauthn/passkeyClient';
+import { SubtleLink } from '../authChooser/primitives';
+import { OxyAuthScreen, OxyAuthScreenHeader, OxyAuthTerms } from './OxyAuthScreen';
+import {
+  AccountFlowAction,
+  AccountFlowErrorLine,
+  AccountFlowField,
+  AccountFlowNote,
+  EmailCodeStep,
+  describeAccountFlowError,
+  isTicketExpired,
+} from './accountFlowParts';
+
+type Step =
+  | { name: 'entry' }
+  | { name: 'code'; verificationId: string }
+  | { name: 'passkey'; recoveryTicket: string; username: string | null };
+
+export interface OxyRecoverAccountPanelProps {
+  /** The account has a new passkey and this origin is signed in as it. */
+  onRecovered: () => void;
+  /** "Back to sign in". */
+  onSignIn: () => void;
+}
+
+export const OxyRecoverAccountPanel: React.FC<OxyRecoverAccountPanelProps> = ({ onRecovered, onSignIn }) => {
+  const theme = useTheme();
+  const { t } = useI18n();
+  const { oxyServices, handleWebSession } = useOxy();
+  const [step, setStep] = useState<Step>({ name: 'entry' });
+  const [identifier, setIdentifier] = useState('');
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const run = (work: () => Promise<void>) => {
+    if (pending) return;
+    setError(null);
+    setPending(true);
+    work()
+      .catch((reason: unknown) => {
+        if (isTicketExpired(reason)) setStep({ name: 'entry' });
+        setError(describeAccountFlowError(reason, t));
+      })
+      .finally(() => setPending(false));
+  };
+
+  const sendCode = async () => {
+    const { verificationId } = await oxyServices.startEmailVerification({ purpose: 'recovery', identifier: identifier.trim() });
+    setStep({ name: 'code', verificationId });
+  };
+
+  const submitIdentifier = () => {
+    if (!identifier.trim()) {
+      setError(t('recover.identifier.required'));
+      return;
+    }
+    run(sendCode);
+  };
+
+  // The ceremony opens the browser's passkey prompt, so it starts from the press.
+  const addPasskey = (recoveryTicket: string) =>
+    run(() =>
+      runPasskeyRegisterSignIn({
+        isSupported: isPasskeySupported,
+        getRegisterOptions: () => oxyServices.webauthnRegisterOptions({ recoveryTicket }),
+        runCeremony: runRegistrationCeremony,
+        registerVerify: (response) =>
+          oxyServices.webauthnRegisterVerify(response, {
+            recoveryTicket,
+            deviceFingerprint: JSON.stringify(DeviceManager.getDeviceFingerprint()),
+          }),
+        commit: async (session) => {
+          await handleWebSession(session);
+          onRecovered();
+        },
+      }),
+    );
+
+  switch (step.name) {
+    case 'code':
+      return (
+        <EmailCodeStep
+          description={t('emailCode.sentIfAccount')}
+          verificationId={step.verificationId}
+          onConfirmed={({ ticket, username }) => {
+            setError(null);
+            setStep({ name: 'passkey', recoveryTicket: ticket, username });
+          }}
+          onResend={sendCode}
+          back={{ label: t('signin.actions.back'), onPress: () => setStep({ name: 'entry' }) }}
+        />
+      );
+    case 'passkey':
+      return (
+        <OxyAuthScreen>
+          <OxyAuthScreenHeader
+            title={t('recover.passkey.title')}
+            description={t('recover.passkey.subtitle', { username: step.username ?? '' })}
+          />
+          {error ? <AccountFlowErrorLine message={error} /> : null}
+          <AccountFlowAction
+            label={t('recover.passkey.action')}
+            onPress={() => addPasskey(step.recoveryTicket)}
+            pending={pending}
+            testID="recover-create-passkey"
+          />
+          <OxyAuthTerms />
+        </OxyAuthScreen>
+      );
+    default:
+      return (
+        <OxyAuthScreen>
+          <OxyAuthScreenHeader title={t('recover.title')} description={t('recover.subtitle')} />
+          <AccountFlowField
+            label={t('recover.identifier.label')}
+            value={identifier}
+            onChange={(value) => {
+              setIdentifier(value);
+              if (error) setError(null);
+            }}
+            onSubmit={submitIdentifier}
+            error={error}
+            disabled={pending}
+            placeholder={t('recover.identifier.placeholder')}
+            autoComplete="username"
+            testID="recover-identifier"
+          />
+          <AccountFlowNote>{t('recover.commonsNote')}</AccountFlowNote>
+          <AccountFlowAction label={t('signin.actions.continue')} onPress={submitIdentifier} pending={pending} testID="recover-continue" />
+          <SubtleLink label={t('recover.backToSignIn')} theme={theme} onPress={onSignIn} testID="back-to-sign-in" />
+          <OxyAuthTerms />
+        </OxyAuthScreen>
+      );
+  }
+};