🐛 [firebase_auth_web] Phone Auth reCAPTCHA hangs when clicking outside the reCAPTCHA modal

[Aurangseb]

Bug report

When using Flutter Web Firebase Phone authentication and a reCAPTCHA modal dialog shows, you can hang the app by clicking outside the modal instead of solving the CAPTCHA.

The modal will close and the app will keep on waiting forever.

Steps to reproduce

Steps to reproduce the behavior:

1. call var confirmation = await FirebaseAuth.instance.signInWithPhoneNumber(testPhoneNumber);
2. click outside reCAPTCHA modal in case it shows
3. wait forever.

Expected behavior

The call should return either will NULL or by throwing an error.

Sample project

This problem only shows on a real Firebase instance, not with the emulator. Here is an example project that you just need to link up with an instance to test the issue.

https://github.com/Aurangseb/firebase_auth_web_recaptcha_problem

The problem occurs here:

                  try {
                    setState(() => _calling = true);
                    log.info('signInWithPhoneNumber called for $testPhoneNumber...');
                    var confirmation = await FirebaseAuth.instance.signInWithPhoneNumber(testPhoneNumber);
                    log.info('returned from signInWithPhoneNumber: ${confirmation.toString()}');
                  } catch (err, stack) {
                    log.shout('signInWithPhoneNumber failed', err, stack);
                  } finally {
                    setState(() => _calling = false);
                  }

signInWithPhoneNumber will never return when clicking outside the modal.

---

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, 3.16.2, on Microsoft Windows [Version 10.0.19045.3930], locale en-PK)
[√] Windows Version (Installed version of Windows is version 10 or higher)
[!] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
[√] Chrome - develop for the web
[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.0.5)
[!] Android Studio (version 3.5)
    X Unable to determine bundled Java version.
[√] Android Studio (version 2023.1)
[√] IntelliJ IDEA Ultimate Edition (version 2023.3)
[√] VS Code, 64-bit edition (version 1.85.1)
[√] Connected device (3 available)
[√] Network resources

---

Flutter dependencies

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

Click To Expand

Dart SDK 3.2.2
Flutter SDK 3.16.2
firebase_auth_web_recaptcha_problem 1.0.0+1

dependencies:
- cupertino_icons 1.0.6
- firebase_auth 4.16.0 [firebase_auth_platform_interface firebase_auth_web firebase_core firebase_core_platform_interface flutter meta]
- firebase_core 2.24.2 [firebase_core_platform_interface firebase_core_web flutter meta]
- flutter 0.0.0 [characters collection material_color_utilities meta vector_math web sky_engine]
- logging 1.2.0

dev dependencies:
- flutter_lints 2.0.3 [lints]
- flutter_test 0.0.0 [flutter test_api matcher path fake_async clock stack_trace vector_math async boolean_selector characters collection material_color_utilities meta source_span stream_channel string_scanner term_glyph web]

transitive dependencies:
- _flutterfire_internals 1.3.16 [collection firebase_core firebase_core_platform_interface flutter meta]
- async 2.11.0 [collection meta]
- boolean_selector 2.1.1 [source_span string_scanner]
- characters 1.3.0
- clock 1.1.1
- collection 1.18.0
- fake_async 1.3.1 [clock collection]
- firebase_auth_platform_interface 7.0.9 [_flutterfire_internals collection firebase_core flutter meta plugin_platform_interface]
- firebase_auth_web 5.8.13 [firebase_auth_platform_interface firebase_core firebase_core_web flutter flutter_web_plugins http_parser js meta]
- firebase_core_platform_interface 5.0.0 [collection flutter flutter_test meta plugin_platform_interface]
- firebase_core_web 2.10.0 [firebase_core_platform_interface flutter flutter_web_plugins js meta]
- flutter_web_plugins 0.0.0 [flutter characters collection material_color_utilities meta vector_math web]
- http_parser 4.0.2 [collection source_span string_scanner typed_data]
- js 0.6.7 [meta]
- lints 2.1.1
- matcher 0.12.16 [async meta stack_trace term_glyph test_api]
- material_color_utilities 0.5.0 [collection]
- meta 1.10.0
- path 1.8.3
- plugin_platform_interface 2.1.8 [meta]
- sky_engine 0.0.99
- source_span 1.10.0 [collection path term_glyph]
- stack_trace 1.11.1 [path]
- stream_channel 2.1.2 [async]
- string_scanner 1.2.0 [source_span]
- term_glyph 1.2.1
- test_api 0.6.1 [async boolean_selector collection meta source_span stack_trace stream_channel string_scanner term_glyph]
- typed_data 1.3.2 [collection]
- vector_math 2.1.4
- web 0.3.0

---

[danagbemava-nc]

Reproducible using the plugin example app.

https://github.com/firebase/flutterfire/assets/88313112/8cbc7dc5-79f3-4c1a-a970-4c3c00abb151

cc @russellwheatley

[russellwheatley]

We already have an open issue for this: https://github.com/firebase/flutterfire/issues/9489