@vvedantb/native-ui 0.8.0 → 0.10.0

package/src/ai/trace.tsx

@@ -7,7 +7,7 @@ import { palette } from "../palette";
 import { useLargerText } from "../theme";
 import { tokens } from "../tokens";
 import { useScheme } from "../useScheme";
-import { chatTextSize } from "./chat-text";
+import { chatTextSize, formatElapsed } from "./chat-text";
 import {
   Collapsible,
   CollapsibleChevron,
@@ -232,3 +232,34 @@ export function AgentTraceCollapsibleContent({
     </CollapsibleContent>
   );
 }
+
+export type AgentTraceFoldProps = Omit<CollapsibleProps, "children"> & {
+  /** How long the turn ran, in seconds. The title reads "Worked for 1m 5s". */
+  seconds: number;
+  /** The settled turn's steps, shown in an `AgentTrace` when open. */
+  children: ReactNode;
+};
+
+/**
+ * A settled turn folded behind one line, as the web `ActivityTasks` in its
+ * folded (Codex-style) mode: "Worked for …" over a hairline
+ * (`border-b border-border pb-1.5`), closed by default, and the steps in an
+ * `AgentTrace` 8 below when open.
+ */
+export function AgentTraceFold({ seconds, children, defaultOpen = false, className, ...props }: AgentTraceFoldProps) {
+  const scheme = useScheme();
+  return (
+    <Collapsible className={cn("w-full min-w-0", className)} defaultOpen={defaultOpen} {...props}>
+      <View style={{ borderBottomWidth: 1, borderBottomColor: tokens.color.border[scheme], paddingBottom: 6 }}>
+        <AgentTraceCollapsibleTrigger>
+          <AgentTraceLine>
+            <AgentTraceTitle>{`Worked for ${formatElapsed(seconds)}`}</AgentTraceTitle>
+          </AgentTraceLine>
+        </AgentTraceCollapsibleTrigger>
+      </View>
+      <CollapsibleContent>
+        <AgentTrace className="mt-2">{children}</AgentTrace>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

package/src/auth/AuthScreen.tsx

@@ -1,5 +1,5 @@
-import type { ReactNode } from "react";
-import { KeyboardAvoidingView, Platform, ScrollView, StyleSheet, Text, View } from "react-native";
+import { useEffect, useState, type ReactNode } from "react";
+import { Keyboard, KeyboardAvoidingView, ScrollView, StyleSheet, Text, View } from "react-native";
 import { cn } from "../cn";
 import { textStyle, typeStyle } from "../controlStyles";
 import { palette } from "../palette";
@@ -18,23 +18,51 @@ export type AuthScreenProps = {
   className?: string;
 };
 
+/** Space under the form while the keyboard is open, on top of its height. */
+const KEYBOARD_EXTRA = 24;
+
+/** The height of the open soft keyboard, or 0. Edge-to-edge Android ignores `adjustResize`, so the screen pads itself. */
+function useKeyboardHeight(): number {
+  const [height, setHeight] = useState(0);
+  useEffect(() => {
+    const show = (event: { endCoordinates: { height: number } }) => setHeight(event.endCoordinates.height);
+    const hide = () => setHeight(0);
+    const subs = [
+      Keyboard.addListener("keyboardWillShow", show),
+      Keyboard.addListener("keyboardDidShow", show),
+      Keyboard.addListener("keyboardWillHide", hide),
+      Keyboard.addListener("keyboardDidHide", hide),
+    ];
+    return () => subs.forEach((sub) => sub.remove());
+  }, []);
+  return height;
+}
+
 /**
  * The sign-in and sign-up frame: a keyboard-avoiding scroll view on the
  * background colour, with a title, subtitle and the form in a column of 16.
+ * The form is centred until the keyboard opens. Then it aligns to the top and
+ * the scroll content gains the keyboard height as bottom space, so the focused
+ * field and the submit button scroll above the keyboard.
  */
 export function AuthScreen({ title, subtitle, children, header, footer, testID, className }: AuthScreenProps) {
   const scheme = useScheme();
+  const keyboardHeight = useKeyboardHeight();
+  const keyboardOpen = keyboardHeight > 0;
   return (
     <KeyboardAvoidingView
-      behavior={Platform.OS === "ios" ? "padding" : "height"}
+      // Padding on both platforms, as OverlayModal and PromptInput: Android `height` does nothing edge-to-edge.
+      behavior="padding"
       className="flex-1"
       style={{ backgroundColor: tokens.color.background[scheme] }}
     >
       <ScrollView
         testID={testID}
         className="flex-1"
-        contentContainerClassName={cn("grow justify-center px-6 py-12", className)}
+        contentContainerClassName={cn("grow px-6 py-12", keyboardOpen ? "justify-start" : "justify-center", className)}
+        contentContainerStyle={keyboardOpen ? { paddingBottom: keyboardHeight + KEYBOARD_EXTRA } : undefined}
         keyboardShouldPersistTaps="handled"
+        keyboardDismissMode="on-drag"
       >
         <View className="w-full max-w-sm self-center gap-6">
           {header}

package/src/auth/SecondFactorScreen.tsx

@@ -0,0 +1,87 @@
+// Clerk-free: a one-time code step. The caller owns the verification call and
+// its errors (`useSecondFactor` does both for Clerk).
+import { useState, type ReactNode } from "react";
+import { Button } from "../Button";
+import { Input } from "../Input";
+import { AuthScreen, FieldError } from "./AuthScreen";
+
+export type SecondFactorScreenProps = {
+  title: string;
+  description?: string;
+  /** Digits in the code. Default 6. */
+  codeLength?: number;
+  /** Called with the full code. A rejected promise is the caller's to handle. */
+  onSubmit: (code: string) => Promise<void> | void;
+  /** Inline error under the field, such as "Incorrect code". */
+  error?: string;
+  /** Shows the Verify spinner and blocks a second submit. */
+  loading?: boolean;
+  /** Shows a ghost back button when set. */
+  onBack?: () => void;
+  /** Default "Back". */
+  backLabel?: string;
+  /** Above the title. App brand chrome goes here. */
+  header?: ReactNode;
+  /** Prefix for every `testID`. Default "second-factor". */
+  testIDPrefix?: string;
+  /** Below the buttons, such as a "Use a backup code" switch. Passed to `AuthScreen`. */
+  footer?: ReactNode;
+  /** Default `true`: digits only, number pad. `false` takes any characters (backup codes). */
+  digitsOnly?: boolean;
+  /** Placeholder when `digitsOnly` is `false`. Default "Code". */
+  placeholder?: string;
+};
+
+/** A one-time code step: digits only, a Verify button, an inline error and a back link. */
+export function SecondFactorScreen({
+  title,
+  description,
+  codeLength = 6,
+  onSubmit,
+  error,
+  loading = false,
+  onBack,
+  backLabel = "Back",
+  header,
+  testIDPrefix = "second-factor",
+  footer,
+  digitsOnly = true,
+  placeholder,
+}: SecondFactorScreenProps) {
+  const [code, setCode] = useState("");
+  const ready = code.length === codeLength && !loading;
+
+  const submit = () => {
+    if (ready) void onSubmit(code);
+  };
+
+  return (
+    <AuthScreen testID={`${testIDPrefix}-screen`} title={title} subtitle={description} header={header} footer={footer}>
+      <Input
+        testID={`${testIDPrefix}-code`}
+        accessibilityLabel="Verification code"
+        value={code}
+        placeholder={digitsOnly ? "0".repeat(codeLength) : (placeholder ?? "Code")}
+        keyboardType={digitsOnly ? "number-pad" : "default"}
+        autoCapitalize="none"
+        autoCorrect={false}
+        autoComplete="one-time-code"
+        textContentType="oneTimeCode"
+        maxLength={codeLength}
+        autoFocus
+        returnKeyType="go"
+        onChangeText={(text) => setCode(digitsOnly ? text.replace(/\D/g, "") : text.trim())}
+        onSubmitEditing={submit}
+      />
+      <FieldError testID={`${testIDPrefix}-error`} message={error} />
+      <Button testID={`${testIDPrefix}-verify`} loading={loading} disabled={!ready} onPress={submit}>
+        Verify
+      </Button>
+      {onBack ? (
+        <Button testID={`${testIDPrefix}-back`} variant="ghost" onPress={onBack}>
+          {backLabel}
+        </Button>
+      ) : null}
+    </AuthScreen>
+  );
+}

package/src/auth/SignInScreen.tsx

@@ -9,6 +9,14 @@ import { toast } from "../toastStore";
 import { useScheme } from "../useScheme";
 import { AuthScreen, FieldError, OrDivider } from "./AuthScreen";
 import { authErrorMessage } from "./authErrors";
+import { SecondFactorScreen } from "./SecondFactorScreen";
+import {
+  pickSecondFactorStrategy,
+  supportedSecondFactorStrategies,
+  useSecondFactor,
+  type SecondFactor,
+  type SecondFactorStrategy,
+} from "./totp";
 import { GoogleSignInButton, type AuthNavigationOptions } from "./GoogleSignInButton";
 
 export type SignInMode = "sign-in" | "sign-up";
@@ -22,8 +30,66 @@ export const AUTH_MESSAGES = {
   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",
 } as const;
 
+/**
+ * A sign-in that is not complete, as `signIn.create` returns it. Passed to
+ * `onIncomplete` so the app can run the step itself.
+ */
+export type IncompleteSignIn = {
+  status: string | null;
+  createdSessionId: string | null;
+  supportedFirstFactors?: Array<{ strategy: string; [key: string]: unknown }> | null;
+  supportedSecondFactors?: SecondFactor[] | null;
+};
+
+const METHOD_LABEL: Record<SecondFactorStrategy, string> = {
+  totp: AUTH_MESSAGES.useAuthenticator,
+  email_code: AUTH_MESSAGES.useEmailCode,
+  phone_code: AUTH_MESSAGES.usePhoneCode,
+  backup_code: AUTH_MESSAGES.useBackupCode,
+};
+
+function secondFactorCopy(strategy: SecondFactorStrategy, clientTrust: boolean) {
+  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 };
+}
+
 export type SignInScreenProps = AuthNavigationOptions & {
   /** Default `"sign-in"`. `"sign-up"` creates the account and checks an emailed code. */
   mode?: SignInMode;
@@ -53,6 +119,17 @@ export type SignInScreenProps = AuthNavigationOptions & {
   header?: ReactNode;
   /** Below the footer link row, such as an app credit. */
   footer?: ReactNode;
+  /**
+   * Called with the sign-in when the built-in UI cannot finish it:
+   * `needs_identifier`, `needs_first_factor`, any unknown status, and
+   * `needs_second_factor` or `needs_client_trust` when no supported strategy
+   * (totp, backup code, phone code, email code) exists. The built-in screen
+   * always runs `needs_second_factor`, `needs_client_trust` and
+   * `needs_new_password` itself. When called, the web-fallback message is not
+   * shown. Without it, the screen shows the web fallback and logs
+   * `console.warn`. Ignored in `sign-up`.
+   */
+  onIncomplete?: (signIn: IncompleteSignIn) => void;
 };
 
 /**
@@ -80,6 +157,7 @@ export function SignInScreen({
   testIDPrefix,
   header,
   footer,
+  onIncomplete,
 }: SignInScreenProps) {
   const signInState = useSignIn();
   const signUpState = useSignUp();
@@ -89,6 +167,13 @@ export function SignInScreen({
   const [password, setPassword] = useState("");
   const [code, setCode] = useState("");
   const [pendingVerification, setPendingVerification] = useState(false);
+  const [pendingSecondFactor, setPendingSecondFactor] = useState(false);
+  const [factors, setFactors] = useState<SecondFactor[]>([]);
+  const [clientTrust, setClientTrust] = useState(false);
+  const [pendingNewPassword, setPendingNewPassword] = useState(false);
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const secondFactor = useSecondFactor();
   const [error, setError] = useState("");
   const [submitting, setSubmitting] = useState(false);
   const signUp = mode === "sign-up";
@@ -104,6 +189,71 @@ export function SignInScreen({
     else router.replace(afterAuthHref, replaceOptions);
   };
 
+  const warnIncomplete = (attempt: IncompleteSignIn) => {
+    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) => f.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: IncompleteSignIn) => {
+    if (onIncomplete) return onIncomplete(attempt);
+    warnIncomplete(attempt);
+    fail(AUTH_MESSAGES.signInFailed, AUTH_MESSAGES.needsAnotherStep);
+  };
+
+  const chooseStrategy = async (strategy: SecondFactorStrategy, list: SecondFactor[]) => {
+    secondFactor.clearError();
+    secondFactor.setStrategy(strategy);
+    setPendingSecondFactor(true);
+    await secondFactor.prepare(
+      strategy,
+      list.find((factor) => factor.strategy === strategy),
+    );
+  };
+
+  const startSecondFactor = async (attempt: IncompleteSignIn, trust: boolean) => {
+    const list = attempt.supportedSecondFactors ?? [];
+    const strategy = pickSecondFactorStrategy(list);
+    if (!strategy) return unhandled(attempt);
+    setFactors(list);
+    setClientTrust(trust);
+    await chooseStrategy(strategy, list);
+  };
+
+  const onNewPassword = async () => {
+    const { isLoaded, signIn, setActive } = signInState;
+    if (!isLoaded || !signIn || !setActive || 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 = await signIn.resetPassword({ password: newPassword });
+      if (result.status === "complete" && result.createdSessionId) {
+        await setActive({ session: result.createdSessionId });
+        done();
+      } else if (onIncomplete) {
+        onIncomplete(result);
+      } else {
+        warnIncomplete(result);
+        fail(AUTH_MESSAGES.resetPasswordFailed, AUTH_MESSAGES.needsAnotherStep);
+      }
+    } catch (caught) {
+      fail(AUTH_MESSAGES.resetPasswordFailed, authErrorMessage(caught, AUTH_MESSAGES.resetPasswordFailed));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
   const onSignIn = async () => {
     const { isLoaded, signIn, setActive } = signInState;
     if (!isLoaded || !signIn || !setActive || submitting) return;
@@ -115,8 +265,12 @@ export function SignInScreen({
       if (attempt.status === "complete" && attempt.createdSessionId) {
         await setActive({ session: attempt.createdSessionId });
         done();
+      } else if (attempt.status === "needs_new_password") {
+        setPendingNewPassword(true);
+      } else if (attempt.status === "needs_second_factor" || attempt.status === "needs_client_trust") {
+        await startSecondFactor(attempt, attempt.status === "needs_client_trust");
       } else {
-        fail(AUTH_MESSAGES.signInFailed, AUTH_MESSAGES.needsAnotherStep);
+        unhandled(attempt);
       }
     } catch (caught) {
       fail(AUTH_MESSAGES.signInFailed, authErrorMessage(caught, AUTH_MESSAGES.invalidCredentials));
@@ -125,6 +279,22 @@ export function SignInScreen({
     }
   };
 
+  const onSecondFactor = async (secondFactorCode: string) => {
+    const result = await secondFactor.submit(secondFactorCode);
+    if (result.ok) done();
+  };
+
+  const onSecondFactorBack = () => {
+    // The pending attempt stays; the next `signIn.create` replaces it.
+    setPendingSecondFactor(false);
+    setPendingNewPassword(false);
+    setNewPassword("");
+    setConfirmPassword("");
+    setPassword("");
+    setError("");
+    secondFactor.clearError();
+  };
+
   const onSignUp = async () => {
     const { isLoaded, signUp: attempt } = signUpState;
     if (!isLoaded || !attempt || submitting) return;
@@ -190,6 +360,97 @@ export function SignInScreen({
   );
   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}
+      >
+        <Input
+          testID={id("new-password")}
+          accessibilityLabel={AUTH_MESSAGES.newPasswordLabel}
+          autoCapitalize="none"
+          autoComplete="new-password"
+          textContentType="newPassword"
+          secureTextEntry
+          autoFocus
+          returnKeyType="next"
+          value={newPassword}
+          placeholder={AUTH_MESSAGES.newPasswordLabel}
+          onChangeText={setNewPassword}
+        />
+        <Input
+          testID={id("confirm-password")}
+          accessibilityLabel={AUTH_MESSAGES.confirmPasswordLabel}
+          autoCapitalize="none"
+          autoComplete="new-password"
+          textContentType="newPassword"
+          secureTextEntry
+          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 (pendingSecondFactor) {
+    const active = secondFactor.strategy;
+    const available = supportedSecondFactorStrategies(factors);
+    const others = available.filter((strategy) => strategy !== active);
+    // From a backup code, go back to the default non-backup method. Otherwise offer a backup code.
+    const switchTo =
+      active === "backup_code"
+        ? pickSecondFactorStrategy(factors.filter((factor) => factor.strategy !== "backup_code"))
+        : others.includes("backup_code")
+          ? "backup_code"
+          : null;
+    const copy = secondFactorCopy(active, clientTrust);
+    const backup = active === "backup_code";
+    return (
+      <SecondFactorScreen
+        key={active}
+        title={copy.title}
+        description={copy.description}
+        codeLength={backup ? 8 : 6}
+        digitsOnly={!backup}
+        placeholder="Backup code"
+        footer={
+          switchTo ? (
+            <Button
+              testID={id("second-factor-switch")}
+              variant="link"
+              size="sm"
+              fullWidth={false}
+              disabled={secondFactor.loading}
+              onPress={() => void chooseStrategy(switchTo, factors)}
+            >
+              {METHOD_LABEL[switchTo]}
+            </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

package/src/auth/index.ts

@@ -19,4 +19,26 @@ export type {
   GoogleSignInButtonProps,
 } from "./GoogleSignInButton";
 export { SignInScreen, SignUpScreen, AUTH_MESSAGES } from "./SignInScreen";
-export type { SignInMode, SignInScreenProps, SignUpScreenProps } from "./SignInScreen";
+export type { IncompleteSignIn, SignInMode, SignInScreenProps, SignUpScreenProps } from "./SignInScreen";
+export { SecondFactorScreen } from "./SecondFactorScreen";
+export type { SecondFactorScreenProps } from "./SecondFactorScreen";
+export {
+  submitTotpSecondFactor,
+  submitSecondFactor,
+  prepareSecondFactorIfNeeded,
+  pickSecondFactorStrategy,
+  supportedSecondFactorStrategies,
+  SECOND_FACTOR_PREFERENCE,
+  useSecondFactor,
+  TOTP_MESSAGES,
+} from "./totp";
+export type {
+  SecondFactor,
+  SecondFactorSignIn,
+  SecondFactorStrategy,
+  TotpResult,
+  TotpSignIn,
+  TotpSetActive,
+  UseSecondFactorOptions,
+  UseSecondFactorResult,
+} from "./totp";