@oxy.so/services 6.0.0 → 6.2.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>
+      );
+  }
+};

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

@@ -4,18 +4,18 @@
  * differs (`host`).
  *
  *   picker   a returning device: "Choose an account", then "Use another account"
- *   entry    the header, the Commons way in, and the way in for someone with no
- *            account. On auth.oxy.so (`page`) also the username with its
- *            Continue — a username-first passkey sign-in, which takes a
- *            platform passkey AND a hardware security key with no resident
- *            credential (a U2F key such as a Titan) — and "or continue with" the
- *            discoverable passkey. From `md` that page is Bloom `AuthCard`'s
- *            split card, with the embedded QR over its photo carousel in the
- *            right column; below `md` it is "Continue with Oxy" at the top.
- *            In an app's dialog on the web, "Continue with Oxy" opens that page
- *            in a window over the app, like "Sign in with Google": the browser's
- *            session lives on auth.oxy.so, so every Oxy app shares it. On
- *            native it is "Continue with Oxy" ("Get Commons" without Commons).
+ *   entry    the header, the Commons way in, the passkey, and the way in for
+ *            someone with no account. On the web, from `md`, the screen is
+ *            Bloom `AuthCard`'s split card and the Commons way in is the
+ *            embedded QR over its photo carousel, in the right column (the
+ *            account dialog grows to that card); below `md` it is "Continue
+ *            with Oxy" at the top. The passkey belongs to `oxy.so`: on
+ *            auth.oxy.so (`page`) it runs here — the username with its Continue,
+ *            a username-first ceremony that takes a hardware security key with
+ *            no resident credential too, and the discoverable passkey — and in
+ *            an app's dialog it opens auth.oxy.so's window for that one step, as
+ *            does "Create account". On native it is "Continue with Oxy" ("Get
+ *            Commons" without Commons).
  *
  * `signInMethods.ts` owns which blocks a platform gets.
  */
@@ -39,6 +39,7 @@ import { useOxy } from '../../context/OxyContext';
 import { useAccountDialogSnapshot } from '../../hooks/accountDialogSnapshot';
 import { useDeviceSwitcher } from '../../hooks/useDeviceSwitcher';
 import { useI18n } from '../../hooks/useI18n';
+import { useSurfaceFrameWidth } from '../../hooks/useSurfaceFrameWidth';
 import { getCommonsAcquisitionUrl } from '../../utils/commonsStoreLinks';
 import { isWebBrowser } from '../../utils/isWebBrowser';
 import { SubtleLink } from '../authChooser/primitives';
@@ -49,6 +50,9 @@ import { OxyAuthScreen, OxyAuthScreenHeader, OxyAuthSplit, OxyAuthTerms } from '
 import { RATE_LIMIT_SECONDS, describePasskeyError, isRateLimited } from './passkeyError';
 import { resolveSignInMethods } from './signInMethods';
 
+/** Bloom `AuthCard`'s split card width, which the account dialog grows to for it. */
+const SPLIT_WIDTH = 880;
+
 export interface OxySignInPanelProps {
   /** This screen signed the origin in. */
   onSignedIn: () => void;
@@ -124,7 +128,8 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
     void controller?.signInWithOxy();
     showRequest();
   };
-  const signInOnOxy = () => {
+  // The passkey is `oxy.so`'s: in an app it runs in auth.oxy.so's window.
+  const passkeyOnOxy = () => {
     void continueOnAuth('signin').then((result) => {
       if (result.status === 'signed-in') onSignedIn();
       else if (result.status === 'failed') toast.error(t('signin.errors.failed'));
@@ -189,7 +194,7 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
         return;
       case 'failed':
         // The pair could not be activated as it stands: sign in as it explicitly.
-        if (methods.passkey && context.handle) reauthenticate(context);
+        if (methods.passkey === 'here' && context.handle) reauthenticate(context);
         else toast.error(t('accountSwitcher.toasts.activateFailed'));
         return;
       default:
@@ -198,8 +203,11 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
   };
 
   const showsPicker = pickerAllowed && !showForm && principals.length > 0;
-  // auth.oxy.so's page is the split card from `md`.
+  // The web entry is the split card from `md`. In the account dialog it grows
+  // the dialog to that card; below `md` the dialog is a bottom sheet, which a
+  // width does not touch.
   const splits = methods.commons === 'qr';
+  useSurfaceFrameWidth(host === 'dialog' && !showsPicker && splits ? SPLIT_WIDTH : null);
 
   if (showsPicker) {
     return (
@@ -241,7 +249,7 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
     </Text>
   );
   // One solid action per screen: the username's Continue when there is one.
-  const commonsAppearance = methods.passkey ? 'outline' : 'solid';
+  const commonsAppearance = methods.passkey === 'here' ? 'outline' : 'solid';
 
   const continueWithOxyButton = (
     <Button
@@ -249,13 +257,28 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
       tone={commonsAppearance === 'solid' ? 'action' : 'neutral'}
       size="lg"
       fullWidth
-      onPress={methods.commons === 'window' ? signInOnOxy : continueWithOxy}
+      onPress={continueWithOxy}
       testID="continue-with-oxy"
     >
       {t('accountSwitcher.continueWithOxy')}
     </Button>
   );
 
+  const passkeyButton = (
+    <Button
+      appearance="outline"
+      tone="neutral"
+      size="lg"
+      fullWidth
+      leadingIcon={RiKey2Line}
+      disabled={methods.passkey === 'here' && blocked}
+      onPress={methods.passkey === 'here' ? () => void runPasskey(undefined, t('signin.errors.failed')) : passkeyOnOxy}
+      testID="passkey-sign-in"
+    >
+      {t('signin.methods.passkey')}
+    </Button>
+  );
+
   const form = (
     <OxyAuthScreen className={splits ? 'md:max-w-none' : undefined}>
       <OxyAuthScreenHeader title={title} description={description} />
@@ -263,7 +286,7 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
       {/* Below `md` this screen is the phone a QR would be scanned with. */}
       {splits ? <CssView className="md:hidden">{continueWithOxyButton}</CssView> : null}
 
-      {methods.commons === 'continue' || methods.commons === 'window' ? continueWithOxyButton : null}
+      {methods.commons === 'continue' ? continueWithOxyButton : null}
       {methods.commons === 'get-commons' ? (
         <View style={styles.stack}>
           <Text style={[styles.note, { color: theme.colors.textSecondary }]}>{t('accountSwitcher.commonsNotInstalled')}</Text>
@@ -273,7 +296,7 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
         </View>
       ) : null}
 
-      {methods.passkey ? (
+      {methods.passkey === 'here' ? (
         <View style={styles.stack}>
           <View style={styles.field}>
             <TextFieldLabel nativeID="username-label">{t('signin.username.label')}</TextFieldLabel>
@@ -314,24 +337,17 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
         </View>
       ) : null}
 
-      {/* The alternatives to the screen's primary way in, always under it. The
-          window an app opens on the web is where they all are. */}
-      {methods.commons === 'window' ? null : <Divider>{t('signin.orContinueWith')}</Divider>}
+      {/* The alternatives to the screen's primary way in, always under it. In an
+          app's dialog, from `md`, the QR beside it IS the primary way in. */}
+      {methods.passkey === 'window' ? (
+        <CssView className="md:hidden">
+          <Divider>{t('signin.orContinueWith')}</Divider>
+        </CssView>
+      ) : (
+        <Divider>{t('signin.orContinueWith')}</Divider>
+      )}
 
-      {methods.passkey ? (
-        <Button
-          appearance="outline"
-          tone="neutral"
-          size="lg"
-          fullWidth
-          leadingIcon={RiKey2Line}
-          disabled={blocked}
-          onPress={() => void runPasskey(undefined, t('signin.errors.failed'))}
-          testID="passkey-sign-in"
-        >
-          {t('signin.methods.passkey')}
-        </Button>
-      ) : methods.commons === 'window' ? null : (
+      {methods.passkey === 'none' ? (
         <Button
           appearance="outline"
           tone="neutral"
@@ -343,9 +359,11 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
         >
           {t('accountSwitcher.scanQr')}
         </Button>
+      ) : (
+        passkeyButton
       )}
 
-      {methods.passkey ? null : noAccount}
+      {methods.passkey === 'here' ? null : noAccount}
       {onRecover ? (
         <SubtleLink label={t('signin.recoverLink')} theme={theme} onPress={onRecover} testID="recover-link" />
       ) : null}
@@ -356,6 +374,7 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
   if (!splits) return form;
   return (
     <OxyAuthSplit
+      bare={host === 'dialog'}
       aside={
         <>
           <AuthMediaCarousel slides={SIGN_IN_SLIDES} style={StyleSheet.absoluteFill} />