@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/auth/SignInScreen.jsx

@@ -0,0 +1,482 @@
+import { c as _c } from "react/compiler-runtime";
+import { useRef, useState } from "react";
+import { Text, View } from "react-native";
+import { useSignIn, useSignUp } from "@clerk/clerk-expo";
+import { useRouter } from "expo-router";
+import { Button } from "../Button";
+import { textStyle } from "../controlStyles";
+import { Input } from "../Input";
+import { PasswordInput } from "../PasswordInput";
+import { toast } from "../toastStore";
+import { useScheme } from "../useScheme";
+import { AuthScreen, FieldError, OrDivider } from "./AuthScreen";
+import { authErrorMessage, DEFAULT_STAGE_TIMEOUT_MS, isAuthTimeoutError, logAuthFailure, withAuthTimeout } from "./authErrors";
+import { SecondFactorScreen } from "./SecondFactorScreen";
+import { pickFirstFactorStrategy, pickSecondFactorStrategy, prepareFirstFactorIfNeeded, submitFirstFactor, supportedFirstFactorStrategies, supportedSecondFactorStrategies, useSecondFactor } from "./totp";
+import { GoogleSignInButton } from "./GoogleSignInButton";
+/** The messages the screen can show. Generic: none names a provider. */
+export const AUTH_MESSAGES = {
+  missingFields: "Enter your email and password",
+  signInFailed: "Sign in failed",
+  invalidCredentials: "Invalid email or password",
+  signUpFailed: "Could not create account",
+  verifyFailed: "Invalid code",
+  missingCode: "Enter the code from the email",
+  needsAnotherStep: "This account needs another step to sign in. Finish it on the web.",
+  secondFactorTitle: "Two-step verification",
+  secondFactorDescription: "Enter the code from your authenticator app.",
+  emailCodeTitle: "Check your email",
+  emailCodeDescription: "Enter the code we sent to your email.",
+  phoneCodeTitle: "Check your phone",
+  phoneCodeDescription: "Enter the code we sent by text message.",
+  backupCodeTitle: "Enter a backup code",
+  backupCodeDescription: "Use one of the backup codes you saved when you set up two-step verification.",
+  clientTrustTitle: "Verify it's you",
+  clientTrustEmailDescription: "This device is new. Enter the code we sent to your email.",
+  clientTrustPhoneDescription: "This device is new. Enter the code we sent by text message.",
+  useBackupCode: "Use a backup code",
+  useAuthenticator: "Use authenticator app",
+  useEmailCode: "Email me a code",
+  usePhoneCode: "Text me a code",
+  newPasswordTitle: "Set a new password",
+  newPasswordDescription: "Your password must change before you can sign in.",
+  newPasswordLabel: "New password",
+  confirmPasswordLabel: "Confirm new password",
+  passwordMismatch: "The passwords do not match",
+  passwordTooShort: "Use a longer password",
+  resetPasswordFailed: "Could not set the new password",
+  setPassword: "Set password"
+};
+
+/**
+ * A sign-in that is not complete, as `signIn.create` returns it. Passed to
+ * `onIncomplete` so the app can run the step itself.
+ */
+
+const METHOD_LABEL = {
+  totp: AUTH_MESSAGES.useAuthenticator,
+  email_code: AUTH_MESSAGES.useEmailCode,
+  phone_code: AUTH_MESSAGES.usePhoneCode,
+  backup_code: AUTH_MESSAGES.useBackupCode
+};
+function secondFactorCopy(strategy, clientTrust) {
+  if (strategy === "email_code") {
+    return clientTrust ? {
+      title: AUTH_MESSAGES.clientTrustTitle,
+      description: AUTH_MESSAGES.clientTrustEmailDescription
+    } : {
+      title: AUTH_MESSAGES.emailCodeTitle,
+      description: AUTH_MESSAGES.emailCodeDescription
+    };
+  }
+  if (strategy === "phone_code") {
+    return clientTrust ? {
+      title: AUTH_MESSAGES.clientTrustTitle,
+      description: AUTH_MESSAGES.clientTrustPhoneDescription
+    } : {
+      title: AUTH_MESSAGES.phoneCodeTitle,
+      description: AUTH_MESSAGES.phoneCodeDescription
+    };
+  }
+  if (strategy === "backup_code") {
+    return {
+      title: AUTH_MESSAGES.backupCodeTitle,
+      description: AUTH_MESSAGES.backupCodeDescription
+    };
+  }
+  return {
+    title: AUTH_MESSAGES.secondFactorTitle,
+    description: AUTH_MESSAGES.secondFactorDescription
+  };
+}
+/**
+ * Email and password, and Google, sign-in or sign-up. Sign-up sends an email
+ * code and checks it before the session starts. On success it calls
+ * `onSuccess`, or `router.replace(afterAuthHref, replaceOptions)`.
+ *
+ * Forgot-password is not here: an app that needs it keeps its own screen.
+ */
+export function SignInScreen({
+  mode = "sign-in",
+  title,
+  subtitle,
+  scheme,
+  redirectPath,
+  afterAuthHref = "/",
+  replaceOptions,
+  onSuccess,
+  showGoogle = true,
+  googleLabel,
+  signUpHref,
+  signInHref,
+  minPasswordLength,
+  errorDisplay = "toast",
+  testIDPrefix,
+  header,
+  footer,
+  onIncomplete,
+  stageTimeoutMs = DEFAULT_STAGE_TIMEOUT_MS
+}) {
+  const signInState = useSignIn();
+  const signUpState = useSignUp();
+  const router = useRouter();
+  const colorScheme = useScheme();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [code, setCode] = useState("");
+  const [pendingVerification, setPendingVerification] = useState(false);
+  const [pendingSecondFactor, setPendingSecondFactor] = useState(false);
+  const [pendingFirstFactor, setPendingFirstFactor] = useState(false);
+  const [firstFactors, setFirstFactors] = useState([]);
+  const [firstStrategy, setFirstStrategy] = useState("email_code");
+  const [firstLoading, setFirstLoading] = useState(false);
+  const [firstError, setFirstError] = useState("");
+  const [factors, setFactors] = useState([]);
+  const [clientTrust, setClientTrust] = useState(false);
+  const [pendingNewPassword, setPendingNewPassword] = useState(false);
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const secondFactor = useSecondFactor({
+    stageTimeoutMs
+  });
+  const [error, setError] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  // The field each "next" key moves to.
+  const passwordField = useRef(null);
+  const confirmField = useRef(null);
+  const signUp = mode === "sign-up";
+  const id = name => `${testIDPrefix ?? mode}-${name}`;
+  const fail = (heading, message) => {
+    if (errorDisplay === "inline") setError(message);else toast.error(heading, message === heading ? undefined : {
+      description: message
+    });
+  };
+  const done = () => {
+    if (onSuccess) onSuccess();else router.replace(afterAuthHref, replaceOptions);
+  };
+  const warnIncomplete = attempt => {
+    console.warn(`[native-ui] Sign-in not complete: status=${attempt.status}, ` + `secondFactors=${JSON.stringify((attempt.supportedSecondFactors ?? []).map(f => f.strategy))}, ` + `firstFactors=${JSON.stringify((attempt.supportedFirstFactors ?? []).map(f_0 => f_0.strategy))}. ` + "Pass onIncomplete to handle it in the app.");
+  };
+
+  // A status the built-in UI cannot finish: the app's `onIncomplete`, or the web fallback.
+  const unhandled = attempt_0 => {
+    if (onIncomplete) return onIncomplete(attempt_0);
+    warnIncomplete(attempt_0);
+    fail(AUTH_MESSAGES.signInFailed, AUTH_MESSAGES.needsAnotherStep);
+  };
+  const chooseStrategy = async (strategy, list) => {
+    secondFactor.clearError();
+    secondFactor.setStrategy(strategy);
+    setPendingSecondFactor(true);
+    await secondFactor.prepare(strategy, list.find(factor => factor.strategy === strategy));
+  };
+  const startSecondFactor = async (attempt_1, trust) => {
+    const list_0 = attempt_1.supportedSecondFactors ?? [];
+    const strategy_0 = pickSecondFactorStrategy(list_0);
+    if (!strategy_0) return unhandled(attempt_1);
+    setFactors(list_0);
+    setClientTrust(trust);
+    await chooseStrategy(strategy_0, list_0);
+  };
+  const chooseFirstStrategy = async (strategy_1, list_1) => {
+    const {
+      signIn
+    } = signInState;
+    if (!signIn) return;
+    setFirstError("");
+    setFirstStrategy(strategy_1);
+    setPendingFirstFactor(true);
+    setFirstLoading(true);
+    const sent = await prepareFirstFactorIfNeeded({
+      signIn,
+      strategy: strategy_1,
+      factor: list_1.find(factor_0 => factor_0.strategy === strategy_1),
+      timeoutMs: stageTimeoutMs
+    });
+    if (!sent.ok) setFirstError(sent.error);
+    setFirstLoading(false);
+  };
+  const startFirstFactor = async attempt_2 => {
+    const list_2 = attempt_2.supportedFirstFactors ?? [];
+    const strategy_2 = pickFirstFactorStrategy(list_2);
+    if (!strategy_2) return unhandled(attempt_2);
+    setFirstFactors(list_2);
+    await chooseFirstStrategy(strategy_2, list_2);
+  };
+
+  // Routes a sign-in attempt. `needs_first_factor` is built in only after `signIn.create`.
+  const routeAttempt = async (attempt_3, afterCreate) => {
+    const {
+      setActive
+    } = signInState;
+    // Clerk's `SignInStatus` omits `needs_client_trust`: widen before comparing.
+    const status = attempt_3.status;
+    if (status === "complete" && attempt_3.createdSessionId && setActive) {
+      await withAuthTimeout(setActive({
+        session: attempt_3.createdSessionId
+      }), "set-active", stageTimeoutMs);
+      done();
+    } else if (status === "needs_new_password") {
+      setPendingFirstFactor(false);
+      setPendingNewPassword(true);
+    } else if (status === "needs_second_factor" || status === "needs_client_trust") {
+      setPendingFirstFactor(false);
+      await startSecondFactor(attempt_3, status === "needs_client_trust");
+    } else if (status === "needs_first_factor" && afterCreate) {
+      await startFirstFactor(attempt_3);
+    } else {
+      unhandled(attempt_3);
+    }
+  };
+  const onFirstFactor = async firstCode => {
+    const {
+      isLoaded,
+      signIn: signIn_0
+    } = signInState;
+    if (!isLoaded || !signIn_0 || firstLoading) return;
+    setFirstLoading(true);
+    setFirstError("");
+    const result = await submitFirstFactor({
+      signIn: signIn_0,
+      code: firstCode,
+      strategy: firstStrategy,
+      timeoutMs: stageTimeoutMs
+    });
+    if (!result.ok) {
+      setFirstError(result.error);
+      setFirstLoading(false);
+      return;
+    }
+    try {
+      await routeAttempt(result.attempt, false);
+    } catch (caught) {
+      if (isAuthTimeoutError(caught)) logAuthFailure("set-active", caught);
+      setFirstError(authErrorMessage(caught, AUTH_MESSAGES.verifyFailed));
+    } finally {
+      setFirstLoading(false);
+    }
+  };
+  const onNewPassword = async () => {
+    const {
+      isLoaded: isLoaded_0,
+      signIn: signIn_1,
+      setActive: setActive_0
+    } = signInState;
+    if (!isLoaded_0 || !signIn_1 || !setActive_0 || submitting) return;
+    if (!newPassword) return fail(AUTH_MESSAGES.resetPasswordFailed, AUTH_MESSAGES.missingFields);
+    if (minPasswordLength && newPassword.length < minPasswordLength) {
+      return fail(AUTH_MESSAGES.resetPasswordFailed, `Use at least ${minPasswordLength} characters for the password`);
+    }
+    if (newPassword !== confirmPassword) {
+      return fail(AUTH_MESSAGES.resetPasswordFailed, AUTH_MESSAGES.passwordMismatch);
+    }
+    setSubmitting(true);
+    setError("");
+    try {
+      const result_0 = await withAuthTimeout(signIn_1.resetPassword({
+        password: newPassword
+      }), "reset-password", stageTimeoutMs);
+      if (result_0.status === "complete" && result_0.createdSessionId) {
+        await withAuthTimeout(setActive_0({
+          session: result_0.createdSessionId
+        }), "set-active", stageTimeoutMs);
+        done();
+      } else if (onIncomplete) {
+        onIncomplete(result_0);
+      } else {
+        warnIncomplete(result_0);
+        fail(AUTH_MESSAGES.resetPasswordFailed, AUTH_MESSAGES.needsAnotherStep);
+      }
+    } catch (caught_0) {
+      if (isAuthTimeoutError(caught_0)) logAuthFailure("reset-password", caught_0);
+      fail(AUTH_MESSAGES.resetPasswordFailed, authErrorMessage(caught_0, AUTH_MESSAGES.resetPasswordFailed));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  const onSignIn = async () => {
+    const {
+      isLoaded: isLoaded_1,
+      signIn: signIn_2,
+      setActive: setActive_1
+    } = signInState;
+    if (!isLoaded_1 || !signIn_2 || !setActive_1 || submitting) return;
+    if (!email || !password) return fail(AUTH_MESSAGES.signInFailed, AUTH_MESSAGES.missingFields);
+    setSubmitting(true);
+    setError("");
+    try {
+      const attempt_4 = await withAuthTimeout(signIn_2.create({
+        identifier: email,
+        password
+      }), "create", stageTimeoutMs);
+      await routeAttempt(attempt_4, true);
+    } catch (caught_1) {
+      logAuthFailure("create", caught_1);
+      fail(AUTH_MESSAGES.signInFailed, authErrorMessage(caught_1, AUTH_MESSAGES.invalidCredentials, {
+        credentials: true
+      }));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  const onSecondFactor = async secondFactorCode => {
+    const result_1 = await secondFactor.submit(secondFactorCode);
+    if (result_1.ok) done();
+  };
+  const onSecondFactorBack = () => {
+    // The pending attempt stays; the next `signIn.create` replaces it.
+    setPendingSecondFactor(false);
+    setPendingFirstFactor(false);
+    setFirstError("");
+    setPendingNewPassword(false);
+    setNewPassword("");
+    setConfirmPassword("");
+    setPassword("");
+    setError("");
+    secondFactor.clearError();
+  };
+  const onSignUp = async () => {
+    const {
+      isLoaded: isLoaded_2,
+      signUp: attempt_5
+    } = signUpState;
+    if (!isLoaded_2 || !attempt_5 || submitting) return;
+    if (!email || !password) return fail(AUTH_MESSAGES.signUpFailed, AUTH_MESSAGES.missingFields);
+    if (minPasswordLength && password.length < minPasswordLength) {
+      return fail(AUTH_MESSAGES.signUpFailed, `Use at least ${minPasswordLength} characters for the password`);
+    }
+    setSubmitting(true);
+    setError("");
+    try {
+      await attempt_5.create({
+        emailAddress: email,
+        password
+      });
+      await attempt_5.prepareEmailAddressVerification({
+        strategy: "email_code"
+      });
+      setPendingVerification(true);
+    } catch (caught_2) {
+      fail(AUTH_MESSAGES.signUpFailed, authErrorMessage(caught_2, AUTH_MESSAGES.signUpFailed));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  const onVerify = async () => {
+    const {
+      isLoaded: isLoaded_3,
+      signUp: attempt_6,
+      setActive: setActive_2
+    } = signUpState;
+    if (!isLoaded_3 || !attempt_6 || !setActive_2 || submitting) return;
+    if (!code) return fail(AUTH_MESSAGES.verifyFailed, AUTH_MESSAGES.missingCode);
+    setSubmitting(true);
+    setError("");
+    try {
+      const result_2 = await attempt_6.attemptEmailAddressVerification({
+        code
+      });
+      if (result_2.status === "complete" && result_2.createdSessionId) {
+        await setActive_2({
+          session: result_2.createdSessionId
+        });
+        done();
+      } else {
+        fail(AUTH_MESSAGES.verifyFailed, AUTH_MESSAGES.needsAnotherStep);
+      }
+    } catch (caught_3) {
+      fail(AUTH_MESSAGES.verifyFailed, authErrorMessage(caught_3, AUTH_MESSAGES.verifyFailed));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  const linkHref = signUp ? signInHref : signUpHref;
+  const footerRow = <>
+      {linkHref && !pendingVerification ? <>
+          <Text className="font-instrument-sans text-sm" style={textStyle("muted", colorScheme)}>
+            {signUp ? "Already have an account?" : "Don't have an account?"}
+          </Text>
+          <Button testID={id(signUp ? "sign-in-link" : "sign-up-link")} variant="link" size="sm" fullWidth={false} onPress={() => router.push(linkHref)}>
+            {signUp ? "Sign in" : "Sign up"}
+          </Button>
+        </> : null}
+      {footer}
+    </>;
+  const hasFooter = Boolean(linkHref && !pendingVerification || footer);
+  if (pendingNewPassword) {
+    return <AuthScreen testID={id("new-password-screen")} title={AUTH_MESSAGES.newPasswordTitle} subtitle={AUTH_MESSAGES.newPasswordDescription} header={header}>
+        <PasswordInput testID={id("new-password")} accessibilityLabel={AUTH_MESSAGES.newPasswordLabel} autoCapitalize="none" autoComplete="new-password" textContentType="newPassword" autoFocus returnKeyType="next" submitBehavior="submit" onSubmitEditing={() => confirmField.current?.focus()} value={newPassword} placeholder={AUTH_MESSAGES.newPasswordLabel} onChangeText={setNewPassword} />
+        <PasswordInput testID={id("confirm-password")} ref={confirmField} accessibilityLabel={AUTH_MESSAGES.confirmPasswordLabel} autoCapitalize="none" autoComplete="new-password" textContentType="newPassword" returnKeyType="go" value={confirmPassword} placeholder={AUTH_MESSAGES.confirmPasswordLabel} onChangeText={setConfirmPassword} onSubmitEditing={() => void onNewPassword()} />
+        <FieldError testID={id("error")} message={error} />
+        <Button testID={id("new-password-submit")} loading={submitting} onPress={() => void onNewPassword()}>
+          {AUTH_MESSAGES.setPassword}
+        </Button>
+        <Button testID={id("new-password-back")} variant="ghost" onPress={onSecondFactorBack}>
+          Use a different account
+        </Button>
+      </AuthScreen>;
+  }
+  if (pendingFirstFactor && !pendingSecondFactor && !pendingNewPassword) {
+    const others = supportedFirstFactorStrategies(firstFactors).filter(strategy_3 => strategy_3 !== firstStrategy);
+    const switchTo = others[0] ?? null;
+    const copy = secondFactorCopy(firstStrategy, false);
+    return <SecondFactorScreen key={`first-${firstStrategy}`} title={copy.title} description={copy.description} footer={switchTo ? <Button testID={id("first-factor-switch")} variant="link" size="sm" fullWidth={false} disabled={firstLoading} onPress={() => void chooseFirstStrategy(switchTo, firstFactors)}>
+              {METHOD_LABEL[switchTo]}
+            </Button> : undefined} onSubmit={onFirstFactor} error={firstError} loading={firstLoading} onBack={onSecondFactorBack} backLabel="Use a different account" header={header} testIDPrefix={id("first-factor")} />;
+  }
+  if (pendingSecondFactor) {
+    const active = secondFactor.strategy;
+    const available = supportedSecondFactorStrategies(factors);
+    const others_0 = available.filter(strategy_4 => strategy_4 !== active);
+    // From a backup code, go back to the default non-backup method. Otherwise offer a backup code.
+    const switchTo_0 = active === "backup_code" ? pickSecondFactorStrategy(factors.filter(factor_1 => factor_1.strategy !== "backup_code")) : others_0.includes("backup_code") ? "backup_code" : null;
+    const copy_0 = secondFactorCopy(active, clientTrust);
+    const backup = active === "backup_code";
+    return <SecondFactorScreen key={active} title={copy_0.title} description={copy_0.description} codeLength={backup ? 8 : 6} digitsOnly={!backup} placeholder="Backup code" footer={switchTo_0 ? <Button testID={id("second-factor-switch")} variant="link" size="sm" fullWidth={false} disabled={secondFactor.loading} onPress={() => void chooseStrategy(switchTo_0, factors)}>
+              {METHOD_LABEL[switchTo_0]}
+            </Button> : undefined} onSubmit={onSecondFactor} error={secondFactor.error} loading={secondFactor.loading} onBack={onSecondFactorBack} backLabel="Use a different account" header={header} testIDPrefix={id("second-factor")} />;
+  }
+  if (pendingVerification) {
+    return <AuthScreen testID={id("screen")} title="Check your email" subtitle="Enter the code we sent to your email." header={header} footer={hasFooter ? footerRow : undefined}>
+        <Input testID={id("code")} accessibilityLabel="Verification code" value={code} placeholder="Verification code" keyboardType="number-pad" autoComplete="one-time-code" textContentType="oneTimeCode" autoFocus returnKeyType="go" onChangeText={setCode} onSubmitEditing={() => void onVerify()} />
+        <FieldError testID={id("error")} message={error} />
+        <Button testID={id("verify")} loading={submitting} onPress={() => void onVerify()}>
+          Verify
+        </Button>
+        <Button testID={id("back")} variant="ghost" onPress={() => {
+        setPendingVerification(false);
+        setCode("");
+        setError("");
+      }}>
+          Use a different email
+        </Button>
+      </AuthScreen>;
+  }
+  return <AuthScreen testID={id("screen")} title={title ?? (signUp ? "Create account" : "Welcome back")} subtitle={subtitle ?? (signUp ? "Sign up to get started" : "Sign in to continue")} header={header} footer={hasFooter ? footerRow : undefined}>
+      {showGoogle ? <>
+          <GoogleSignInButton testID={id("google")} scheme={scheme} redirectPath={redirectPath} afterAuthHref={afterAuthHref} replaceOptions={replaceOptions} onSuccess={onSuccess} onError={message_0 => fail(message_0, message_0)} label={googleLabel} disabled={submitting} />
+          <OrDivider />
+        </> : null}
+      <Input testID={id("email")} accessibilityLabel="Email" autoCapitalize="none" autoComplete="email" textContentType="emailAddress" keyboardType="email-address" returnKeyType="next" submitBehavior="submit" onSubmitEditing={() => passwordField.current?.focus()} value={email} placeholder="Email" onChangeText={setEmail} />
+      <PasswordInput testID={id("password")} ref={passwordField} accessibilityLabel="Password" autoCapitalize="none" autoComplete={signUp ? "new-password" : "password"} textContentType={signUp ? "newPassword" : "password"} returnKeyType="go" value={password} placeholder="Password" onChangeText={setPassword} onSubmitEditing={() => void (signUp ? onSignUp() : onSignIn())} />
+      <FieldError testID={id("error")} message={error} />
+      <Button testID={id("submit")} loading={submitting} onPress={() => void (signUp ? onSignUp() : onSignIn())}>
+        {signUp ? "Create account" : "Sign in"}
+      </Button>
+      {/* Bot protection mounts its widget here on web sign-up. */}
+      {signUp ? <View nativeID="clerk-captcha" /> : null}
+    </AuthScreen>;
+}
+/** `SignInScreen` with `mode="sign-up"`. */
+export function SignUpScreen(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    t0 = <SignInScreen {...props} mode="sign-up" />;
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}

package/dist/auth/authErrors.js

@@ -0,0 +1,131 @@
+import { isClerkAPIResponseError } from "@clerk/clerk-expo";
+
+/** Words that must not reach the user: the auth provider and stack names. */
+const PRODUCT_NAMES = /\b(clerk|convex)\b/gi;
+
+/** The only Clerk codes that mean "Invalid email or password". */
+export const CREDENTIAL_ERROR_CODES = ["form_password_incorrect", "form_identifier_not_found"];
+const asString = value => typeof value === "string" && value.length > 0 ? value : undefined;
+
+/** Reads a Clerk API error, or a plain `{ errors: [...] }` object. No `zod`. */
+function parseAuthError(error) {
+  if (typeof error !== "object" || error === null) return null;
+  const record = error;
+  if (!isClerkAPIResponseError(error) && !Array.isArray(record.errors)) return null;
+  const errors = Array.isArray(record.errors) ? record.errors.filter(item => typeof item === "object" && item !== null) : [];
+  return {
+    errors,
+    status: typeof record.status === "number" ? record.status : undefined,
+    clerkTraceId: asString(record.clerkTraceId),
+    errorName: asString(record.name)
+  };
+}
+function firstError(parsed) {
+  const first = parsed?.errors[0];
+  return {
+    code: asString(first?.code),
+    message: asString(first?.message),
+    longMessage: asString(first?.longMessage),
+    paramName: asString(first?.meta?.paramName)
+  };
+}
+
+/** The code of a timed-out auth stage. */
+export const AUTH_TIMEOUT_CODE = "auth_timeout";
+
+/** Default time for one Clerk call, in milliseconds. */
+export const DEFAULT_STAGE_TIMEOUT_MS = 20000;
+
+/**
+ * The error `withAuthTimeout` rejects with. It is Clerk-shaped (`errors[0].code`
+ * is `auth_timeout`), so `authErrorMessage` and `logAuthFailure` read it.
+ */
+export class AuthTimeoutError extends Error {
+  code = AUTH_TIMEOUT_CODE;
+  constructor(stage, ms) {
+    const message = `The ${stage} step timed out after ${Math.round(ms / 1000)} seconds. Try again.`;
+    super(message);
+    this.name = "AuthTimeoutError";
+    this.stage = stage;
+    this.errors = [{
+      code: AUTH_TIMEOUT_CODE,
+      message
+    }];
+  }
+}
+export function isAuthTimeoutError(error) {
+  return error instanceof AuthTimeoutError;
+}
+
+/**
+ * Rejects with `AuthTimeoutError` (code `auth_timeout`, message names `stage`)
+ * when `promise` has not settled after `ms`. The timer is cleared on settle.
+ */
+export function withAuthTimeout(promise, stage, ms = DEFAULT_STAGE_TIMEOUT_MS) {
+  return new Promise((resolve, reject) => {
+    const timer = setTimeout(() => reject(new AuthTimeoutError(stage, ms)), ms);
+    promise.then(value => {
+      clearTimeout(timer);
+      resolve(value);
+    }, error => {
+      clearTimeout(timer);
+      reject(error);
+    });
+  });
+}
+
+/**
+ * Logs a failed auth call as one structured `console.error`. It holds the
+ * Clerk code, message, longMessage and meta.paramName, plus stage, errorName,
+ * status and clerkTraceId when present. For `AuthTimeoutError` the logged stage is the error's own stage. Only the error object is read, so a
+ * password or one-time code is never logged.
+ */
+export function logAuthFailure(stage, error) {
+  if (isAuthTimeoutError(error)) stage = error.stage;
+  const parsed = parseAuthError(error);
+  const {
+    code,
+    message,
+    longMessage,
+    paramName
+  } = firstError(parsed);
+  const errorName = parsed?.errorName ?? (error instanceof Error ? error.name : undefined);
+  console.error("[sign-in] failure", {
+    stage,
+    ...(errorName ? {
+      errorName
+    } : {}),
+    ...(parsed?.status !== undefined ? {
+      status: parsed.status
+    } : {}),
+    ...(parsed?.clerkTraceId ? {
+      clerkTraceId: parsed.clerkTraceId
+    } : {}),
+    code,
+    message,
+    longMessage,
+    meta: {
+      paramName
+    }
+  });
+}
+/**
+ * A message to show for an auth error. For a Clerk error it gives the first
+ * `longMessage` or `message`, with `clerk` and `convex` written as "the
+ * sign-in service", then `(code: <code>)`. With no text it gives `fallback`,
+ * still followed by the code when there is one. With `credentials: true`, the
+ * two credential codes give `fallback` alone. Anything that is not a Clerk
+ * error gives `fallback`. Never shows a raw exception message.
+ */
+export function authErrorMessage(error, fallback, options = {}) {
+  const parsed = parseAuthError(error);
+  if (!parsed) return fallback;
+  const {
+    code,
+    message,
+    longMessage
+  } = firstError(parsed);
+  if (options.credentials && code && CREDENTIAL_ERROR_CODES.includes(code)) return fallback;
+  const text = (longMessage ?? message)?.replace(PRODUCT_NAMES, "the sign-in service") ?? fallback;
+  return code ? `${text} (code: ${code})` : text;
+}

package/dist/auth/index.js

@@ -0,0 +1,11 @@
+// Clerk + Convex providers and the shared sign-in and sign-up screens. On
+// `@vvedantb/native-ui/auth` only: they import `@clerk/clerk-expo`, `convex`,
+// `expo-auth-session`, `expo-web-browser` and `expo-router`, and Metro does not
+// tree-shake.
+export { AuthProviders } from "./AuthProviders";
+export { AuthScreen, OrDivider, FieldError } from "./AuthScreen";
+export { authErrorMessage, logAuthFailure, withAuthTimeout, AuthTimeoutError, isAuthTimeoutError, AUTH_TIMEOUT_CODE, DEFAULT_STAGE_TIMEOUT_MS, CREDENTIAL_ERROR_CODES } from "./authErrors";
+export { GoogleSignInButton, useGoogleSignIn, useWarmUpBrowser, GOOGLE_ERROR_MESSAGE } from "./GoogleSignInButton";
+export { SignInScreen, SignUpScreen, AUTH_MESSAGES } from "./SignInScreen";
+export { SecondFactorScreen } from "./SecondFactorScreen";
+export { submitTotpSecondFactor, submitSecondFactor, prepareSecondFactorIfNeeded, prepareFirstFactorIfNeeded, submitFirstFactor, pickFirstFactorStrategy, supportedFirstFactorStrategies, FIRST_FACTOR_PREFERENCE, pickSecondFactorStrategy, supportedSecondFactorStrategies, SECOND_FACTOR_PREFERENCE, useSecondFactor, TOTP_MESSAGES } from "./totp";