React Native Firebase 電話身份驗證問題

Question

我一直在努力使用 RN expo 電話身份驗證數周，但似乎沒有任何效果，有人可以分享工作代碼嗎？

Answer 1

我今天也在為同樣的事情苦苦掙扎，但我發現 Expo Doc 對我很有幫助（那里還有一個演示） 。

這是 Expo 文檔：

• https://docs.expo.io/versions/latest/sdk/firebase-recaptcha/

Answer 2

我找到了 RN Expo firebase 身份驗證的解決方案。 這是一個完整的工作代碼，請記住安裝這些依賴yarn add expo-firebase-recaptcha和expo install firebase 。 注意f是我的配置文件夾中的firebase 。 祝你好運，我希望這對某人有所幫助。 :)

import React, { useRef, useState } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, TextInput } from 'react-native';
import { FirebaseRecaptchaVerifierModal } from 'expo-firebase-recaptcha'
import { f } from './firebaseConfig/config'


export default App = () => {
  const [phoneNumber, setPhoneNumber] = useState('');
  const [code, setCode] = useState('');
  const [verificationId, setVerificationId] = useState();
  const recaptchaVerifier = useRef();

  const sendVerification = () => {
    const phoneProvider = new f.auth.PhoneAuthProvider();
    phoneProvider
      .verifyPhoneNumber(phoneNumber, recaptchaVerifier.current)
      .then(setVerificationId);
  };

  const confirmCode = () => {
    const credential = f.auth.PhoneAuthProvider.credential(
      verificationId,
      code
    );
    f
      .auth()
      .signInWithCredential(credential)
      .then((result) => {
        console.log(result);
      });
  };

  return (

      <View style={styles.container}>
        <FirebaseRecaptchaVerifierModal
          ref={recaptchaVerifier}
          firebaseConfig={f.app().options}
        />
        <TextInput
          placeholder="Phone Number"
          onChangeText={setPhoneNumber}
          keyboardType="phone-pad"
          autoCompleteType="tel"
          style={styles.textInput}
        />
        <TouchableOpacity
          style={styles.sendVerification}
          onPress={sendVerification}
        >
          <Text style={styles.buttonText}>Send Verification</Text>
        </TouchableOpacity>
        <TextInput
          placeholder="Confirmation Code"
          onChangeText={setCode}
          keyboardType="number-pad"
          style={styles.textInput}

        />
        <TouchableOpacity
          style={styles.setCode}
          onPress={confirmCode}>
          <Text style={styles.sendVerification}>Send Verification</Text>
        </TouchableOpacity>
      </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  textInput: {
    paddingTop: 40,
    paddingBottom: 20,
    paddingHorizontal: 20,
    fontSize: 24,
    borderBottomColor: '#7f8c8d33',
    borderBottomWidth: 2,
    marginBottom: 10,
    textAlign: 'center',
  },
  sendVerification: {
    padding: 20,
    backgroundColor: '#3498db',
    borderRadius: 10,
  },
  sendCode: {
    padding: 20,
    backgroundColor: '#333',
    borderRadius: 10,
  },
  buttonText: {
    textAlign: 'center',
    color: '#fff',
  },
})