@entropy-softworks/ui 2026.7.31

package/src/screens/auth/AuthScreen.tsx

@@ -0,0 +1,941 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { KeyboardAvoidingView, Platform, ScrollView, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import Animated, {
+  Easing,
+  FadeInDown,
+  FadeOutUp,
+  LinearTransition,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { type Href } from "expo-router";
+import { StatusBar } from "expo-status-bar";
+import { Ionicons } from "@expo/vector-icons";
+import { useColorScheme } from "nativewind";
+import * as Haptics from "expo-haptics";
+import { Heading, MutedText, Text } from "../../components/text";
+import { Button, IconButton } from "../../components/button";
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "../../components/card";
+import { EmailInput, Input, PasswordInput } from "../../components/input";
+import { Dialog, DialogButton, DialogFooter } from "../../components/dialog";
+import { SeparatorWithText } from "../../components/separator";
+import { LegalDialog } from "../../components/legal-dialog";
+import { SegmentedToggle } from "../../components/segmented-toggle";
+import PasswordStrengthMeter from "../../components/auth/PasswordStrengthMeter";
+import PwnedPasswordWarning from "../../components/auth/PwnedPasswordWarning";
+import ShakeField from "../../forms/shake-field";
+import FormError from "../../forms/form-error";
+import { useAuth } from "../../hooks/useAuth";
+import { useShakeAnimation } from "../../hooks/useShakeAnimation";
+import { ApiError } from "../../utils/http-error";
+import { validateEmail } from "../../utils/validation";
+import AuthService from "../../services/auth.service";
+import { checkPasswordPwned, debounce, getPwnedMessage } from "../../services/hibp";
+import { getCachedPolicy } from "../../services/hibp-cache";
+import { useAppConfig } from "../../context/AppConfigContext";
+import { useNavigation } from "../../context/NavigationContext";
+
+const SCROLL_CONTENT_STYLE = { flexGrow: 1 } as const;
+const DEFAULT_POLICY = { enabled: false, enforce: false, block_threshold: 0 };
+
+type Mode = "signin" | "signup";
+//  welcome — logo + decoration + Get Started (the entry view)
+//  auth    — the Sign In / Sign Up form
+//  forgot  — inline password-reset request
+type Stage = "welcome" | "auth" | "forgot";
+
+type AnimatedViewProps = React.ComponentProps<typeof Animated.View>;
+
+/**
+ * Reanimated config for the FIELD-level Sign In ↔ Sign Up toggle. (The
+ * welcome ↔ form stage swap is a fixed, shared-value fade-through — see the
+ * morph effect in the component.)
+ *  • `layout`              — eases the card height as fields appear/disappear.
+ *  • `entering`/`exiting`  — fields that mount/unmount (Sign In ↔ Sign Up).
+ */
+export interface AuthFormTransition {
+  layout?: AnimatedViewProps["layout"];
+  entering?: AnimatedViewProps["entering"];
+  exiting?: AnimatedViewProps["exiting"];
+}
+
+const DEFAULT_TRANSITION: Required<AuthFormTransition> = {
+  layout: LinearTransition.duration(280),
+  entering: FadeInDown.duration(240),
+  exiting: FadeOutUp.duration(160),
+};
+
+// Stage morph timing — fade/scale out, swap the stage at zero opacity (so the
+// centered→centered swap is invisible, no overlap/teleport), then fade/scale in.
+const STAGE_OUT_MS = 200;
+const STAGE_IN_MS = 360;
+
+export interface AuthScreenProps {
+  /** Master-password field label. */
+  passwordLabel?: string;
+  /** Master-password field placeholder. */
+  passwordPlaceholder?: string;
+  /** Optional social-auth block, rendered under the primary CTA. */
+  socialAuth?: React.ReactNode;
+  /**
+   * Render the "Sign in with passkey" button + ceremony flow. Pass the
+   * result of `isPasskeySupported()` (only meaningful in sign-in mode).
+   */
+  passkeyEnabled?: boolean;
+  passkeyUnlockPlaceholder?: string;
+  passkeyUnlockTitle?: string;
+  passkeyUnlockDescription?: string;
+  /**
+   * Connection / server-settings dialog, folded into this single page (no
+   * route). When provided, a gear button is shown top-right that toggles it.
+   */
+  settings?: (props: { visible: boolean; onClose: () => void }) => React.ReactNode;
+  /** Override the animations. Merged over the defaults. */
+  transition?: AuthFormTransition;
+  /**
+   * App-specific hero rendered on the welcome view, under the logo (the home
+   * for each app's old welcome-screen animation — vault's PasswordDemoAnimation,
+   * simple-finance's AssetCarousel, …). Omit for none.
+   */
+  decoration?: React.ReactNode;
+  /** Welcome-view tagline/subtitle. Defaults to AppConfig `tagline`. */
+  welcomeCtaLabel?: string;
+}
+
+/**
+ * Single consolidated unauthenticated screen with three animated stages:
+ * a welcome view (logo + app decoration + Get Started), the Sign In / Sign Up
+ * form (with an animated mode toggle), and inline forgot-password. Terms/Privacy
+ * are themed popups and a connection-settings dialog can be folded in. Preserves
+ * the passkey ceremony + non-PRF unlock and the HIBP/strength checks.
+ */
+export function AuthScreen({
+  passwordLabel = "Password",
+  passwordPlaceholder = "Enter your password",
+  socialAuth,
+  passkeyEnabled = false,
+  passkeyUnlockPlaceholder = "Enter your master password",
+  passkeyUnlockTitle = "Unlock your vault",
+  passkeyUnlockDescription = "Signed in successfully. This passkey can't unlock the vault on its own — enter your master password to decrypt your data.",
+  settings,
+  transition,
+  decoration,
+  welcomeCtaLabel = "Get Started",
+}: AuthScreenProps = {}) {
+  const {
+    login: authLogin,
+    register: authRegister,
+    loginWithPasskey,
+    unlockWithPassword,
+  } = useAuth();
+  const router = useNavigation();
+  const { appName, Logo, tagline, routes, termsText, privacyText } = useAppConfig();
+
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+  const t = useMemo(() => ({ ...DEFAULT_TRANSITION, ...transition }), [transition]);
+
+  const [mode, setMode] = useState<Mode>("signin");
+  const [stage, setStage] = useState<Stage>("welcome");
+  const isSignup = mode === "signup";
+
+  // Stage morph: `stage` is the target; `displayStage` is what's rendered.
+  // On a stage change we fade/scale the content out, swap displayStage at zero
+  // opacity (so the centered-welcome → top-anchored-form layout change is
+  // invisible — no teleport, no overlap of the two states), then fade in.
+  const [displayStage, setDisplayStage] = useState<Stage>("welcome");
+  // Fade-through: `stage` is the target, `displayStage` is what's rendered. On
+  // a change the content fades/scales out, swaps at zero opacity (so the
+  // position change between stages is never seen), then fades back in.
+  const morph = useSharedValue(1);
+  useEffect(() => {
+    if (stage === displayStage) {
+      return;
+    }
+    morph.value = withTiming(
+      0,
+      { duration: STAGE_OUT_MS, easing: Easing.in(Easing.cubic) },
+      (done) => {
+        if (done) {
+          runOnJS(setDisplayStage)(stage);
+          morph.value = withTiming(1, { duration: STAGE_IN_MS, easing: Easing.out(Easing.cubic) });
+        }
+      }
+    );
+  }, [stage, displayStage, morph]);
+  const morphStyle = useAnimatedStyle(() => ({
+    opacity: morph.value,
+    transform: [{ scale: 0.94 + 0.06 * morph.value }, { translateY: (1 - morph.value) * 8 }],
+  }));
+  const onWelcome = displayStage === "welcome";
+
+  const [email, setEmail] = useState("");
+  const [displayName, setDisplayName] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [errors, setErrors] = useState<{
+    email?: string;
+    displayName?: string;
+    password?: string;
+    confirmPassword?: string;
+  }>({});
+
+  const [legal, setLegal] = useState<null | "terms" | "privacy">(null);
+  const [settingsOpen, setSettingsOpen] = useState(false);
+
+  const [pwnedInfo, setPwnedInfo] = useState<{
+    title: string;
+    message: string;
+    severity: "error" | "warning" | "info";
+    count: number;
+  } | null>(null);
+
+  const [passkeyStep, setPasskeyStep] = useState<"idle" | "passkey-loading" | "passkey-unlock">(
+    "idle"
+  );
+  const [unlockPassword, setUnlockPassword] = useState("");
+  const [unlockError, setUnlockError] = useState("");
+  const [pendingOnboardingStep, setPendingOnboardingStep] = useState<string | null>(null);
+  const passkeyAbortRef = useRef<AbortController | null>(null);
+
+  const [forgotSent, setForgotSent] = useState(false);
+
+  const emailShake = useShakeAnimation();
+  const displayNameShake = useShakeAnimation();
+  const passwordShake = useShakeAnimation();
+  const confirmShake = useShakeAnimation();
+  const firstError =
+    errors.email ?? errors.displayName ?? errors.password ?? errors.confirmPassword;
+
+  useEffect(() => () => passkeyAbortRef.current?.abort(), []);
+
+  const checkPasswordDebounced = useMemo(
+    () =>
+      debounce(async (pass: string) => {
+        const policy = getCachedPolicy() ?? DEFAULT_POLICY;
+        if (!policy.enabled || pass.length < 8) {
+          setPwnedInfo(null);
+          return;
+        }
+        const result = await checkPasswordPwned(pass);
+        if (result.isPwned) {
+          setPwnedInfo({ ...getPwnedMessage(result), count: result.count });
+        } else {
+          setPwnedInfo(null);
+        }
+      }, 1000),
+    []
+  );
+  useEffect(() => () => checkPasswordDebounced.cancel(), [checkPasswordDebounced]);
+
+  const switchMode = useCallback((next: Mode) => {
+    setMode(next);
+    setErrors({});
+    setPwnedInfo(null);
+  }, []);
+
+  const clearField = (field: keyof typeof errors) => {
+    if (errors[field]) {
+      setErrors((e) => ({ ...e, [field]: undefined }));
+    }
+  };
+
+  const validate = () => {
+    const next: typeof errors = {};
+    if (!email) {
+      next.email = "Email is required";
+    } else if (!validateEmail(email)) {
+      next.email = "Please enter a valid email";
+    }
+
+    if (!password) {
+      next.password = "Password is required";
+    } else if (password.length < 8) {
+      next.password = "Password must be at least 8 characters";
+    }
+
+    if (isSignup) {
+      if (!displayName) {
+        next.displayName = "Display name is required";
+      } else if (displayName.length > 100) {
+        next.displayName = "Display name must be 100 characters or less";
+      }
+      if (!confirmPassword) {
+        next.confirmPassword = "Please confirm your password";
+      } else if (password !== confirmPassword) {
+        next.confirmPassword = "Passwords do not match";
+      }
+    }
+    return next;
+  };
+
+  const shakeFor = (next: typeof errors) => {
+    if (next.email) {
+      emailShake.shake();
+    }
+    if (next.displayName) {
+      displayNameShake.shake();
+    }
+    if (next.password) {
+      passwordShake.shake();
+    }
+    if (next.confirmPassword) {
+      confirmShake.shake();
+    }
+  };
+
+  const performLogin = async () => {
+    setIsLoading(true);
+    try {
+      await authLogin(email.trim().toLowerCase(), password);
+      setPassword("");
+      await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+    } catch (error) {
+      await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+      const message = error instanceof Error ? error.message : "Login failed";
+      const code = error instanceof ApiError ? error.code : undefined;
+      if (code === "INVALID_CREDENTIALS") {
+        setErrors({ password: "Invalid email or password" });
+        emailShake.shake();
+        passwordShake.shake();
+      } else if (code === "ACCOUNT_LOCKED") {
+        setErrors({ email: "Account is locked. Please contact support." });
+        emailShake.shake();
+      } else {
+        setErrors({ password: message });
+        passwordShake.shake();
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const performRegister = async () => {
+    setIsLoading(true);
+    const policy = getCachedPolicy() ?? DEFAULT_POLICY;
+    if (policy.enabled) {
+      const pwned = await checkPasswordPwned(password);
+      if (pwned.isPwned) {
+        setPwnedInfo({ ...getPwnedMessage(pwned), count: pwned.count });
+        if (policy.enforce && pwned.count > policy.block_threshold) {
+          await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+          passwordShake.shake();
+          confirmShake.shake();
+          setIsLoading(false);
+          return;
+        }
+      } else {
+        setPwnedInfo(null);
+      }
+    }
+    try {
+      const username = (email.split("@")[0] || "user").replace(/[^a-zA-Z0-9_]/g, "_").toLowerCase();
+      await authRegister(email.trim().toLowerCase(), username, password, displayName.trim());
+      await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+    } catch (error) {
+      await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+      const message = error instanceof Error ? error.message : "Registration failed";
+      if (message.includes("email") && message.includes("exists")) {
+        setErrors({ email: "This email is already registered" });
+        emailShake.shake();
+      } else if (message.includes("username") && message.includes("exists")) {
+        setErrors({ email: "An account with this email already exists" });
+        emailShake.shake();
+      } else if (message.includes("password")) {
+        setErrors({ password: message });
+        passwordShake.shake();
+      } else {
+        setErrors({ email: message });
+        emailShake.shake();
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleSubmit = async () => {
+    if (isLoading) {
+      return;
+    }
+    const next = validate();
+    if (Object.keys(next).length > 0) {
+      setErrors(next);
+      shakeFor(next);
+      await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+      return;
+    }
+    setErrors({});
+    if (isSignup) {
+      await performRegister();
+    } else {
+      await performLogin();
+    }
+  };
+
+  const routeAfterUnlock = (onboardingStep?: string | null) => {
+    if (onboardingStep === "email_verification") {
+      router.replace({ pathname: routes.verifyEmail, params: { email } } as Href);
+    } else if (onboardingStep === "mfa_enrollment") {
+      router.replace(routes.mfaEnroll);
+    } else if (onboardingStep === "import") {
+      router.replace(routes.importData);
+    } else {
+      router.replace(routes.home);
+    }
+  };
+
+  const handlePasskeyLogin = async () => {
+    setPasskeyStep("passkey-loading");
+    setErrors({});
+    passkeyAbortRef.current?.abort();
+    const controller = new AbortController();
+    passkeyAbortRef.current = controller;
+    try {
+      const trimmed = email.trim().toLowerCase();
+      const result = await loginWithPasskey(
+        trimmed.length > 0 ? trimmed : undefined,
+        controller.signal
+      );
+      await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+      if (result.unlocked) {
+        setPasskeyStep("idle");
+        routeAfterUnlock(result.user.onboarding_step);
+        return;
+      }
+      setPendingOnboardingStep(result.user.onboarding_step ?? null);
+      setPasskeyStep("passkey-unlock");
+    } catch (error) {
+      const name = error instanceof Error ? error.name : undefined;
+      const benign = name === "NotAllowedError" || name === "AbortError";
+      if (!benign) {
+        await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+        setErrors({ password: error instanceof Error ? error.message : "Passkey sign-in failed" });
+      }
+      setPasskeyStep("idle");
+    }
+  };
+
+  const handleUnlockAfterPasskey = async () => {
+    if (!unlockPassword) {
+      setUnlockError("Master password is required");
+      await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+      return;
+    }
+    setIsLoading(true);
+    try {
+      await unlockWithPassword(unlockPassword);
+      setUnlockPassword("");
+      setUnlockError("");
+      await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+      routeAfterUnlock(pendingOnboardingStep ?? "complete");
+      setPasskeyStep("idle");
+    } catch (error) {
+      setUnlockError(
+        error instanceof Error ? error.message : "Failed to unlock the vault. Check your password."
+      );
+      await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleForgot = async () => {
+    if (isLoading) {
+      return;
+    }
+    if (!email || !validateEmail(email)) {
+      setErrors({ email: "Please enter a valid email" });
+      emailShake.shake();
+      return;
+    }
+    setErrors({});
+    setIsLoading(true);
+    try {
+      await AuthService.forgotPassword(email.trim().toLowerCase());
+      setForgotSent(true);
+      await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+    } catch {
+      // Don't leak account existence — always show the same confirmation.
+      setForgotSent(true);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const goAuth = () => {
+    setStage("auth");
+    setForgotSent(false);
+    setErrors({});
+  };
+
+  return (
+    <>
+      <SafeAreaView className="flex-1 bg-background">
+        <StatusBar style={isDark ? "light" : "dark"} />
+        <KeyboardAvoidingView
+          behavior={Platform.OS === "ios" ? "padding" : "height"}
+          className="flex-1"
+        >
+          <ScrollView
+            className="flex-1"
+            contentContainerStyle={SCROLL_CONTENT_STYLE}
+            keyboardShouldPersistTaps="handled"
+            showsVerticalScrollIndicator={false}
+          >
+            <View className="flex-1 justify-between px-6">
+              {/* top bar: settings gear only — back lives inside the cards
+                  (thumb-reachable) so users don't stretch to the corner. */}
+              <View className="mt-4 h-10 flex-row items-center justify-between">
+                <View />
+                {settings ? (
+                  <IconButton
+                    variant="ghost"
+                    size="sm"
+                    onPress={() => setSettingsOpen(true)}
+                    accessibilityLabel="Connection settings"
+                    accessibilityRole="button"
+                  >
+                    <Ionicons
+                      name="settings-outline"
+                      size={22}
+                      color={isDark ? "#A3A3A3" : "#737373"}
+                    />
+                  </IconButton>
+                ) : (
+                  <View />
+                )}
+              </View>
+
+              {/* One morph view driven by `morph`: dematerialize → swap
+                  layout+content at zero opacity → materialize. Welcome is
+                  centered; the form is top-anchored. Because the swap happens
+                  while invisible, the position change is never seen (no
+                  teleport) and the two stages never overlap. */}
+              <Animated.View
+                style={[
+                  { flex: 1, width: "100%", alignItems: "center", justifyContent: "center" },
+                  morphStyle,
+                ]}
+              >
+                <View className="mb-6 items-center">
+                  <View className="flex-row items-center">
+                    <Logo width={72} height={72} style={{ marginRight: -2 }} />
+                    <Heading className="text-4xl">{appName}</Heading>
+                  </View>
+                  {tagline ? (
+                    <Text className="mt-1 font-mono text-base text-muted-foreground">
+                      {tagline}
+                    </Text>
+                  ) : null}
+                </View>
+
+                {onWelcome ? (
+                  <View style={{ width: "100%", alignItems: "center" }}>
+                    {decoration ? (
+                      <View className="mb-6 w-full items-center">{decoration}</View>
+                    ) : null}
+                    <View style={{ width: "100%", maxWidth: 320 }}>
+                      <Button
+                        className="w-full"
+                        onPress={() => setStage("auth")}
+                        accessibilityLabel={welcomeCtaLabel}
+                        accessibilityRole="button"
+                        testID="welcome-get-started"
+                      >
+                        {welcomeCtaLabel}
+                      </Button>
+                    </View>
+                  </View>
+                ) : (
+                  <View style={{ width: "100%", alignItems: "center" }}>
+                    <Card className="w-full max-w-[360px]">
+                      {displayStage === "forgot" ? (
+                        <>
+                          <CardHeader>
+                            <CardTitle>Reset password</CardTitle>
+                          </CardHeader>
+                          <CardContent className="gap-4">
+                            {forgotSent ? (
+                              <MutedText className="text-sm leading-5">
+                                If an account exists for that email, we&apos;ve sent a link to reset
+                                your password. Check your inbox.
+                              </MutedText>
+                            ) : (
+                              <>
+                                <MutedText className="text-sm leading-5">
+                                  Enter your email and we&apos;ll send you a link to reset your
+                                  password.
+                                </MutedText>
+                                <ShakeField shake={emailShake} label="Email">
+                                  <EmailInput
+                                    value={email}
+                                    onChangeText={(text) => {
+                                      setEmail(text);
+                                      clearField("email");
+                                    }}
+                                    autoFocus
+                                    placeholder="you@example.com"
+                                    autoComplete="email"
+                                    invalid={!!errors.email}
+                                    returnKeyType="done"
+                                    onSubmitEditing={handleForgot}
+                                    accessibilityLabel="Email address"
+                                  />
+                                </ShakeField>
+                                <FormError message={errors.email} />
+                              </>
+                            )}
+                          </CardContent>
+                          <CardFooter className="flex-col gap-3 border-t-0 pt-0">
+                            {forgotSent ? (
+                              <Button
+                                className="w-full"
+                                onPress={goAuth}
+                                accessibilityLabel="Back to sign in"
+                              >
+                                Back to Sign In
+                              </Button>
+                            ) : (
+                              <>
+                                <Button
+                                  className="w-full"
+                                  onPress={handleForgot}
+                                  isLoading={isLoading}
+                                  accessibilityLabel="Send reset link"
+                                >
+                                  Send reset link
+                                </Button>
+                                <Text
+                                  className="mt-1 text-center font-mono text-sm text-muted-foreground"
+                                  onPress={goAuth}
+                                  accessibilityRole="button"
+                                  accessibilityLabel="Back to sign in"
+                                >
+                                  ← Back
+                                </Text>
+                              </>
+                            )}
+                          </CardFooter>
+                        </>
+                      ) : (
+                        <>
+                          <CardHeader className="gap-4">
+                            <SegmentedToggle<Mode>
+                              value={mode}
+                              onChange={switchMode}
+                              options={[
+                                { key: "signin", label: "Sign In" },
+                                { key: "signup", label: "Sign Up" },
+                              ]}
+                            />
+                            <CardTitle>
+                              {isSignup ? "Create your account" : `Sign in to ${appName}`}
+                            </CardTitle>
+                          </CardHeader>
+
+                          {/* Card height eases as fields appear/disappear. */}
+                          <Animated.View layout={t.layout}>
+                            <CardContent className="gap-3 pb-3">
+                              {!isSignup && passkeyEnabled ? (
+                                <Animated.View
+                                  entering={t.entering}
+                                  exiting={t.exiting}
+                                  layout={t.layout}
+                                >
+                                  <Button
+                                    variant="outline"
+                                    className="w-full"
+                                    onPress={handlePasskeyLogin}
+                                    isLoading={passkeyStep === "passkey-loading"}
+                                    accessibilityLabel="Sign in with passkey"
+                                    accessibilityRole="button"
+                                    testID="login-passkey-button"
+                                  >
+                                    <View className="flex-row items-center justify-center">
+                                      <Ionicons
+                                        name="key-outline"
+                                        size={20}
+                                        color={isDark ? "#FFFFFF" : "#000000"}
+                                        className="mr-2"
+                                      />
+                                      <Text className="text-base font-medium">
+                                        Sign in with passkey
+                                      </Text>
+                                    </View>
+                                  </Button>
+                                  <View className="mt-3">
+                                    <SeparatorWithText />
+                                  </View>
+                                </Animated.View>
+                              ) : null}
+
+                              <ShakeField shake={emailShake} label="Email">
+                                <EmailInput
+                                  value={email}
+                                  onChangeText={(text) => {
+                                    setEmail(text);
+                                    clearField("email");
+                                  }}
+                                  autoFocus
+                                  placeholder="you@example.com"
+                                  autoComplete="email"
+                                  invalid={!!errors.email}
+                                  accessibilityLabel="Email address"
+                                  testID="auth-email-input"
+                                />
+                              </ShakeField>
+
+                              {isSignup ? (
+                                <Animated.View
+                                  key="displayName"
+                                  entering={t.entering}
+                                  exiting={t.exiting}
+                                  layout={t.layout}
+                                >
+                                  <ShakeField shake={displayNameShake} label="Display Name">
+                                    <Input
+                                      value={displayName}
+                                      onChangeText={(text) => {
+                                        setDisplayName(text);
+                                        clearField("displayName");
+                                      }}
+                                      placeholder="Your display name"
+                                      leftIcon={
+                                        <Ionicons
+                                          name="person-outline"
+                                          size={20}
+                                          color={isDark ? "#A3A3A3" : "#737373"}
+                                        />
+                                      }
+                                      autoCapitalize="words"
+                                      autoCorrect={false}
+                                      maxLength={100}
+                                      invalid={!!errors.displayName}
+                                      accessibilityLabel="Display name"
+                                      testID="auth-displayname-input"
+                                    />
+                                  </ShakeField>
+                                </Animated.View>
+                              ) : null}
+
+                              <ShakeField shake={passwordShake} label={passwordLabel}>
+                                <PasswordInput
+                                  value={password}
+                                  onChangeText={(text) => {
+                                    setPassword(text);
+                                    clearField("password");
+                                    if (isSignup) {
+                                      checkPasswordDebounced(text);
+                                    }
+                                  }}
+                                  placeholder={passwordPlaceholder}
+                                  autoComplete={isSignup ? "password-new" : "password"}
+                                  invalid={!!errors.password}
+                                  returnKeyType={isSignup ? "next" : "done"}
+                                  onSubmitEditing={isSignup ? undefined : handleSubmit}
+                                  accessibilityLabel={passwordLabel}
+                                  testID="auth-password-input"
+                                />
+                              </ShakeField>
+
+                              {isSignup ? (
+                                <Animated.View
+                                  key="strength"
+                                  entering={t.entering}
+                                  exiting={t.exiting}
+                                  layout={t.layout}
+                                >
+                                  <PasswordStrengthMeter password={password} />
+                                  <PwnedPasswordWarning pwnedInfo={pwnedInfo} />
+                                </Animated.View>
+                              ) : null}
+
+                              {isSignup ? (
+                                <Animated.View
+                                  key="confirm"
+                                  entering={t.entering}
+                                  exiting={t.exiting}
+                                  layout={t.layout}
+                                >
+                                  <ShakeField shake={confirmShake} label="Confirm Password">
+                                    <PasswordInput
+                                      value={confirmPassword}
+                                      onChangeText={(text) => {
+                                        setConfirmPassword(text);
+                                        clearField("confirmPassword");
+                                      }}
+                                      placeholder="Re-enter your password"
+                                      autoComplete="password-new"
+                                      returnKeyType="done"
+                                      onSubmitEditing={handleSubmit}
+                                      invalid={!!errors.confirmPassword}
+                                      accessibilityLabel="Confirm password"
+                                      testID="auth-confirm-password-input"
+                                    />
+                                  </ShakeField>
+                                </Animated.View>
+                              ) : (
+                                <Animated.View
+                                  key="forgot"
+                                  entering={t.entering}
+                                  exiting={t.exiting}
+                                  layout={t.layout}
+                                  className="items-end"
+                                >
+                                  <Text
+                                    className="font-mono text-sm underline"
+                                    onPress={() => {
+                                      setStage("forgot");
+                                      setForgotSent(false);
+                                      setErrors({});
+                                    }}
+                                    accessibilityRole="link"
+                                    accessibilityLabel="Forgot password"
+                                  >
+                                    Forgot password?
+                                  </Text>
+                                </Animated.View>
+                              )}
+                            </CardContent>
+
+                            <CardFooter className="flex-col gap-3 border-t-0 pt-0">
+                              <FormError message={firstError} />
+
+                              <Button
+                                className="w-full"
+                                onPress={handleSubmit}
+                                isLoading={isLoading}
+                                accessibilityLabel={isSignup ? "Create account" : "Sign in"}
+                                accessibilityRole="button"
+                                testID="auth-submit"
+                              >
+                                {isSignup ? "Create Account" : "Sign In"}
+                              </Button>
+
+                              {socialAuth ? (
+                                <>
+                                  <SeparatorWithText />
+                                  {socialAuth}
+                                </>
+                              ) : null}
+
+                              {/* In-card back — thumb-reachable, so users don't
+                                have to stretch to the top-left corner arrow. */}
+                              <Text
+                                className="mt-1 text-center font-mono text-sm text-muted-foreground"
+                                onPress={() => setStage("welcome")}
+                                accessibilityRole="button"
+                                accessibilityLabel="Back"
+                              >
+                                ← Back
+                              </Text>
+                            </CardFooter>
+                          </Animated.View>
+                        </>
+                      )}
+                    </Card>
+                  </View>
+                )}
+              </Animated.View>
+
+              {/* legal footer — Terms/Privacy as popups, no routes */}
+              <View className="mb-6 mt-4">
+                <MutedText className="text-center text-xs leading-5">
+                  By continuing, you agree to our{" "}
+                  <Text
+                    className="text-xs text-foreground underline"
+                    onPress={() => setLegal("terms")}
+                    accessibilityRole="link"
+                    accessibilityLabel="Terms of Service"
+                  >
+                    Terms of Service
+                  </Text>{" "}
+                  and{" "}
+                  <Text
+                    className="text-xs text-foreground underline"
+                    onPress={() => setLegal("privacy")}
+                    accessibilityRole="link"
+                    accessibilityLabel="Privacy Policy"
+                  >
+                    Privacy Policy
+                  </Text>
+                </MutedText>
+              </View>
+            </View>
+          </ScrollView>
+        </KeyboardAvoidingView>
+      </SafeAreaView>
+
+      {/* Passkey unlock dialog — non-PRF authenticators. */}
+      <Dialog
+        visible={passkeyStep === "passkey-unlock"}
+        onClose={() => {
+          setPasskeyStep("idle");
+          setUnlockPassword("");
+          setUnlockError("");
+        }}
+        draggable
+        dismissOnBackdrop={false}
+      >
+        <View className="mb-5 items-center">
+          <View
+            className={`mb-4 h-14 w-14 items-center justify-center rounded-full ${isDark ? "bg-white/10" : "bg-black/5"}`}
+          >
+            <Ionicons name="lock-open-outline" size={28} color={isDark ? "#FFFFFF" : "#000000"} />
+          </View>
+          <Heading className="mb-2 text-xl">{passkeyUnlockTitle}</Heading>
+          <Text className="mb-3 text-center text-sm leading-5">{passkeyUnlockDescription}</Text>
+          <PasswordInput
+            value={unlockPassword}
+            onChangeText={(text) => {
+              setUnlockPassword(text);
+              if (unlockError) {
+                setUnlockError("");
+              }
+            }}
+            placeholder={passkeyUnlockPlaceholder}
+            error={unlockError}
+            autoComplete="password"
+            returnKeyType="done"
+            onSubmitEditing={handleUnlockAfterPasskey}
+            accessibilityLabel="Master password"
+            testID="login-passkey-unlock-input"
+          />
+        </View>
+        <DialogFooter style={{ justifyContent: "center" }}>
+          <DialogButton
+            variant="primary"
+            onPress={isLoading ? () => {} : handleUnlockAfterPasskey}
+            accessibilityLabel="Unlock"
+            accessibilityRole="button"
+          >
+            {isLoading ? "Unlocking…" : "Unlock"}
+          </DialogButton>
+        </DialogFooter>
+      </Dialog>
+
+      {/* Folded-in connection/server settings dialog. */}
+      {settings?.({ visible: settingsOpen, onClose: () => setSettingsOpen(false) })}
+
+      {/* Terms / Privacy popups. */}
+      <LegalDialog
+        visible={legal === "terms"}
+        onClose={() => setLegal(null)}
+        title="Terms of Service"
+        content={termsText}
+      />
+      <LegalDialog
+        visible={legal === "privacy"}
+        onClose={() => setLegal(null)}
+        title="Privacy Policy"
+        content={privacyText}
+      />
+    </>
+  );
+}
+
+export default AuthScreen;