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

Question

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>
  );
};

Muhammad · Accepted Answer · 2020-07-18 13:33:21Z

1

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';

answered Jul 18, 2020 at 13:33

Muhammad

2,8144 gold badges27 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mahendra Kumar Over a year ago

I am using expo , react-native-firebase/auth library will support for expo ??

Frank van Puffelen Over a year ago

It seems to support it: docs.expo.io/guides/using-firebase/#user-authentication

Bhavya Koshiya · Accepted Answer · 2021-07-14 11:27:28Z

0

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

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

answered Jul 14, 2021 at 11:27

Bhavya Koshiya

1,8662 gold badges11 silver badges24 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related