@entropy-softworks/ui 2026.7.31

package/src/screens/auth/MfaEnrollScreen.tsx

@@ -0,0 +1,388 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Pressable, ScrollView, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { useNavigation } from "../../context/NavigationContext";
+import { StatusBar } from "expo-status-bar";
+import { Ionicons } from "@expo/vector-icons";
+import { useColorScheme } from "nativewind";
+import * as Haptics from "expo-haptics";
+import { copyToClipboard as sharedCopy } from "../../utils/clipboard";
+import QRCode from "react-native-qrcode-svg";
+import Toast from "react-native-toast-message";
+import { MonoText, MutedText } from "../../components/text";
+import { Button } from "../../components/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../../components/card";
+import { Input } from "../../components/input";
+import { Separator } from "../../components/separator";
+import AuthService from "../../services/auth.service";
+import { useAuth } from "../../hooks/useAuth";
+import { useAppConfig } from "../../context/AppConfigContext";
+import { getErrorMessage } from "../../utils/error";
+
+type Step = "prompt" | "setup" | "verify" | "recovery" | "done";
+
+export interface MfaEnrollScreenProps {
+  /**
+   * Optional promo widget rendered on the prompt step (vault advertises
+   * its authenticator app here). When omitted, the screen renders
+   * nothing in that slot.
+   */
+  authenticatorAppPromo?: React.ReactNode;
+}
+
+export function MfaEnrollScreen({ authenticatorAppPromo }: MfaEnrollScreenProps = {}) {
+  const { refreshUser } = useAuth();
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+  const router = useNavigation();
+  const { appName, routes } = useAppConfig();
+
+  const [step, setStep] = useState<Step>("prompt");
+  const [setupData, setSetupData] = useState<{
+    uri: string;
+    secret: string;
+    recovery_codes: string[];
+  } | null>(null);
+  const [code, setCode] = useState("");
+  const [error, setError] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [copied, setCopied] = useState<string | null>(null);
+  const copiedResetTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  useEffect(
+    () => () => {
+      if (copiedResetTimerRef.current) {
+        clearTimeout(copiedResetTimerRef.current);
+      }
+    },
+    []
+  );
+
+  // The shared `copyToClipboard` writes the value AND schedules the
+  // 30s auto-wipe at module scope, so unmounting this screen no
+  // longer cancels the wipe (the previous component-scoped timer
+  // was the exact footgun the shared helper exists to avoid).
+  const copyToClipboard = async (text: string, label: string) => {
+    const ok = await sharedCopy(text);
+    if (!ok) {
+      return;
+    }
+    setCopied(label);
+    Toast.show({ type: "success", text1: `${label} copied`, visibilityTime: 1500 });
+    if (copiedResetTimerRef.current) {
+      clearTimeout(copiedResetTimerRef.current);
+    }
+    copiedResetTimerRef.current = setTimeout(() => {
+      setCopied(null);
+    }, 30_000);
+  };
+
+  const handleStartSetup = async () => {
+    setIsLoading(true);
+    try {
+      const data = await AuthService.setupMfa();
+      setSetupData(data);
+      setStep("setup");
+    } catch (e: unknown) {
+      Toast.show({
+        type: "error",
+        text1: getErrorMessage(e, "Failed to start MFA setup"),
+        visibilityTime: 3000,
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleVerifyCode = async () => {
+    if (code.length !== 6) {
+      setError("Enter the 6-digit code from your authenticator app");
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      await AuthService.verifyMfaSetup(code);
+      await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+      if (setupData) {
+        setSetupData({ ...setupData, secret: "", uri: "" });
+      }
+      setStep("recovery");
+    } catch (e: unknown) {
+      setError(getErrorMessage(e, "Invalid code. Make sure your authenticator is synced."));
+      await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleFinish = async () => {
+    try {
+      await refreshUser();
+      setSetupData(null);
+      Toast.show({
+        type: "success",
+        text1: "MFA enabled!",
+        text2: "Your account is now protected with two-factor authentication.",
+        visibilityTime: 3000,
+      });
+      router.replace(routes.importData);
+    } catch (e: unknown) {
+      Toast.show({
+        type: "error",
+        text1: getErrorMessage(e, "Failed to continue"),
+        visibilityTime: 3000,
+      });
+    }
+  };
+
+  const handleSkip = async () => {
+    try {
+      setSetupData(null);
+      await AuthService.completeOnboarding();
+      await refreshUser();
+      router.replace(routes.importData);
+    } catch (e: unknown) {
+      Toast.show({
+        type: "error",
+        text1: getErrorMessage(e, "Failed to skip"),
+        visibilityTime: 3000,
+      });
+    }
+  };
+
+  return (
+    <SafeAreaView className="flex-1 bg-background">
+      <StatusBar style={isDark ? "light" : "dark"} />
+      <ScrollView
+        className="flex-1"
+        contentContainerClassName="flex-1 items-center justify-center p-6"
+        keyboardShouldPersistTaps="handled"
+      >
+        <Card className="w-full max-w-[400px]">
+          {step === "prompt" ? (
+            <>
+              <CardHeader className="items-center">
+                <View className="mb-3 h-16 w-16 items-center justify-center rounded-full bg-secondary dark:bg-neutral-800">
+                  <Ionicons
+                    name="shield-checkmark-outline"
+                    size={32}
+                    color={isDark ? "#FFFFFF" : "#000000"}
+                  />
+                </View>
+                <CardTitle className="text-center">Secure your account</CardTitle>
+                <CardDescription className="text-center">
+                  Add an extra layer of security with two-factor authentication (MFA). You&apos;ll
+                  need an authenticator app to generate verification codes.
+                </CardDescription>
+              </CardHeader>
+
+              {authenticatorAppPromo ? (
+                <CardContent className="gap-3">{authenticatorAppPromo}</CardContent>
+              ) : null}
+
+              <CardFooter className="flex-col gap-3 border-t-0">
+                <Button
+                  className="w-full"
+                  onPress={handleStartSetup}
+                  isLoading={isLoading}
+                  accessibilityLabel="Enable MFA"
+                  accessibilityRole="button"
+                >
+                  Enable MFA
+                </Button>
+                <Button
+                  variant="ghost"
+                  className="w-full"
+                  onPress={handleSkip}
+                  accessibilityLabel="Skip for now"
+                  accessibilityRole="button"
+                >
+                  Skip for now
+                </Button>
+              </CardFooter>
+            </>
+          ) : null}
+
+          {step === "setup" && setupData ? (
+            <>
+              <CardHeader className="items-center">
+                <CardTitle className="text-center">Scan QR code</CardTitle>
+                <CardDescription className="text-center">
+                  Open your authenticator app and scan this QR code, or enter the secret key
+                  manually.
+                </CardDescription>
+              </CardHeader>
+
+              <CardContent className="gap-4">
+                <View className="items-center">
+                  <View className="rounded-xl bg-white p-4">
+                    <QRCode
+                      value={setupData.uri}
+                      size={200}
+                      backgroundColor="#FFFFFF"
+                      color="#000000"
+                    />
+                  </View>
+                  <MutedText className="mt-2 text-center text-xs">
+                    Scan with your authenticator app
+                  </MutedText>
+                </View>
+
+                <Separator />
+
+                <View>
+                  <MutedText className="mb-2 text-center text-xs font-medium">
+                    Can&apos;t scan? Enter the secret key manually
+                  </MutedText>
+                  <Pressable
+                    onPress={() => copyToClipboard(setupData.secret, "Secret")}
+                    className="rounded-lg bg-secondary p-3 active:opacity-70 dark:bg-neutral-800"
+                    accessibilityRole="button"
+                    accessibilityLabel="Copy secret key"
+                    accessibilityHint="Double tap to copy the secret key to clipboard"
+                  >
+                    <MonoText className="text-center text-base font-bold tracking-widest">
+                      {setupData.secret}
+                    </MonoText>
+                  </Pressable>
+                  <MutedText className="mt-1 text-center text-xs">Tap to copy</MutedText>
+                </View>
+
+                <Pressable
+                  onPress={() => copyToClipboard(setupData.uri, "URI")}
+                  className="rounded-lg bg-secondary px-3 py-2 active:opacity-70 dark:bg-neutral-800"
+                  accessibilityRole="button"
+                  accessibilityLabel="Copy full OTP URI"
+                >
+                  <MutedText className="text-center text-xs">Copy full OTP URI</MutedText>
+                </Pressable>
+
+                <Separator />
+
+                <View>
+                  <MutedText className="mb-1.5 text-center text-xs font-medium">
+                    Enter the 6-digit code from your authenticator
+                  </MutedText>
+                  <Input
+                    value={code}
+                    onChangeText={(text) => {
+                      setCode(text.replace(/[^0-9]/g, "").slice(0, 6));
+                      if (error) {
+                        setError("");
+                      }
+                    }}
+                    error={error}
+                    placeholder="000000"
+                    keyboardType="number-pad"
+                    className="text-center font-mono text-xl tracking-widest"
+                    returnKeyType="done"
+                    onSubmitEditing={handleVerifyCode}
+                    accessibilityLabel="Authenticator code"
+                  />
+                </View>
+              </CardContent>
+
+              <CardFooter className="flex-col gap-3 border-t-0">
+                <Button
+                  className="w-full"
+                  onPress={handleVerifyCode}
+                  isLoading={isLoading}
+                  disabled={code.length !== 6}
+                  accessibilityLabel="Verify and enable MFA"
+                  accessibilityRole="button"
+                >
+                  Verify & Enable
+                </Button>
+                <Button
+                  variant="ghost"
+                  className="w-full"
+                  onPress={handleSkip}
+                  accessibilityLabel="Skip for now"
+                  accessibilityRole="button"
+                >
+                  Skip for now
+                </Button>
+              </CardFooter>
+            </>
+          ) : null}
+
+          {step === "recovery" && setupData ? (
+            <>
+              <CardHeader className="items-center">
+                <View className="mb-3 h-16 w-16 items-center justify-center rounded-full bg-secondary dark:bg-neutral-800">
+                  <Ionicons
+                    name="shield-checkmark"
+                    size={32}
+                    color={isDark ? "#FFFFFF" : "#000000"}
+                  />
+                </View>
+                <CardTitle className="text-center">MFA enabled!</CardTitle>
+                <CardDescription className="text-center">
+                  Save these recovery codes in a safe place. You&apos;ll need them to access your
+                  account if you lose your authenticator device.
+                </CardDescription>
+              </CardHeader>
+
+              <CardContent className="gap-3">
+                <View className="rounded-lg border border-border bg-secondary p-4 dark:border-neutral-700 dark:bg-neutral-800">
+                  {setupData.recovery_codes.map((rc) => (
+                    <MonoText key={rc} className="text-center text-sm leading-6">
+                      {rc}
+                    </MonoText>
+                  ))}
+                </View>
+
+                <Button
+                  variant="outline"
+                  className="w-full"
+                  onPress={() =>
+                    copyToClipboard(setupData.recovery_codes.join("\n"), "Recovery codes")
+                  }
+                  accessibilityLabel="Copy all recovery codes"
+                  accessibilityRole="button"
+                >
+                  {copied === "Recovery codes" ? "Copied!" : "Copy all codes"}
+                </Button>
+
+                <View className="rounded-lg bg-secondary p-3 dark:bg-neutral-800">
+                  <View className="flex-row items-start gap-2">
+                    <Ionicons
+                      name="warning-outline"
+                      size={16}
+                      color={isDark ? "#F59E0B" : "#D97706"}
+                    />
+                    <MutedText className="flex-1 text-xs leading-4">
+                      Each code can only be used once. Store them securely — they cannot be
+                      recovered if lost.
+                    </MutedText>
+                  </View>
+                </View>
+              </CardContent>
+
+              <CardFooter className="border-t-0">
+                <Button
+                  className="w-full"
+                  onPress={handleFinish}
+                  accessibilityLabel={`Continue to ${appName}`}
+                  accessibilityRole="button"
+                >
+                  Continue to {appName}
+                </Button>
+              </CardFooter>
+            </>
+          ) : null}
+        </Card>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+export default MfaEnrollScreen;

package/src/screens/auth/PasskeyEnrollScreen.tsx

@@ -0,0 +1,96 @@
+import React from "react";
+import { ScrollView } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { StatusBar } from "expo-status-bar";
+import { useColorScheme } from "nativewind";
+import { MutedText, Text } from "../../components/text";
+import { Button } from "../../components/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../../components/card";
+
+export interface PasskeyEnrollScreenProps {
+  /** Start the WebAuthn registration ceremony (host app owns the ceremony). */
+  onEnroll: () => void;
+  /** Continue without enrolling a passkey. */
+  onSkip: () => void;
+  isLoading?: boolean;
+  error?: string;
+}
+
+/**
+ * Standalone passkey (WebAuthn) enrollment prompt — offered after sign-in so a
+ * user can add a passkey without going through account settings. Presentational:
+ * the host app runs the actual `navigator.credentials` ceremony via its
+ * AuthService and drives navigation on enroll / skip.
+ */
+export function PasskeyEnrollScreen({
+  onEnroll,
+  onSkip,
+  isLoading,
+  error,
+}: PasskeyEnrollScreenProps) {
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+
+  return (
+    <SafeAreaView className="flex-1 bg-background">
+      <StatusBar style={isDark ? "light" : "dark"} />
+      <ScrollView
+        className="flex-1"
+        contentContainerClassName="flex-1 items-center justify-center p-6"
+        keyboardShouldPersistTaps="handled"
+      >
+        <Card className="w-full max-w-[380px]">
+          <CardHeader>
+            <CardTitle>Add a passkey</CardTitle>
+            <CardDescription>
+              Sign in faster and more securely next time with a passkey — your
+              device unlocks it with your fingerprint, face, or PIN. No password
+              to remember or phish.
+            </CardDescription>
+          </CardHeader>
+
+          <CardContent className="gap-2">
+            {error ? (
+              <Text className="text-sm text-destructive">{error}</Text>
+            ) : (
+              <MutedText className="text-sm">
+                You can always add or remove passkeys later in your account
+                settings.
+              </MutedText>
+            )}
+          </CardContent>
+
+          <CardFooter className="flex-col gap-3 border-t-0">
+            <Button
+              className="w-full"
+              onPress={onEnroll}
+              isLoading={isLoading}
+              accessibilityLabel="Add a passkey"
+              accessibilityRole="button"
+            >
+              Add a passkey
+            </Button>
+            <Button
+              className="w-full"
+              variant="ghost"
+              onPress={onSkip}
+              accessibilityLabel="Not now"
+              accessibilityRole="button"
+            >
+              Not now
+            </Button>
+          </CardFooter>
+        </Card>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+export default PasskeyEnrollScreen;