@vvedantb/native-ui 0.11.0 → 0.11.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/native-ui",
-  "version": "0.11.0",
+  "version": "0.11.2",
   "license": "MIT",
   "description": "Shared React Native / Expo UI primitives. Floating surfaces, forms, overlays, toasts, settings chrome, tab bar, AI chat parts, the family app marks, a NativeWind preset, the Expo web root and Clerk + Convex auth screens.",
   "type": "module",
@@ -214,6 +214,7 @@
     }
   },
   "devDependencies": {
+    "@clerk/clerk-expo": "2.20.2",
     "@types/react": "^19.1.0",
     "react": "^19.1.0",
     "typescript": "^5.9.0",
@@ -222,6 +223,7 @@
   "scripts": {
     "build": "node -e \"require('node:fs').accessSync('src/index.ts')\"",
     "test": "vitest run",
-    "typecheck": "tsc -p tsconfig.typecheck.json"
+    "typecheck": "tsc -p tsconfig.typecheck.json && pnpm run typecheck:consumer",
+    "typecheck:consumer": "tsc -p tsconfig.consumer.json"
   }
 }

package/src/auth/SignInScreen.tsx

@@ -9,7 +9,13 @@ import { PasswordInput } from "../PasswordInput";
 import { toast } from "../toastStore";
 import { useScheme } from "../useScheme";
 import { AuthScreen, FieldError, OrDivider } from "./AuthScreen";
-import { authErrorMessage, logAuthFailure } from "./authErrors";
+import {
+  authErrorMessage,
+  DEFAULT_STAGE_TIMEOUT_MS,
+  isAuthTimeoutError,
+  logAuthFailure,
+  withAuthTimeout,
+} from "./authErrors";
 import { SecondFactorScreen } from "./SecondFactorScreen";
 import {
   pickFirstFactorStrategy,
@@ -139,6 +145,12 @@ export type SignInScreenProps = AuthNavigationOptions & {
    * `console.warn`. Ignored in `sign-up`.
    */
   onIncomplete?: (signIn: IncompleteSignIn) => void;
+  /**
+   * Time for each Clerk call (create, prepare, attempt, reset password,
+   * set active), in milliseconds. A call that takes longer fails with code
+   * `auth_timeout`. Default 20000.
+   */
+  stageTimeoutMs?: number;
 };
 
 /**
@@ -167,6 +179,7 @@ export function SignInScreen({
   header,
   footer,
   onIncomplete,
+  stageTimeoutMs = DEFAULT_STAGE_TIMEOUT_MS,
 }: SignInScreenProps) {
   const signInState = useSignIn();
   const signUpState = useSignUp();
@@ -187,7 +200,7 @@ export function SignInScreen({
   const [pendingNewPassword, setPendingNewPassword] = useState(false);
   const [newPassword, setNewPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
-  const secondFactor = useSecondFactor();
+  const secondFactor = useSecondFactor({ stageTimeoutMs });
   const [error, setError] = useState("");
   const [submitting, setSubmitting] = useState(false);
   const signUp = mode === "sign-up";
@@ -249,6 +262,7 @@ export function SignInScreen({
       signIn,
       strategy,
       factor: list.find((factor) => factor.strategy === strategy),
+      timeoutMs: stageTimeoutMs,
     });
     if (!sent.ok) setFirstError(sent.error);
     setFirstLoading(false);
@@ -268,7 +282,7 @@ export function SignInScreen({
     // Clerk's `SignInStatus` omits `needs_client_trust`: widen before comparing.
     const status: string | null = attempt.status;
     if (status === "complete" && attempt.createdSessionId && setActive) {
-      await setActive({ session: attempt.createdSessionId });
+      await withAuthTimeout(setActive({ session: attempt.createdSessionId }), "set-active", stageTimeoutMs);
       done();
     } else if (status === "needs_new_password") {
       setPendingFirstFactor(false);
@@ -288,7 +302,12 @@ export function SignInScreen({
     if (!isLoaded || !signIn || firstLoading) return;
     setFirstLoading(true);
     setFirstError("");
-    const result = await submitFirstFactor({ signIn, code: firstCode, strategy: firstStrategy });
+    const result = await submitFirstFactor({
+      signIn,
+      code: firstCode,
+      strategy: firstStrategy,
+      timeoutMs: stageTimeoutMs,
+    });
     if (!result.ok) {
       setFirstError(result.error);
       setFirstLoading(false);
@@ -297,6 +316,7 @@ export function SignInScreen({
     try {
       await routeAttempt(result.attempt, false);
     } catch (caught) {
+      if (isAuthTimeoutError(caught)) logAuthFailure("set-active", caught);
       setFirstError(authErrorMessage(caught, AUTH_MESSAGES.verifyFailed));
     } finally {
       setFirstLoading(false);
@@ -316,9 +336,13 @@ export function SignInScreen({
     setSubmitting(true);
     setError("");
     try {
-      const result = await signIn.resetPassword({ password: newPassword });
+      const result = await withAuthTimeout(
+        signIn.resetPassword({ password: newPassword }),
+        "reset-password",
+        stageTimeoutMs,
+      );
       if (result.status === "complete" && result.createdSessionId) {
-        await setActive({ session: result.createdSessionId });
+        await withAuthTimeout(setActive({ session: result.createdSessionId }), "set-active", stageTimeoutMs);
         done();
       } else if (onIncomplete) {
         onIncomplete(result);
@@ -327,6 +351,7 @@ export function SignInScreen({
         fail(AUTH_MESSAGES.resetPasswordFailed, AUTH_MESSAGES.needsAnotherStep);
       }
     } catch (caught) {
+      if (isAuthTimeoutError(caught)) logAuthFailure("reset-password", caught);
       fail(AUTH_MESSAGES.resetPasswordFailed, authErrorMessage(caught, AUTH_MESSAGES.resetPasswordFailed));
     } finally {
       setSubmitting(false);
@@ -340,7 +365,11 @@ export function SignInScreen({
     setSubmitting(true);
     setError("");
     try {
-      const attempt = await signIn.create({ identifier: email, password });
+      const attempt = await withAuthTimeout(
+        signIn.create({ identifier: email, password }),
+        "create",
+        stageTimeoutMs,
+      );
       await routeAttempt(attempt, true);
     } catch (caught) {
       logAuthFailure("create", caught);

package/src/auth/authErrors.ts

@@ -49,13 +49,61 @@ function firstError(parsed: ParsedAuthError | null) {
   };
 }
 
+/** 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 {
+  readonly code = AUTH_TIMEOUT_CODE;
+  readonly stage: string;
+  readonly errors: { code: string; message: string }[];
+  constructor(stage: string, ms: number) {
+    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: unknown): error is AuthTimeoutError {
+  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<T>(promise: Promise<T>, stage: string, ms: number = DEFAULT_STAGE_TIMEOUT_MS): Promise<T> {
+  return new Promise<T>((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. Only the error object is read, so a
+ * 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: string, error: unknown): void {
+  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);

package/src/auth/index.ts

@@ -6,7 +6,16 @@ export { AuthProviders } from "./AuthProviders";
 export type { AuthProvidersProps } from "./AuthProviders";
 export { AuthScreen, OrDivider, FieldError } from "./AuthScreen";
 export type { AuthScreenProps } from "./AuthScreen";
-export { authErrorMessage, logAuthFailure, CREDENTIAL_ERROR_CODES } from "./authErrors";
+export {
+  authErrorMessage,
+  logAuthFailure,
+  withAuthTimeout,
+  AuthTimeoutError,
+  isAuthTimeoutError,
+  AUTH_TIMEOUT_CODE,
+  DEFAULT_STAGE_TIMEOUT_MS,
+  CREDENTIAL_ERROR_CODES,
+} from "./authErrors";
 export type { AuthErrorOptions } from "./authErrors";
 export {
   GoogleSignInButton,
@@ -43,6 +52,8 @@ export type {
   FirstFactorResult,
   FirstFactorSignIn,
   FirstFactorStrategy,
+  PrepareFirstFactorParams,
+  PrepareSecondFactorParams,
   SecondFactor,
   SecondFactorSignIn,
   SecondFactorStrategy,

package/src/auth/totp.ts

@@ -1,6 +1,17 @@
 import { useState } from "react";
 import { useSignIn } from "@clerk/clerk-expo";
-import { authErrorMessage } from "./authErrors";
+import {
+  authErrorMessage,
+  DEFAULT_STAGE_TIMEOUT_MS,
+  isAuthTimeoutError,
+  logAuthFailure,
+  withAuthTimeout,
+} from "./authErrors";
+
+/** Logs a timed-out stage. Other failures are not logged here. */
+const logTimeout = (stage: string, error: unknown) => {
+  if (isAuthTimeoutError(error)) logAuthFailure(stage, error);
+};
 
 /** The messages the second-factor step can show. Generic: none names a provider. */
 export const TOTP_MESSAGES = {
@@ -32,6 +43,24 @@ export type SecondFactor = {
 
 type AttemptResult = { status: string | null; createdSessionId: string | null };
 
+/**
+ * The params of `prepareSecondFactor`. A union on `strategy`, as in Clerk's
+ * `PhoneCodeSecondFactorConfig | EmailCodeSecondFactorConfig`. One object with
+ * `strategy: "phone_code" | "email_code"` does not accept Clerk's
+ * `SignInResource` under `strictFunctionTypes`.
+ */
+export type PrepareSecondFactorParams =
+  | { strategy: "phone_code"; phoneNumberId?: string }
+  | { strategy: "email_code"; emailAddressId?: string };
+
+/**
+ * The params of `prepareFirstFactor`. A union on `strategy`, as in Clerk's
+ * `EmailCodeConfig | PhoneCodeConfig`, where the id is required.
+ */
+export type PrepareFirstFactorParams =
+  | { strategy: "email_code"; emailAddressId: string }
+  | { strategy: "phone_code"; phoneNumberId: string };
+
 /** The part of the sign-in resource that TOTP needs. Tests pass a mock. */
 export type TotpSignIn = {
   attemptSecondFactor(params: { strategy: "totp"; code: string }): Promise<AttemptResult>;
@@ -40,11 +69,7 @@ export type TotpSignIn = {
 /** The part of the sign-in resource that any second factor needs. Tests pass a mock. */
 export type SecondFactorSignIn = {
   supportedSecondFactors?: SecondFactor[] | null;
-  prepareSecondFactor?(params: {
-    strategy: "phone_code" | "email_code";
-    phoneNumberId?: string;
-    emailAddressId?: string;
-  }): Promise<unknown>;
+  prepareSecondFactor?(params: PrepareSecondFactorParams): Promise<unknown>;
   attemptSecondFactor(params: { strategy: SecondFactorStrategy; code: string }): Promise<AttemptResult>;
 };
 
@@ -76,25 +101,37 @@ export async function prepareSecondFactorIfNeeded(args: {
   signIn: Pick<SecondFactorSignIn, "supportedSecondFactors" | "prepareSecondFactor">;
   strategy: SecondFactorStrategy;
   factor?: SecondFactor;
+  /** Time for the Clerk call. Default 20000 ms. */
+  timeoutMs?: number;
 }): Promise<TotpResult> {
   const { signIn, strategy } = args;
+  const ms = args.timeoutMs ?? DEFAULT_STAGE_TIMEOUT_MS;
   if (strategy !== "phone_code" && strategy !== "email_code") return { ok: true };
   if (!signIn.prepareSecondFactor) return { ok: false, error: TOTP_MESSAGES.sendFailed };
   const factor = args.factor ?? signIn.supportedSecondFactors?.find((item) => item.strategy === strategy);
   try {
     if (strategy === "phone_code") {
-      await signIn.prepareSecondFactor({
-        strategy,
-        ...(factor?.phoneNumberId ? { phoneNumberId: factor.phoneNumberId } : {}),
-      });
+      await withAuthTimeout(
+        signIn.prepareSecondFactor({
+          strategy,
+          ...(factor?.phoneNumberId ? { phoneNumberId: factor.phoneNumberId } : {}),
+        }),
+        "prepare-second-factor",
+        ms,
+      );
     } else {
-      await signIn.prepareSecondFactor({
-        strategy,
-        ...(factor?.emailAddressId ? { emailAddressId: factor.emailAddressId } : {}),
-      });
+      await withAuthTimeout(
+        signIn.prepareSecondFactor({
+          strategy,
+          ...(factor?.emailAddressId ? { emailAddressId: factor.emailAddressId } : {}),
+        }),
+        "prepare-second-factor",
+        ms,
+      );
     }
     return { ok: true };
   } catch (caught) {
+    logTimeout("prepare-second-factor", caught);
     return { ok: false, error: authErrorMessage(caught, TOTP_MESSAGES.sendFailed) };
   }
 }
@@ -111,15 +148,23 @@ export async function submitSecondFactor(args: {
   setActive: TotpSetActive;
   code: string;
   strategy: SecondFactorStrategy;
+  /** Time for each Clerk call. Default 20000 ms. */
+  timeoutMs?: number;
 }): Promise<TotpResult> {
+  const ms = args.timeoutMs ?? DEFAULT_STAGE_TIMEOUT_MS;
   try {
-    const attempt = await args.signIn.attemptSecondFactor({ strategy: args.strategy, code: args.code });
+    const attempt = await withAuthTimeout(
+      args.signIn.attemptSecondFactor({ strategy: args.strategy, code: args.code }),
+      "attempt-second-factor",
+      ms,
+    );
     if (attempt.status === "complete" && attempt.createdSessionId) {
-      await args.setActive({ session: attempt.createdSessionId });
+      await withAuthTimeout(args.setActive({ session: attempt.createdSessionId }), "set-active", ms);
       return { ok: true };
     }
     return { ok: false, error: TOTP_MESSAGES.needsAnotherStep };
   } catch (caught) {
+    logTimeout("attempt-second-factor", caught);
     const fallback = args.strategy === "totp" ? TOTP_MESSAGES.invalidCode : TOTP_MESSAGES.invalidCodeGeneric;
     return { ok: false, error: authErrorMessage(caught, fallback) };
   }
@@ -142,11 +187,7 @@ export type FirstFactor = {
 /** The part of the sign-in resource that a first-factor code needs. Tests pass a mock. */
 export type FirstFactorSignIn = {
   supportedFirstFactors?: FirstFactor[] | null;
-  prepareFirstFactor?(params: {
-    strategy: FirstFactorStrategy;
-    phoneNumberId?: string;
-    emailAddressId?: string;
-  }): Promise<unknown>;
+  prepareFirstFactor?(params: PrepareFirstFactorParams): Promise<unknown>;
   attemptFirstFactor(params: { strategy: FirstFactorStrategy; code: string }): Promise<AttemptResult>;
 };
 
@@ -187,20 +228,32 @@ export async function prepareFirstFactorIfNeeded(args: {
   signIn: Pick<FirstFactorSignIn, "supportedFirstFactors" | "prepareFirstFactor">;
   strategy: FirstFactorStrategy;
   factor?: FirstFactor;
+  /** Time for the Clerk call. Default 20000 ms. */
+  timeoutMs?: number;
 }): Promise<TotpResult> {
   const { signIn, strategy } = args;
+  const ms = args.timeoutMs ?? DEFAULT_STAGE_TIMEOUT_MS;
   if (!signIn.prepareFirstFactor) return { ok: false, error: TOTP_MESSAGES.sendFailed };
   const factor = args.factor ?? signIn.supportedFirstFactors?.find((item) => item.strategy === strategy);
   try {
     if (strategy === "phone_code") {
       if (!factor?.phoneNumberId) return { ok: false, error: TOTP_MESSAGES.sendFailed };
-      await signIn.prepareFirstFactor({ strategy, phoneNumberId: factor.phoneNumberId });
+      await withAuthTimeout(
+        signIn.prepareFirstFactor({ strategy, phoneNumberId: factor.phoneNumberId }),
+        "prepare-first-factor",
+        ms,
+      );
     } else {
       if (!factor?.emailAddressId) return { ok: false, error: TOTP_MESSAGES.sendFailed };
-      await signIn.prepareFirstFactor({ strategy, emailAddressId: factor.emailAddressId });
+      await withAuthTimeout(
+        signIn.prepareFirstFactor({ strategy, emailAddressId: factor.emailAddressId }),
+        "prepare-first-factor",
+        ms,
+      );
     }
     return { ok: true };
   } catch (caught) {
+    logTimeout("prepare-first-factor", caught);
     return { ok: false, error: authErrorMessage(caught, TOTP_MESSAGES.sendFailed) };
   }
 }
@@ -214,11 +267,18 @@ export async function submitFirstFactor(args: {
   signIn: Pick<FirstFactorSignIn, "attemptFirstFactor">;
   code: string;
   strategy: FirstFactorStrategy;
+  /** Time for the Clerk call. Default 20000 ms. */
+  timeoutMs?: number;
 }): Promise<FirstFactorResult> {
   try {
-    const attempt = await args.signIn.attemptFirstFactor({ strategy: args.strategy, code: args.code });
+    const attempt = await withAuthTimeout(
+      args.signIn.attemptFirstFactor({ strategy: args.strategy, code: args.code }),
+      "attempt-first-factor",
+      args.timeoutMs ?? DEFAULT_STAGE_TIMEOUT_MS,
+    );
     return { ok: true, attempt };
   } catch (caught) {
+    logTimeout("attempt-first-factor", caught);
     return { ok: false, error: authErrorMessage(caught, TOTP_MESSAGES.invalidCodeGeneric) };
   }
 }
@@ -228,13 +288,22 @@ export function submitTotpSecondFactor(args: {
   signIn: TotpSignIn;
   setActive: TotpSetActive;
   code: string;
+  timeoutMs?: number;
 }): Promise<TotpResult> {
-  return submitSecondFactor({ signIn: args.signIn, setActive: args.setActive, code: args.code, strategy: "totp" });
+  return submitSecondFactor({
+    signIn: args.signIn,
+    setActive: args.setActive,
+    code: args.code,
+    strategy: "totp",
+    timeoutMs: args.timeoutMs,
+  });
 }
 
 export type UseSecondFactorOptions = {
   /** The strategy `submit` uses until `setStrategy` changes it. Default `"totp"`. */
   strategy?: SecondFactorStrategy;
+  /** Time for each Clerk call, in milliseconds. Default 20000. */
+  stageTimeoutMs?: number;
 };
 
 export type UseSecondFactorResult = {
@@ -265,6 +334,7 @@ export function useSecondFactor(options: UseSecondFactorOptions = {}): UseSecond
   const strategy = chosen ?? options.strategy ?? "totp";
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
+  const timeoutMs = options.stageTimeoutMs ?? DEFAULT_STAGE_TIMEOUT_MS;
 
   const submit = async (code: string): Promise<TotpResult> => {
     if (loading) return { ok: false, error };
@@ -274,7 +344,7 @@ export function useSecondFactor(options: UseSecondFactorOptions = {}): UseSecond
     }
     setLoading(true);
     setError("");
-    const result = await submitSecondFactor({ signIn, setActive, code, strategy });
+    const result = await submitSecondFactor({ signIn, setActive, code, strategy, timeoutMs });
     if (!result.ok) setError(result.error);
     setLoading(false);
     return result;
@@ -290,7 +360,7 @@ export function useSecondFactor(options: UseSecondFactorOptions = {}): UseSecond
     }
     setLoading(true);
     setError("");
-    const result = await prepareSecondFactorIfNeeded({ signIn, strategy: prepareStrategy, factor });
+    const result = await prepareSecondFactorIfNeeded({ signIn, strategy: prepareStrategy, factor, timeoutMs });
     if (!result.ok) setError(result.error);
     setLoading(false);
     return result;