🐛 [FlutterFireUI] Browser do not offer to store password on web

[Leffe108]

Bug report

Describe the bug I created a FlutterFire demo app where I use SignInScreen widget for sign in UI. When I test it out in Flutter Web (in Chrome and Firefox), the browser do not offer to save the username + password in the in-browser password manager.

In flutter issue #61301 there are some answers suggesting to configure autofillHints on the fields and wrapping with AutofillGroup. Looking at the FlutterFire UI source code it seems that this is not set for the EmailForm widget used by SignInScreen under the hood.

If Flutter Web do support autofill working with password managers (which the above issue seems to indicate), I expect the FlutterFire UI to have support for it.

Steps to reproduce

Steps to reproduce the behaviour:

1. Open demo project in VS code and run it with chrome as target.
2. Click on Register button in the UI
3. Enter an email and a password (and the same password again in Confirm password)
4. Click on Register button.

Browser does not offer to store the password.

Expected behavior

I expect that when I create user and/or login that Chrome/Firefox offers to store the password in the in-browser password manager.

Sample project

Use flutterfire CLI to generate firebase_options.dart. Enable email provider in Firebase console.

main.dart

```dart import 'package:flutter/material.dart'; import 'package:firebase_auth/firebase_auth.dart'; import 'package:firebase_core/firebase_core.dart'; import 'package:flutterfire_ui/auth.dart'; import 'firebase_options.dart'; void main() async { WidgetsFlutterBinding.ensureInitialized(); await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform); runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Firebase Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: const MyHomePage(), ); } } class MyHomePage extends StatelessWidget { const MyHomePage({Key? key}) : super(key: key); @override Widget build(BuildContext context) { final auth = FirebaseAuth.instance; return StreamBuilder( stream: auth.authStateChanges(), builder: (context, snaphot) => auth.currentUser == null ? const Login() : const Home(), ); } } class Login extends StatelessWidget { const Login({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return SignInScreen( providerConfigs: const [ EmailProviderConfiguration(), ], headerMaxExtent: 64, headerBuilder: (BuildContext context, BoxConstraints constraints, double shrinkOffset) { return AppBar(title: const Text("Firebase Demo")); }, ); } } class Home extends StatelessWidget { const Home({Key? key}) : super(key: key); @override Widget build(BuildContext context) { final user = FirebaseAuth.instance.currentUser; return Scaffold( appBar: AppBar( title: Text('Hi ${user?.displayName ?? user?.email ?? 'someone'}!'), actions: [ TextButton( child: const Icon( Icons.logout, color: Colors.white, semanticLabel: 'Log out', ), onPressed: () { FirebaseAuth.instance.signOut(); }, ), ], ), body: Column( children: const [ Text('Logged in'), ], ), ); } } ```

pubspec.yaml

```yaml name: firebase_demo description: A new Flutter project. publish_to: 'none' version: 1.0.0+1 environment: sdk: ">=2.15.1 <3.0.0" dependencies: flutter: sdk: flutter cupertino_icons: ^1.0.2 firebase_core: ^1.11.0 flutterfire_ui: ^0.3.1 dev_dependencies: flutter_test: sdk: flutter flutter_lints: ^1.0.0 firebase_auth: ^3.3.5 flutter: uses-material-design: true ```

---

Flutter doctor

Run flutter doctor and paste the output below:

Click To Expand

``` [✓] Flutter (Channel stable, 2.8.1, on Microsoft Windows [Version 10.0.19044.1466], locale sv-SE) • Flutter version 2.8.1 at C:\Users\Leif\Programmering\Libraries\flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 77d935af4d (5 weeks ago), 2021-12-16 08:37:33 -0800 • Engine revision 890a5fca2e • Dart version 2.15.1 [!] Android toolchain - develop for Android devices (Android SDK version 31.0.0) • Android SDK at K:\Android\android-sdks ✗ cmdline-tools component is missing Run `path/to/sdkmanager --install "cmdline-tools;latest"` See https://developer.android.com/studio/command-line for more details. ✗ Android license status unknown. Run `flutter doctor --android-licenses` to accept the SDK licenses. See https://flutter.dev/docs/get-started/install/windows#android-setup for more details. [✓] Chrome - develop for the web • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe [✓] Android Studio (version 2020.3) • 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 11.0.10+0-b96-7249189) [✓] VS Code, 32-bit edition (version 1.61.2) • VS Code at C:\Program Files (x86)\Microsoft VS Code • Flutter extension version 3.29.0 [✓] Connected device (2 available) • Chrome (web) • chrome • web-javascript • Google Chrome 97.0.4692.71 • Edge (web) • edge • web-javascript • Microsoft Edge 96.0.1054.62 ! Doctor found issues in 1 category. ```

---

Flutter dependencies

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

Click To Expand

``` Dart SDK 2.15.1 Flutter SDK 2.8.1 firebase_demo 1.0.0+1 dependencies: - cupertino_icons 1.0.4 - firebase_core 1.11.0 [firebase_core_platform_interface firebase_core_web flutter meta] - flutter 0.0.0 [characters collection meta typed_data vector_math sky_engine] - flutterfire_ui 0.3.1 [cloud_firestore collection crypto desktop_webview_auth email_validator firebase_auth firebase_core firebase_database firebase_dynamic_links flutter flutter_facebook_auth flutter_localizations flutter_svg google_sign_in sign_in_with_apple twitter_login] dev dependencies: - firebase_auth 3.3.5 [firebase_auth_platform_interface firebase_auth_web firebase_core firebase_core_platform_interface flutter meta] - flutter_lints 1.0.4 [lints] - 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: - async 2.8.2 [collection meta] - boolean_selector 2.1.0 [source_span string_scanner] - characters 1.2.0 - charcode 1.3.1 - clock 1.1.0 - cloud_firestore 3.1.6 [cloud_firestore_platform_interface cloud_firestore_web collection firebase_core firebase_core_platform_interface flutter meta] - cloud_firestore_platform_interface 5.4.11 [collection firebase_core flutter meta plugin_platform_interface] - cloud_firestore_web 2.6.6 [cloud_firestore_platform_interface collection firebase_core firebase_core_web flutter flutter_web_plugins js] - collection 1.15.0 - crypto 3.0.1 [collection typed_data] - desktop_webview_auth 0.0.2 [crypto flutter http] - email_validator 2.0.1 - fake_async 1.2.0 [clock collection] - firebase_auth_platform_interface 6.1.10 [firebase_core flutter meta plugin_platform_interface] - firebase_auth_web 3.3.6 [firebase_auth_platform_interface firebase_core firebase_core_web flutter flutter_web_plugins http_parser intl js meta] - firebase_core_platform_interface 4.2.3 [collection flutter meta plugin_platform_interface] - firebase_core_web 1.5.3 [firebase_core_platform_interface flutter flutter_web_plugins js meta] - firebase_database 9.0.5 [firebase_core firebase_core_platform_interface firebase_database_platform_interface firebase_database_web flutter] - firebase_database_platform_interface 0.2.0+4 [collection firebase_core flutter meta plugin_platform_interface] - firebase_database_web 0.2.0+4 [firebase_core firebase_core_web firebase_database_platform_interface flutter flutter_web_plugins js] - firebase_dynamic_links 4.0.4 [firebase_core firebase_core_platform_interface firebase_dynamic_links_platform_interface flutter meta plugin_platform_interface] - firebase_dynamic_links_platform_interface 0.2.0+4 [firebase_core flutter meta plugin_platform_interface] - flutter_facebook_auth 3.5.7 [flutter flutter_facebook_auth_platform_interface flutter_facebook_auth_web] - flutter_facebook_auth_platform_interface 2.7.1 [flutter plugin_platform_interface] - flutter_facebook_auth_web 2.6.0+2 [flutter flutter_web_plugins js flutter_facebook_auth_platform_interface] - flutter_localizations 0.0.0 [flutter intl characters clock collection meta path typed_data vector_math] - flutter_svg 1.0.3 [flutter meta path_drawing vector_math xml] - flutter_web_plugins 0.0.0 [flutter js characters collection meta typed_data vector_math] - google_sign_in 5.2.3 [flutter google_sign_in_platform_interface google_sign_in_web] - google_sign_in_platform_interface 2.1.1 [flutter quiver] - google_sign_in_web 0.10.0+4 [flutter flutter_web_plugins google_sign_in_platform_interface js pedantic] - http 0.13.4 [async http_parser meta path] - http_parser 4.0.0 [charcode collection source_span string_scanner typed_data] - intl 0.17.0 [clock path] - js 0.6.3 - lints 1.0.1 - matcher 0.12.11 [stack_trace] - meta 1.7.0 - path 1.8.0 - path_drawing 1.0.0 [vector_math meta path_parsing flutter] - path_parsing 1.0.0 [vector_math meta] - pedantic 1.11.1 - petitparser 4.4.0 [meta] - plugin_platform_interface 2.1.2 [meta] - quiver 3.0.1+1 [matcher] - sign_in_with_apple 3.3.0 [flutter meta sign_in_with_apple_platform_interface sign_in_with_apple_web] - sign_in_with_apple_platform_interface 1.0.0 [flutter plugin_platform_interface meta] - sign_in_with_apple_web 1.0.1 [flutter flutter_web_plugins sign_in_with_apple_platform_interface js] - sky_engine 0.0.99 - source_span 1.8.1 [collection path term_glyph] - stack_trace 1.10.0 [path] - stream_channel 2.1.0 [async] - string_scanner 1.1.0 [charcode source_span] - term_glyph 1.2.0 - test_api 0.4.3 [async boolean_selector collection meta source_span stack_trace stream_channel string_scanner term_glyph matcher] - twitter_login 4.0.1 [flutter crypto http] - typed_data 1.3.0 [collection] - vector_math 2.1.1 - xml 5.3.1 [collection meta petitparser] ```

---

[Leffe108]

Looks like there is a recent PR to fix this: https://github.com/FirebaseExtended/flutterfire/pull/7668 :-)

[darshankawar]

The PR fix would hopefully resolve your issue. Also, it may not have been a bug, probably the plugin doesn't yet support autofill until the PR was raised. So I suggest you to keep an eye or subscribe to that PR for further updates.

[zetechmoy]

Same thing for me, browser is not saving anything. I tried with AutofillGroup etc :slightly_smiling_face:

[lesnitsky]

after firebase/flutterfire#7668 is merged chrome now suggests saving password, but username is missing: flutter/flutter/issues/97653

[lesnitsky]

flutter/flutter/issues/83265

[francescovgg]

Hi everyone,

I'm using flutterfire_ui: ^0.4.3+6, credentials (email, password) are correctly saved by browsers but they are not be filled in when the browser suggests to use saved credentials.

Are there any updates on this topic?

[lesnitsky]

as of Flutter 3.13.1 • channel stable and firebase_ui_auth: 1.7.0 this works as expected (browser prompts to save the password and shows autofill hints).

[AhmmedTowfique]

Hi lesnitsky, is it also working for iOS? Thank you.