How to remove captcha verification from Firebase phone auth using javascript?

Question

I am using firebase phone auth for the very first time and I see captcha verification is must proceed with the process, as per firebase official documentation. Though it serves a good purpose, but sometimes it becomes very bad for the user experience when it starts asking about the road signs, bridges and all. Is there a way to directly skip to the verification code right after getting user's number? As per the documentation, the code is mentioned below. Thanks.

var phoneNumber = getPhoneNumberFromUserInput();
var appVerifier = window.recaptchaVerifier;
firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
    .then(function (confirmationResult) {
      // SMS sent. Prompt user to type the code from the message, then sign the
      // user in with confirmationResult.confirm(code).
      window.confirmationResult = confirmationResult;
    }).catch(function (error) {
      // Error; SMS not sent
      // ...
});

var code = getCodeFromUserInput();
confirmationResult.confirm(code).then(function (result) {
  // User signed in successfully.
  var user = result.user;
  // ...
}).catch(function (error) {
  // User couldn't sign in (bad verification code?)
  // ...
});

Answer 1

Use isAppVerificationDisabledForTesting = TRUE in auth settings as the below given snippet:

Auth.auth().settings.isAppVerificationDisabledForTesting = TRUE

Please check the below official information for more details:

JavaScript - https://firebase.google.com/docs/reference/js/firebase.auth.AuthSettings

SDK reference - https://firebase.google.com/docs/auth/ios/phone-auth#integration-testing

Answer 2

I had the same problem while integrating iOS SDK.

If google has same architecture and classes of the firebase SDK across languages, this solution might work for you.

Auth.auth().settings?.isAppVerificationDisabledForTesting = true

Answer 3

 firebase.initializeApp(firebaseConfig);
  // Create a Recaptcha verifier instance globally
  // Calls submitPhoneNumberAuth() when the captcha is verified
  window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
    "recaptcha-container",
    {
      size: "invisible",
      callback: function(response) {
        submitPhoneNumberAuth();
      }
    }
  );

Answer 4

use size: "normal" to size: "invisible"

 window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
    "recaptcha-container",
    {
      size: "invisible",
      callback: function(response) {
        submitPhoneNumberAuth();
      }
    }
  );

Answer 5

Firebase provides two properties for captcha size

1. Normal - which is visible and captcha code visible to the user and manually perform the captcha process.
2. Invisible - which is invisible to the user, automated captcha process, and code will auto render in DOM.

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
    "recaptcha-container", {
        size: "invisible"
    }
);

For more details, refer to this Official Link

Answer 6

Actually you can't. But, some of the devices it does not work. Instead, setup Safety and enable API key. Then back to your project setting in Firebase and copy and paste SHA-25 from Android Gradle to there if it does not exist. In this manner, in app browser redirecting will be no more irritating to you...

Answer 7

method 1:

firebase.auth().settings.appVerificationDisabledForTesting = true;

Firebase docs

https://firebase.google.com/docs/auth/web/phone-auth?authuser=0#web-v8_6

// Turn off phone auth app verification.
firebase.auth().settings.appVerificationDisabledForTesting = true;

var phoneNumber = "[phone]";
var testVerificationCode = "123456";

// This will render a fake reCAPTCHA as appVerificationDisabledForTesting is true.
// This will resolve after rendering without app verification.
var appVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
// signInWithPhoneNumber will call appVerifier.verify() which will resolve with a fake
// reCAPTCHA response.
firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
    .then(function (confirmationResult) {
      // confirmationResult can resolve with the fictional testVerificationCode above.
      return confirmationResult.confirm(testVerificationCode)
    }).catch(function (error) {
      // Error; SMS not sent
      // ...
    });

method 2:

https://firebase.google.com/docs/auth/web/phone-auth#use-invisible-recaptcha

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
  'size': 'invisible',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    onSignInSubmit();
  }
});

Answer 8

Go to Firebase console -->to your project-->project overview settings-->project settings --> App check -->overview (Register your app for SafetyNet).

Then your app will stop redirecting to web for captcha verification