@oxy.so/services 6.1.0 → 8.0.0

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

@@ -3,24 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.OxySignInPanel = void 0;
+exports.OxySignInPanel = exports.EMAIL_SIGNIN_POLL_MS = exports.EMAIL_RESEND_COOLDOWN_SECONDS = void 0;
 var _react = require("react");
 var _reactNative = require("react-native");
 var _components = require("react-native-css/components");
 var _authCard = require("@oxy.so/bloom/auth-card");
 var _button = require("@oxy.so/bloom/button");
 var _divider = require("@oxy.so/bloom/divider");
-var _RiKey2Line = require("@oxy.so/bloom/icons/RiKey2Line");
-var _RiQrCodeLine = require("@oxy.so/bloom/icons/RiQrCodeLine");
 var _theme = require("@oxy.so/bloom/theme");
-var _textField = require("@oxy.so/bloom/text-field");
 var _toast = require("@oxy.so/bloom/toast");
 var _typography = require("@oxy.so/bloom/typography");
+var _contracts = require("@oxy.so/contracts");
 var _reactQuery = require("@tanstack/react-query");
 var _OxyContext = require("../../context/OxyContext.js");
 var _accountDialogSnapshot = require("../../hooks/accountDialogSnapshot.js");
 var _useDeviceSwitcher = require("../../hooks/useDeviceSwitcher.js");
 var _useI18n = require("../../hooks/useI18n.js");
+var _useSurfaceFrameWidth = require("../../hooks/useSurfaceFrameWidth.js");
 var _commonsStoreLinks = require("../../utils/commonsStoreLinks.js");
 var _isWebBrowser = require("../../utils/isWebBrowser.js");
 var _primitives = require("../authChooser/primitives.js");
@@ -28,35 +27,44 @@ var _artwork = require("./artwork.js");
 var _InlineCommonsQr = require("./InlineCommonsQr.js");
 var _OxyAccountPicker = require("./OxyAccountPicker.js");
 var _OxyAuthScreen = require("./OxyAuthScreen.js");
-var _passkeyError = require("./passkeyError.js");
+var _accountFlowParts = require("./accountFlowParts.js");
+var _signInFlowStore = require("./signInFlowStore.js");
 var _signInMethods = require("./signInMethods.js");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * 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".
  */
 
+/** Bloom `AuthCard`'s split card width, which the account dialog grows to for it. */const SPLIT_WIDTH = 880;
+/** How often the check-email step asks whether the link was opened in this browser. */
+const EMAIL_SIGNIN_POLL_MS = exports.EMAIL_SIGNIN_POLL_MS = 2000;
+/** How long after an email "Send a new email" waits. */
+const EMAIL_RESEND_COOLDOWN_SECONDS = exports.EMAIL_RESEND_COOLDOWN_SECONDS = 30;
+
+/** What the dialog keeps of this screen across a remount (`signInFlowStore`). */
+
+const SIGN_IN_FLOW_KEY = 'signin';
 const OxySignInPanel = ({
   onSignedIn,
   onCreateAccount,
-  onRecover,
   loginHint,
   appName = null,
   host = 'page'
@@ -69,8 +77,8 @@ const OxySignInPanel = ({
   const {
     accountDialogController: controller,
     openAccountDialog,
-    signInWithPasskey,
-    continueOnAuth
+    oxyServices,
+    handleWebSession
   } = (0, _OxyContext.useOxy)();
   const snapshot = (0, _accountDialogSnapshot.useAccountDialogSnapshot)(controller);
   const {
@@ -79,14 +87,37 @@ const OxySignInPanel = ({
   } = (0, _useDeviceSwitcher.useDeviceSwitcher)();
   const methods = (0, _signInMethods.resolveSignInMethods)({
     web: (0, _isWebBrowser.isWebBrowser)(),
-    host,
     commonsAvailability: snapshot.commonsAvailability
   });
-  const [showForm, setShowForm] = (0, _react.useState)(Boolean(loginHint));
-  const [identifier, setIdentifier] = (0, _react.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] = (0, _react.useState)(() => (0, _signInFlowStore.readSignInFlow)(flowOwner, SIGN_IN_FLOW_KEY));
+  const [showForm, setShowForm] = (0, _react.useState)(saved?.showForm ?? Boolean(loginHint));
+  const [step, setStep] = (0, _react.useState)(saved?.step ?? {
+    name: 'start'
+  });
+  const [identifier, setIdentifier] = (0, _react.useState)(saved?.identifier ?? loginHint ?? '');
+  const [code, setCode] = (0, _react.useState)('');
+  const [password, setPassword] = (0, _react.useState)('');
+  const [secondFactorCode, setSecondFactorCode] = (0, _react.useState)('');
+  const [useBackupCode, setUseBackupCode] = (0, _react.useState)(saved?.useBackupCode ?? false);
   const [pending, setPending] = (0, _react.useState)(false);
   const [error, setError] = (0, _react.useState)(null);
+  const [notice, setNotice] = (0, _react.useState)(null);
   const [rateLimitSeconds, setRateLimitSeconds] = (0, _react.useState)(0);
+  const [resendSeconds, setResendSeconds] = (0, _react.useState)(() => saved ? Math.max(0, Math.ceil((saved.resendUntil - Date.now()) / 1000)) : 0);
+  (0, _react.useEffect)(() => {
+    (0, _signInFlowStore.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.
@@ -96,6 +127,13 @@ const OxySignInPanel = ({
     return () => clearTimeout(timer);
   }, [rateLimitSeconds]);
 
+  // The wait before another email may be asked for.
+  (0, _react.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.
@@ -109,60 +147,191 @@ const OxySignInPanel = ({
   const showRequest = (0, _react.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.toast.error(t('signin.errors.failed'));
-    });
-  };
-  const useAnotherDevice = () => {
-    void controller?.showQr();
-    showRequest();
-  };
   const getCommons = () => {
     Promise.resolve().then(() => _reactNative.Linking.openURL((0, _commonsStoreLinks.getCommonsAcquisitionUrl)(_reactNative.Platform.OS))).catch(() => _toast.toast.error(t('accountSwitcher.linkOpenFailed')));
   };
-  const runPasskey = async (username, failToast) => {
+  const fail = (0, _react.useCallback)(reason => {
+    if ((0, _accountFlowParts.isRateLimited)(reason)) setRateLimitSeconds((0, _accountFlowParts.retryAfterSeconds)(reason));else setError((0, _accountFlowParts.describeSignInError)(reason, t));
+  }, [t]);
+
+  // One sign-in ends once: the typed code and the opened link can race.
+  const finishingRef = (0, _react.useRef)(false);
+  const finish = (0, _react.useCallback)(async (result, from) => {
+    if (finishingRef.current) return;
+    if ((0, _contracts.isSecondFactorRequired)(result)) {
+      setError(null);
+      setSecondFactorCode('');
+      setUseBackupCode(false);
+      setStep({
+        name: 'second-factor',
+        challengeId: result.challengeId,
+        identifier: from
+      });
+      return;
+    }
+    finishingRef.current = true;
+    (0, _signInFlowStore.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 ((0, _passkeyError.isRateLimited)(err)) {
-        setRateLimitSeconds(_passkeyError.RATE_LIMIT_SECONDS);
-      } else {
-        const message = (0, _passkeyError.describePasskeyError)(err, t);
-        setError(message);
-        _toast.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 (!(0, _accountFlowParts.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 = (0, _react.useRef)(finish);
+  (0, _react.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 ?? '';
+  (0, _react.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 ((0, _accountFlowParts.errorCode)(reason) === _contracts.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) {
@@ -180,15 +349,23 @@ 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.toast.error(t('accountSwitcher.toasts.activateFailed'));
+        if (context.handle) {
+          setIdentifier(context.handle);
+          setShowForm(true);
+        } else {
+          _toast.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';
+  (0, _useSurfaceFrameWidth.useSurfaceFrameWidth)(host === 'dialog' && !showsPicker && splits ? SPLIT_WIDTH : null);
   if (showsPicker) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyAccountPicker.OxyAccountPicker, {
       principals: principals,
@@ -206,141 +383,275 @@ 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__*/(0, _jsxRuntime.jsxs)(_typography.Text, {
-    style: [styles.note, styles.noAccount, {
-      color: theme.colors.textSecondary
-    }],
-    children: [t('signin.noAccount'), ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      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__*/(0, _jsxRuntime.jsx)(_button.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__*/(0, _jsxRuntime.jsxs)(_OxyAuthScreen.OxyAuthScreen, {
-    className: splits ? 'md:max-w-none' : undefined,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyAuthScreen.OxyAuthScreenHeader, {
-      title: title,
-      description: description
-    }), splits ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
-      className: "md:hidden",
-      children: continueWithOxyButton
-    }) : null, methods.commons === 'continue' || methods.commons === 'window' ? continueWithOxyButton : null, methods.commons === 'get-commons' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.stack,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
-        style: [styles.note, {
-          color: theme.colors.textSecondary
-        }],
-        children: t('accountSwitcher.commonsNotInstalled')
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
-        appearance: "solid",
-        tone: "action",
-        size: "lg",
-        fullWidth: true,
-        onPress: getCommons,
-        testID: "get-commons-button",
-        children: t('accountSwitcher.getCommons')
-      })]
-    }) : null, methods.passkey ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.stack,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.field,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_textField.TextFieldLabel, {
-          nativeID: "username-label",
-          children: t('signin.username.label')
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_textField.TextField, {
-          invalid: shownError !== null,
+  const clearError = () => {
+    if (error) setError(null);
+  };
+  let form;
+  switch (step.name) {
+    case 'check-email':
+      {
+        const request = step;
+        form = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_OxyAuthScreen.OxyAuthScreen, {
+          className: splits ? 'md:max-w-none' : undefined,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyAuthScreen.OxyAuthScreenHeader, {
+            title: t('signin.checkEmail.title'),
+            description: t('signin.checkEmail.description', {
+              identifier: request.identifier
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_accountFlowParts.AccountFlowField, {
+            label: t('signin.checkEmail.codeLabel'),
+            value: code,
+            onChange: value => {
+              const typed = (0, _accountFlowParts.formatSignInCodeInput)(value);
+              setCode(typed);
+              clearError();
+              if ((0, _accountFlowParts.isCompleteSignInCode)(typed)) submitCode(typed);
+            },
+            onSubmit: () => submitCode(code),
+            error: shownError,
+            disabled: blocked,
+            placeholder: "000000",
+            autoComplete: "one-time-code",
+            maxLength: _contracts.EMAIL_SIGNIN_LONG_CODE_LENGTH + 1,
+            hint: t('signin.checkEmail.codeHint'),
+            testID: "signin-code"
+          }), notice ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_accountFlowParts.AccountFlowNote, {
+            testID: "signin-notice",
+            children: notice
+          }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_accountFlowParts.AccountFlowAction, {
+            label: t('signin.actions.continue'),
+            onPress: () => submitCode(code),
+            pending: pending,
+            disabled: rateLimitSeconds > 0,
+            testID: "signin-code-continue"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.links,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.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__*/(0, _jsxRuntime.jsx)(_primitives.SubtleLink, {
+              label: t('signin.checkEmail.usePassword'),
+              theme: theme,
+              onPress: () => toPassword(request.identifier),
+              disabled: pending,
+              testID: "signin-use-password"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SubtleLink, {
+              label: t('signin.checkEmail.differentAccount'),
+              theme: theme,
+              onPress: backToIdentifier,
+              disabled: pending,
+              testID: "signin-different-account"
+            })]
+          })]
+        });
+        break;
+      }
+    case 'password':
+      {
+        const request = step;
+        form = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_OxyAuthScreen.OxyAuthScreen, {
+          className: splits ? 'md:max-w-none' : undefined,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyAuthScreen.OxyAuthScreenHeader, {
+            title: t('signin.password.title'),
+            description: request.identifier
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_accountFlowParts.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__*/(0, _jsxRuntime.jsx)(_accountFlowParts.AccountFlowAction, {
+            label: t('signin.actions.continue'),
+            onPress: submitPassword,
+            pending: pending,
+            disabled: rateLimitSeconds > 0,
+            testID: "signin-password-continue"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.links,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SubtleLink, {
+              label: t('signin.password.forgot'),
+              theme: theme,
+              onPress: () => startEmail(request.identifier),
+              disabled: blocked,
+              testID: "signin-password-forgot"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SubtleLink, {
+              label: t('signin.checkEmail.differentAccount'),
+              theme: theme,
+              onPress: backToIdentifier,
+              disabled: pending,
+              testID: "signin-different-account"
+            })]
+          })]
+        });
+        break;
+      }
+    case 'second-factor':
+      form = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_OxyAuthScreen.OxyAuthScreen, {
+        className: splits ? 'md:max-w-none' : undefined,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyAuthScreen.OxyAuthScreenHeader, {
+          title: t('signin.secondFactor.title'),
+          description: useBackupCode ? t('signin.secondFactor.backupDescription') : t('signin.secondFactor.description')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_accountFlowParts.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, _contracts.TOTP_DIGITS);
+            setSecondFactorCode(digits);
+            clearError();
+            if (digits.length === _contracts.TOTP_DIGITS) submitSecondFactor(digits);
+          },
+          onSubmit: () => submitSecondFactor(secondFactorCode),
+          error: shownError,
           disabled: blocked,
-          radius: 999,
-          style: styles.input,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_textField.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 : _contracts.TOTP_DIGITS,
+          testID: "signin-second-factor"
+        }, useBackupCode ? 'backup' : 'totp'), /*#__PURE__*/(0, _jsxRuntime.jsx)(_accountFlowParts.AccountFlowAction, {
+          label: t('signin.actions.continue'),
+          onPress: () => submitSecondFactor(secondFactorCode),
+          pending: pending,
+          disabled: rateLimitSeconds > 0,
+          testID: "signin-second-factor-continue"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.links,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.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: _reactNative.Platform.OS === 'web',
-            returnKeyType: "go",
-            onSubmitEditing: submitUsername,
-            "aria-required": true
-          })
-        }), shownError ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_textField.TextFieldHint, {
-          invalid: true,
-          children: shownError
-        }) : null]
-      }), noAccount, /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.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__*/(0, _jsxRuntime.jsx)(_divider.Divider, {
-      children: t('signin.orContinueWith')
-    }), methods.passkey ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
-      appearance: "outline",
-      tone: "neutral",
-      size: "lg",
-      fullWidth: true,
-      leadingIcon: _RiKey2Line.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__*/(0, _jsxRuntime.jsx)(_button.Button, {
-      appearance: "outline",
-      tone: "neutral",
-      size: "lg",
-      fullWidth: true,
-      leadingIcon: _RiQrCodeLine.RiQrCodeLine,
-      onPress: useAnotherDevice,
-      testID: "scan-qr",
-      children: t('accountSwitcher.scanQr')
-    }), methods.passkey ? null : noAccount, onRecover ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SubtleLink, {
-      label: t('signin.recoverLink'),
-      theme: theme,
-      onPress: onRecover,
-      testID: "recover-link"
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyAuthScreen.OxyAuthTerms, {})]
+            disabled: pending,
+            testID: "signin-toggle-backup"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.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__*/(0, _jsxRuntime.jsx)(_button.Button, {
+          appearance: "outline",
+          tone: "neutral",
+          size: "lg",
+          fullWidth: true,
+          onPress: continueWithOxy,
+          testID: "continue-with-oxy",
+          children: t('accountSwitcher.continueWithOxy')
+        });
+        const divider = /*#__PURE__*/(0, _jsxRuntime.jsx)(_divider.Divider, {
+          children: t('signin.orContinueWith')
+        });
+        form = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_OxyAuthScreen.OxyAuthScreen, {
+          className: splits ? 'md:max-w-none' : undefined,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyAuthScreen.OxyAuthScreenHeader, {
+            title: title,
+            description: description
+          }), splits ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
+            className: "gap-6 md:hidden",
+            children: [continueWithOxyButton, divider]
+          }) : null, methods.commons === 'continue' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.stack,
+            children: [continueWithOxyButton, divider]
+          }) : null, methods.commons === 'get-commons' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.stack,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
+              style: [styles.note, {
+                color: theme.colors.textSecondary
+              }],
+              children: t('accountSwitcher.commonsNotInstalled')
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+              appearance: "outline",
+              tone: "neutral",
+              size: "lg",
+              fullWidth: true,
+              onPress: getCommons,
+              testID: "get-commons-button",
+              children: t('accountSwitcher.getCommons')
+            }), divider]
+          }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.stack,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_accountFlowParts.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: _reactNative.Platform.OS === 'web',
+              testID: "signin-identifier"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_typography.Text, {
+              style: [styles.note, styles.noAccount, {
+                color: theme.colors.textSecondary
+              }],
+              children: [t('signin.noAccount'), ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                accessibilityRole: "link",
+                onPress: onCreateAccount,
+                style: [styles.noAccountLink, {
+                  color: theme.colors.text
+                }],
+                testID: "create-account-link",
+                children: t('signin.createAccount')
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_accountFlowParts.AccountFlowAction, {
+              label: t('signin.actions.continue'),
+              onPress: submitIdentifier,
+              pending: pending,
+              disabled: rateLimitSeconds > 0,
+              testID: "signin-identifier-continue"
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyAuthScreen.OxyAuthTerms, {})]
+        });
+      }
+  }
+  if (!splits) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: form
   });
-  if (!splits) return form;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_OxyAuthScreen.OxyAuthSplit, {
+    bare: host === 'dialog',
     aside: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_authCard.AuthMediaCarousel, {
         slides: _artwork.SIGN_IN_SLIDES,
         style: _reactNative.StyleSheet.absoluteFill
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_InlineCommonsQr.InlineCommonsQr, {
+      }), step.name === 'start' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_InlineCommonsQr.InlineCommonsQr, {
         controller: controller
-      })]
+      }) : null]
     }),
     children: form
   });
@@ -350,8 +661,8 @@ const styles = _reactNative.StyleSheet.create({
   stack: {
     gap: 12
   },
-  field: {
-    gap: 6
+  links: {
+    gap: 4
   },
   note: {
     fontSize: 14,
@@ -363,9 +674,6 @@ const styles = _reactNative.StyleSheet.create({
   },
   noAccountLink: {
     textDecorationLine: 'underline'
-  },
-  input: {
-    height: 40
   }
 });
 //# sourceMappingURL=OxySignInPanel.js.map