Untitled

import {View, Text, KeyboardAvoidingView, TextInput, ActivityIndicator, TouchableOpacity, StyleSheet, Alert} from "react-native";
import React, {useState} from "react";
import {useNavigation} from "@react-navigation/native";
import auth, {firebase} from "@react-native-firebase/auth";
import {FIREBASE_APP} from "../FirebaseConfig";

import * as SecureStore from "expo-secure-store";
import * as LocalAuthentication from "expo-local-authentication";

import {initiatePhoneNumberVerification, linkPhoneNumberToAccount} from "../helperFunctions/AuthenticationFunctions";
import {collection, doc, getFirestore, setDoc} from "firebase/firestore";
import {NativeStackNavigationProp} from "@react-navigation/native-stack";
import {EditorParams} from "../App";
import {getValueFor, save} from "../helperFunctions/StorageFunctions";
import {PhoneAuthProvider} from "firebase/auth";

interface PageThreeProps {
  route: any;
}

export default function PhoneNumberVerification({route}: PageThreeProps): JSX.Element {
  const [loading, setLoading] = useState(false);
  const [verificationCode, setVerificationCode] = useState("");
  const [confirmation, setConfirmation] = useState("");

  const {email, phone, password} = route.params;
  const user = auth().currentUser;

  const db = getFirestore(FIREBASE_APP);
  const navigation = useNavigation<NativeStackNavigationProp<EditorParams>>();

  const handleAlert = async (decision: String) => {
    if (decision == "YES") {
      const result = await LocalAuthentication.authenticateAsync({
        promptMessage: "Authenticate with Face ID",
        disableDeviceFallback: false,
      });
      if (result.success) {
        const opt_into_face_auth = {answer: "YES"};

        save("opt_into_face_auth", opt_into_face_auth);

        save("UserKey", {user: email, password: password});

        const isFirstTimeOpened = await SecureStore.getItemAsync("firstTimeOpened");

        if (isFirstTimeOpened) {
          await SecureStore.setItemAsync("firstTimeOpened", "false");
        }
      }
    } else {
      // Saving as no before show OS system prompt will allow them to enable this in the future easily.
      const opt_into_face_auth = {answer: "NO"};
      save("opt_into_face_auth", opt_into_face_auth);
    }
  };

  const allowFaceID = async () => {
    try {
      let returnValue = await getValueFor("opt_into_face_auth");

      if (returnValue == null) {
        Alert.alert('Do you want to allow "pudo" to use Face ID?', "Use Face ID to authenticate on pudo", [
          {text: "NO", onPress: () => handleAlert("NO")},
          {text: "YES", onPress: () => handleAlert("YES")},
        ]);
      }
    } catch (error) {
      console.error("Error during authentication:", error);
    }
  };

  const handleCodeConfirmation = async () => {
    setLoading(true);

    try {
      await linkPhoneNumberToAccount(user, confirmation, verificationCode);

      // Storing users credentials in firestore under given UID
      const userDocRef = doc(collection(db, "users"), user?.uid);
      const userCredentials = {email, phone};
      await setDoc(userDocRef, userCredentials);

      await allowFaceID();

      navigation.navigate("Dashboard");
    } catch (error) {
      setLoading(false);
      console.log(`Error confirming verification code: ${error}`);
    } finally {
      setLoading(false);
    }
  };

  const sendVerificaitonCode = async () => {
    setLoading(true);

    try {
      // Handle the verify phone button press
      const phoneAuth = await firebase.auth().verifyPhoneNumber(phone);

      const verificationId = phoneAuth.verificationId;

      alert("Verification code sent");

      setConfirmation(verificationId);
    } catch (error) {
      console.log(error);
      Alert.alert("Error Sending Verification Code");
    } finally {
      setLoading(false);
    }
  };

  return (
    <View style={styles.container}>
      <KeyboardAvoidingView behavior="padding">
        <TextInput value={verificationCode} style={styles.input} placeholder="Verification code" autoCapitalize="none" onChangeText={(text) => setVerificationCode(text)} />
        {loading ? (
          <ActivityIndicator size="large" color="#0000f" />
        ) : (
          <View style={styles.ButtonContainer}>
            <TouchableOpacity onPress={handleCodeConfirmation} style={styles.signUpButton} disabled={loading}>
              <Text>Next</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={sendVerificaitonCode} style={styles.signUpButton} disabled={loading}>
              <Text>Send Verification</Text>
            </TouchableOpacity>
          </View>
        )}
      </KeyboardAvoidingView>
    </View>
  );
}