AmplifySignIn component does not work with password managers or native browser autofill

[srquinn21]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

# Put output below this line

Describe the bug

A react app using the AmplifySignIn component does not properly set the autocomplete attribute on the username and password inputs. Native browser autofill and password managers do not recognize the inputs as a result and fail. See https://developers.google.com/web/fundamentals/design-and-ux/input/forms#recommended_input_name_and_autocomplete_attribute_values for appropriate values.

Expected behavior

Can be worked around by providing our own AmplifyAuthFields but the AmplifySignIn component should work with password managers and native browser autofill by default.

Reproduction steps

1. Create an app with the AmplifySignIn component
2. When rendered to the browser, inspect the username or password inputs
3. Observe the input element doesn't have the autocomplete attribute set

Code Snippet

<AmplifySignIn
    headerText={this.getHeaderText()}
    slot="sign-in"
    hideSignUp={true}
></AmplifySignIn>

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[chrisbonifacio]

Hey @srquinn21 The UI team is currently working towards refactoring the ui components away from using the shadow dom, which is the cause of this issue, in order to improve compatibility with things like password managers.

That work is currently being tracked on this issue https://github.com/aws-amplify/amplify-js/issues/5782

Closing this as a duplicate of the issue mentioned above.

[wlee221]

Hi! As @chrisbonifacio mentioned, we're working on rewriting our ui-components to allow variety of password managers. The main reason this can't be solved directly that browsers have trouble detecting form covered inside shadow DOM even when autofill properties are set.

As a temporary workaround while we work on it, we merged #8181 that'll enable browser password managers on chrome / firefox web. This also adds autofill attributes as recommended. https://github.com/aws-amplify/amplify-js/issues/5782#issuecomment-840711868 is how you would use this workaround.

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.