@entropy-softworks/ui 2026.7.31

package/src/screens/auth/LoginScreen.tsx

@@ -0,0 +1,484 @@
+import React, { useEffect, useRef, useState } from "react";
+import { ScrollView, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { type Href } from "expo-router";
+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 { Heading, MutedText, Text } from "../../components/text";
+import { Button, IconButton } from "../../components/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../../components/card";
+import { EmailInput, PasswordInput } from "../../components/input";
+import { Dialog, DialogButton, DialogFooter } from "../../components/dialog";
+import { SeparatorWithText } from "../../components/separator";
+import { useAuth } from "../../hooks/useAuth";
+import { ApiError } from "../../utils/http-error";
+import { validateEmail } from "../../utils/validation";
+import { useShakeAnimation } from "../../hooks/useShakeAnimation";
+import ShakeField from "../../forms/shake-field";
+import FormError from "../../forms/form-error";
+import { useAppConfig } from "../../context/AppConfigContext";
+
+const SCROLL_CONTENT_STYLE = { flexGrow: 1 } as const;
+
+export interface LoginScreenProps {
+  /** Optional widget rendered top-right (vault wires its admin cog here). */
+  topAccessory?: React.ReactNode;
+  /**
+   * Optional social-auth block. When provided, the screen renders a
+   * separator above it.
+   */
+  socialAuth?: React.ReactNode;
+  /** Master-password field placeholder. */
+  passwordPlaceholder?: string;
+  /** Master-password field label. */
+  passwordLabel?: string;
+  /**
+   * Render the "Sign in with passkey" button + ceremony flow. Set to
+   * `true` only when the platform reports a usable WebAuthn implementation
+   * — pass the result of `isPasskeySupported()` or equivalent.
+   *
+   * The button drives `useAuth().loginWithPasskey`, which the consumer
+   * wires through `<AuthProvider loginWithPasskey={…}>`. A non-PRF
+   * outcome opens an inline unlock dialog and calls
+   * `useAuth().unlockWithPassword(password)` after submit.
+   */
+  passkeyEnabled?: boolean;
+  /** Master-password placeholder shown inside the passkey unlock dialog. */
+  passkeyUnlockPlaceholder?: string;
+  /** Title shown inside the passkey unlock dialog. */
+  passkeyUnlockTitle?: string;
+  /**
+   * Description rendered above the unlock input in the passkey dialog.
+   * Defaults to "Signed in successfully. This passkey can't unlock the
+   * vault on its own — enter your master password to decrypt your data."
+   */
+  passkeyUnlockDescription?: string;
+}
+
+export function LoginScreen({
+  topAccessory,
+  socialAuth,
+  passwordPlaceholder = "Enter your password",
+  passwordLabel = "Password",
+  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.",
+}: LoginScreenProps = {}) {
+  const { login: authLogin, loginWithPasskey, unlockWithPassword } = useAuth();
+  const router = useNavigation();
+  const { appName, Logo, routes } = useAppConfig();
+
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [errors, setErrors] = useState<{ email?: string; password?: string }>({});
+  // Passkey ceremony state machine.
+  //   "idle"            — default; primary CTA is the email/password form.
+  //   "passkey-loading" — passkey ceremony is in flight.
+  //   "passkey-unlock"  — server accepted the assertion but the
+  //                       authenticator did not honor PRF; collect the
+  //                       master password to complete local unlock.
+  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);
+
+  // Abort an in-flight passkey ceremony on unmount so the OS prompt
+  // tears down and the resolved credential doesn't land on a stale
+  // setState. Ref + cleanup so navigating away mid-ceremony is clean.
+  const passkeyAbortRef = useRef<AbortController | null>(null);
+  useEffect(
+    () => () => {
+      passkeyAbortRef.current?.abort();
+    },
+    []
+  );
+
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+
+  const emailShake = useShakeAnimation();
+  const passwordShake = useShakeAnimation();
+  const firstError = errors.email ?? errors.password;
+
+  const validateForm = () => {
+    const newErrors: typeof errors = {};
+
+    if (!email) {
+      newErrors.email = "Email is required";
+    } else if (!validateEmail(email)) {
+      newErrors.email = "Please enter a valid email";
+    }
+
+    if (!password) {
+      newErrors.password = "Password is required";
+    } else if (password.length < 8) {
+      newErrors.password = "Password must be at least 8 characters";
+    }
+
+    return newErrors;
+  };
+
+  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 errorMessage = error instanceof Error ? error.message : "Login failed";
+      // Prefer the server's machine-readable `error.code` over
+      // substring-matching the English message — i18n on the server
+      // (or a wording tweak) silently broke the old branches.
+      const code = error instanceof ApiError ? error.code : undefined;
+
+      // Codes the server emits today. Unknown / missing codes fall
+      // through to the generic "show the server's message" branch.
+      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: errorMessage });
+        passwordShake.shake();
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleLogin = async () => {
+    const newErrors = validateForm();
+    if (Object.keys(newErrors).length > 0) {
+      setErrors(newErrors);
+      if (newErrors.email) {
+        emailShake.shake();
+      }
+      if (newErrors.password) {
+        passwordShake.shake();
+      }
+      await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+      return;
+    }
+    setErrors({});
+
+    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 {
+      // `complete`, null, undefined, or any unknown step the client
+      // doesn't recognise — the consumer's route guard re-evaluates
+      // and bounces to welcome / the right step if the server says
+      // onboarding isn't done. Default to home rather than stranding
+      // the user.
+      router.replace(routes.home);
+    }
+  };
+
+  const handlePasskeyLogin = async () => {
+    setPasskeyStep("passkey-loading");
+    setErrors({});
+    // Abort any prior ceremony before starting a new one so a
+    // double-tap doesn't race two outstanding credentials.get() calls.
+    passkeyAbortRef.current?.abort();
+    const controller = new AbortController();
+    passkeyAbortRef.current = controller;
+    try {
+      const trimmedEmail = email.trim().toLowerCase();
+      const result = await loginWithPasskey(
+        trimmedEmail.length > 0 ? trimmedEmail : 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) {
+      // Distinguish user-cancel / programmatic-abort from real
+      // failures. `NotAllowedError` (user cancel, timeout) and
+      // `AbortError` (signal abort) shouldn't paint a destructive
+      // error on the password field — the user knows they cancelled.
+      // Real failures (`SecurityError`, `UnknownError`, network) do
+      // want the inline message + shake so the user falls back to
+      // password.
+      const name = error instanceof Error ? error.name : undefined;
+      const isBenign = name === "NotAllowedError" || name === "AbortError";
+      if (!isBenign) {
+        await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+        const message = error instanceof Error ? error.message : "Passkey sign-in failed";
+        setErrors({ password: message });
+      }
+      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) {
+      const message =
+        error instanceof Error ? error.message : "Failed to unlock the vault. Check your password.";
+      setUnlockError(message);
+      await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <SafeAreaView className="flex-1 bg-background">
+        <StatusBar style={isDark ? "light" : "dark"} />
+        <ScrollView
+          className="flex-1"
+          contentContainerStyle={SCROLL_CONTENT_STYLE}
+          keyboardShouldPersistTaps="handled"
+          showsVerticalScrollIndicator={false}
+        >
+          <View className="flex-1 justify-between px-6">
+            <View className="mt-4">
+              <IconButton
+                variant="ghost"
+                onPress={() => router.push(routes.welcome)}
+                className="self-start"
+                accessibilityLabel="Go back"
+                accessibilityRole="button"
+              >
+                <Ionicons name="arrow-back" size={24} color={isDark ? "#FFFFFF" : "#000000"} />
+              </IconButton>
+            </View>
+            {topAccessory}
+
+            <View className="flex-1 items-center justify-center">
+              <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>
+              </View>
+
+              <Card className="w-full max-w-[360px]">
+                <CardHeader>
+                  <CardTitle>Sign In</CardTitle>
+                  <CardDescription>Enter your credentials to sign in to {appName}</CardDescription>
+                </CardHeader>
+
+                <CardContent className="gap-4">
+                  {/* Passkey CTA above email/password — passkeys are
+                      the preferred primary factor when the device has
+                      one enrolled. Email is optional; when blank the
+                      server emits a discoverable-credential challenge
+                      and the platform UI picks the account. */}
+                  {passkeyEnabled ? (
+                    <>
+                      <Button
+                        variant="outline"
+                        className="w-full"
+                        onPress={handlePasskeyLogin}
+                        isLoading={passkeyStep === "passkey-loading"}
+                        accessibilityLabel="Sign in with passkey"
+                        accessibilityRole="button"
+                        accessibilityHint="Use a passkey from this device to sign in"
+                        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>
+                      <SeparatorWithText />
+                    </>
+                  ) : null}
+
+                  <ShakeField shake={emailShake} label="Email">
+                    <EmailInput
+                      value={email}
+                      onChangeText={(text) => {
+                        setEmail(text);
+                        if (errors.email) {
+                          setErrors({ ...errors, email: undefined });
+                        }
+                      }}
+                      autoFocus
+                      invalid={!!errors.email}
+                      autoComplete="email"
+                      accessibilityLabel="Email address"
+                      testID="login-email-input"
+                    />
+                  </ShakeField>
+
+                  <ShakeField shake={passwordShake} label={passwordLabel}>
+                    <PasswordInput
+                      value={password}
+                      onChangeText={(text) => {
+                        setPassword(text);
+                        if (errors.password) {
+                          setErrors({ ...errors, password: undefined });
+                        }
+                      }}
+                      placeholder={passwordPlaceholder}
+                      invalid={!!errors.password}
+                      autoComplete="password"
+                      returnKeyType="done"
+                      onSubmitEditing={handleLogin}
+                      accessibilityLabel={passwordLabel}
+                      testID="login-password-input"
+                    />
+                  </ShakeField>
+
+                  <View className="items-end">
+                    <Text
+                      className="font-mono text-sm underline"
+                      onPress={() => router.push(routes.forgotPassword)}
+                      accessibilityRole="link"
+                      accessibilityLabel="Forgot password"
+                    >
+                      Forgot password?
+                    </Text>
+                  </View>
+                </CardContent>
+
+                <CardFooter className="flex-col gap-3 border-t-0">
+                  <MutedText className="text-center text-sm">
+                    Don&apos;t have an account?{" "}
+                    <Text
+                      className="text-sm text-foreground underline"
+                      onPress={() => router.push(routes.register)}
+                      accessibilityRole="link"
+                      accessibilityLabel="Sign up"
+                    >
+                      Sign Up
+                    </Text>
+                  </MutedText>
+
+                  <FormError message={firstError} />
+
+                  <Button
+                    className="w-full"
+                    onPress={handleLogin}
+                    isLoading={isLoading}
+                    accessibilityLabel="Sign in"
+                    accessibilityRole="button"
+                    accessibilityHint="Double tap to sign in with your credentials"
+                    testID="login-submit"
+                  >
+                    Sign In
+                  </Button>
+
+                  {socialAuth ? (
+                    <>
+                      <SeparatorWithText />
+                      {socialAuth}
+                    </>
+                  ) : null}
+                </CardFooter>
+              </Card>
+            </View>
+
+            <View className="mb-6" />
+          </View>
+        </ScrollView>
+      </SafeAreaView>
+
+      {/* Passkey unlock dialog — shown only when the authenticator
+          did NOT honor the PRF extension. The session is already
+          established server-side; this prompt gathers the master
+          password so the consumer's `unlockWithPassword` handler can
+          derive the symmetric key locally before routing. */}
+      <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>
+    </>
+  );
+}
+
+export default LoginScreen;

package/src/screens/auth/MfaChallengeScreen.tsx

@@ -0,0 +1,216 @@
+import React, { useState } from "react";
+import { ActivityIndicator, Platform, Pressable, Text, TextInput, 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 AuthService from "../../services/auth.service";
+import { useAppConfig } from "../../context/AppConfigContext";
+import { getErrorMessage } from "../../utils/error";
+
+export function MfaChallengeScreen() {
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+  const router = useNavigation();
+  const { routes } = useAppConfig();
+
+  const [code, setCode] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [isRecoveryMode, setIsRecoveryMode] = useState(false);
+
+  const handleVerify = async () => {
+    // Re-entry guard: a fast double-tap (button + onSubmitEditing)
+    // would otherwise re-issue verifyMfa before `setIsLoading(true)`
+    // had time to flow through React and disable the submit. Each
+    // verify burns a one-shot TOTP attempt server-side; cheaper to
+    // gate at the client.
+    if (isLoading) {
+      return;
+    }
+    const trimmed = code.trim();
+    if (!isRecoveryMode && trimmed.length !== 6) {
+      setError("Please enter a 6-digit code");
+      await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+      return;
+    }
+    if (isRecoveryMode && trimmed.length === 0) {
+      setError("Please enter a recovery code");
+      await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+      return;
+    }
+
+    setIsLoading(true);
+    setError("");
+    try {
+      await AuthService.verifyMfa(trimmed);
+      await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+      router.replace(routes.home);
+    } catch (err) {
+      setError(getErrorMessage(err, "Invalid code"));
+      setCode("");
+      await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const toggleRecoveryMode = () => {
+    setIsRecoveryMode(!isRecoveryMode);
+    setCode("");
+    setError("");
+  };
+
+  const inputStyle = {
+    borderWidth: 1,
+    borderColor: error ? "#EF4444" : isDark ? "#333333" : "#E5E5E5",
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: Platform.OS === "ios" ? 12 : 8,
+    backgroundColor: isDark ? "#0A0A0A" : "#FAFAFA",
+  };
+
+  return (
+    <SafeAreaView className="flex-1" style={{ backgroundColor: isDark ? "#000000" : "#FFFFFF" }}>
+      <StatusBar style={isDark ? "light" : "dark"} />
+      <View className="flex-1 items-center justify-center px-6">
+        <View className="w-full max-w-[360px]">
+          <View className="items-center mb-6">
+            <Ionicons
+              name="shield-checkmark-outline"
+              size={48}
+              color={isDark ? "#FFFFFF" : "#000000"}
+            />
+          </View>
+
+          <Text
+            className="font-sans-bold text-2xl text-center mb-2"
+            style={{ color: isDark ? "#FFFFFF" : "#000000" }}
+          >
+            Two-Factor Authentication
+          </Text>
+
+          <Text
+            className="font-sans text-sm text-center mb-8"
+            style={{ color: isDark ? "#999999" : "#666666", lineHeight: 22 }}
+          >
+            {isRecoveryMode
+              ? "Enter one of your recovery codes"
+              : "Enter the 6-digit code from your authenticator app"}
+          </Text>
+
+          {error ? (
+            <View
+              className="rounded-lg p-3 mb-4"
+              style={{
+                backgroundColor: isDark ? "#1A0000" : "#FEF2F2",
+                borderWidth: 1,
+                borderColor: isDark ? "#7F1D1D" : "#FECACA",
+              }}
+            >
+              <Text className="font-sans text-sm text-center" style={{ color: "#EF4444" }}>
+                {error}
+              </Text>
+            </View>
+          ) : null}
+
+          {isRecoveryMode ? (
+            <TextInput
+              value={code}
+              onChangeText={(text) => {
+                setCode(text);
+                if (error) {
+                  setError("");
+                }
+              }}
+              placeholder="Enter recovery code"
+              placeholderTextColor={isDark ? "#999999" : "#666666"}
+              className="font-mono text-lg text-center tracking-wide"
+              style={{
+                ...inputStyle,
+                color: isDark ? "#FFFFFF" : "#000000",
+              }}
+              autoCapitalize="none"
+              autoCorrect={false}
+              autoFocus
+              returnKeyType="done"
+              onSubmitEditing={handleVerify}
+              accessibilityLabel="Recovery code"
+            />
+          ) : (
+            <TextInput
+              value={code}
+              onChangeText={(text) => {
+                const digits = text.replace(/[^0-9]/g, "").slice(0, 6);
+                setCode(digits);
+                if (error) {
+                  setError("");
+                }
+              }}
+              placeholder="000000"
+              placeholderTextColor={isDark ? "#999999" : "#666666"}
+              className="font-mono text-center"
+              style={{
+                ...inputStyle,
+                fontSize: 32,
+                color: isDark ? "#FFFFFF" : "#000000",
+                letterSpacing: 12,
+              }}
+              keyboardType="number-pad"
+              maxLength={6}
+              autoFocus
+              returnKeyType="done"
+              onSubmitEditing={handleVerify}
+              accessibilityLabel="Authenticator code"
+            />
+          )}
+
+          <Pressable
+            onPress={handleVerify}
+            disabled={isLoading}
+            className="rounded-lg items-center mt-5"
+            style={({ pressed }) => ({
+              backgroundColor: isDark ? "#FFFFFF" : "#000000",
+              paddingVertical: 14,
+              opacity: pressed || isLoading ? 0.7 : 1,
+            })}
+            accessibilityRole="button"
+            accessibilityLabel="Verify"
+            accessibilityHint="Double tap to verify your code"
+          >
+            {isLoading ? (
+              <ActivityIndicator color={isDark ? "#000000" : "#FFFFFF"} />
+            ) : (
+              <Text
+                className="font-sans-bold text-base"
+                style={{ color: isDark ? "#000000" : "#FFFFFF" }}
+              >
+                Verify
+              </Text>
+            )}
+          </Pressable>
+
+          <Pressable
+            onPress={toggleRecoveryMode}
+            className="mt-5 items-center"
+            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+            accessibilityRole="button"
+            accessibilityLabel={isRecoveryMode ? "Use authenticator code" : "Use recovery code"}
+          >
+            <Text
+              className="font-sans text-sm underline"
+              style={{ color: isDark ? "#999999" : "#666666" }}
+            >
+              {isRecoveryMode ? "Use authenticator code" : "Use recovery code"}
+            </Text>
+          </Pressable>
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+export default MfaChallengeScreen;