@oxy.so/services 6.1.0 → 8.0.0

package/lib/module/ui/components/signIn/OxySignInPanel.js

@@ -3,42 +3,41 @@
 /**
  * THE Oxy sign-in screen. The account dialog every Oxy app opens and the
  * auth.oxy.so page render this one component; only where it is mounted
- * differs (`host`).
+ * differs (`host`). Sign-in happens IN it, on every origin: no window opens.
  *
- *   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).
+ *   picker        a returning device: "Choose an account", then "Use another account"
+ *   identifier    the header, the Commons way in, and "Email or username" with its
+ *                 Continue. 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. On
+ *                 native it is "Continue with Oxy" ("Get Commons" without Commons).
+ *   check-email   one email carries a code and a link. The code is typed here (6
+ *                 digits, or the 10-character long code); meanwhile the screen asks
+ *                 whether the link was opened in this browser, and signs in when it was.
+ *   password      the alternative for an account that has one.
+ *   second-factor the authenticator's code, or a backup code, when the account has one.
  *
- * `signInMethods.ts` owns which blocks a platform gets.
+ * Every answer is the same whether or not the account exists: the email step
+ * says "if an account matches".
  */
 
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { Linking, Platform, Text as RNText, StyleSheet, View } from 'react-native';
 import { View as CssView } from 'react-native-css/components';
 import { AuthMediaCarousel } from '@oxy.so/bloom/auth-card';
 import { Button } from '@oxy.so/bloom/button';
 import { Divider } from '@oxy.so/bloom/divider';
-import { RiKey2Line } from '@oxy.so/bloom/icons/RiKey2Line';
-import { RiQrCodeLine } from '@oxy.so/bloom/icons/RiQrCodeLine';
 import { useTheme } from '@oxy.so/bloom/theme';
-import { TextField, TextFieldHint, TextFieldInput, TextFieldLabel } from '@oxy.so/bloom/text-field';
 import { toast } from '@oxy.so/bloom/toast';
 import { Text } from '@oxy.so/bloom/typography';
+import { EMAIL_SIGNIN_LONG_CODE_LENGTH, SIGN_IN_ERROR_CODES, TOTP_DIGITS, isSecondFactorRequired } from '@oxy.so/contracts';
 import { useQueryClient } from '@tanstack/react-query';
 import { useOxy } from "../../context/OxyContext.js";
 import { useAccountDialogSnapshot } from "../../hooks/accountDialogSnapshot.js";
 import { useDeviceSwitcher } from "../../hooks/useDeviceSwitcher.js";
 import { useI18n } from "../../hooks/useI18n.js";
+import { useSurfaceFrameWidth } from "../../hooks/useSurfaceFrameWidth.js";
 import { getCommonsAcquisitionUrl } from "../../utils/commonsStoreLinks.js";
 import { isWebBrowser } from "../../utils/isWebBrowser.js";
 import { SubtleLink } from "../authChooser/primitives.js";
@@ -46,13 +45,24 @@ import { SIGN_IN_SLIDES } from "./artwork.js";
 import { InlineCommonsQr } from "./InlineCommonsQr.js";
 import { OxyAccountPicker } from "./OxyAccountPicker.js";
 import { OxyAuthScreen, OxyAuthScreenHeader, OxyAuthSplit, OxyAuthTerms } from "./OxyAuthScreen.js";
-import { RATE_LIMIT_SECONDS, describePasskeyError, isRateLimited } from "./passkeyError.js";
+import { AccountFlowAction, AccountFlowField, AccountFlowNote, describeSignInError, errorCode, formatSignInCodeInput, isCompleteSignInCode, isRateLimited, retryAfterSeconds } from "./accountFlowParts.js";
+import { readSignInFlow, writeSignInFlow } from "./signInFlowStore.js";
 import { resolveSignInMethods } from "./signInMethods.js";
+
+/** Bloom `AuthCard`'s split card width, which the account dialog grows to for it. */
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const SPLIT_WIDTH = 880;
+/** How often the check-email step asks whether the link was opened in this browser. */
+export const EMAIL_SIGNIN_POLL_MS = 2000;
+/** How long after an email "Send a new email" waits. */
+export const EMAIL_RESEND_COOLDOWN_SECONDS = 30;
+
+/** What the dialog keeps of this screen across a remount (`signInFlowStore`). */
+
+const SIGN_IN_FLOW_KEY = 'signin';
 export const OxySignInPanel = ({
   onSignedIn,
   onCreateAccount,
-  onRecover,
   loginHint,
   appName = null,
   host = 'page'
@@ -65,8 +75,8 @@ export const OxySignInPanel = ({
   const {
     accountDialogController: controller,
     openAccountDialog,
-    signInWithPasskey,
-    continueOnAuth
+    oxyServices,
+    handleWebSession
   } = useOxy();
   const snapshot = useAccountDialogSnapshot(controller);
   const {
@@ -75,14 +85,37 @@ export const OxySignInPanel = ({
   } = useDeviceSwitcher();
   const methods = resolveSignInMethods({
     web: isWebBrowser(),
-    host,
     commonsAvailability: snapshot.commonsAvailability
   });
-  const [showForm, setShowForm] = useState(Boolean(loginHint));
-  const [identifier, setIdentifier] = useState(loginHint ?? '');
+
+  // In the dialog the step outlives a remount of this screen (the responsive
+  // surface swaps its tree at `md`): it is restored from, and saved to, the
+  // flow store the dialog's controller owns.
+  const flowOwner = host === 'dialog' ? controller : null;
+  const [saved] = useState(() => readSignInFlow(flowOwner, SIGN_IN_FLOW_KEY));
+  const [showForm, setShowForm] = useState(saved?.showForm ?? Boolean(loginHint));
+  const [step, setStep] = useState(saved?.step ?? {
+    name: 'start'
+  });
+  const [identifier, setIdentifier] = useState(saved?.identifier ?? loginHint ?? '');
+  const [code, setCode] = useState('');
+  const [password, setPassword] = useState('');
+  const [secondFactorCode, setSecondFactorCode] = useState('');
+  const [useBackupCode, setUseBackupCode] = useState(saved?.useBackupCode ?? false);
   const [pending, setPending] = useState(false);
   const [error, setError] = useState(null);
+  const [notice, setNotice] = useState(null);
   const [rateLimitSeconds, setRateLimitSeconds] = useState(0);
+  const [resendSeconds, setResendSeconds] = useState(() => saved ? Math.max(0, Math.ceil((saved.resendUntil - Date.now()) / 1000)) : 0);
+  useEffect(() => {
+    writeSignInFlow(flowOwner, SIGN_IN_FLOW_KEY, {
+      step,
+      identifier,
+      showForm,
+      useBackupCode,
+      resendUntil: Date.now() + resendSeconds * 1000
+    });
+  }, [flowOwner, step, identifier, showForm, useBackupCode, resendSeconds]);
   const blocked = pending || rateLimitSeconds > 0;
 
   // The countdown after a 429: one tick a second until the person may retry.
@@ -92,6 +125,13 @@ export const OxySignInPanel = ({
     return () => clearTimeout(timer);
   }, [rateLimitSeconds]);
 
+  // The wait before another email may be asked for.
+  useEffect(() => {
+    if (resendSeconds <= 0) return;
+    const timer = setTimeout(() => setResendSeconds(seconds => Math.max(0, seconds - 1)), 1000);
+    return () => clearTimeout(timer);
+  }, [resendSeconds]);
+
   // On a page, a request the controller runs (the embedded QR, or one shown in
   // the dialog opened over it) finishes the page's sign-in too. Only one that
   // STARTED here: a completion already on the controller is somebody else's.
@@ -105,60 +145,191 @@ export const OxySignInPanel = ({
   const showRequest = useCallback(() => {
     if (host === 'page') openAccountDialog('qr');
   }, [host, openAccountDialog]);
-
-  // These open a window or leave the page, so they run straight from the
-  // press, before any await.
   const continueWithOxy = () => {
     void controller?.signInWithOxy();
     showRequest();
   };
-  const signInOnOxy = () => {
-    void continueOnAuth('signin').then(result => {
-      if (result.status === 'signed-in') onSignedIn();else if (result.status === 'failed') toast.error(t('signin.errors.failed'));
-    });
-  };
-  const useAnotherDevice = () => {
-    void controller?.showQr();
-    showRequest();
-  };
   const getCommons = () => {
     Promise.resolve().then(() => Linking.openURL(getCommonsAcquisitionUrl(Platform.OS))).catch(() => toast.error(t('accountSwitcher.linkOpenFailed')));
   };
-  const runPasskey = async (username, failToast) => {
+  const fail = useCallback(reason => {
+    if (isRateLimited(reason)) setRateLimitSeconds(retryAfterSeconds(reason));else setError(describeSignInError(reason, t));
+  }, [t]);
+
+  // One sign-in ends once: the typed code and the opened link can race.
+  const finishingRef = useRef(false);
+  const finish = useCallback(async (result, from) => {
+    if (finishingRef.current) return;
+    if (isSecondFactorRequired(result)) {
+      setError(null);
+      setSecondFactorCode('');
+      setUseBackupCode(false);
+      setStep({
+        name: 'second-factor',
+        challengeId: result.challengeId,
+        identifier: from
+      });
+      return;
+    }
+    finishingRef.current = true;
+    writeSignInFlow(flowOwner, SIGN_IN_FLOW_KEY, undefined);
+    try {
+      await handleWebSession(result);
+    } catch (reason) {
+      finishingRef.current = false;
+      throw reason;
+    }
+    onSignedIn();
+  }, [handleWebSession, onSignedIn, flowOwner]);
+
+  /** Send the sign-in email and show "Check your email". */
+  const startEmail = name => {
     if (blocked) return;
     setError(null);
+    setNotice(null);
     setPending(true);
-    try {
-      await signInWithPasskey({
-        username
+    oxyServices.auth.email.start(name).then(started => {
+      if (started.retryLater) {
+        setError(t('signin.checkEmail.retryLater'));
+        return;
+      }
+      setCode('');
+      setResendSeconds(EMAIL_RESEND_COOLDOWN_SECONDS);
+      if (step.name === 'check-email') setNotice(t('signin.checkEmail.resent'));
+      setStep({
+        name: 'check-email',
+        identifier: name,
+        requestId: started.requestId,
+        requestSecret: started.requestSecret
       });
-      onSignedIn();
-    } catch (err) {
-      if (isRateLimited(err)) {
-        setRateLimitSeconds(RATE_LIMIT_SECONDS);
-      } else {
-        const message = describePasskeyError(err, t);
-        setError(message);
-        toast.error(failToast, {
-          description: message
+    }).catch(fail).finally(() => setPending(false));
+  };
+  const submitIdentifier = () => {
+    const name = identifier.trim();
+    if (!name) {
+      setError(t('signin.identifier.required'));
+      return;
+    }
+    startEmail(name);
+  };
+  const submitCode = typed => {
+    if (step.name !== 'check-email' || blocked) return;
+    if (!isCompleteSignInCode(typed)) {
+      setError(t('signin.errors.codeInvalid'));
+      return;
+    }
+    const request = step;
+    setError(null);
+    setNotice(null);
+    setPending(true);
+    oxyServices.auth.email.confirm({
+      requestId: request.requestId,
+      requestSecret: request.requestSecret,
+      code: typed.trim()
+    }).then(result => finish(result, request.identifier)).catch(reason => {
+      setCode('');
+      fail(reason);
+    }).finally(() => setPending(false));
+  };
+  const submitPassword = () => {
+    if (step.name !== 'password' || blocked) return;
+    if (!password) {
+      setError(t('signin.password.required'));
+      return;
+    }
+    const name = step.identifier;
+    setError(null);
+    setPending(true);
+    oxyServices.auth.password.signIn({
+      identifier: name,
+      password
+    }).then(result => finish(result, name)).catch(fail).finally(() => setPending(false));
+  };
+  const submitSecondFactor = typed => {
+    if (step.name !== 'second-factor' || blocked) return;
+    const value = typed.trim();
+    if (!value) {
+      setError(t('signin.errors.secondFactorInvalid'));
+      return;
+    }
+    const challenge = step;
+    setError(null);
+    setPending(true);
+    oxyServices.auth.completeSecondFactor({
+      challengeId: challenge.challengeId,
+      code: value
+    }).then(session => finish(session, challenge.identifier)).catch(reason => {
+      setSecondFactorCode('');
+      fail(reason);
+    }).finally(() => setPending(false));
+  };
+
+  // The poll below finishes through the latest `finish` without restarting
+  // when a parent re-renders with a new `onSignedIn`.
+  const finishRef = useRef(finish);
+  useEffect(() => {
+    finishRef.current = finish;
+  }, [finish]);
+
+  // While "Check your email" shows, ask whether the link was opened in this
+  // browser; stop when the step goes, and on a request that is gone. A session
+  // the server handed over is always committed, even if the step went away
+  // meanwhile: the request is spent, so it would otherwise be lost.
+  const emailRequest = step.name === 'check-email' ? step : null;
+  const requestId = emailRequest?.requestId ?? null;
+  const requestSecret = emailRequest?.requestSecret ?? null;
+  const requestIdentifier = emailRequest?.identifier ?? '';
+  useEffect(() => {
+    if (!requestId || !requestSecret) return;
+    let stopped = false;
+    let timer;
+    const poll = async () => {
+      if (stopped) return;
+      try {
+        const result = await oxyServices.auth.email.collect({
+          requestId,
+          requestSecret
         });
+        if (!('status' in result)) {
+          await finishRef.current(result, requestIdentifier);
+          return;
+        }
+        if (stopped) return;
+      } catch (reason) {
+        if (stopped) return;
+        // A spent, expired or unknown request never approves: stop asking.
+        if (errorCode(reason) === SIGN_IN_ERROR_CODES.requestInvalid) return;
       }
-    } finally {
-      setPending(false);
-    }
+      if (!stopped) timer = setTimeout(() => void poll(), EMAIL_SIGNIN_POLL_MS);
+    };
+    timer = setTimeout(() => void poll(), EMAIL_SIGNIN_POLL_MS);
+    return () => {
+      stopped = true;
+      if (timer) clearTimeout(timer);
+    };
+  }, [requestId, requestSecret, requestIdentifier, oxyServices]);
+  const backToIdentifier = () => {
+    setError(null);
+    setNotice(null);
+    setCode('');
+    setPassword('');
+    setStep({
+      name: 'start'
+    });
   };
-  const submitUsername = () => {
-    const username = identifier.trim();
-    if (username) void runPasskey(username, t('signin.errors.failed'));else setError(t('signin.username.required'));
+  const toPassword = name => {
+    setError(null);
+    setNotice(null);
+    setPassword('');
+    setStep({
+      name: 'password',
+      identifier: name
+    });
   };
 
   // A returning device starts at WHO. Not while adding an account from inside
   // a signed-in app: the rows are the accounts it would add.
   const pickerAllowed = host === 'dialog' ? !snapshot.hasSession : activeContext !== null;
-  const reauthenticate = context => {
-    setIdentifier(context.handle ?? '');
-    setShowForm(true);
-  };
   const selectContext = async context => {
     const outcome = await controller?.chooseContext(context.contextId).catch(() => 'failed');
     switch (outcome) {
@@ -176,15 +347,23 @@ export const OxySignInPanel = ({
         return;
       case 'failed':
         // The pair could not be activated as it stands: sign in as it explicitly.
-        if (methods.passkey && context.handle) reauthenticate(context);else toast.error(t('accountSwitcher.toasts.activateFailed'));
+        if (context.handle) {
+          setIdentifier(context.handle);
+          setShowForm(true);
+        } else {
+          toast.error(t('accountSwitcher.toasts.activateFailed'));
+        }
         return;
       default:
         return;
     }
   };
   const showsPicker = pickerAllowed && !showForm && principals.length > 0;
-  // auth.oxy.so's page is the split card from `md`.
+  // The web screen 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 /*#__PURE__*/_jsx(OxyAccountPicker, {
       principals: principals,
@@ -202,141 +381,275 @@ export const OxySignInPanel = ({
   const shownError = rateLimitSeconds > 0 ? t('signin.errors.rateLimited', {
     seconds: rateLimitSeconds
   }) : error;
-  const adding = host === 'dialog' && snapshot.hasSession;
-  const title = adding ? t('signin.addAccountTitle') : t('signin.title');
-  const description = adding ? t('signin.addAccountSubtitle') : appName ? t('signin.subtitleToApp', {
-    app: appName
-  }) : t('signin.subtitle');
-  const noAccount = /*#__PURE__*/_jsxs(Text, {
-    style: [styles.note, styles.noAccount, {
-      color: theme.colors.textSecondary
-    }],
-    children: [t('signin.noAccount'), ' ', /*#__PURE__*/_jsx(RNText, {
-      accessibilityRole: "link",
-      onPress: onCreateAccount,
-      style: [styles.noAccountLink, {
-        color: theme.colors.text
-      }],
-      testID: "create-account-link",
-      children: t('signin.createAccount')
-    })]
-  });
-  // One solid action per screen: the username's Continue when there is one.
-  const commonsAppearance = methods.passkey ? 'outline' : 'solid';
-  const continueWithOxyButton = /*#__PURE__*/_jsx(Button, {
-    appearance: commonsAppearance,
-    tone: commonsAppearance === 'solid' ? 'action' : 'neutral',
-    size: "lg",
-    fullWidth: true,
-    onPress: methods.commons === 'window' ? signInOnOxy : continueWithOxy,
-    testID: "continue-with-oxy",
-    children: t('accountSwitcher.continueWithOxy')
-  });
-  const form = /*#__PURE__*/_jsxs(OxyAuthScreen, {
-    className: splits ? 'md:max-w-none' : undefined,
-    children: [/*#__PURE__*/_jsx(OxyAuthScreenHeader, {
-      title: title,
-      description: description
-    }), splits ? /*#__PURE__*/_jsx(CssView, {
-      className: "md:hidden",
-      children: continueWithOxyButton
-    }) : null, methods.commons === 'continue' || methods.commons === 'window' ? continueWithOxyButton : null, methods.commons === 'get-commons' ? /*#__PURE__*/_jsxs(View, {
-      style: styles.stack,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.note, {
-          color: theme.colors.textSecondary
-        }],
-        children: t('accountSwitcher.commonsNotInstalled')
-      }), /*#__PURE__*/_jsx(Button, {
-        appearance: "solid",
-        tone: "action",
-        size: "lg",
-        fullWidth: true,
-        onPress: getCommons,
-        testID: "get-commons-button",
-        children: t('accountSwitcher.getCommons')
-      })]
-    }) : null, methods.passkey ? /*#__PURE__*/_jsxs(View, {
-      style: styles.stack,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.field,
-        children: [/*#__PURE__*/_jsx(TextFieldLabel, {
-          nativeID: "username-label",
-          children: t('signin.username.label')
-        }), /*#__PURE__*/_jsx(TextField, {
-          invalid: shownError !== null,
+  const clearError = () => {
+    if (error) setError(null);
+  };
+  let form;
+  switch (step.name) {
+    case 'check-email':
+      {
+        const request = step;
+        form = /*#__PURE__*/_jsxs(OxyAuthScreen, {
+          className: splits ? 'md:max-w-none' : undefined,
+          children: [/*#__PURE__*/_jsx(OxyAuthScreenHeader, {
+            title: t('signin.checkEmail.title'),
+            description: t('signin.checkEmail.description', {
+              identifier: request.identifier
+            })
+          }), /*#__PURE__*/_jsx(AccountFlowField, {
+            label: t('signin.checkEmail.codeLabel'),
+            value: code,
+            onChange: value => {
+              const typed = formatSignInCodeInput(value);
+              setCode(typed);
+              clearError();
+              if (isCompleteSignInCode(typed)) submitCode(typed);
+            },
+            onSubmit: () => submitCode(code),
+            error: shownError,
+            disabled: blocked,
+            placeholder: "000000",
+            autoComplete: "one-time-code",
+            maxLength: EMAIL_SIGNIN_LONG_CODE_LENGTH + 1,
+            hint: t('signin.checkEmail.codeHint'),
+            testID: "signin-code"
+          }), notice ? /*#__PURE__*/_jsx(AccountFlowNote, {
+            testID: "signin-notice",
+            children: notice
+          }) : null, /*#__PURE__*/_jsx(AccountFlowAction, {
+            label: t('signin.actions.continue'),
+            onPress: () => submitCode(code),
+            pending: pending,
+            disabled: rateLimitSeconds > 0,
+            testID: "signin-code-continue"
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.links,
+            children: [/*#__PURE__*/_jsx(SubtleLink, {
+              label: resendSeconds > 0 ? t('signin.checkEmail.resendIn', {
+                seconds: resendSeconds
+              }) : t('signin.checkEmail.resend'),
+              theme: theme,
+              onPress: () => startEmail(request.identifier),
+              disabled: blocked || resendSeconds > 0,
+              testID: "signin-resend"
+            }), /*#__PURE__*/_jsx(SubtleLink, {
+              label: t('signin.checkEmail.usePassword'),
+              theme: theme,
+              onPress: () => toPassword(request.identifier),
+              disabled: pending,
+              testID: "signin-use-password"
+            }), /*#__PURE__*/_jsx(SubtleLink, {
+              label: t('signin.checkEmail.differentAccount'),
+              theme: theme,
+              onPress: backToIdentifier,
+              disabled: pending,
+              testID: "signin-different-account"
+            })]
+          })]
+        });
+        break;
+      }
+    case 'password':
+      {
+        const request = step;
+        form = /*#__PURE__*/_jsxs(OxyAuthScreen, {
+          className: splits ? 'md:max-w-none' : undefined,
+          children: [/*#__PURE__*/_jsx(OxyAuthScreenHeader, {
+            title: t('signin.password.title'),
+            description: request.identifier
+          }), /*#__PURE__*/_jsx(AccountFlowField, {
+            label: t('signin.password.label'),
+            value: password,
+            onChange: value => {
+              setPassword(value);
+              clearError();
+            },
+            onSubmit: submitPassword,
+            error: shownError,
+            disabled: blocked,
+            autoComplete: "current-password",
+            secureTextEntry: true,
+            testID: "signin-password"
+          }), /*#__PURE__*/_jsx(AccountFlowAction, {
+            label: t('signin.actions.continue'),
+            onPress: submitPassword,
+            pending: pending,
+            disabled: rateLimitSeconds > 0,
+            testID: "signin-password-continue"
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.links,
+            children: [/*#__PURE__*/_jsx(SubtleLink, {
+              label: t('signin.password.forgot'),
+              theme: theme,
+              onPress: () => startEmail(request.identifier),
+              disabled: blocked,
+              testID: "signin-password-forgot"
+            }), /*#__PURE__*/_jsx(SubtleLink, {
+              label: t('signin.checkEmail.differentAccount'),
+              theme: theme,
+              onPress: backToIdentifier,
+              disabled: pending,
+              testID: "signin-different-account"
+            })]
+          })]
+        });
+        break;
+      }
+    case 'second-factor':
+      form = /*#__PURE__*/_jsxs(OxyAuthScreen, {
+        className: splits ? 'md:max-w-none' : undefined,
+        children: [/*#__PURE__*/_jsx(OxyAuthScreenHeader, {
+          title: t('signin.secondFactor.title'),
+          description: useBackupCode ? t('signin.secondFactor.backupDescription') : t('signin.secondFactor.description')
+        }), /*#__PURE__*/_jsx(AccountFlowField, {
+          label: useBackupCode ? t('signin.secondFactor.backupLabel') : t('signin.secondFactor.label'),
+          value: secondFactorCode,
+          onChange: value => {
+            if (useBackupCode) {
+              setSecondFactorCode(value);
+              clearError();
+              return;
+            }
+            const digits = value.replace(/\D/g, '').slice(0, TOTP_DIGITS);
+            setSecondFactorCode(digits);
+            clearError();
+            if (digits.length === TOTP_DIGITS) submitSecondFactor(digits);
+          },
+          onSubmit: () => submitSecondFactor(secondFactorCode),
+          error: shownError,
           disabled: blocked,
-          radius: 999,
-          style: styles.input,
-          children: /*#__PURE__*/_jsx(TextFieldInput, {
-            testID: "username",
-            label: t('signin.username.label'),
-            value: identifier,
-            onValueChange: value => {
-              setIdentifier(value);
-              if (error) setError(null);
+          placeholder: useBackupCode ? 'xxxxx-xxxxx' : '000000',
+          autoComplete: "one-time-code",
+          keyboardType: useBackupCode ? 'default' : 'number-pad',
+          maxLength: useBackupCode ? 11 : TOTP_DIGITS,
+          testID: "signin-second-factor"
+        }, useBackupCode ? 'backup' : 'totp'), /*#__PURE__*/_jsx(AccountFlowAction, {
+          label: t('signin.actions.continue'),
+          onPress: () => submitSecondFactor(secondFactorCode),
+          pending: pending,
+          disabled: rateLimitSeconds > 0,
+          testID: "signin-second-factor-continue"
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.links,
+          children: [/*#__PURE__*/_jsx(SubtleLink, {
+            label: useBackupCode ? t('signin.secondFactor.useAuthenticator') : t('signin.secondFactor.useBackup'),
+            theme: theme,
+            onPress: () => {
+              setUseBackupCode(!useBackupCode);
+              setSecondFactorCode('');
+              setError(null);
             },
-            placeholder: t('signin.username.placeholder'),
-            autoComplete: "username",
-            autoCapitalize: "none",
-            autoCorrect: false,
-            autoFocus: Platform.OS === 'web',
-            returnKeyType: "go",
-            onSubmitEditing: submitUsername,
-            "aria-required": true
-          })
-        }), shownError ? /*#__PURE__*/_jsx(TextFieldHint, {
-          invalid: true,
-          children: shownError
-        }) : null]
-      }), noAccount, /*#__PURE__*/_jsx(Button, {
-        appearance: "solid",
-        tone: "action",
-        size: "lg",
-        fullWidth: true,
-        loading: pending,
-        disabled: blocked,
-        onPress: submitUsername,
-        testID: "username-continue",
-        children: t('signin.actions.continue')
-      })]
-    }) : null, methods.commons === 'window' ? null : /*#__PURE__*/_jsx(Divider, {
-      children: t('signin.orContinueWith')
-    }), methods.passkey ? /*#__PURE__*/_jsx(Button, {
-      appearance: "outline",
-      tone: "neutral",
-      size: "lg",
-      fullWidth: true,
-      leadingIcon: RiKey2Line,
-      disabled: blocked,
-      onPress: () => void runPasskey(undefined, t('signin.errors.failed')),
-      testID: "passkey-sign-in",
-      children: t('signin.methods.passkey')
-    }) : methods.commons === 'window' ? null : /*#__PURE__*/_jsx(Button, {
-      appearance: "outline",
-      tone: "neutral",
-      size: "lg",
-      fullWidth: true,
-      leadingIcon: RiQrCodeLine,
-      onPress: useAnotherDevice,
-      testID: "scan-qr",
-      children: t('accountSwitcher.scanQr')
-    }), methods.passkey ? null : noAccount, onRecover ? /*#__PURE__*/_jsx(SubtleLink, {
-      label: t('signin.recoverLink'),
-      theme: theme,
-      onPress: onRecover,
-      testID: "recover-link"
-    }) : null, /*#__PURE__*/_jsx(OxyAuthTerms, {})]
+            disabled: pending,
+            testID: "signin-toggle-backup"
+          }), /*#__PURE__*/_jsx(SubtleLink, {
+            label: t('signin.checkEmail.differentAccount'),
+            theme: theme,
+            onPress: backToIdentifier,
+            disabled: pending,
+            testID: "signin-different-account"
+          })]
+        })]
+      });
+      break;
+    default:
+      {
+        const adding = host === 'dialog' && snapshot.hasSession;
+        const title = adding ? t('signin.addAccountTitle') : t('signin.title');
+        const description = adding ? t('signin.addAccountSubtitle') : appName ? t('signin.subtitleToApp', {
+          app: appName
+        }) : t('signin.subtitle');
+        const continueWithOxyButton = /*#__PURE__*/_jsx(Button, {
+          appearance: "outline",
+          tone: "neutral",
+          size: "lg",
+          fullWidth: true,
+          onPress: continueWithOxy,
+          testID: "continue-with-oxy",
+          children: t('accountSwitcher.continueWithOxy')
+        });
+        const divider = /*#__PURE__*/_jsx(Divider, {
+          children: t('signin.orContinueWith')
+        });
+        form = /*#__PURE__*/_jsxs(OxyAuthScreen, {
+          className: splits ? 'md:max-w-none' : undefined,
+          children: [/*#__PURE__*/_jsx(OxyAuthScreenHeader, {
+            title: title,
+            description: description
+          }), splits ? /*#__PURE__*/_jsxs(CssView, {
+            className: "gap-6 md:hidden",
+            children: [continueWithOxyButton, divider]
+          }) : null, methods.commons === 'continue' ? /*#__PURE__*/_jsxs(View, {
+            style: styles.stack,
+            children: [continueWithOxyButton, divider]
+          }) : null, methods.commons === 'get-commons' ? /*#__PURE__*/_jsxs(View, {
+            style: styles.stack,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: [styles.note, {
+                color: theme.colors.textSecondary
+              }],
+              children: t('accountSwitcher.commonsNotInstalled')
+            }), /*#__PURE__*/_jsx(Button, {
+              appearance: "outline",
+              tone: "neutral",
+              size: "lg",
+              fullWidth: true,
+              onPress: getCommons,
+              testID: "get-commons-button",
+              children: t('accountSwitcher.getCommons')
+            }), divider]
+          }) : null, /*#__PURE__*/_jsxs(View, {
+            style: styles.stack,
+            children: [/*#__PURE__*/_jsx(AccountFlowField, {
+              label: t('signin.identifier.label'),
+              value: identifier,
+              onChange: value => {
+                setIdentifier(value);
+                clearError();
+              },
+              onSubmit: submitIdentifier,
+              error: shownError,
+              disabled: blocked,
+              placeholder: t('signin.identifier.placeholder'),
+              autoComplete: "username",
+              keyboardType: "email-address",
+              autoFocus: Platform.OS === 'web',
+              testID: "signin-identifier"
+            }), /*#__PURE__*/_jsxs(Text, {
+              style: [styles.note, styles.noAccount, {
+                color: theme.colors.textSecondary
+              }],
+              children: [t('signin.noAccount'), ' ', /*#__PURE__*/_jsx(RNText, {
+                accessibilityRole: "link",
+                onPress: onCreateAccount,
+                style: [styles.noAccountLink, {
+                  color: theme.colors.text
+                }],
+                testID: "create-account-link",
+                children: t('signin.createAccount')
+              })]
+            }), /*#__PURE__*/_jsx(AccountFlowAction, {
+              label: t('signin.actions.continue'),
+              onPress: submitIdentifier,
+              pending: pending,
+              disabled: rateLimitSeconds > 0,
+              testID: "signin-identifier-continue"
+            })]
+          }), /*#__PURE__*/_jsx(OxyAuthTerms, {})]
+        });
+      }
+  }
+  if (!splits) return /*#__PURE__*/_jsx(_Fragment, {
+    children: form
   });
-  if (!splits) return form;
   return /*#__PURE__*/_jsx(OxyAuthSplit, {
+    bare: host === 'dialog',
     aside: /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(AuthMediaCarousel, {
         slides: SIGN_IN_SLIDES,
         style: StyleSheet.absoluteFill
-      }), /*#__PURE__*/_jsx(InlineCommonsQr, {
+      }), step.name === 'start' ? /*#__PURE__*/_jsx(InlineCommonsQr, {
         controller: controller
-      })]
+      }) : null]
     }),
     children: form
   });
@@ -345,8 +658,8 @@ const styles = StyleSheet.create({
   stack: {
     gap: 12
   },
-  field: {
-    gap: 6
+  links: {
+    gap: 4
   },
   note: {
     fontSize: 14,
@@ -358,9 +671,6 @@ const styles = StyleSheet.create({
   },
   noAccountLink: {
     textDecorationLine: 'underline'
-  },
-  input: {
-    height: 40
   }
 });
 //# sourceMappingURL=OxySignInPanel.js.map