@oxy.so/services 6.1.0 → 8.0.0

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

@@ -1,19 +1,22 @@
 /**
- * Account creation in the account dialog.
+ * Creating an Oxy account, in the account dialog of every app (web and native)
+ * and on auth.oxy.so's `/login`:
  *
- * 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.
+ *   username → email → the code sent to it → signed in
+ *
+ * The email is confirmed before the account exists, and it is how the account
+ * signs in (a code or a link each time). A password and an authenticator app
+ * are added later, in the account's security settings. Commons stays the way to
+ * hold your own key: "Create it in Commons instead" — and linking Commons later
+ * makes the account self-custodied and deletes the email.
  */
 
 import type React from 'react';
-import { useCallback } from 'react';
+import { useEffect, useState } 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 { SIGN_IN_ERROR_CODES, emailAddressSchema, type EmailVerificationConfirmResponse } from '@oxy.so/contracts';
 import { useOxy } from '../../context/OxyContext';
 import { useAccountDialogSnapshot } from '../../hooks/accountDialogSnapshot';
 import { useI18n } from '../../hooks/useI18n';
@@ -21,66 +24,193 @@ import { getCommonsAcquisitionUrl } from '../../utils/commonsStoreLinks';
 import { isWebBrowser } from '../../utils/isWebBrowser';
 import { SubtleLink } from '../authChooser/primitives';
 import { OxyAuthScreen, OxyAuthScreenHeader, OxyAuthTerms } from './OxyAuthScreen';
+import { readSignInFlow, writeSignInFlow } from './signInFlowStore';
+import {
+  AccountFlowAction,
+  AccountFlowField,
+  AccountFlowNote,
+  EmailCodeStep,
+  describeSignInError,
+  errorCode,
+  isTicketExpired,
+} from './accountFlowParts';
 
 /** Commons' own identity-creation deep link. */
 const COMMONS_CREATE_IDENTITY_URL = 'oxycommons://create-identity';
 
+type Step = { name: 'username' } | { name: 'email' } | { name: 'code'; verificationId: string };
+
 export interface OxySignUpPanelProps {
+  /** The account exists and this origin is signed in as it. */
+  onSignedIn: () => void;
   /** "Already have an account? Sign in". */
   onSignIn: () => void;
-  /** The web's one action: auth.oxy.so's sign-up, in its window. */
-  onCreateOnWeb: () => void;
+  /**
+   * `dialog` — inside the account dialog, where the step outlives a remount of
+   * this screen (`signInFlowStore`). `page` — a page of its own.
+   */
+  host?: 'dialog' | 'page';
 }
 
-export const OxySignUpPanel: React.FC<OxySignUpPanelProps> = ({ onSignIn, onCreateOnWeb }) => {
+/** What the dialog keeps of this screen across a remount. */
+interface SavedSignUpFlow {
+  step: Step;
+  username: string;
+  email: string;
+}
+const SIGN_UP_FLOW_KEY = 'signup';
+
+export const OxySignUpPanel: React.FC<OxySignUpPanelProps> = ({ onSignedIn, onSignIn, host = 'page' }) => {
   const theme = useTheme();
   const { t } = useI18n();
-  const { accountDialogController: controller } = useOxy();
-  const snapshot = useAccountDialogSnapshot(controller);
-  const web = isWebBrowser();
+  const { oxyServices, handleWebSession, accountDialogController } = useOxy();
+  const snapshot = useAccountDialogSnapshot(accountDialogController);
+  const flowOwner = host === 'dialog' ? accountDialogController : null;
+  const [saved] = useState(() => readSignInFlow<SavedSignUpFlow>(flowOwner, SIGN_UP_FLOW_KEY));
+  const [step, setStep] = useState<Step>(saved?.step ?? { name: 'username' });
+  const [username, setUsername] = useState(saved?.username ?? '');
+  const [email, setEmail] = useState(saved?.email ?? '');
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    writeSignInFlow(flowOwner, SIGN_UP_FLOW_KEY, { step, username, email } satisfies SavedSignUpFlow);
+  }, [flowOwner, step, username, email]);
 
-  const openExternal = useCallback(
-    (url: string) => {
-      Promise.resolve()
-        .then(() => Linking.openURL(url))
-        .catch(() => toast.error(t('accountSwitcher.linkOpenFailed')));
-    },
-    [t],
-  );
+  const run = (work: () => Promise<void>) => {
+    if (pending) return;
+    setError(null);
+    setPending(true);
+    work()
+      .catch((reason: unknown) => {
+        if (isTicketExpired(reason)) setStep({ name: 'email' });
+        setError(reason instanceof UsernameTakenError ? t('signup.username.taken') : describeSignInError(reason, t));
+      })
+      .finally(() => setPending(false));
+  };
 
-  const commonsInstalled = snapshot.commonsAvailability === 'available';
+  const submitUsername = () => {
+    const handle = username.trim();
+    if (!handle) {
+      setError(t('signup.username.required'));
+      return;
+    }
+    run(async () => {
+      const { available } = await oxyServices.auth.checkUsername(handle);
+      if (!available) throw new UsernameTakenError();
+      setStep({ name: 'email' });
+    });
+  };
 
-  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>
-  );
+  const sendCode = async (address: string) => {
+    const { verificationId } = await oxyServices.auth.email.startVerification({ purpose: 'signup', email: address });
+    setStep({ name: 'code', verificationId });
+  };
+
+  const submitEmail = () => {
+    const parsed = emailAddressSchema.safeParse(email);
+    if (!parsed.success) {
+      setError(t('signup.email.invalid'));
+      return;
+    }
+    setEmail(parsed.data);
+    run(() => sendCode(parsed.data));
+  };
+
+  // The code step reports this promise's failure in place.
+  const createAccount = async ({ ticket }: EmailVerificationConfirmResponse): Promise<void> => {
+    try {
+      const session = await oxyServices.auth.signUp({ username: username.trim(), email, emailTicket: ticket });
+      await handleWebSession(session);
+      writeSignInFlow(flowOwner, SIGN_UP_FLOW_KEY, undefined);
+    } catch (reason) {
+      if (errorCode(reason) === SIGN_IN_ERROR_CODES.usernameTaken) {
+        setStep({ name: 'username' });
+        setError(t('signup.username.taken'));
+        return;
+      }
+      if (isTicketExpired(reason)) {
+        setStep({ name: 'email' });
+        setError(describeSignInError(reason, t));
+        return;
+      }
+      throw reason;
+    }
+    onSignedIn();
+  };
+
+  const createInCommons = () => {
+    const url =
+      !isWebBrowser() && snapshot.commonsAvailability === 'available'
+        ? COMMONS_CREATE_IDENTITY_URL
+        : getCommonsAcquisitionUrl(Platform.OS);
+    Promise.resolve()
+      .then(() => Linking.openURL(url))
+      .catch(() => toast.error(t('accountSwitcher.linkOpenFailed')));
+  };
+
+  switch (step.name) {
+    case 'code':
+      return (
+        <EmailCodeStep
+          description={t('emailCode.sentTo', { email })}
+          verificationId={step.verificationId}
+          onConfirmed={createAccount}
+          onResend={() => sendCode(email)}
+          back={{ label: t('emailCode.changeEmail'), onPress: () => setStep({ name: 'email' }) }}
+        />
+      );
+    case 'email':
+      return (
+        <OxyAuthScreen>
+          <OxyAuthScreenHeader title={t('signup.email.title')} description={t('signup.email.subtitle')} />
+          <AccountFlowField
+            label={t('signup.email.label')}
+            value={email}
+            onChange={(value) => {
+              setEmail(value);
+              if (error) setError(null);
+            }}
+            onSubmit={submitEmail}
+            error={error}
+            disabled={pending}
+            placeholder={t('signup.email.placeholder')}
+            autoComplete="email"
+            keyboardType="email-address"
+            testID="signup-email"
+          />
+          <AccountFlowNote>{t('signup.laterNote')}</AccountFlowNote>
+          <AccountFlowAction label={t('signin.actions.continue')} onPress={submitEmail} pending={pending} testID="signup-email-continue" />
+          <SubtleLink label={t('signin.actions.back')} theme={theme} onPress={() => setStep({ name: 'username' })} testID="signup-back" />
+          <OxyAuthTerms />
+        </OxyAuthScreen>
+      );
+    default:
+      return (
+        <OxyAuthScreen>
+          <OxyAuthScreenHeader title={t('signup.title')} description={t('signup.subtitle')} />
+          <AccountFlowField
+            label={t('signup.username.label')}
+            value={username}
+            onChange={(value) => {
+              setUsername(value);
+              if (error) setError(null);
+            }}
+            onSubmit={submitUsername}
+            error={error}
+            disabled={pending}
+            placeholder={t('signup.username.placeholder')}
+            autoComplete="username"
+            testID="signup-username"
+          />
+          <AccountFlowAction label={t('signin.actions.continue')} onPress={submitUsername} pending={pending} testID="signup-username-continue" />
+          <SubtleLink label={t('signup.createInCommons')} theme={theme} onPress={createInCommons} testID="signup-commons-instead" />
+          <SubtleLink label={t('signup.backToSignInLink')} theme={theme} onPress={onSignIn} testID="back-to-sign-in" />
+          <OxyAuthTerms />
+        </OxyAuthScreen>
+      );
+  }
 };
+
+/** The username was taken between typing it and creating the account. */
+class UsernameTakenError extends Error {}

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

@@ -0,0 +1,201 @@
+/**
+ * "Confirm it's you": the fresh proof a sensitive change carries (`reauth`) —
+ * a code sent to the account's email for THIS change, or the current password
+ * where the change accepts one — plus the authenticator's code (or a backup
+ * code) when the account has one. The screen that needs it puts its own fields
+ * above (`children`) and names its own action; this owns the proof.
+ */
+
+import type React from 'react';
+import { useState } from 'react';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { EMAIL_CODE_LENGTH, type ReauthAction, type ReauthProof } from '@oxy.so/contracts';
+import { useOxy } from '../../context/OxyContext';
+import { useI18n } from '../../hooks/useI18n';
+import { SubtleLink } from '../authChooser/primitives';
+import { OxyAuthScreen, OxyAuthScreenHeader } from './OxyAuthScreen';
+import {
+  AccountFlowAction,
+  AccountFlowErrorLine,
+  AccountFlowField,
+  AccountFlowNote,
+  describeSignInError,
+} from './accountFlowParts';
+
+export interface ReauthStepProps {
+  title: string;
+  description?: string;
+  /** The change the emailed code is for: it works for nothing else. */
+  action: ReauthAction;
+  /** The account has a password, and this change accepts it. */
+  allowPassword?: boolean;
+  /** The account has an authenticator: its code is required too. */
+  totpEnabled: boolean;
+  /** The screen's action, once the proof is ready. */
+  submitLabel: string;
+  destructive?: boolean;
+  /** The screen's own fields, checked before anything is sent. */
+  validate?: () => string | null;
+  /** Make the change with the proof. A rejection is reported in place. */
+  onSubmit: (proof: ReauthProof) => Promise<void>;
+  /** A way out (Cancel / Back). */
+  secondary?: { label: string; onPress: () => void };
+  children?: React.ReactNode;
+}
+
+export const ReauthStep: React.FC<ReauthStepProps> = ({
+  title,
+  description,
+  action,
+  allowPassword = false,
+  totpEnabled,
+  submitLabel,
+  destructive,
+  validate,
+  onSubmit,
+  secondary,
+  children,
+}) => {
+  const theme = useTheme();
+  const { t } = useI18n();
+  const { oxyServices } = useOxy();
+  const [mode, setMode] = useState<'email' | 'password'>(allowPassword ? 'password' : 'email');
+  const [verificationId, setVerificationId] = useState<string | null>(null);
+  const [emailCode, setEmailCode] = useState('');
+  const [password, setPassword] = useState('');
+  const [totpCode, setTotpCode] = useState('');
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const run = (work: () => Promise<void>) => {
+    if (pending) return;
+    setError(null);
+    setPending(true);
+    work()
+      .catch((reason: unknown) => setError(describeSignInError(reason, t)))
+      .finally(() => setPending(false));
+  };
+
+  const sendCode = () =>
+    run(async () => {
+      const started = await oxyServices.auth.requestReauthCode(action);
+      setEmailCode('');
+      setVerificationId(started.verificationId);
+    });
+
+  const submit = () => {
+    const invalid = validate?.() ?? null;
+    if (invalid) {
+      setError(invalid);
+      return;
+    }
+    if (mode === 'email' && !verificationId) {
+      sendCode();
+      return;
+    }
+    const totp = totpCode.trim();
+    if (totpEnabled && !totp) {
+      setError(t('reauth.errors.totpRequired'));
+      return;
+    }
+    let proof: ReauthProof;
+    if (mode === 'password') {
+      if (!password) {
+        setError(t('signin.password.required'));
+        return;
+      }
+      proof = { password, ...(totp ? { totpCode: totp } : {}) };
+    } else {
+      const code = emailCode.replace(/\D/g, '');
+      if (code.length !== EMAIL_CODE_LENGTH || !verificationId) {
+        setError(t('emailCode.errors.codeInvalid'));
+        return;
+      }
+      proof = { emailCode: { verificationId, code }, ...(totp ? { totpCode: totp } : {}) };
+    }
+    run(() => onSubmit(proof));
+  };
+
+  const needsCode = mode === 'email' && !verificationId;
+
+  return (
+    <OxyAuthScreen>
+      <OxyAuthScreenHeader title={title} description={description} />
+      {children}
+      {mode === 'password' ? (
+        <AccountFlowField
+          label={t('reauth.passwordLabel')}
+          value={password}
+          onChange={setPassword}
+          onSubmit={submit}
+          error={null}
+          disabled={pending}
+          autoComplete="current-password"
+          secureTextEntry
+          autoFocus={false}
+          testID="reauth-password"
+        />
+      ) : verificationId ? (
+        <>
+          <AccountFlowNote>{t('reauth.codeSent')}</AccountFlowNote>
+          <AccountFlowField
+            label={t('reauth.codeLabel')}
+            value={emailCode}
+            onChange={(value) => setEmailCode(value.replace(/\D/g, '').slice(0, EMAIL_CODE_LENGTH))}
+            onSubmit={submit}
+            error={null}
+            disabled={pending}
+            placeholder="000000"
+            autoComplete="one-time-code"
+            keyboardType="number-pad"
+            maxLength={EMAIL_CODE_LENGTH}
+            testID="reauth-code"
+          />
+        </>
+      ) : (
+        <AccountFlowNote>{t('reauth.emailDescription')}</AccountFlowNote>
+      )}
+      {totpEnabled && !needsCode ? (
+        <AccountFlowField
+          label={t('reauth.totpLabel')}
+          value={totpCode}
+          onChange={setTotpCode}
+          onSubmit={submit}
+          error={null}
+          disabled={pending}
+          placeholder="000000"
+          autoComplete="one-time-code"
+          autoFocus={false}
+          maxLength={11}
+          testID="reauth-totp"
+        />
+      ) : null}
+      {error ? <AccountFlowErrorLine message={error} /> : null}
+      <AccountFlowAction
+        label={needsCode ? t('reauth.sendCode') : submitLabel}
+        onPress={submit}
+        pending={pending}
+        destructive={destructive && !needsCode}
+        testID={needsCode ? 'reauth-send-code' : 'reauth-submit'}
+      />
+      {mode === 'email' && verificationId ? (
+        <SubtleLink label={t('emailCode.resend')} theme={theme} onPress={sendCode} disabled={pending} testID="reauth-resend" />
+      ) : null}
+      {allowPassword ? (
+        <SubtleLink
+          label={mode === 'password' ? t('reauth.useEmail') : t('reauth.usePassword')}
+          theme={theme}
+          onPress={() => {
+            setError(null);
+            setMode(mode === 'password' ? 'email' : 'password');
+          }}
+          disabled={pending}
+          testID="reauth-switch-method"
+        />
+      ) : null}
+      {secondary ? (
+        <SubtleLink label={secondary.label} theme={theme} onPress={secondary.onPress} disabled={pending} testID="reauth-cancel" />
+      ) : null}
+    </OxyAuthScreen>
+  );
+};