🐛 [firebase_auth_web] No event on click outside of recaptcha

nicolamazzocato commented 2 years ago

Bug report

Describe the bug I use phone authorization of firebase in my application When user clicks at 'Login' button I switch form to the 'Loading state' (which displays a loading spinner) and call firebase.auth().signInWithPhoneNumber(phone, recaptcha) function to authorize user. Sometimes firebase opens Recaptcha to verify user's identity. However, if user clicks outside of Recaptcha, it is hiding and no event is triggered, what makes impossible to switch form back to 'Normal state'

https://user-images.githubusercontent.com/86733853/188913561-a6610aa7-5943-457b-a018-3a8b8b7faaad.mov

Steps to reproduce

Steps to reproduce the behavior:

Make a button which signs in user with phone provider by clicking on it and display a loading spinner after the click Click at the button and see Recaptcha Click outside of Recaptcha to close it

Expected behavior

Know if users clicked outside of recaptcha

Sample project

You will need to configure your firebase project. I'm actually using getx for the state management

          Row(
            children: [
              ElevatedButton(
                onPressed: () async {
                  d.isLoading.value = true;
                  await FirebaseAuth.instance.signInWithPhoneNumber('+390000000005');
                  d.isLoading.value = false;
                },
                child: const Text('Login'),
              ),
              Obx(
                () => Visibility(
                  child: const CircularProgressIndicator(),
                  visible: d.isLoading.value,
                ),
              ),
            ],
          )

Flutter doctor

Run flutter doctor and paste the output below:

Click To Expand

``` [✓] Flutter (Channel stable, 3.3.0, on macOS 12.5.1 21G83 darwin-arm, locale en-IT) [✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1) [✓] Xcode - develop for iOS and macOS (Xcode 13.4.1) [✓] Chrome - develop for the web [✓] Android Studio (version 2021.2) [✓] IntelliJ IDEA Ultimate Edition https://user-images.githubusercontent.com/86733853/188913341-eaaa48af-f0f2-47d4-a80a-d01d5ed48a42.mov (version 2021.2.2) [✓] Connected device (2 available) [✓] HTTP Host Availability ```

Flutter dependencies

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

Click To Expand

``` Dart SDK 2.18.0 Flutter SDK 3.3.0 partytapp_console 1.0.0+1 dependencies: - auto_size_text 3.0.0 [flutter] - buttons_tabbar 1.3.6 [flutter] - carousel_slider 4.1.1 [flutter] - collection 1.16.0 - community_material_icon 5.9.55 [flutter] - country_code_picker 2.0.2 [flutter modal_bottom_sheet collection universal_platform] - cupertino_icons 1.0.5 - easy_localization 3.0.1 [flutter shared_preferences intl args path easy_logger flutter_localizations] - email_validator 2.1.17 - extended_image 6.3.0 [extended_image_library flutter meta] - firebase_analytics 9.3.3 [firebase_analytics_platform_interface firebase_analytics_web firebase_core firebase_core_platform_interface flutter] - firebase_auth 3.7.0 [firebase_auth_platform_interface firebase_auth_web firebase_core firebase_core_platform_interface flutter meta] - firebase_auth_platform_interface 6.6.0 [collection firebase_core flutter meta plugin_platform_interface] - firebase_core 1.21.1 [firebase_core_platform_interface firebase_core_web flutter meta] - firebase_crashlytics 2.8.9 [firebase_core firebase_core_platform_interface firebase_crashlytics_platform_interface flutter stack_trace] - firebase_remote_config 2.0.16 [firebase_core firebase_core_platform_interface firebase_remote_config_platform_interface firebase_remote_config_web flutter] - flutter 0.0.0 [characters collection material_color_utilities meta vector_math sky_engine] - flutter_icons 1.1.0 [flutter] - flutter_secure_storage 5.1.2 [flutter flutter_secure_storage_linux flutter_secure_storage_macos flutter_secure_storage_platform_interface flutter_secure_storage_web flutter_secure_storage_windows meta] - flutter_staggered_grid_view 0.6.2 [flutter] - flutter_svg 1.1.4 [flutter meta path_drawing vector_math xml] - flutter_web_plugins 0.0.0 [flutter js characters collection material_color_utilities meta vector_math] - fluttertoast 8.0.9 [flutter flutter_web_plugins] - font_awesome_flutter 10.1.0 [flutter] - get 4.6.5 [flutter] - get_storage 2.0.3 [flutter get path_provider] - google_maps_flutter 2.2.0 [flutter google_maps_flutter_android google_maps_flutter_ios google_maps_flutter_platform_interface] - google_maps_flutter_web 0.4.0+2 [flutter flutter_web_plugins google_maps google_maps_flutter_platform_interface sanitize_html stream_transform] - google_maps_webservice 0.0.20-nullsafety.5 [http meta json_annotation] - image_picker 0.8.5+3 [flutter image_picker_android image_picker_for_web image_picker_ios image_picker_platform_interface] - image_picker_for_web 2.1.8 [flutter flutter_web_plugins image_picker_platform_interface] - intl 0.17.0 [clock path] - json_serializable 6.3.1 [analyzer async build build_config collection json_annotation meta path pub_semver pubspec_parse source_gen source_helper] - localstorage 4.0.0+1 [flutter path_provider] - package_info_plus 1.4.3+1 [flutter package_info_plus_platform_interface package_info_plus_linux package_info_plus_macos package_info_plus_windows package_info_plus_web] - pt_flutter_api_collection 1.3.10 [flutter retrofit synchronized dio json_annotation] - pt_flutter_loading 1.0.2 [flutter rxdart] - pt_flutter_loading_btn 1.1.0 [flutter rxdart] - readmore 2.2.0 [flutter] - rxdart 0.27.5 - shared_preferences 2.0.15 [flutter shared_preferences_android shared_preferences_ios shared_preferences_linux shared_preferences_macos shared_preferences_platform_interface shared_preferences_web shared_preferences_windows] - timeago 3.3.0 [intl] - timezone 0.8.0 [path] - url_launcher 6.1.5 [flutter url_launcher_android url_launcher_ios url_launcher_linux url_launcher_macos url_launcher_platform_interface url_launcher_web url_launcher_windows] dev dependencies: - build_runner 2.2.0 [args async analyzer build build_config build_daemon build_resolvers build_runner_core code_builder collection crypto dart_style frontend_server_client glob graphs http_multi_server io js logging meta mime package_config path pool pub_semver pubspec_parse shelf shelf_web_socket stack_trace stream_transform timing watcher web_socket_channel yaml] - flutter_lints 2.0.1 [lints] - flutter_test 0.0.0 [flutter test_api path fake_async clock stack_trace vector_math async boolean_selector characters collection matcher material_color_utilities meta source_span stream_channel string_scanner term_glyph] - json_annotation 4.6.0 [meta] dependency overrides: - dio 4.0.4 [http_parser path] transitive dependencies: - _fe_analyzer_shared 47.0.0 [meta] - analyzer 4.7.0 [_fe_analyzer_shared collection convert crypto glob meta package_config path pub_semver source_span watcher yaml] - args 2.3.1 - async 2.9.0 [collection meta] - boolean_selector 2.1.0 [source_span string_scanner] - build 2.3.0 [analyzer async convert crypto glob logging meta path] - build_config 1.1.0 [checked_yaml json_annotation path pubspec_parse yaml] - build_daemon 3.1.0 [built_collection built_value http_multi_server logging path pool shelf shelf_web_socket stream_transform watcher web_socket_channel] - build_resolvers 2.0.9 [analyzer async build crypto graphs logging path package_config pool pub_semver stream_transform yaml] - build_runner_core 7.2.3 [async build build_config build_resolvers collection convert crypto glob graphs json_annotation logging meta path package_config pool timing watcher yaml] - built_collection 5.1.1 - built_value 8.4.1 [built_collection collection fixnum meta] - characters 1.2.1 - checked_yaml 2.0.1 [json_annotation source_span yaml] - clock 1.1.1 - code_builder 4.2.0 [built_collection built_value collection matcher meta] - convert 3.0.2 [typed_data] - cross_file 0.3.3+1 [js meta] - crypto 3.0.2 [typed_data] - csslib 0.17.2 [source_span] - dart_style 2.2.3 [analyzer args path pub_semver source_span] - easy_logger 0.0.2 [flutter] - extended_image_library 3.4.0 [crypto flutter http_client_helper path path_provider] - fake_async 1.3.1 [clock collection] - ffi 2.0.1 - file 6.1.4 [meta path] - firebase_analytics_platform_interface 3.3.3 [firebase_core flutter meta plugin_platform_interface] - firebase_analytics_web 0.4.2+3 [firebase_analytics_platform_interface firebase_core firebase_core_web flutter flutter_web_plugins js] - firebase_auth_web 4.3.0 [firebase_auth_platform_interface firebase_core firebase_core_web flutter flutter_web_plugins http_parser intl js meta] - firebase_core_platform_interface 4.5.1 [collection flutter flutter_test meta plugin_platform_interface] - firebase_core_web 1.7.2 [firebase_core_platform_interface flutter flutter_web_plugins js meta] - firebase_crashlytics_platform_interface 3.2.15 [collection firebase_core flutter meta plugin_platform_interface] - firebase_remote_config_platform_interface 1.1.15 [firebase_core flutter meta plugin_platform_interface] - firebase_remote_config_web 1.1.4 [firebase_core firebase_core_web firebase_remote_config_platform_interface flutter flutter_web_plugins js] - fixnum 1.0.1 - flutter_localizations 0.0.0 [flutter intl characters clock collection material_color_utilities meta path vector_math] - flutter_plugin_android_lifecycle 2.0.7 [flutter] - flutter_secure_storage_linux 1.1.1 [flutter flutter_secure_storage_platform_interface] - flutter_secure_storage_macos 1.1.1 [flutter flutter_secure_storage_platform_interface] - flutter_secure_storage_platform_interface 1.0.0 [flutter plugin_platform_interface] - flutter_secure_storage_web 1.0.2 [flutter flutter_web_plugins flutter_secure_storage_platform_interface js] - flutter_secure_storage_windows 1.1.2 [flutter flutter_secure_storage_platform_interface] - frontend_server_client 2.1.3 [async path] - glob 2.1.0 [async collection file path string_scanner] - google_maps 6.2.0 [js_wrapping meta] - google_maps_flutter_android 2.3.0 [flutter flutter_plugin_android_lifecycle google_maps_flutter_platform_interface stream_transform] - google_maps_flutter_ios 2.1.11 [flutter google_maps_flutter_platform_interface stream_transform] - google_maps_flutter_platform_interface 2.2.2 [collection flutter plugin_platform_interface stream_transform] - graphs 2.1.0 [collection] - html 0.15.0 [csslib source_span] - http 0.13.5 [async http_parser meta path] - http_client_helper 2.0.3 [http] - http_multi_server 3.2.1 [async] - http_parser 4.0.1 [collection source_span string_scanner typed_data] - image_picker_android 0.8.5+3 [flutter flutter_plugin_android_lifecycle image_picker_platform_interface] - image_picker_ios 0.8.6 [flutter image_picker_platform_interface] - image_picker_platform_interface 2.6.1 [cross_file flutter http plugin_platform_interface] - io 1.0.3 [meta path string_scanner] - js 0.6.4 - js_wrapping 0.7.4 [js] - lints 2.0.0 - logging 1.0.2 - matcher 0.12.12 [stack_trace] - material_color_utilities 0.1.5 - meta 1.8.0 - mime 1.0.2 - modal_bottom_sheet 2.1.2 [flutter] - package_config 2.1.0 [path] - package_info_plus_linux 1.0.5 [package_info_plus_platform_interface flutter path] - package_info_plus_macos 1.3.0 [flutter] - package_info_plus_platform_interface 1.0.2 [flutter meta plugin_platform_interface] - package_info_plus_web 1.0.5 [flutter flutter_web_plugins http meta package_info_plus_platform_interface] - package_info_plus_windows 2.1.0 [package_info_plus_platform_interface ffi flutter win32] - path 1.8.2 - path_drawing 1.0.1 [vector_math meta path_parsing flutter] - path_parsing 1.0.1 [vector_math meta] - path_provider 2.0.11 [flutter path_provider_android path_provider_ios path_provider_linux path_provider_macos path_provider_platform_interface path_provider_windows] - path_provider_android 2.0.20 [flutter path_provider_platform_interface] - path_provider_ios 2.0.11 [flutter path_provider_platform_interface] - path_provider_linux 2.1.7 [ffi flutter path path_provider_platform_interface xdg_directories] - path_provider_macos 2.0.6 [flutter path_provider_platform_interface] - path_provider_platform_interface 2.0.4 [flutter platform plugin_platform_interface] - path_provider_windows 2.1.3 [ffi flutter path path_provider_platform_interface win32] - petitparser 5.0.0 [meta] - platform 3.1.0 - plugin_platform_interface 2.1.2 [meta] - pool 1.5.1 [async stack_trace] - process 4.2.4 [file path platform] - pub_semver 2.1.1 [collection meta] - pubspec_parse 1.2.1 [checked_yaml collection json_annotation pub_semver yaml] - retrofit 3.0.1+1 [dio meta] - sanitize_html 2.0.0 [html meta] - shared_preferences_android 2.0.13 [flutter shared_preferences_platform_interface] - shared_preferences_ios 2.1.1 [flutter shared_preferences_platform_interface] - shared_preferences_linux 2.1.1 [file flutter path path_provider_linux path_provider_platform_interface shared_preferences_platform_interface] - shared_preferences_macos 2.0.4 [flutter shared_preferences_platform_interface] - shared_preferences_platform_interface 2.1.0 [flutter plugin_platform_interface] - shared_preferences_web 2.0.4 [flutter flutter_web_plugins shared_preferences_platform_interface] - shared_preferences_windows 2.1.1 [file flutter path path_provider_platform_interface path_provider_windows shared_preferences_platform_interface] - shelf 1.3.2 [async collection http_parser path stack_trace stream_channel] - shelf_web_socket 1.0.2 [shelf stream_channel web_socket_channel] - sky_engine 0.0.99 - source_gen 1.2.2 [analyzer async build dart_style glob meta path source_span yaml] - source_helper 1.3.2 [analyzer collection source_gen] - source_span 1.9.0 [collection path term_glyph] - stack_trace 1.10.0 [path] - stream_channel 2.1.0 [async] - stream_transform 2.0.0 - string_scanner 1.1.1 [source_span] - synchronized 3.0.0+3 - term_glyph 1.2.1 - test_api 0.4.12 [async boolean_selector collection meta source_span stack_trace stream_channel string_scanner term_glyph matcher] - timing 1.0.0 [json_annotation] - typed_data 1.3.1 [collection] - universal_platform 1.0.0+1 - url_launcher_android 6.0.18 [flutter url_launcher_platform_interface] - url_launcher_ios 6.0.17 [flutter url_launcher_platform_interface] - url_launcher_linux 3.0.1 [flutter url_launcher_platform_interface] - url_launcher_macos 3.0.1 [flutter url_launcher_platform_interface] - url_launcher_platform_interface 2.1.0 [flutter plugin_platform_interface] - url_launcher_web 2.0.13 [flutter flutter_web_plugins url_launcher_platform_interface] - url_launcher_windows 3.0.1 [flutter url_launcher_platform_interface] - vector_math 2.1.2 - watcher 1.0.1 [async path] - web_socket_channel 2.2.0 [async crypto stream_channel] - win32 3.0.0 [ffi] - xdg_directories 0.2.0+2 [meta path process] - xml 6.1.0 [collection meta petitparser] - yaml 3.1.1 [collection source_span string_scanner] ```

darshankawar commented 2 years ago

Thanks for the report @nicolamazzocato

I'm actually using getx for the state management

Does the same behavior occur without using this third party package ?

The plugin on we along with combination of signInWithPhoneNumber offers RecaptchaVerifier parameter as mentioned here: https://firebase.google.com/docs/auth/flutter/phone-auth#web_signinwithphonenumber. I suggest you to try the same and see if using it, you get same behavior or not.

Using the RecaptchVerifier property, it ensures the removal of the web UI element in the clear method, and ensures that clear is called on any RecaptchaVerifier() objects.

nicolamazzocato commented 2 years ago

Here it is a clean example of the implementation with RecaptchaVerifier that produces the same error

import 'dart:convert';
import 'package:firebase_auth_platform_interface/firebase_auth_platform_interface.dart' show FirebaseAuthPlatform;
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_auth_web/firebase_auth_web.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';

import 'firebase_options.dart';

void main() async {
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Firebase auth test'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () async {
                var result = await FirebaseAuth.instance.signInWithPhoneNumber(
                  '+390000000005',
                  RecaptchaVerifier(
                    auth: FirebaseAuthPlatform.instance,
                  ),
                );
                print(result.verificationId);
              },
              child: const Text('LOGIN'),
            ),
          ],
        ),
      ),
    );
  }
}

darshankawar commented 2 years ago

Thanks for the update. Using code sample provided, I get same behavior as reported.

Silfalion commented 1 year ago

Have the same issue as well. Any idea for a work around, please?

TarekkMA commented 5 months ago

Hi @nicolamazzocato ,

Thank you for your report! Since this issue was opened, the implementation details have changed significantly. If you feel that this issue is still relevant, please feel free to open a new issue with updated context. We appreciate your understanding and support.

firebase / flutterfire