@oxy.so/services 6.2.0 → 8.1.0

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

@@ -1,9 +1,9 @@
 /**
- * The pieces auth.oxy.so's account pages share (ADR 0029 D3): creating a
- * passkey account, recovering one, deleting one. Each is a page of the IdP
- * built from the same sign-in shell as `OxySignInPanel`, so they read as one
- * product; the passkey belongs to auth.oxy.so, so none of them runs anywhere
- * else.
+ * The pieces every Oxy sign-in and account screen shares: the error vocabulary,
+ * one labelled field, the one primary action, a note, and the email-code step.
+ * Each screen is built from the same shell as `OxySignInPanel`
+ * (`OxyAuthScreen`), so they read as one product in the account dialog, in an
+ * app's settings and on auth.oxy.so.
  */
 
 import type React from 'react';
@@ -13,23 +13,72 @@ import { Button } from '@oxy.so/bloom/button';
 import { useTheme } from '@oxy.so/bloom/theme';
 import { TextField, TextFieldHint, TextFieldInput, TextFieldLabel } from '@oxy.so/bloom/text-field';
 import { Text } from '@oxy.so/bloom/typography';
-import { EMAIL_CODE_LENGTH, EMAIL_VERIFICATION_ERROR_CODES, type EmailVerificationConfirmResponse } from '@oxy.so/contracts';
+import {
+  EMAIL_CODE_LENGTH,
+  EMAIL_SIGNIN_LONG_CODE_ALPHABET,
+  EMAIL_SIGNIN_LONG_CODE_LENGTH,
+  EMAIL_VERIFICATION_ERROR_CODES,
+  SIGN_IN_ERROR_CODES,
+  normalizeEmailSignInCode,
+  type EmailVerificationConfirmResponse,
+} from '@oxy.so/contracts';
 import { useOxy } from '../../context/OxyContext';
 import { useI18n } from '../../hooks/useI18n';
 import type { Translate } from '../authChooser/types';
 import { SubtleLink } from '../authChooser/primitives';
 import { OxyAuthScreen, OxyAuthScreenHeader } from './OxyAuthScreen';
-import { describePasskeyError, isRateLimited } from './passkeyError';
+
+/** How long a screen waits after a 429 that names no wait of its own. */
+export const RATE_LIMIT_SECONDS = 60;
 
 /** The API error code a thrown SDK error carries (`error.code`), if any. */
-function errorCode(error: unknown): string | undefined {
+export function errorCode(error: unknown): string | undefined {
   const code = (error as { code?: unknown } | null)?.code;
   return typeof code === 'string' ? code : undefined;
 }
 
-/** A failure of an account page, in the person's language. */
-export function describeAccountFlowError(error: unknown, t: Translate): string {
+/** An HTTP status off a thrown SDK error. */
+function errorStatus(error: unknown): number | undefined {
+  return (
+    (error as { status?: number } | undefined)?.status ??
+    (error as { response?: { status?: number } } | undefined)?.response?.status
+  );
+}
+
+/** A 429: too many attempts or emails. */
+export function isRateLimited(error: unknown): boolean {
+  return errorStatus(error) === 429;
+}
+
+/** How long to wait after a 429, from the API's `retryAfterSeconds` when it sent one. */
+export function retryAfterSeconds(error: unknown): number {
+  const seconds = (error as { details?: { retryAfterSeconds?: unknown } } | undefined)?.details?.retryAfterSeconds;
+  return typeof seconds === 'number' && seconds > 0 ? Math.ceil(seconds) : RATE_LIMIT_SECONDS;
+}
+
+/**
+ * A failure of a sign-in or account screen, in the person's language. Never
+ * says whether an account exists: every "no" is the same sentence.
+ */
+export function describeSignInError(error: unknown, t: Translate): string {
   switch (errorCode(error)) {
+    case SIGN_IN_ERROR_CODES.invalidCredentials:
+      return t('signin.errors.invalidCredentials');
+    case SIGN_IN_ERROR_CODES.requestInvalid:
+    case SIGN_IN_ERROR_CODES.linkInvalid:
+      return t('signin.errors.requestExpired');
+    case SIGN_IN_ERROR_CODES.secondFactorInvalid:
+    case SIGN_IN_ERROR_CODES.totpCodeInvalid:
+      return t('signin.errors.secondFactorInvalid');
+    case SIGN_IN_ERROR_CODES.reauthInvalid:
+    case SIGN_IN_ERROR_CODES.reauthRequired:
+      return t('reauth.errors.invalid');
+    case SIGN_IN_ERROR_CODES.totpRequired:
+      return t('reauth.errors.totpRequired');
+    case SIGN_IN_ERROR_CODES.originNotAllowed:
+      return t('signin.errors.originNotAllowed');
+    case SIGN_IN_ERROR_CODES.usernameTaken:
+      return t('signup.username.taken');
     case EMAIL_VERIFICATION_ERROR_CODES.codeInvalid:
       return t('emailCode.errors.codeInvalid');
     case EMAIL_VERIFICATION_ERROR_CODES.tooManyAttempts:
@@ -40,8 +89,8 @@ export function describeAccountFlowError(error: unknown, t: Translate): string {
     case EMAIL_VERIFICATION_ERROR_CODES.unavailable:
       return t('emailCode.errors.unavailable');
     default:
-      if (isRateLimited(error)) return t('emailCode.errors.rateLimited');
-      return describePasskeyError(error, t);
+      if (isRateLimited(error)) return t('signin.errors.rateLimited', { seconds: retryAfterSeconds(error) });
+      return t('signin.errors.generic');
   }
 }
 
@@ -51,7 +100,27 @@ export function isTicketExpired(error: unknown): boolean {
   return code === EMAIL_VERIFICATION_ERROR_CODES.ticketInvalid || code === EMAIL_VERIFICATION_ERROR_CODES.ticketRequired;
 }
 
-/** One labelled input, the way the sign-in screen draws its username. */
+const SIX_DIGITS = new RegExp(`^\\d{${EMAIL_CODE_LENGTH}}$`);
+const LONG_CODE = new RegExp(`^[${EMAIL_SIGNIN_LONG_CODE_ALPHABET}]{${EMAIL_SIGNIN_LONG_CODE_LENGTH}}$`);
+
+/**
+ * Whether a typed sign-in code is complete: 6 digits, or the 10-character long
+ * code (`XXXXX-XXXXX`, any case, with or without its dash). Six digits count
+ * only when typed without a separator: the long code is shown with its dash
+ * after the fifth character, so a long code being typed never reads as 6 digits.
+ */
+export function isCompleteSignInCode(typed: string): boolean {
+  const trimmed = typed.trim();
+  if (SIX_DIGITS.test(trimmed)) return true;
+  return LONG_CODE.test(normalizeEmailSignInCode(trimmed));
+}
+
+/** A typed sign-in code as it shows in its field: upper-case, the long code's dash kept. */
+export function formatSignInCodeInput(typed: string): string {
+  return typed.toUpperCase().replace(/[^0-9A-Z-\s]/g, '').slice(0, EMAIL_SIGNIN_LONG_CODE_LENGTH + 1);
+}
+
+/** One labelled input, the way the sign-in screen draws its fields. */
 export const AccountFlowField: React.FC<{
   label: string;
   value: string;
@@ -60,11 +129,29 @@ export const AccountFlowField: React.FC<{
   error: string | null;
   disabled?: boolean;
   placeholder?: string;
-  autoComplete?: 'username' | 'email' | 'one-time-code' | 'off';
+  autoComplete?: 'username' | 'email' | 'one-time-code' | 'off' | 'current-password' | 'new-password';
   keyboardType?: 'default' | 'email-address' | 'number-pad';
+  secureTextEntry?: boolean;
+  autoFocus?: boolean;
   maxLength?: number;
+  hint?: string;
   testID: string;
-}> = ({ label, value, onChange, onSubmit, error, disabled, placeholder, autoComplete, keyboardType, maxLength, testID }) => (
+}> = ({
+  label,
+  value,
+  onChange,
+  onSubmit,
+  error,
+  disabled,
+  placeholder,
+  autoComplete,
+  keyboardType,
+  secureTextEntry,
+  autoFocus = true,
+  maxLength,
+  hint,
+  testID,
+}) => (
   <View style={styles.field}>
     <TextFieldLabel>{label}</TextFieldLabel>
     <TextField invalid={error !== null} disabled={disabled} radius={999} style={styles.input}>
@@ -76,16 +163,17 @@ export const AccountFlowField: React.FC<{
         placeholder={placeholder}
         autoComplete={autoComplete}
         keyboardType={keyboardType}
+        secureTextEntry={secureTextEntry}
         maxLength={maxLength}
         autoCapitalize="none"
         autoCorrect={false}
-        autoFocus
+        autoFocus={autoFocus}
         returnKeyType="go"
         onSubmitEditing={onSubmit}
         aria-required
       />
     </TextField>
-    {error ? <TextFieldHint invalid>{error}</TextFieldHint> : null}
+    {error ? <TextFieldHint invalid>{error}</TextFieldHint> : hint ? <TextFieldHint>{hint}</TextFieldHint> : null}
   </View>
 );
 
@@ -95,17 +183,31 @@ export const AccountFlowAction: React.FC<{
   onPress: () => void;
   pending: boolean;
   disabled?: boolean;
+  destructive?: boolean;
   testID: string;
-}> = ({ label, onPress, pending, disabled, testID }) => (
-  <Button appearance="solid" tone="action" size="lg" fullWidth loading={pending} disabled={pending || disabled} onPress={onPress} testID={testID}>
+}> = ({ label, onPress, pending, disabled, destructive, testID }) => (
+  <Button
+    appearance="solid"
+    tone={destructive ? 'danger' : 'action'}
+    size="lg"
+    fullWidth
+    loading={pending}
+    disabled={pending || disabled}
+    onPress={onPress}
+    testID={testID}
+  >
     {label}
   </Button>
 );
 
 /** A line of body copy under the header. */
-export const AccountFlowNote: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+export const AccountFlowNote: React.FC<{ children: React.ReactNode; testID?: string }> = ({ children, testID }) => {
   const theme = useTheme();
-  return <Text style={[styles.note, { color: theme.colors.textSecondary }]}>{children}</Text>;
+  return (
+    <Text style={[styles.note, { color: theme.colors.textSecondary }]} testID={testID}>
+      {children}
+    </Text>
+  );
 };
 
 /** Why a step failed, where it happened. */
@@ -119,17 +221,18 @@ export const AccountFlowErrorLine: React.FC<{ message: string }> = ({ message })
 };
 
 export interface EmailCodeStepProps {
-  /** What was sent, and where (or, for a recovery, where it may have gone). */
+  /** What was sent, and where. */
   description: string;
   verificationId: string;
-  onConfirmed: (confirmed: EmailVerificationConfirmResponse) => void;
+  /** The code was right. A rejection is reported in place, like a wrong code. */
+  onConfirmed: (confirmed: EmailVerificationConfirmResponse) => void | Promise<void>;
   /** Send a new code; resolves once it is on its way. */
   onResend: () => Promise<void>;
   /** "Use another email" / "Back" — the step before. */
   back: { label: string; onPress: () => void };
 }
 
-/** "Check your email": the 6-digit code a verification sent. */
+/** "Check your email": the 6-digit code an email verification sent. Submits itself once complete. */
 export const EmailCodeStep: React.FC<EmailCodeStepProps> = ({ description, verificationId, onConfirmed, onResend, back }) => {
   const theme = useTheme();
   const { t } = useI18n();
@@ -139,18 +242,19 @@ export const EmailCodeStep: React.FC<EmailCodeStepProps> = ({ description, verif
   const [error, setError] = useState<string | null>(null);
   const [notice, setNotice] = useState<string | null>(null);
 
-  const confirm = () => {
-    const digits = code.replace(/\D/g, '');
-    if (digits.length !== EMAIL_CODE_LENGTH || pending) {
+  const confirm = (typed: string) => {
+    if (pending) return;
+    const digits = typed.replace(/\D/g, '');
+    if (digits.length !== EMAIL_CODE_LENGTH) {
       setError(t('emailCode.errors.codeInvalid'));
       return;
     }
     setError(null);
     setPending(true);
     oxyServices
-      .confirmEmailVerification(verificationId, digits)
+      .auth.email.confirmVerification(verificationId, digits)
       .then(onConfirmed)
-      .catch((reason: unknown) => setError(describeAccountFlowError(reason, t)))
+      .catch((reason: unknown) => setError(describeSignInError(reason, t)))
       .finally(() => setPending(false));
   };
 
@@ -160,7 +264,7 @@ export const EmailCodeStep: React.FC<EmailCodeStepProps> = ({ description, verif
     setCode('');
     onResend()
       .then(() => setNotice(t('emailCode.resent')))
-      .catch((reason: unknown) => setError(describeAccountFlowError(reason, t)));
+      .catch((reason: unknown) => setError(describeSignInError(reason, t)));
   };
 
   return (
@@ -170,10 +274,12 @@ export const EmailCodeStep: React.FC<EmailCodeStepProps> = ({ description, verif
         label={t('emailCode.label')}
         value={code}
         onChange={(value) => {
-          setCode(value);
+          const digits = value.replace(/\D/g, '').slice(0, EMAIL_CODE_LENGTH);
+          setCode(digits);
           if (error) setError(null);
+          if (digits.length === EMAIL_CODE_LENGTH) confirm(digits);
         }}
-        onSubmit={confirm}
+        onSubmit={() => confirm(code)}
         error={error}
         disabled={pending}
         placeholder="000000"
@@ -183,7 +289,7 @@ export const EmailCodeStep: React.FC<EmailCodeStepProps> = ({ description, verif
         testID="email-code"
       />
       {notice ? <Text style={[styles.note, { color: theme.colors.textSecondary }]}>{notice}</Text> : null}
-      <AccountFlowAction label={t('signin.actions.continue')} onPress={confirm} pending={pending} testID="email-code-continue" />
+      <AccountFlowAction label={t('signin.actions.continue')} onPress={() => confirm(code)} pending={pending} testID="email-code-continue" />
       <SubtleLink label={t('emailCode.resend')} theme={theme} onPress={resend} disabled={pending} testID="email-code-resend" />
       <SubtleLink label={back.label} theme={theme} onPress={back.onPress} disabled={pending} testID="email-code-back" />
     </OxyAuthScreen>

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

@@ -0,0 +1,41 @@
+/**
+ * Where the account dialog's sign-in and sign-up screens keep their step while
+ * the dialog is open.
+ *
+ * The dialog is a responsive surface: Bloom renders it as a bottom sheet below
+ * `md` and as a centered card from `md`, two different trees, so crossing the
+ * breakpoint (a resized window, a rotated tablet) remounts the screen inside.
+ * Held in component state, the step went with it: a person on "Two-step
+ * verification" found the dialog back at "Sign in", their emailed code spent.
+ * The step lives here instead, per account-dialog controller, and is dropped
+ * when the dialog closes (`OxyContext`) or the flow ends. In memory only — the
+ * request secret it holds never touches storage.
+ */
+
+const flows = new WeakMap<object, Map<string, unknown>>();
+
+/** The saved state of flow `key` in the dialog `owner` drives, if any. */
+export function readSignInFlow<T>(owner: object | null | undefined, key: string): T | undefined {
+  if (!owner) return undefined;
+  return flows.get(owner)?.get(key) as T | undefined;
+}
+
+/** Save the state of flow `key`; `undefined` drops it. */
+export function writeSignInFlow(owner: object | null | undefined, key: string, value: unknown): void {
+  if (!owner) return;
+  let saved = flows.get(owner);
+  if (value === undefined) {
+    saved?.delete(key);
+    return;
+  }
+  if (!saved) {
+    saved = new Map();
+    flows.set(owner, saved);
+  }
+  saved.set(key, value);
+}
+
+/** Drop every flow the dialog `owner` drives: it closed. */
+export function clearSignInFlows(owner: object | null | undefined): void {
+  if (owner) flows.delete(owner);
+}

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

@@ -1,19 +1,15 @@
 /**
- * Which sign-in methods a surface offers, from where it runs.
+ * Which Commons way in a sign-in surface offers, from where it runs. Every
+ * surface also takes an email or username (`OxySignInPanel`), in place:
  *
- * One screen everywhere, and sign-in happens IN it (ADR 0029 D1):
- *
- *  - the COMMONS way in — on the web the embedded QR (the split card's right
- *    column from `md`, with "Continue with Oxy" below `md`, where the screen
- *    is the phone that would scan it); on native "Continue with Oxy", and
- *    "Get Commons" on a device that has no Commons to continue with;
- *  - the PASSKEY — it belongs to `oxy.so`, so it runs right here on auth.oxy.so
- *    (`page`: the username with its Continue, and the discoverable passkey), and
- *    in an app's dialog on the web it opens auth.oxy.so's window for that one
- *    step (with account creation); native has none, Commons holds the identity.
+ *  - the web: the embedded QR (the split card's right column from `md`, with
+ *    "Continue with Oxy" below `md`, where the screen is the phone that would
+ *    scan it);
+ *  - native: "Continue with Oxy", and "Get Commons" on a device that has no
+ *    Commons to continue with.
  */
 
-import type { CommonsAvailability } from '@oxy.so/core';
+import type { CommonsAvailability } from '@oxy.so/core/session';
 
 /**
  * `qr`          — the web: the embedded QR from `md`, "Continue with Oxy" below.
@@ -23,33 +19,18 @@ import type { CommonsAvailability } from '@oxy.so/core';
  */
 export type CommonsEntry = 'qr' | 'continue' | 'get-commons';
 
-/**
- * `here`   — auth.oxy.so: the username and the passkey run on this page.
- * `window` — an app's dialog on the web: the passkey opens auth.oxy.so's window.
- * `none`   — native.
- */
-export type PasskeyEntry = 'here' | 'window' | 'none';
-
 export interface SignInMethods {
   commons: CommonsEntry;
-  passkey: PasskeyEntry;
 }
 
 export interface SignInSurfaceFacts {
   /** Rendering in a browser (react-native-web), not a native app. */
   web: boolean;
-  /** `page` is auth.oxy.so; `dialog` is an app's account dialog. */
-  host: 'dialog' | 'page';
   /** The controller's native probe for an installed Commons. */
   commonsAvailability: CommonsAvailability;
 }
 
 export function resolveSignInMethods(facts: SignInSurfaceFacts): SignInMethods {
-  if (facts.web) {
-    return { commons: 'qr', passkey: facts.host === 'page' ? 'here' : 'window' };
-  }
-  return {
-    commons: facts.commonsAvailability === 'unavailable' ? 'get-commons' : 'continue',
-    passkey: 'none',
-  };
+  if (facts.web) return { commons: 'qr' };
+  return { commons: facts.commonsAvailability === 'unavailable' ? 'get-commons' : 'continue' };
 }