如何在Expo上使用Firebase Phone Aut（React Native 2022）

Question

我是博览会的新手，我正在尝试通过电话通过firebase身份验证登录的申请，但是我找不到足够的文档 是否有人成功实现了Expo（SDK 44）中的Firebase身份验证 我找到了本教程，但仅与Firebase 8一起使用，当前是Firebase 9.8.4 目前它不再起作用

https://arjayosma.medium.com/set-up-firebase-phone-authentication-in-expo-sdk-37-without-ejecting-8a472460b1cf

Answer 1

使用Firebase JS SDK不可能开箱即用的Firebase电话身份验证。这是因为需要使用应用程序验证器对象（recaptcha）作为另一种安全措施来验证用户是真实的，而不是firebase JS SDK工作流中的机器人。

Expo中的FirebaseRecaptcha用于补偿该物体。但是，该模块将不再在SDK 48中可用。可以构建应用程序迁移以反应本地firebase

Answer 2

对于我来说，这对我有用：

import React, { useRef, useState } from "react";
import { useNavigation } from "@react-navigation/native";
import useAuth from "../../../hooks/useAuth";
import { auth, app } from "../../../firebase";
import { PhoneAuthProvider } from "firebase/auth";
import {
  FirebaseRecaptchaVerifierModal,
  FirebaseRecaptchaBanner,
} from "expo-firebase-recaptcha";


const Component = () => {
    const navigation = useNavigation();
    const [loading, setLoading] = useState(false);
    const [phoneNumberValue, setPhoneNumberValue] = useState("");
    const [countryCode, setCountryCode] = useState("30");
  
    const formatPhoneNumber = (newValue) => {
        const numericValue = newValue.replace(/\D/g, "");

        setPhoneNumberValue(numericValue);
    };


    const AuthWithPhone = async () => {
        try {
            setLoading(true);
            const formattedPhone = `+${countryCode}` + phoneNumberValue;

            const phoneProvider = new PhoneAuthProvider(auth);
            const verifiedId = await phoneProvider.verifyPhoneNumber(
                formattedPhone,
                recaptchaVerifier.current
            );

            setUserAuth((prevUserAuth) => ({
                ...prevUserAuth,
                phoneNumber: formattedPhone,
                verificationId: verifiedId,
                message: "Verification code has been sent to your phone.",
            }));

            setLoading(false);
            navigation.navigate("OTPVerification");
        } catch (err) {
            console.log("Verification error");
            setUserAuth((prevUserAuth) => ({
                ...prevUserAuth,
                message: `Error: ${err.message}`,
            }));
        }
    };
    return (
        <>
            <FirebaseRecaptchaVerifierModal
              ref={recaptchaVerifier}
              firebaseConfig={firebaseConfig}
              attemptInvisibleVerification={attemptInvisibleVerification}
            />
                <TextInput
                  value={phoneNumberValue}
                  placeholder="6912345678"
                  keyboardType="phone-pad"
                  autoCompleteType="tel"
                  onFocus={() => setInputBorder("black")}
                  onChangeText={(value) => formatPhoneNumber(value)}
                  }/>
                
      </>
    )
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>