@oxy.so/services 4.0.7 → 6.1.0

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

@@ -0,0 +1,392 @@
+/**
+ * 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`).
+ *
+ *   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).
+ *
+ * `signInMethods.ts` owns which blocks a platform gets.
+ */
+
+import type React from 'react';
+import { useCallback, useEffect, 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 type { SwitcherContextRow } from '@oxy.so/core';
+import { useQueryClient } from '@tanstack/react-query';
+import { useOxy } from '../../context/OxyContext';
+import { useAccountDialogSnapshot } from '../../hooks/accountDialogSnapshot';
+import { useDeviceSwitcher } from '../../hooks/useDeviceSwitcher';
+import { useI18n } from '../../hooks/useI18n';
+import { getCommonsAcquisitionUrl } from '../../utils/commonsStoreLinks';
+import { isWebBrowser } from '../../utils/isWebBrowser';
+import { SubtleLink } from '../authChooser/primitives';
+import { SIGN_IN_SLIDES } from './artwork';
+import { InlineCommonsQr } from './InlineCommonsQr';
+import { OxyAccountPicker } from './OxyAccountPicker';
+import { OxyAuthScreen, OxyAuthScreenHeader, OxyAuthSplit, OxyAuthTerms } from './OxyAuthScreen';
+import { RATE_LIMIT_SECONDS, describePasskeyError, isRateLimited } from './passkeyError';
+import { resolveSignInMethods } from './signInMethods';
+
+export interface OxySignInPanelProps {
+  /** This screen signed the origin in. */
+  onSignedIn: () => void;
+  /** "New to Oxy? Create one". */
+  onCreateAccount: () => void;
+  /** "Lost your passkey? Recover your account" — auth.oxy.so's page only. */
+  onRecover?: () => void;
+  /** A handle to pre-fill, skipping the picker (a re-authentication). */
+  loginHint?: string;
+  /** The app being continued to, when there is one. */
+  appName?: string | null;
+  /**
+   * `dialog` — inside the account dialog, which the controller closes itself
+   * once a request it runs signs in, and where a request shows in place.
+   * `page`   — a page of its own (auth.oxy.so): a request opens the dialog to
+   * show it, and its completion is reported through `onSignedIn` too.
+   */
+  host?: 'dialog' | 'page';
+}
+
+export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
+  onSignedIn,
+  onCreateAccount,
+  onRecover,
+  loginHint,
+  appName = null,
+  host = 'page',
+}) => {
+  const theme = useTheme();
+  const { t } = useI18n();
+  const queryClient = useQueryClient();
+  const { accountDialogController: controller, openAccountDialog, signInWithPasskey, continueOnAuth } = useOxy();
+  const snapshot = useAccountDialogSnapshot(controller);
+  const { principals, activeContext } = useDeviceSwitcher();
+
+  const methods = resolveSignInMethods({
+    web: isWebBrowser(),
+    host,
+    commonsAvailability: snapshot.commonsAvailability,
+  });
+
+  const [showForm, setShowForm] = useState(Boolean(loginHint));
+  const [identifier, setIdentifier] = useState(loginHint ?? '');
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [rateLimitSeconds, setRateLimitSeconds] = useState(0);
+  const blocked = pending || rateLimitSeconds > 0;
+
+  // The countdown after a 429: one tick a second until the person may retry.
+  useEffect(() => {
+    if (rateLimitSeconds <= 0) return;
+    const timer = setTimeout(() => setRateLimitSeconds((seconds) => Math.max(0, seconds - 1)), 1000);
+    return () => clearTimeout(timer);
+  }, [rateLimitSeconds]);
+
+  // 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.
+  const [mountedAttempt] = useState(snapshot.signIn.attempt);
+  const completedHere = snapshot.signIn.phase === 'completed' && snapshot.signIn.attempt !== mountedAttempt;
+  useEffect(() => {
+    if (host === 'page' && completedHere) onSignedIn();
+  }, [host, completedHere, onSignedIn]);
+
+  /** Show the request a controller call just started — the dialog is where it lives. */
+  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: string | undefined, failToast: string) => {
+    if (blocked) return;
+    setError(null);
+    setPending(true);
+    try {
+      await signInWithPasskey({ username });
+      onSignedIn();
+    } catch (err) {
+      if (isRateLimited(err)) {
+        setRateLimitSeconds(RATE_LIMIT_SECONDS);
+      } else {
+        const message = describePasskeyError(err, t);
+        setError(message);
+        toast.error(failToast, { description: message });
+      }
+    } finally {
+      setPending(false);
+    }
+  };
+  const submitUsername = () => {
+    const username = identifier.trim();
+    if (username) void runPasskey(username, t('signin.errors.failed'));
+    else setError(t('signin.username.required'));
+  };
+
+  // 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: SwitcherContextRow) => {
+    setIdentifier(context.handle ?? '');
+    setShowForm(true);
+  };
+  const selectContext = async (context: SwitcherContextRow) => {
+    const outcome = await controller?.chooseContext(context.contextId).catch(() => 'failed' as const);
+    switch (outcome) {
+      case 'switched':
+        // Every account-scoped query now describes somebody else.
+        void queryClient.invalidateQueries();
+        onSignedIn();
+        return;
+      case 'current':
+        onSignedIn();
+        return;
+      case 'signing-in':
+        // The request for that account is running; it shows where requests do.
+        showRequest();
+        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'));
+        return;
+      default:
+        return;
+    }
+  };
+
+  const showsPicker = pickerAllowed && !showForm && principals.length > 0;
+  // auth.oxy.so's page is the split card from `md`.
+  const splits = methods.commons === 'qr';
+
+  if (showsPicker) {
+    return (
+      <OxyAccountPicker
+        principals={principals}
+        appName={appName}
+        signedOut={!snapshot.hasSession}
+        pendingContextId={snapshot.activatingContextId}
+        isLoading={snapshot.activatingContextId !== null}
+        onSelectContext={(context) => void selectContext(context)}
+        onUseAnother={() => {
+          setIdentifier('');
+          setShowForm(true);
+        }}
+      />
+    );
+  }
+
+  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 = (
+    <Text style={[styles.note, styles.noAccount, { color: theme.colors.textSecondary }]}>
+      {t('signin.noAccount')}{' '}
+      <RNText
+        accessibilityRole="link"
+        onPress={onCreateAccount}
+        style={[styles.noAccountLink, { color: theme.colors.text }]}
+        testID="create-account-link"
+      >
+        {t('signin.createAccount')}
+      </RNText>
+    </Text>
+  );
+  // One solid action per screen: the username's Continue when there is one.
+  const commonsAppearance = methods.passkey ? 'outline' : 'solid';
+
+  const continueWithOxyButton = (
+    <Button
+      appearance={commonsAppearance}
+      tone={commonsAppearance === 'solid' ? 'action' : 'neutral'}
+      size="lg"
+      fullWidth
+      onPress={methods.commons === 'window' ? signInOnOxy : continueWithOxy}
+      testID="continue-with-oxy"
+    >
+      {t('accountSwitcher.continueWithOxy')}
+    </Button>
+  );
+
+  const form = (
+    <OxyAuthScreen className={splits ? 'md:max-w-none' : undefined}>
+      <OxyAuthScreenHeader title={title} description={description} />
+
+      {/* 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 === 'get-commons' ? (
+        <View style={styles.stack}>
+          <Text style={[styles.note, { color: theme.colors.textSecondary }]}>{t('accountSwitcher.commonsNotInstalled')}</Text>
+          <Button appearance="solid" tone="action" size="lg" fullWidth onPress={getCommons} testID="get-commons-button">
+            {t('accountSwitcher.getCommons')}
+          </Button>
+        </View>
+      ) : null}
+
+      {methods.passkey ? (
+        <View style={styles.stack}>
+          <View style={styles.field}>
+            <TextFieldLabel nativeID="username-label">{t('signin.username.label')}</TextFieldLabel>
+            <TextField invalid={shownError !== null} disabled={blocked} radius={999} style={styles.input}>
+              <TextFieldInput
+                testID="username"
+                label={t('signin.username.label')}
+                value={identifier}
+                onValueChange={(value) => {
+                  setIdentifier(value);
+                  if (error) setError(null);
+                }}
+                placeholder={t('signin.username.placeholder')}
+                autoComplete="username"
+                autoCapitalize="none"
+                autoCorrect={false}
+                autoFocus={Platform.OS === 'web'}
+                returnKeyType="go"
+                onSubmitEditing={submitUsername}
+                aria-required
+              />
+            </TextField>
+            {shownError ? <TextFieldHint invalid>{shownError}</TextFieldHint> : null}
+          </View>
+          {noAccount}
+          <Button
+            appearance="solid"
+            tone="action"
+            size="lg"
+            fullWidth
+            loading={pending}
+            disabled={blocked}
+            onPress={submitUsername}
+            testID="username-continue"
+          >
+            {t('signin.actions.continue')}
+          </Button>
+        </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>}
+
+      {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 : (
+        <Button
+          appearance="outline"
+          tone="neutral"
+          size="lg"
+          fullWidth
+          leadingIcon={RiQrCodeLine}
+          onPress={useAnotherDevice}
+          testID="scan-qr"
+        >
+          {t('accountSwitcher.scanQr')}
+        </Button>
+      )}
+
+      {methods.passkey ? null : noAccount}
+      {onRecover ? (
+        <SubtleLink label={t('signin.recoverLink')} theme={theme} onPress={onRecover} testID="recover-link" />
+      ) : null}
+      <OxyAuthTerms />
+    </OxyAuthScreen>
+  );
+
+  if (!splits) return form;
+  return (
+    <OxyAuthSplit
+      aside={
+        <>
+          <AuthMediaCarousel slides={SIGN_IN_SLIDES} style={StyleSheet.absoluteFill} />
+          <InlineCommonsQr controller={controller} />
+        </>
+      }
+    >
+      {form}
+    </OxyAuthSplit>
+  );
+};
+
+const styles = StyleSheet.create({
+  stack: {
+    gap: 12,
+  },
+  field: {
+    gap: 6,
+  },
+  note: {
+    fontSize: 14,
+    lineHeight: 20,
+    textAlign: 'center',
+  },
+  noAccount: {
+    textAlign: 'left',
+  },
+  noAccountLink: {
+    textDecorationLine: 'underline',
+  },
+  input: {
+    height: 40,
+  },
+});

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

@@ -0,0 +1,86 @@
+/**
+ * Account creation in the account dialog.
+ *
+ * On the web the account is made on auth.oxy.so, in its window over the app
+ * (`onCreateOnWeb`), and this app is signed in as it. On native, Commons
+ * creates the identity: straight in when it is installed, "Get Commons"
+ * otherwise.
+ */
+
+import type React from 'react';
+import { useCallback } from 'react';
+import { Linking, Platform } from 'react-native';
+import { Button } from '@oxy.so/bloom/button';
+import { RiKey2Line } from '@oxy.so/bloom/icons/RiKey2Line';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { toast } from '@oxy.so/bloom/toast';
+import { useOxy } from '../../context/OxyContext';
+import { useAccountDialogSnapshot } from '../../hooks/accountDialogSnapshot';
+import { useI18n } from '../../hooks/useI18n';
+import { getCommonsAcquisitionUrl } from '../../utils/commonsStoreLinks';
+import { isWebBrowser } from '../../utils/isWebBrowser';
+import { SubtleLink } from '../authChooser/primitives';
+import { OxyAuthScreen, OxyAuthScreenHeader, OxyAuthTerms } from './OxyAuthScreen';
+
+/** Commons' own identity-creation deep link. */
+const COMMONS_CREATE_IDENTITY_URL = 'oxycommons://create-identity';
+
+export interface OxySignUpPanelProps {
+  /** "Already have an account? Sign in". */
+  onSignIn: () => void;
+  /** The web's one action: auth.oxy.so's sign-up, in its window. */
+  onCreateOnWeb: () => void;
+}
+
+export const OxySignUpPanel: React.FC<OxySignUpPanelProps> = ({ onSignIn, onCreateOnWeb }) => {
+  const theme = useTheme();
+  const { t } = useI18n();
+  const { accountDialogController: controller } = useOxy();
+  const snapshot = useAccountDialogSnapshot(controller);
+  const web = isWebBrowser();
+
+  const openExternal = useCallback(
+    (url: string) => {
+      Promise.resolve()
+        .then(() => Linking.openURL(url))
+        .catch(() => toast.error(t('accountSwitcher.linkOpenFailed')));
+    },
+    [t],
+  );
+
+  const commonsInstalled = snapshot.commonsAvailability === 'available';
+
+  return (
+    <OxyAuthScreen>
+      <OxyAuthScreenHeader title={t('signup.title')} description={web ? t('signup.webSubtitle') : t('signup.subtitle')} />
+      {web ? (
+        <Button
+          appearance="solid"
+          tone="action"
+          size="lg"
+          fullWidth
+          leadingIcon={RiKey2Line}
+          onPress={onCreateOnWeb}
+          testID="signup-open-identity"
+        >
+          {t('signup.createAccount')}
+        </Button>
+      ) : (
+        <Button
+          appearance="solid"
+          tone="action"
+          size="lg"
+          fullWidth
+          onPress={() =>
+            openExternal(commonsInstalled ? COMMONS_CREATE_IDENTITY_URL : getCommonsAcquisitionUrl(Platform.OS))
+          }
+          testID="signup-commons"
+        >
+          {commonsInstalled ? t('signup.createInCommons') : t('accountSwitcher.getCommons')}
+        </Button>
+      )}
+      <SubtleLink label={t('signup.backToSignInLink')} theme={theme} onPress={onSignIn} testID="back-to-sign-in" />
+      <OxyAuthTerms />
+    </OxyAuthScreen>
+  );
+};

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

@@ -0,0 +1,204 @@
+/**
+ * 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.
+ */
+
+import type React from 'react';
+import { useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+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 { 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';
+
+/** The API error code a thrown SDK error carries (`error.code`), if any. */
+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 {
+  switch (errorCode(error)) {
+    case EMAIL_VERIFICATION_ERROR_CODES.codeInvalid:
+      return t('emailCode.errors.codeInvalid');
+    case EMAIL_VERIFICATION_ERROR_CODES.tooManyAttempts:
+      return t('emailCode.errors.tooManyAttempts');
+    case EMAIL_VERIFICATION_ERROR_CODES.ticketInvalid:
+    case EMAIL_VERIFICATION_ERROR_CODES.ticketRequired:
+      return t('emailCode.errors.expired');
+    case EMAIL_VERIFICATION_ERROR_CODES.unavailable:
+      return t('emailCode.errors.unavailable');
+    default:
+      if (isRateLimited(error)) return t('emailCode.errors.rateLimited');
+      return describePasskeyError(error, t);
+  }
+}
+
+/** Whether the confirmation this flow holds is gone and it must start again. */
+export function isTicketExpired(error: unknown): boolean {
+  const code = errorCode(error);
+  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. */
+export const AccountFlowField: React.FC<{
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit: () => void;
+  error: string | null;
+  disabled?: boolean;
+  placeholder?: string;
+  autoComplete?: 'username' | 'email' | 'one-time-code' | 'off';
+  keyboardType?: 'default' | 'email-address' | 'number-pad';
+  maxLength?: number;
+  testID: string;
+}> = ({ label, value, onChange, onSubmit, error, disabled, placeholder, autoComplete, keyboardType, maxLength, testID }) => (
+  <View style={styles.field}>
+    <TextFieldLabel>{label}</TextFieldLabel>
+    <TextField invalid={error !== null} disabled={disabled} radius={999} style={styles.input}>
+      <TextFieldInput
+        testID={testID}
+        label={label}
+        value={value}
+        onValueChange={onChange}
+        placeholder={placeholder}
+        autoComplete={autoComplete}
+        keyboardType={keyboardType}
+        maxLength={maxLength}
+        autoCapitalize="none"
+        autoCorrect={false}
+        autoFocus
+        returnKeyType="go"
+        onSubmitEditing={onSubmit}
+        aria-required
+      />
+    </TextField>
+    {error ? <TextFieldHint invalid>{error}</TextFieldHint> : null}
+  </View>
+);
+
+/** The screen's one primary action. */
+export const AccountFlowAction: React.FC<{
+  label: string;
+  onPress: () => void;
+  pending: boolean;
+  disabled?: 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}
+  </Button>
+);
+
+/** A line of body copy under the header. */
+export const AccountFlowNote: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const theme = useTheme();
+  return <Text style={[styles.note, { color: theme.colors.textSecondary }]}>{children}</Text>;
+};
+
+/** Why a step failed, where it happened. */
+export const AccountFlowErrorLine: React.FC<{ message: string }> = ({ message }) => {
+  const theme = useTheme();
+  return (
+    <Text accessibilityRole="alert" style={[styles.note, { color: theme.colors.error }]}>
+      {message}
+    </Text>
+  );
+};
+
+export interface EmailCodeStepProps {
+  /** What was sent, and where (or, for a recovery, where it may have gone). */
+  description: string;
+  verificationId: string;
+  onConfirmed: (confirmed: EmailVerificationConfirmResponse) => 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. */
+export const EmailCodeStep: React.FC<EmailCodeStepProps> = ({ description, verificationId, onConfirmed, onResend, back }) => {
+  const theme = useTheme();
+  const { t } = useI18n();
+  const { oxyServices } = useOxy();
+  const [code, setCode] = useState('');
+  const [pending, setPending] = useState(false);
+  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) {
+      setError(t('emailCode.errors.codeInvalid'));
+      return;
+    }
+    setError(null);
+    setPending(true);
+    oxyServices
+      .confirmEmailVerification(verificationId, digits)
+      .then(onConfirmed)
+      .catch((reason: unknown) => setError(describeAccountFlowError(reason, t)))
+      .finally(() => setPending(false));
+  };
+
+  const resend = () => {
+    setError(null);
+    setNotice(null);
+    setCode('');
+    onResend()
+      .then(() => setNotice(t('emailCode.resent')))
+      .catch((reason: unknown) => setError(describeAccountFlowError(reason, t)));
+  };
+
+  return (
+    <OxyAuthScreen>
+      <OxyAuthScreenHeader title={t('emailCode.title')} description={description} />
+      <AccountFlowField
+        label={t('emailCode.label')}
+        value={code}
+        onChange={(value) => {
+          setCode(value);
+          if (error) setError(null);
+        }}
+        onSubmit={confirm}
+        error={error}
+        disabled={pending}
+        placeholder="000000"
+        autoComplete="one-time-code"
+        keyboardType="number-pad"
+        maxLength={EMAIL_CODE_LENGTH}
+        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" />
+      <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>
+  );
+};
+
+const styles = StyleSheet.create({
+  field: {
+    gap: 6,
+  },
+  input: {
+    height: 40,
+  },
+  note: {
+    fontSize: 16,
+    lineHeight: 24,
+  },
+});

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

@@ -0,0 +1,13 @@
+/**
+ * The photos the sign-in split card's carousel turns through. Shipped with the
+ * SDK and imported like its icon fonts, so every host serves them from its own
+ * origin — nothing to allow in anyone's CSP.
+ */
+
+import type { AuthMediaSlide } from '@oxy.so/bloom/auth-card';
+import slide1 from '../../../assets/signIn/slide-1.jpg';
+import slide2 from '../../../assets/signIn/slide-2.jpg';
+import slide3 from '../../../assets/signIn/slide-3.jpg';
+import slide4 from '../../../assets/signIn/slide-4.jpg';
+
+export const SIGN_IN_SLIDES: AuthMediaSlide[] = [slide1, slide2, slide3, slide4].map((source) => ({ source }));