🐛 [firebase_auth] Recapatcha appears when I use verifyPhoneNumber

[afkhalid]

Bug report

Describe the bug
I am trying to implement phone auth in my flutter app. When I call verifyPhoneNumber it opens a browser window that takes me to a Recapatcha before I am able to receive the SMS message and verification code. This shouldn't happen and destroys the whole idea of SMS verification.

Steps to reproduce

Steps to reproduce the behavior:

Follow exact steps in FlutterFire docs here https://firebase.flutter.dev/docs/auth/phone and test in an emulator and after I call that function I am moved to enter a Recapatcha

Expected behavior

The SMS should be received and no browser window should be opened

---

Additional context

I am facing this in both my emulator and physical devices. This even happens while using test phone numbers added to my project.

This is happening on Android. I didn't yet try in IOS.

You can check this SO question which shows the same problem https://stackoverflow.com/questions/64931073/app-crashes-upon-phone-authentication-after-changing-package-name-flutter

---

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 stable, 1.22.4, on Microsoft Windows [Version 10.0.18363.1198], locale en-US)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[!] Android Studio (version 4.1.0)
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
[√] VS Code (version 1.50.1)
[√] Connected device (1 available)

---

Flutter dependencies

Run flutter pub deps -- --style=compact and paste the output below:

Click To Expand

Dart SDK 2.10.4
Flutter SDK 1.22.4
nearu 1.0.0+1

dependencies:
- animated_text_kit 2.5.4 [flutter characters]
- cupertino_icons 1.0.0
- firebase_auth 0.18.3 [meta firebase_core firebase_core_platform_interface firebase_auth_platform_interface firebase_auth_web flutter]
- firebase_core 0.5.2 [firebase_core_platform_interface flutter quiver meta firebase_core_web]
- flutter 0.0.0 [characters collection meta typed_data vector_math sky_engine]
- flutter_easyloading 2.2.0 [flutter flutter_spinkit]
- flutter_svg 0.19.1 [flutter meta path_drawing vector_math xml]
- google_fonts 1.1.1 [flutter http path_provider crypto pedantic]
- intl_phone_field 1.4.2 [flutter]
- pin_code_text_field 1.7.1 [flutter]
- provider 4.3.2+2 [flutter nested collection]

dev dependencies:
- flutter_native_splash 0.1.9 [yaml image color]
- flutter_test 0.0.0 [flutter test_api path fake_async clock stack_trace vector_math async boolean_selector characters charcode collection matcher meta source_span stream_channel string_scanner term_glyph
typed_data]

transitive dependencies:
- archive 2.0.13 [crypto args path]
- args 1.6.0
- async 2.5.0-nullsafety.1 [collection]
- boolean_selector 2.1.0-nullsafety.1 [source_span string_scanner]
- characters 1.1.0-nullsafety.3
- charcode 1.2.0-nullsafety.1
- clock 1.1.0-nullsafety.1
- collection 1.15.0-nullsafety.3
- color 2.1.1
- convert 2.1.1 [charcode typed_data]
- crypto 2.1.5 [collection convert typed_data]
- fake_async 1.2.0-nullsafety.1 [clock collection]
- ffi 0.1.3
- file 5.2.1 [intl meta path]
- firebase_auth_platform_interface 2.1.3 [flutter meta firebase_core plugin_platform_interface]
- firebase_auth_web 0.3.2 [flutter flutter_web_plugins meta http_parser intl firebase_core firebase_core_web firebase_auth_platform_interface js]
- firebase_core_platform_interface 2.0.0 [flutter meta plugin_platform_interface quiver]
- firebase_core_web 0.2.1 [firebase_core_platform_interface flutter flutter_web_plugins meta js]
- flutter_spinkit 4.1.2+1 [flutter]
- flutter_web_plugins 0.0.0 [flutter characters collection meta typed_data vector_math]
- http 0.12.2 [http_parser path pedantic]
- http_parser 3.1.4 [charcode collection source_span string_scanner typed_data]
- image 2.1.19 [archive xml meta]
- intl 0.16.1 [path]
- js 0.6.2
- matcher 0.12.10-nullsafety.1 [stack_trace]
- meta 1.3.0-nullsafety.3
- nested 0.0.4 [flutter]
- path 1.8.0-nullsafety.1
- path_drawing 0.4.1+1 [vector_math meta path_parsing flutter]
- path_parsing 0.1.4 [vector_math meta]
- path_provider 1.6.24 [flutter path_provider_platform_interface path_provider_macos path_provider_linux path_provider_windows]
- path_provider_linux 0.0.1+2 [path xdg_directories path_provider_platform_interface flutter]
- path_provider_macos 0.0.4+6 [flutter]
- path_provider_platform_interface 1.0.4 [flutter meta platform plugin_platform_interface]
- path_provider_windows 0.0.4+3 [path_provider_platform_interface meta path flutter ffi win32]
- pedantic 1.9.2 [meta]
- petitparser 3.1.0 [meta]
- platform 2.2.1
- plugin_platform_interface 1.0.3 [meta]
- process 3.0.13 [file intl meta path platform]
- quiver 2.1.5 [matcher meta]
- sky_engine 0.0.99
- source_span 1.8.0-nullsafety.2 [charcode collection path term_glyph]
- stack_trace 1.10.0-nullsafety.1 [path]
- stream_channel 2.1.0-nullsafety.1 [async]
- string_scanner 1.1.0-nullsafety.1 [charcode source_span]
- term_glyph 1.2.0-nullsafety.1
- test_api 0.2.19-nullsafety.2 [async boolean_selector collection meta path source_span stack_trace stream_channel string_scanner term_glyph matcher]
- typed_data 1.3.0-nullsafety.3 [collection]
- vector_math 2.1.0-nullsafety.3
- win32 1.7.4 [ffi]
- xdg_directories 0.1.2 [meta path process]
- xml 4.5.1 [collection convert meta petitparser]
- yaml 2.2.1 [charcode collection string_scanner source_span]

---

[markusaksli-nc]

Hi @afkhalid
As the documentation states:

Note; Phone number sign-in is only available for use on real devices and the web. To test your authentication flow on device emulators, please see Testing.

Are you facing this on physical as well? Is this on iOS or Android? Could you please fill in the entire issue form?
Thank you

[FaizanKamal7]

Hi @afkhalid
As the documentation states:

Note; Phone number sign-in is only available for use on real devices and the web. To test your authentication flow on device emulators, please see Testing.

Are you facing this on physical as well? Is this on iOS or Android? Could you please fill in the entire issue form?
Thank you

Yes I'm facing it on physical as well. It is happening on android, I haven't tested iOS. It's annoying. It happened after I added implementation 'androidx.browser:browser:1.2.0' into app/build.gradle dependencies. I'm not sure if it is the main reason of the problem. I added it to solve this issue (App crashes upon phone authentication after changing package name).

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

[afkhalid]

Hi @afkhalid
As the documentation states:

Note; Phone number sign-in is only available for use on real devices and the web. To test your authentication flow on device emulators, please see Testing.

Are you facing this on physical as well? Is this on iOS or Android? Could you please fill in the entire issue form?
Thank you

@markusaksli-nc
Thanks! I have included all the information in the form. @FaizanKamal7 as well added more information. Please, keep that as a high priority as I have seen other complaints about this and it's making my user's life a nightmare.

[markusaksli-nc]

I'm not seeing this on the latest master 1.24.0-8.0.pre.366 with firebase_auth: ^0.18.3.

flutter doctor -v

[✓] Flutter (Channel master, 1.24.0-8.0.pre.366, on macOS 11.0.1 20B29 darwin-x64, locale en-GB)
    • Flutter version 1.24.0-8.0.pre.366 at /Users/markus/development/flutter_master
    • Framework revision 2c793bb700 (44 minutes ago), 2020-11-25 04:28:03 -0500
    • Engine revision 8eb8bd153f
    • Dart version 2.12.0 (build 2.12.0-75.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
    • Android SDK at /Users/markus/Library/Android/sdk
    • Platform android-30, build-tools 30.0.1
    • Java binary at: /Users/markus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/201.6953283/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.2, Build version 12B45b
    • CocoaPods version 1.10.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.1)
    • Android Studio at /Users/markus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/201.6953283/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      � https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      � https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

[✓] Connected device (4 available)
    • Nevercode’s iPhone (mobile) • b668e524315069f3db3661ac11ff1f66afafebdb • ios            • iOS 14.2
    • macOS (desktop)             • macos                                    • darwin-x64     • macOS 11.0.1 20B29 darwin-x64
    • Web Server (web)            • web-server                               • web-javascript • Flutter Tools
    • Chrome (web)                • chrome                                   • web-javascript • Google Chrome 87.0.4280.67

• No issues found!

Maybe ISP specific or something else. Labeling for now.

[afkhalid]

Thanks, @markusaksli-nc. Why the ISP would trigger such behavior?! Also, I and Faizan are not from the same country. I can see this in your documents https://firebase.google.com/docs/auth/android/phone-auth It says

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.

and

In the event that SafetyNet cannot be used, such as when the user does not have Google Play Services support, or when testing your app on an emulator, Firebase Authentication uses a reCAPTCHA verification to complete the phone sign-in flow

which for me is what happens and in the logs, it says Problem retrieving SafetyNet Token: 7:

and then opens the webpage. this both happen in the emulator and physical device. So if I were you I would

1- Try to find out why we get this error java.lang.NoClassDefFoundError: Failed resolution of: Landroidx/browser/customtabs/CustomTabsIntent$Builder; if we didn't add this line in the app build.gradle implementation "androidx.browser:browser:1.2.0" while it's not mentioned anywhere in the official documentation

2- Why once we add this line it works fine in physical devices then says cannot detect SafetyNet and popup with reCAPTCHA as the documents say

So maybe the other question is. Why emulator and physical device cannot detect SafetyNet and thus goes to reCAPTCHA through a browser?!

[Salakar]

Please could you raise this as a ticket with Firebase support. We only wrap the sdks and don't control any recaptcha behaviour

[afkhalid]

@Salakar
I did and for a week they didn't give me a reply.

[diegogarciar]

I believe reCAPTCHA appears on physical devices when you enter a phone number that it's not the one on the installed sim.

[afkhalid]

@diegogarciar,
I have tried this on a physical phone with its number and still gives the reCAPTCHA. What drives me crazy that all tutorials I watch anywhere doesn't have that and the SMS is received right away without any reCAPTCHA.

[afkhalid]

Also, this happens when putting a test number from a verified machine so firebase knows about it and it has the machine's key (SHA1) so it's not even a security threat to say reCAPTCHA is needed.

[FaizanKamal7]

What is the progress on this issue guys? Or is anybody really try to sort it out. This issue is making my life miserable. I had to unpublish my app from play store because of this issue.

[Omrankabalan]

As mentioned in docs you need to enable the Android DeviceCheck API for your project and add SHA 256 in your Firebase settings. I had the same error (Problem retrieving SafetyNet Token: 7) but when I followed documentation everything worked perfectly (I tested it on real device)

[Omrankabalan]

I agree with you that official flutter documentation for phone authentication needs to be updated to mention adding androidx.browser and to clarify SafetyNet & recaptcha options

[afkhalid]

@Omrankabalan
Thanks! Can you thankfully tell me steps to follow as I tried to follow the documentation and it didn't work out for me including adding the SHA-256?! Can you tell me the steps to make this work properly in the emulator and physical device by steps like

1- Go to x
2- Enable y
3- ... etc

That may be a bit of work but it will help a lot. Thanks, brother.

[afkhalid]

Like when I go to https://console.cloud.google.com/ I didn't create any projects that have anything to do with Firebase so which project will I enable the Android DeviceCheck API for?! Or if I create a project how that will be linked to my Firebase project so when I auth it know I am using that project?! It's a bit confusing to be honest.

[Omrankabalan]

@afkhalid

Go to https://console.cloud.google.com/

• If you have a Firebase project you can open in from here

• Then select All tab and choose your existing project

• Then go to API & Services => Library
  Search for 'Android Device Verification'

• Enable it

[Omrankabalan]

In Firebase make sure to add SHA-256 In Project Settings

Test it on real device

[afkhalid]

@Omrankabalan
YOU JUST SAVED MY LIFE. THANKS SO MUCH, BROTHER. Google did a very bad job in their documentation. I didn't see that project part at all. Once I chose my project it worked pretty fine. Thanks again.

@FaizanKamal7
You can follow what Omran posted and that will resolve your issue. You need to test it on a physical device and you will find it working fine now. I am closing this issue.

[Omrankabalan]

@afkhalid
you are welcome my friend.

Good luck!