React Native Firebase reCAPTCHA

user_6054959 0
Viewed 3292

I am following the react native firebase docs (https://rnfirebase.io/docs/v5.x.x/auth/phone-auth) on Phone Authorization and am confused about the need (or no need) for reCAPTCHA.

The docs do not pass a second parameter to the signInWithPhoneNumber() method but when calling the method I receive an error asking for the recaptchaVerifier as the second parameter. Because I am writing the app for both iOs and Android I utilized the Web connection to Firebase and am not using the generated JSON file. I believe this is my issue as it thinks I am calling the API from a non-mobile device.

Is Firebase Web the best way to connect a React Native cross platform application? If it is, is there a way to generate the reCAPTCHA code?

The firebase docs talk about an invisible reCAPTCHA but they only provide code for HTML with a button ID and whatnot. (I did try to give and an ID as a prop but found no success) https://firebase.google.com/docs/auth/web/phone-auth

My config file:

import firebase from 'firebase';

class Config {
  constructor() {
    if (!firebase.apps.length) {
      firebase.initializeApp({
        apiKey: "AIaskdjf93rlaksdjf99999",
        authDomain: "myDomain.firebaseapp.com",
        databaseURL: "https://myDomain.firebaseio.com",
        projectId: "myDomain",
        storageBucket: "",
        messagingSenderId: "88827277272",
        appId: "somenumbersomitted",
        measurementId: "akjdsfkljad"
      });
    }
  }

  login = async (user, success_callback, failed_callback) => {
    await firebase
      .auth()
      .signInWithEmailAndPassword(user.userName, user.password)
      .then(success_callback, failed_callback);
  };

  //todo:: need to update signInWithPhoneNumber second param to be the recaptcha token
  loginWithPhone = async (phoneNumber, success_callback, failed_callback) => {
    var applicationVerifier = ?????;
    await firebase
    .auth()
    .signInWithPhoneNumber(phoneNumber, applicationVerifier)
    .then(success_callback, failed_callback);
  };

  //todo: figure out how to get this method to work in RN. Not able to take in button ID...
  recaptchaVerifier = async (phoneNumber, success_callback, failed_callback) =>{
    window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
      'size': 'invisible',
      'callback': function(response) {
        loginWithPhone(phoneNumber, success_callback, failed_callback);
      }
    });
  };
}
const config = new Config();
export default config;
firebase react-native reactjs recaptcha authorization
1 Answers

I managed to get phone number authentication working on React Native by using https://rnfirebase.io/ and the following code:

  const sendSmsCode = async (phoneNumber: string) => {
    const isUserPhoneNumberLinked = await getIsUserPhoneNumberLinked(
      phoneNumber
    );
    if (!isUserPhoneNumberLinked) {

    } else {
      try {
        let confirmationResult = await firebase
          .auth()
          .signInWithPhoneNumber(phoneNumber, true);

        Promise.resolve();
        setIsSmsCodeSent(true);
        confirmationRef.current = confirmationResult;
      } catch (error) {
        throw error;
      }
    }
  };

And then you can use confirmationRef.current.confirm() to confirm the sms code:

  const verifySmsCode = async () => {
    const result = await confirmationRef.current.confirm(smsCode);
    if (result.user) {
      dispatch(authenticatedUserAction());
    }
  };
user_53708360
Related