Flutterfire: Phone authentication now do “not a robot” check in seperate browser which make entire procedure slow - Flutter

[FaizanKamal7]

I solved this issue (App crashes upon phone authentication after changing package name) of app crash by adding implementation 'androidx.browser:browser:1.2.0' into app/build.gradle dependencies.

But NOW whole phone authentication procedure got changed. When I call verifyPhoneNumber it opens a browser window that takes me to a Recapatcha (_Not a robot_ test) before I am able to receive the SMS message and verification code.
But I don't want app to open a browser just to verify it's not a robot it make entire process slow and ugly. Below is the video example.

How to get rid of this issue? It also shows app Firebase app address in the browser link too.

• Video example of issue is below
  https://drive.google.com/file/d/1G7noQWyyAHvyTo_Te0v6d2O3IvaiClAw/view?usp=sharing

Below is the code snippet of verifyPhone function.

  Future<dynamic> verifyPhone(phoneNo, BuildContext context) async {
    var completer = Completer<dynamic>();
    dynamic newUserResult;

    Future<String> getOTPresult() async {
      await showModalBottomSheet(
        context: context,
        backgroundColor: Colors.transparent,
        builder: (context) => OTPBottomSheet(controller: _otpController);
      return _otpController.text;
    }

    //  >>>>>>>>>>>>> On Complete

    final PhoneVerificationCompleted verificationComplete =
        (AuthCredential authCred) async {
      newUserResult = await signInWithPhoneNumber(authCred);
      completer.complete(newUserResult);
    };

    //  >>>>>>>>>>>>> On Timeout

    final PhoneCodeAutoRetrievalTimeout autoRetrieve = (String verID) {
      print("\n2. Auto retrieval time out");
      completer.complete(newUserResult);
    };

    // >>>>>>>>>>>>>  On manual code verification

    final PhoneCodeSent smsCodeSent =
        (String verID, [int forceCodeResend]) async {
      var OTPDialogResult = await getOTPresult();
       if (OTPDialogResult != null) {
        AuthCredential authCred = PhoneAuthProvider.credential(
            verificationId: verID, smsCode: OTPDialogResult);
         newUserResult = AuthService().signInWithPhoneNumber(authCred);
        if (!completer.isCompleted) {
          completer.complete(newUserResult);
        }
      }
    };

      //  >>>>>>>>>>>>> On Ver failed

      final PhoneVerificationFailed verificationFailed =
        (Exception authException) {
       completer.complete(newUserResult);
    };

    await FirebaseAuth.instance
        .verifyPhoneNumber(
          phoneNumber: phoneNo,
          timeout: Duration(seconds: 50),
          verificationCompleted: verificationComplete,
          verificationFailed: verificationFailed,
          codeSent: smsCodeSent,
          codeAutoRetrievalTimeout: autoRetrieve,
        ).catchError((error) {
      print(error.toString());
    });

    newUserResult = await completer.future;
    return newUserResult;
  }

signInWithPhoneNumber function

  Future signInWithPhoneNumber(AuthCredential authCreds) async {
    try {
      UserCredential result = await FirebaseAuth.instance.signInWithCredential(authCreds);
      User customUser = result.user;
    return _userFormFirebaseUser(customUser).getuid;
  }

  CustData _userFormFirebaseUser(User user) {
    print("----> Inside _userFormFirebaseUser and user ID: " + user.uid);
    return user != null
        ? CustData(
            custId: user.uid,
          )
        : null;
  }


// --- CustData  model class 

class CustData {
  String custId;
  String custName;
  String custPhNo;
  String custContactNO;
  DateTime custDateOfBirth;
  Map<String, dynamic> address;
  String cartID;
  CustData({
    this.custId,
    this.custName,
    this.custPhNo,
    this.custDateOfBirth,
    this.address,
    this.cartID,
    this.custContactNO,
  });

  CustData.initial() : custId = '';
  String get getuid => this.custId;
}

Flutter doctor

Run flutter doctor and paste the output below:

Click To Expand

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel unknown, 1.22.0-9.0.pre, on Microsoft Windows [Version 10.0.18363.1198], locale en-US)

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
[X] Chrome - develop for the web (Cannot find Chrome executable at C:\Program Files (x86)\Google\Chrome\Application)
    ! C:\Program Files (x86)\Google\Chrome\Application is not executable.
[√] Android Studio (version 4.0)
[√] VS Code (version 1.51.1)
[√] Connected device (2 available)

! Doctor found issues in 1 category.

---

[afkhalid]

Yes! This SUPER frustrating and makes the whole process useless. The first time to see an authentication provider to do such a thing. I think it's a bug. It's every security concern because someone can use that URL for some manipulations.

[markusaksli-nc]

Hi @FaizanKamal7
I see there's an open issue addressing the case you described https://github.com/FirebaseExtended/flutterfire/issues/4189.
Please follow up on that issue, I'm closing the current one as a duplicate.
If you disagree, please write in the comments and I will reopen it.
Thank you