Phoneauthprovider 不是一个函数 firebase react-native答案

【问题标题】：Phoneauthprovider is not a function firebase react-nativePhoneauthprovider 不是一个函数 firebase react-native
【发布时间】：2021-11-18 13:00:36
【问题描述】：

大家好，我正在使用 react-native 和 fire base 制作应用，我在 firebase config 中有这个初始配置：

import firebase from 'firebase/app';
import 'firebase/auth';
import Constants from 'expo-constants';
// Firebase Config
// Initialize Firebase
export const firebaseConfig = {
  apiKey: Constants?.manifest?.extra?.apiKey,
  authDomain: Constants?.manifest?.extra?.authDomain,
  projectId: Constants?.manifest?.extra?.projectId,
  storageBucket: Constants?.manifest?.extra?.storageBucket,
  messagingSenderId: Constants?.manifest?.extra?.messagingSenderId,
  appId: Constants?.manifest?.extra?.appId
};

let Firebase

if (firebase.apps.length === 0) {
  console.log('hello world')
  Firebase = firebase.initializeApp(firebaseConfig);
}

export default Firebase;

我正在尝试调用此方法：

  const loginUser = async() => {
    switch(loginType){
      case 0:
      break;
      case 1:
        if (typeof(verificationId) == 'string') { 
          setLoading(true)
          try {
            const credential = new Firebase.auth.PhoneAuthProvider.credential(
              verificationId,
              verificationCode
            );
            await Firebase.auth.signInWithCredential(credential);
            showMessage({ text: 'Phone authentication successful ????' }); 
          } catch (err) {
            setLoading(false)
            showMessage({ text: `Error: ${err.message}`, color: 'red' });
          }
        } else {
          try {
              const phoneProvider = Firebase.auth.PhoneAuthProvider();
              const verificationId = await phoneProvider.verifyPhoneNumber(
                phoneNumber,
                recaptchaVerifier.current
              );
              setVerificationId(verificationId);
              showMessage({
                text: 'Verification code has been sent to your phone.',
              });
          } catch (err) {
              showMessage({ text: `Error: ${err.message}`, color: 'red' });
          }
        }
      break;
    }
  }

当我尝试调用我的“电话登录方法”时，react-native 向我显示此消息：

我使用本指南来了解如何配置环境： https://blog.jscrambler.com/how-to-integrate-firebase-authentication-with-an-expo-app

但是使用带有recaptcha的电话验证我没有发现问题我相信问题出在我的实现中，但什么也没找到

感谢您的回答

【问题讨论】：

标签： firebase react-native firebase-authentication

【解决方案1】：

我看到您正在尝试使用 firebase 实现电话身份验证，我个人使用此方法取得了成功：

async function signInWithPhoneNumber(phoneNumber) {
    //1. Have the user input thei phone number into a TextInput and pass it to this function
    //2. Have a confirm useState to make sure the verification code was sent successfully by firebase
    //3. Check for the confirm state in the main component and show the user another TextInput to enter the verification code if confirm has a value
    await firebase.auth()
        .signInWithPhoneNumber(phoneNumber)
        .then(confirmation => {
            setConfirm(confirmation)
        })
        .catch(e => {
            Alert.alert('Error sending verification code to this phone number')
        })
}

async function confirmCode(code) {
    //1. Have the code the user entered through the TextInput pass through here and call the below function
    try {
        let validation = await confirm?.confirm(code)
        if (validation) console.log('correct code.')
    } catch (error) {
        Alert.alert('Invalid code.')
    }
}

【讨论】：

【解决方案2】：

您正在导入自己的Firebase 对象，它是FirebaseApp 的一个实例。 PhoneAuthProvider 类未在 FirebaseApp 上定义，而是在（静态）firebase.auth 命名空间中。

因此，您还需要将常规 Firebase Auth SDK 导入到您的代码中，而不仅仅是您自己的 Firebase object, or you can attach the firebase.authnamespace to yourFirebase` 对象并从那里使用它：

...
if (firebase.apps.length === 0) {
  console.log('hello world')
  Firebase = firebase.initializeApp(firebaseConfig);
  Firebase.auth = firebase.auth;
}

export default Firebase;

【讨论】：