amplify-ui: (React) UI Components don't support password managers

Personally, I don’t think this should be labeled as a feature-request, this is a bug. Users are really confused about this.

Currently, there is no point in using the password component.

This is a blocker for us (and probably most people) to upgrade our version of Amplify without a workaround. Looks like this bug seems to have been there for a while, any news on when it will be fixed?

The use of the shadow DOM is highly problematic, not just for password managers, but for testability, as DOM selectors need to be manually altered to work around the shadow DOM.

This should no doubt be a bug.

With regards to our current components (before we publish the rewrite), we are looking at workaround that’ll allow saving username/password and autofilling credentials based on that (~branch~ PR https://github.com/aws-amplify/amplify-js/pull/8181).

This workaround does not support dropdown for multiple credentials, but this will at least allow for a credential save and autofill (edit: on chrome and firefox) while we work on the rewrite. Please let us know with any feedback or suggestions. We’ll work on getting the workaround tested and reviewed meanwhile.

Hello all, we just merged in the password manager workaround (pr aws-amplify/amplify-js#8181). This is now available in unstable npm tag and will be published in the next release cycle. To use this workaround, you need to wrap your authenticator with AmplifyAuthContainer:

<AmplifyAuthContainer>
  <AmplifyAuthenticator>
    ...
  </AmplifyAuthenticator>
</AmplifyAuthContainer>

(or with amplify-auth-container on vue/angular). Under the hood, AmplifyAuthContainer contains a hidden form that is not shadowed and thus gets autofilled. Then we use event listeners to send that autofill down to the amplify-authenticator.

This workaround works for Chrome and Firefox. Safari does not trigger credentials save even when form shadows are disabled, so this will be a limitation until our rewrite. Please let us know with any questions or issues with this solution. We’ll keep this issue open to track this until this is completely resolved.

Any news on this topic? This is a really annoying bug!

Hi @strugman , we have added support for password managers to our new Authenticator, which is currently under the @next tag.

Link to our documentation - https://ui.docs.amplify.aws/ui/components/authenticator?platform=react

And a link to a small test checking for support - https://github.com/aws-amplify/amplify-ui/blob/main/packages/e2e/features/ui/components/authenticator/sign-up-with-username.feature#L30-L33

If you’d like, give it a try and see if the new version works better for you!

same issue with aws-amplify-angular

Hello, apologies on the late response here. The new authenticator is being actively developed in a separate repo aws-amplify/amplify-ui repository. This version will have full support for both browser and third party password managers (addressed specifically in https://github.com/aws-amplify/amplify-ui/pull/357. We are looking to make our first pre-release soon, after which you can try new versions for feedbacks or early adoption. The progress can be tracked in the ui repo.

This new version makes multiple improvements that are listed in detail in RFC: Authenticator@next on top of password manager support, so we’d appreciate any feedback there. Thanks for your patience while we work through it, and as always feedbacks / contributions are welcome.

It will. The rewrite will stick with the best html practices to support a broad variety of password managers, which really boils down to not using shadow DOM.

@ClaudioVR, No let me clarify this a little bit.

• React
  • If you’re using withAuthenticator HOC, no code change is needed.
  • If you’re using <AmplifyAuthenticator /> directly, wrap it with AmplifyAuthContainer like so: https://github.com/aws-amplify/amplify-js/issues/5782#issuecomment-828763711.
• Angular / Vue
  • You need to wrap around your amplify-authenticator component with amplify-auth-container:

<amplify-auth-container>
  <amplify-authenticator></amplify-authenticator>
</amplify-auth-container>

I have a docs PR https://github.com/aws-amplify/docs/pull/3224 that I’ll merge soon.

@cburkins, we’ve given this more thought and we will be modifying the HOC to include this workaround by default. We’ll create a PR soon.

I’m currently enjoying the simplicity of using the withAuthenticator HOC. As such, am I easily able to deploy this ? I’m not sure how to apply “you need to wrap your authenticator with AmplifyAuthContainer”

Any updates on this?

does not work with @aws-amplify/ui-vue either

Vaadin login component handles this by not using the shadow dom for the form https://github.com/vaadin/vaadin-login/blob/9e76baf5e8a7dccf5e65116d0fc91b49ea3bdf2a/src/vaadin-login-form.html#L50

@markcarroll Yes we do! https://github.com/aws-amplify/amplify-ui/milestone/1

@patti-berchi do you mean you got the password-manager working? I am using 1password, latest versions … “aws-amplify”: “^4.2.1”, “@aws-amplify/ui-components”: “^1.7.0”, “@aws-amplify/ui-vue”: “^1.1.1”, …

Reinstalled everything; added even the formfields with autocomplete; no luck sofar.

@wlee221 how long for the version without the shadow-dom (or is it released and I missed it completely … )

You’re welcome! We just merged aws-amplify/amplify-js#8243 to support withAuthenticator – you shouldn’t need to update any code to use this workaround. This has some restrictions as stated before, but hopefully this will alleviate some of the accessibility pain while we work on the rewrite.

The fix will hit unstable soon and will be published in the next release cycle. We’ll fix this issue more completely on our rewrite (without hidden forms 😄 ) and close this issue then. I’ll mark this back to feature-request as a workaround has been provided. Thanks for your patience!

Any progress on this? its a unpleasant missing feature.

@ryan-mars The issue is using of shadow dom for the form (not using plain HTML for the form). I tried to force the components to be in compatibility mode.

It works on Firefox. On chrome, it only saves the password but it won’t let you use it.

It could be hacked together with this https://developers.google.com/web/fundamentals/security/credential-management to make it work but it’s not a solution.

Seems that the usage of shadow DOM is the root cause: https://bugs.chromium.org/p/chromium/issues/detail?id=770175