React Native Firebase 电话身份验证问题

Question

I have been struggling with the RN expo phone auth for weeks now and nothing seems to work, can anyone share a working code?

Answer 1

I was struggling with same thing today, but I found this the Expo Doc is very helpful for me (There is also a demo there) .

here is the Expo Doc:

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

Answer 2

I have found the solution for the RN Expo firebase auth. Here is an entire working code and remember to install these dependencies yarn add expo-firebase-recaptcha and expo install firebase . Note the f is my firebase from my config folder. Good luck and I hope this helps someone. :)

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',
  },
})