CODEWITHSUNDEEP
reactjsfirebasereact-nativegoogle-cloud-firestorefirebase-authentication
mahendra Kumar
mahendra Kumar

Reputation: 23

How to disable firebase phone number authentication reCapcha in react native?

How to disable google firebase authentication ReCaptcha in the react native? I referred to so many resources I haven't found any solution.

import React, { useState, useRef } from "react";
import { Text, TextInput, TouchableOpacity, View } from "react-native";
import { FirebaseRecaptchaVerifierModal } from "expo-firebase-recaptcha";
import firebase from "../Firebase/Firebase";

export default Phone = () => {
  const [verificationId, setVerificationId] = React.useState();
  const [verificationCode, setVerificationCode] = React.useState();
  const [phoneNumber, setPhoneNumber] = useState("");
  const firebaseConfig = firebase.apps.length
    ? firebase.app().options
    : undefined;
  const recaptchaVerifier = useRef(null);
  const [code, setCode] = useState("");
  const sendVerification = () => {
  const phoneProvider = new firebase.auth.PhoneAuthProvider();
  phoneProvider
    .verifyPhoneNumber(phoneNumber, recaptchaVerifier.current)
    .then(setVerificationId)
    .catch((error) => {
      alert(error);
      return;
    });
  console.log(setVerificationId);
  };
  const confirmCode = () => {
    const credential = firebase.auth.PhoneAuthProvider.credential(
      verificationId,
      code
    );
    firebase
      .auth()
      .signInWithCredential(credential)
      .then((result) => {
        console.log(result.user);
      });
  };
  return (
    <View>
      <View>
        <TextInput
          placeholder="Phone Number"
          onChangeText={setPhoneNumber}
          keyboardType="phone-pad"
          autoCompleteType="tel"
        />
        <TouchableOpacity onPress={sendVerification}>
          <Text>Send Verification</Text>
        </TouchableOpacity>
        <TextInput
          placeholder="Confirmation Code"
          onChangeText={setCode}
          keyboardType="number-pad"
        />
        <TouchableOpacity onPress={confirmCode}>
          <Text>Send Verification</Text>
        </TouchableOpacity>
        <FirebaseRecaptchaVerifierModal
          ref={recaptchaVerifier}
          firebaseConfig={firebaseConfig}
        />
      </View>
    </View>
  );
};

Upvotes: 0

Views: 2831

Answers (2)

Bhavya Koshiya
Bhavya Koshiya

Reputation: 1806

if you're using expo then you can just put this prop in FirebaseRecaptchaVerifierModal like this it will manage rest

<FirebaseRecaptchaVerifierModal
{...}
attemptInvisibleVerification={true}
/>

Upvotes: 0

Muhammad
Muhammad

Reputation: 2804

Recapcha is optional you are able to use phone auth without it.

const confirmResult = await auth().signInWithPhoneNumber('+' + phone);
setState(confirmResult);

to confirm code manually

if (confirmResult && receivedcode) {
  const user = await confirmResult.confirm(receivedcode);
  if (user) { //do some staff like login }
}

to auto confirm just put the following code inside useEffect function.

unsubscribe = auth().onAuthStateChanged(user => {
   if (user) { //do some staff like login }
});

If you dont know where auth comes from:

import auth from '@react-native-firebase/auth';

Upvotes: 1

Related Questions