CODEWITHSUNDEEP
javascriptfirebasefirebase-authentication
Vinay Singh
Vinay Singh

Reputation: 483

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

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?)
  // ...
});

Upvotes: 31

Views: 57259

Answers (9)

Arun Kumar
Arun Kumar

Reputation: 151

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

enter image description here

Upvotes: 15

Mayank Sharma
Mayank Sharma

Reputation: 2835

According To Google Official Docs 2 things are There :

  1. Add Sha-256 Key to Firebase

  2. Enable SafetyNet : https://console.cloud.google.com/apis/library/androidcheck.googleapis.com

To use phone number authentication, Firebase must be able to verify that phone number sign-in requests are coming from your app. There are two ways Firebase Authentication accomplishes this:

SafetyNet: If a user has a device with Google Play Services installed, and Firebase Authentication can verify the device as legitimate with Android SafetyNet, phone number sign-in can proceed. To enable SafetyNet for use with Firebase Authentication:

In the Google Cloud Console, enable the Android DeviceCheck API for your project. The default Firebase API Key will be used, and needs to be allowed to access the DeviceCheck API. If you haven't yet specified your app's SHA-256 fingerprint, do so from the Settings Page of the Firebase console. Refer to Authenticating Your Client for details on how to get your app's SHA-256 fingerprint.

For More Details : https://firebase.google.com/docs/auth/android/phone-auth

Upvotes: 0

Balaji
Balaji

Reputation: 10977

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 = "+16505554567";
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();
  }
});

Upvotes: 5

Vikasdeep Singh
Vikasdeep Singh

Reputation: 21766

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

Upvotes: 0

Awais Khan
Awais Khan

Reputation: 37

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...

Upvotes: -1

ankitkanojia
ankitkanojia

Reputation: 3122

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

Upvotes: 2

Saif Shovon
Saif Shovon

Reputation: 1

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

Upvotes: 3

Saif Shovon
Saif Shovon

Reputation: 1

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

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

Upvotes: 2

ShaileshAher
ShaileshAher

Reputation: 823

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

Upvotes: 4

Related Questions