🐛 [Firebase Auth] How to remove recaptcha logo from bottom after using phone auth flutter web

[gauravmehta13]

Bug report

Describe the bug After login in flutter web, a reacptcha logo appeard at bottom which stays in every page

Steps to reproduce

Steps to reproduce the behavior :

[markusaksli-nc]

Hi @gauravmehta13 Could you please provide your flutter doctor -v and flutter pub deps -- --style=compact? Thank you

[gauravmehta13]

PS D:\Flutter Projects\Goflexe-Partners> flutter pub deps -- --style=compact
Dart SDK 2.12.3
Flutter SDK 2.0.5
goflexe_partner 1.0.0+1

dependencies:
- argon_buttons_flutter 1.0.6 [flutter]
- async 2.5.0 [collection]
- badges 1.2.0 [flutter]
- bubble_tab_indicator 0.1.6 [flutter]
- circular_countdown_timer 0.2.0 [flutter]
- cloud_firestore 1.0.4 [cloud_firestore_platform_interface cloud_firestore_web firebase_core firebase_core_platform_interface flutter meta]
- countdown_flutter 0.1.2 [flutter]
- cupertino_icons 1.0.2
- date_time_picker 2.0.0 [flutter intl]
- dio 4.0.0 [http_parser path]
- dotted_line 3.0.0 [flutter]
- file_picker 3.0.1 [flutter flutter_web_plugins flutter_plugin_android_lifecycle plugin_platform_interface]  
- firebase_analytics 7.1.1 [firebase_analytics_platform_interface firebase_analytics_web firebase_core flutter meta]
- firebase_auth 1.0.3 [firebase_auth_platform_interface firebase_auth_web firebase_core firebase_core_platform_interface flutter meta]
- firebase_core 1.0.3 [firebase_core_platform_interface firebase_core_web flutter meta]
- firebase_messaging 9.1.1 [firebase_core firebase_core_platform_interface firebase_messaging_platform_interface firebase_messaging_web flutter meta]
- fl_chart 0.35.0 [flutter equatable pedantic]
- flash 1.5.1 [flutter]
- flutter 0.0.0 [characters collection meta typed_data vector_math sky_engine]
- flutter_dropdown 0.0.8 [flutter]
- flutter_local_notifications 5.0.0+1 [flutter flutter_local_notifications_platform_interface platform timezone]
- flutter_modular 3.1.0 [flutter_modular_annotations triple flutter]
- flutter_rating_bar 4.0.0 [flutter]
- flutter_redux 0.7.0 [meta redux flutter]
- font_awesome_flutter 8.12.0 [flutter]
- geocoding 2.0.0 [flutter geocoding_platform_interface]
- geoflutterfire 3.0.0-nullsafety.2 [flutter cloud_firestore rxdart]
- geolocator 7.0.1 [flutter geolocator_platform_interface geolocator_web]
- google_fonts 2.0.0 [flutter http path_provider crypto]
- google_maps_flutter 2.0.3 [flutter flutter_plugin_android_lifecycle google_maps_flutter_platform_interface] 
- google_maps_flutter_web 0.3.0 [flutter flutter_web_plugins meta google_maps_flutter_platform_interface google_maps stream_transform sanitize_html]
- grouped_list 3.7.1 [flutter]
- http 0.13.1 [http_parser meta path pedantic]
- image 3.0.2 [archive meta xml]
- image_picker 0.7.4 [flutter flutter_plugin_android_lifecycle image_picker_platform_interface image_picker_for_web]
- js 0.6.3
- location 4.1.1 [flutter location_platform_interface location_web meta]
- mime 1.0.0
- multi_select_flutter 4.0.0 [flutter collection]
- permission_handler 6.1.3 [flutter meta permission_handler_platform_interface]
- pin_code_fields 7.0.0 [flutter]
- redux 4.0.0+3
- shimmer 2.0.0 [flutter]
- sliding_sheet 0.5.0 [flutter]
- syncfusion_flutter_datagrid 19.1.55-beta [flutter syncfusion_flutter_core collection]
- syncfusion_flutter_datepicker 19.1.55-beta [flutter intl syncfusion_flutter_core]
- url_launcher 6.0.3 [flutter url_launcher_platform_interface url_launcher_linux url_launcher_macos url_launcher_windows url_launcher_web]
- whatsapp_unilink 2.0.0

dev dependencies:
- 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 3.1.2 [crypto path]
- boolean_selector 2.1.0 [source_span string_scanner]
- characters 1.1.0
- charcode 1.2.0
- clock 1.1.0
- cloud_firestore_platform_interface 4.0.1 [collection firebase_core flutter meta plugin_platform_interface]  
- cloud_firestore_web 1.0.4 [cloud_firestore_platform_interface firebase_core firebase_core_web flutter flutter_web_plugins js]
- collection 1.15.0
- crypto 3.0.1 [collection typed_data]
- csslib 0.17.0 [source_span]
- dartz 0.10.0-nullsafety.1
- equatable 2.0.0 [collection meta]
- fake_async 1.2.0 [clock collection]
- ffi 1.0.0
- file 6.1.0 [meta path]
- firebase 9.0.1 [http http_parser js]
- firebase_analytics_platform_interface 1.1.0 [flutter meta]
- firebase_analytics_web 0.2.0+1 [firebase firebase_analytics_platform_interface flutter flutter_web_plugins meta]
- firebase_auth_platform_interface 4.0.2 [firebase_core flutter meta plugin_platform_interface]
- firebase_auth_web 1.0.5 [firebase_auth_platform_interface firebase_core firebase_core_web flutter flutter_web_plugins http_parser intl js meta]
- firebase_core_platform_interface 4.0.0 [flutter meta plugin_platform_interface]
- firebase_core_web 1.0.2 [firebase_core_platform_interface flutter flutter_web_plugins js meta]
- firebase_messaging_platform_interface 2.1.1 [firebase_core flutter meta plugin_platform_interface]
- firebase_messaging_web 1.0.4 [firebase_core firebase_core_web firebase_messaging_platform_interface flutter 
flutter_web_plugins js meta]
- flutter_local_notifications_platform_interface 3.0.0 [flutter plugin_platform_interface]
- flutter_modular_annotations 0.0.2 [flutter]
- flutter_plugin_android_lifecycle 2.0.1 [flutter]
- flutter_web_plugins 0.0.0 [flutter js characters collection meta typed_data vector_math]
- geocoding_platform_interface 2.0.0 [flutter meta plugin_platform_interface]
- geolocator_platform_interface 2.0.0 [flutter plugin_platform_interface vector_math meta]
- geolocator_web 2.0.3 [flutter flutter_web_plugins geolocator_platform_interface]
- google_maps 5.1.0 [js_wrapping meta]
- google_maps_flutter_platform_interface 2.0.4 [flutter meta plugin_platform_interface stream_transform collection]
- html 0.15.0 [csslib source_span]
- http_parser 4.0.0 [charcode collection source_span string_scanner typed_data]
- image_picker_for_web 2.0.0 [image_picker_platform_interface meta flutter flutter_web_plugins]
- image_picker_platform_interface 2.0.1 [flutter meta http plugin_platform_interface]
- intl 0.17.0 [clock path]
- js_wrapping 0.7.0 [js]
- location_platform_interface 2.1.0 [flutter meta plugin_platform_interface]
- location_web 3.0.0 [flutter flutter_web_plugins http_parser js location_platform_interface meta]
- matcher 0.12.10 [stack_trace]
- meta 1.3.0
- path 1.8.0
- path_provider 2.0.1 [flutter path_provider_platform_interface path_provider_macos path_provider_linux path_provider_windows]
- path_provider_linux 2.0.0 [path xdg_directories path_provider_platform_interface flutter]
- path_provider_macos 2.0.0 [flutter]
- path_provider_platform_interface 2.0.1 [flutter meta platform plugin_platform_interface]
- path_provider_windows 2.0.0 [path_provider_platform_interface meta path flutter ffi win32]
- pedantic 1.11.0
- permission_handler_platform_interface 3.1.3 [flutter meta plugin_platform_interface]
- petitparser 4.1.0 [meta]
- platform 3.0.0
- plugin_platform_interface 2.0.0 [meta]
- process 4.2.1 [file path platform]
- rxdart 0.26.0
- sanitize_html 2.0.0 [html meta]
- sky_engine 0.0.99
- source_span 1.8.0 [charcode 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.0 [charcode source_span]
- syncfusion_flutter_core 19.1.55 [vector_math flutter]
- term_glyph 1.2.0
- test_api 0.2.19 [async boolean_selector collection meta path source_span stack_trace stream_channel string_scanner term_glyph matcher]
- timezone 0.7.0 [path]
- triple 1.0.1 [meta async dartz]
- typed_data 1.3.0 [collection]
- url_launcher_linux 2.0.0 [flutter]
- url_launcher_macos 2.0.0 [flutter]
- url_launcher_platform_interface 2.0.2 [flutter plugin_platform_interface]
- url_launcher_web 2.0.0 [url_launcher_platform_interface meta flutter flutter_web_plugins]
- url_launcher_windows 2.0.0 [flutter]
- vector_math 2.1.0
- win32 2.0.5 [ffi]
- xdg_directories 0.2.0 [meta path process]
- xml 5.1.0 [collection meta petitparser]
PS D:\Flutter Projects\Goflexe-Partners>
PS D:\Flutter Projects\Goflexe-Partners> flutter doctor -v                      
[√] Flutter (Channel stable, 2.0.5, on Microsoft Windows [Version 10.0.19043.928], locale en-IN)
    • Flutter version 2.0.5 at D:\flutter
    • Framework revision adc687823a (7 days ago), 2021-04-16 09:40:20 -0700
    • Engine revision b09f014e96
    • Dart version 2.12.3

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3) 
    • Android SDK at C:\Users\Gaurav\AppData\Local\Android\sdk
    • Platform android-30, build-tools 30.0.3
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java       
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 4.1.0)
    • Android Studio at C:\Program Files\Android\Android Studio      
    • 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-b01)

[√] Connected device (1 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 90.0.4430.85

• No issues found!

[markusaksli-nc]

Can't you get around this by specifying a verifier as described in the docs? https://firebase.flutter.dev/docs/auth/phone#web-signinwithphonenumber

Although this could be documented since it is the default behavior.

[gauravmehta13]

Can't you get around this by specifying a verifier as described in the docs? https://firebase.flutter.dev/docs/auth/phone#web-signinwithphonenumber

Although this could be documented since it is the default behavior.

To add an inline widget, specify a DOM element ID to the container argument of the RecaptchaVerifier instance. The element must exist and be empty otherwise an error will be thrown. If no container argument is provided, the widget will be rendered as "invisible I am unable to understand the meaning of this. How to specify dom element id

[kasyr]

You can add <style> .grecaptcha-badge { visibility: hidden; } </style> in you index.html

[Ehesp]

Can't you get around this by specifying a verifier as described in the docs? firebase.flutter.dev/docs/auth/phone#web-signinwithphonenumber Although this could be documented since it is the default behavior.

To add an inline widget, specify a DOM element ID to the container argument of the RecaptchaVerifier instance. The element must exist and be empty otherwise an error will be thrown. If no container argument is provided, the widget will be rendered as "invisible I am unable to understand the meaning of this. How to specify dom element id

This code should help: https://github.com/FirebaseExtended/flutterfire/blob/master/packages/firebase_auth/firebase_auth_web/lib/src/firebase_auth_web_recaptcha_verifier_factory.dart#L62-L88

Essentially by default if no container string is provided, we create a DOM element for you. If you want to control it yourself, create a DOM element yourself with an id property and pass this to the container.

[Ehesp]

Also, have you checked out the clear method on the recaptcha instance: https://pub.dev/documentation/firebase_auth/latest/firebase_auth/RecaptchaVerifier/clear.html

[gauravmehta13]

Also, have you checked out the clear method on the recaptcha instance: https://pub.dev/documentation/firebase_auth/latest/firebase_auth/RecaptchaVerifier/clear.html

Thanks a lot , this worked

[gauravmehta13]

is there any way to disable the captcha as well?

[gauravmehta13]

this recaptcha

[Ehesp]

Hmm I don't believe so, since that's outside the flow of what we control.

[gauravmehta13]

Cool Thanks