Flutter autofill login

Viewed 3074

I found several questions similar to this but nothing has worked. I probably didn't get the basics of the autofill functions.

I'm testing my code on an iPhone 11 Pro (physical device). I would like this to work also on Android, but I currently do not have any physical device to test with, just the simulators.

I have a simple login form with Email and Password fields:

TextFormField(keyboardType: TextInputType.emailAddress,
autofillHints: [AutofillHints.email],
textInputAction: TextInputAction.next), 

TextFormField(obscureText: true,
autofillHints: [AutofillHints.password],
onEditingComplete: () => TextInput.finishAutofillContext()),

Once the data has been inserted, I save them in two variables (_email and _password), and when the submit button is pressed I check them with FirebaseAuth. The login process is working correctly.

I would like to save these credentials and remember them on the following login. I save them on secure_storage, since I read somewhere that this saves them on iOS Keychain... but is not doing anything.

I do not get asked to save the credentials when I submit the form. When I click on the fields for filling them, the keyboard suggests me to open "Passwords", but there is no instance related to my app.

I read some threads but I do not understand what should I do. It seems that it should be working automatically, but is not the case.

There are some settings I need to check? Do I need to import some libraries?

Please be as clear as possible, is my first Flutter app. Thanks.

2 Answers

Wrap your TextFormFields with AutofillGroup to let the user save them with a password manager.

AutofillGroup(
  child: Column(
    children: <Widget>[
      TextFormField(
        keyboardType: TextInputType.emailAddress,
        autofillHints: [AutofillHints.email],
        textInputAction: TextInputAction.next,
      ),
      TextFormField(
        obscureText: true,
        autofillHints: [AutofillHints.password],
        onEditingComplete: () =>
          TextInput.finishAutofillContext(),
      ),
    ],
  ),
),

If you want the app to handle the autofill you need to get the credentials from secure_storage and insert the values into the form.

 @override
  Widget build(BuildContext context) {
    return AutofillGroup(
      child: Column(
        children: <Widget>[
          TextField(controller: username, autofillHints: [AutofillHints.username]),
          TextField(controller: newPassword, autofillHints: [AutofillHints.newPassword]),

        ],
      ),
    );
  }
Related