FR (Authenticator Angular): Ability to inject a pre-filled email / username into Authenticator

[SonofNun15]

On which framework/platform would you like to see this feature implemented?

Angular

Which UI component is this feature-request for?

Authenticator

Please describe your feature-request in detail.

Think about how Google authenticates people. They ask for your email first. Then they ask for your password. They do this so that they can forward / bounce people to the correct authentication portal in cases like SSO or alternate identity providers.

We have a home brew authentication scheme and we are looking to migrate to using AWS Cognito instead. This will be very difficult to do without being able to separate unauthenticated users who have already migrated (created linked AWS Cognito accounts) from those who have not and still need to complete the migration process. During this migration (which will need to roll out over many months), we would like to have them enter email first so that we can determine if their account has been migrated. Then, if they have been migrated, we bounce them to Authenticator and pre-fill / populate the email address (make it readonly as well). If they haven't been migrated, we funnel them into the account migration process.

I have been scouring the Authenticator documentation and source code to determine if it is currently possible to seed the email / username field and then make it readonly, but this looks very difficult at best and very likely impossible.

Any thoughts on adding support for this?

In the meantime we'll likely move forward with the headless mode, but would definitely prefer to use the pre-baked controls to delegate a lot of the authentication details and flows to amplify.

Thank you!

Please describe a solution you'd like.

Add a property to formFields that lets you pre-fill the field with a value and makes it read only.

There could be a separate option for pre-filled fields to make them editable if desired.

public formFields = {
  signIn: {
    username: {
      prefill: 'username@my-domain.com',
      readonly: true,
    },
  },
};

<amplify-authenticator [loginMechanisms]="['email']" [formFields]="formFields">
  ...
</amplify-authenticator>

We love contributors! Is this something you'd be interested in working on?

• [ ] 👋 I may be able to implement this feature request.
• [ ] ⚠️ This feature might incur a breaking change.

[ghost]

+1

[gregkdunn]

Looking for this exact functionality for the same reason. Capturing the email in another form and would like to pre-fill the username in the Angular Authenticator component.

[jacoblogan]

Thank you for your interest in this feature, will consider it for our roadmap planning.