Support Autofill for Authenticator Forms

[fengkaijia]

Description

As a user, when login in to an app on an Amplify Authenticator sign-in form, I want to have my AutoFill service to fill in username and password for me. Support should include:

• [x] Auto fill email, phone number, address, name, etc. from platform (Contact Info on iOS)
  • Implemented in #2306
• [ ] Auto fill groups for username / password. For example, when using a password manager, populating the username from the password manager should auto populate the username and password fields.
• [ ] Support for all platforms
  • [x] iOS
  • [x] Android
  • [ ] Web (not tested)
  • [ ] Desktop (n/a, not supported)

[fjnoyp]

Hi @fengkaijia, thanks for creating this issue. We have labeled this as a feature request and will discuss internally on how we might resolve this in the future.

[Lorenzohidalgo]

@fjnoyp & @salihgueler I'll take a look into this 😉

Just as a heads-up, this change will also require the user to make some extra changes/steps outside of the application. The user will need to create, configure and host a file under that application's domain. Official docs on this

[Jordan-Nelson]

@Lorenzohidalgo - You are referring to setting up an Associated Domain, correct? I think this would be optional, as it would only be required to sync auto fill between a web and mobile app. This is something that could be included in documentation for the authenticator. Let me know if you are referring to something other than Associated Domains.

[Lorenzohidalgo]

Hi @Jordan-Nelson, exactly! The official documentation mentions that it might be needed for a good iOS experience.

[Jordan-Nelson]

This auto closed when #2306 merged. With the changes in #2306, auto fill support has been added for most form fields. I am going to leave this open to track support for auto fill groups for username password, and to track getting this into the developer-preview branch. I will update the description to reflect this.

Thank you to @Lorenzohidalgo for PR #2306!

[lucasoares]

Hello @Jordan-Nelson how can I use this? I have amplify-flutter in the latest version but I can't get autofill working neither on android or web. Thanks.

[Lorenzohidalgo]

Hey @lucasoares have you followed the steps mentioned in the readme file? https://github.com/aws-amplify/amplify-flutter/tree/main/packages/authenticator/amplify_authenticator#setting-up--troubleshooting-autofill

[lucasoares]

Hey @lucasoares have you followed the steps mentioned in the readme file? https://github.com/aws-amplify/amplify-flutter/tree/main/packages/authenticator/amplify_authenticator#setting-up--troubleshooting-autofill

The step mentioned there is only different for the iOS.. For the web, for example, it should not require any additional step, right?

[Lorenzohidalgo]

Not sure about that, I've been "away" from Flutter for a while now. My recommendation would be to follow the troubleshooting tips/guide on the referenced docs. https://api.flutter.dev/flutter/material/TextField/autofillHints.html

[lucasoares]

Maybe it's because I'm using custom builder with the custom forms to build my screen? I will wait for another member of amplify-flutter before starting to debug something from a third party OS code that should be working haha Thanks.

[Jordan-Nelson]

Hi @lucasoares. How are you testing this on web and Android?

On web, Flutter will by default launch a private chrome browser in debug mode. That believe that private window won't have access to your saved usernames and passwords. If you open the same URL in a non private window, your browser should prompt you to save your username/password. Your browser should then prompt you to use those values when signing in again. Below is a screenshot of that from Firefox.

On Android, are you using a emulator or a physical device? Do you have auto fill set up on that device?

[lucasoares]

@Jordan-Nelson To run locally I'm using a web-server device and accessing it in a logged-in Chrome browser... But I also tested it in my deployed web application accessing it directly by its domain.

I tried both 1password and Chrome's default password manager but there is no prompt for autofill:

My main widget:

  @override
  Widget build(BuildContext context) {
    return Authenticator(
      stringResolver: stringResolver,
      authenticatorBuilder: getAuthenticationBuilder(),
      child: MaterialApp.router(
         ...
      ),
    );
  }

My signIn form created by the getAuthenticationBuilder:

   ...
    case AuthenticatorStep.signIn:
      child = Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          _logo(),
          _logoDivider(context.l10n.signInDescribed),
          SignInForm(),
          const Spacer(),
          _dontHaveAccount(context, state),
        ],
      );
      break;
  ...
  return Center(
    child: SingleChildScrollView(
      child: ConstrainedBox(
        constraints: BoxConstraints(
          maxWidth: ContainerConstants.mediumWidth,
          maxHeight: ContainerConstants.mediumHeight,
        ),
        child: Padding(
          padding: EdgeInsets.symmetric(vertical: containerPadding),
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              border: Border.all(),
            ),
            child: Padding(
              padding: padding,
              child: child,
            ),
          ),
        ),
      ),
    ),
  );

[simon1389]

any updates on that?

i switched from cognito hosted ui to amplify-authenticator in my angular application. Login and Signup works fine, but passwords are not stored/autofilled as it was with the hosted ui. It's bit of a bad user experience currently

[Jordan-Nelson]

@simon1389 - Are you using Amplify JS or Amplify Flutter?

[simon1389]

@simon1389 - Are you using Amplify JS or Amplify Flutter?

Amplify JS

[Jordan-Nelson]

Can you open an issue at https://github.com/aws-amplify/amplify-ui? aws-amplify/amplify-ui is the repository for the Amplify JS UI components.

[simon1389]

Can you open an issue at https://github.com/aws-amplify/amplify-ui? aws-amplify/amplify-ui is the repository for the Amplify JS UI components.

i created an issue, and with help of @jacoblogan we found the root cause :)

https://github.com/aws-amplify/amplify-ui/issues/5547

[Jordan-Nelson]

Great, thanks. We will continue to use this issue to track support for the Amplify Flutter authenticator.