Amplify-js: (React) UI Components don't support password managers

[Purii]

Describe the bug
Browsers don't recognize the input elements as Auth related.

-> No "password suggestion" on during account creation
-> No autofill during sign in
-> No prompt "save password?" during sign in

I'm not sure what details are necessary for this to work, but I tried setting the name attribute and others through formFields. But that didn't help solve this issue. (https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands)

-> Form is not part of a "form" element
-> The "sign in/up" buttons aren't labelled as type "submit"

[Purii]

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

[anantoghosh]

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

[PeterBurner]

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

[richiewebgate]

same issue with aws-amplify-angular

[kjellski]

This looks like a bug to every end-user - any hints on how to help fix this here?

[BrnoPCmaniak]

So I tried to fix this. Following upon @anantoghosh I googled and found out that the most likely issue is that the form fields are scattered across different shadow DOM roots.

I also noticed this commit https://github.com/aws-amplify/amplify-js/commit/538ca667296568fc58d77ce5c45f201b59e085ea

So I tried to undo some of it works. And instead of using shadow dom for the whole thing I tried to force it to use fallback (scoped: true https://stenciljs.com/docs/component#component-decorator).

When I applied this to authenticator and everything underneath this have happend:

<amplify-authenticator>
  <amplify-sign-in slot="sign-in" hideSignUp="true" [formFields]="this.signInFormFields"></amplify-sign-in>
</amplify-authenticator>

Then I tried to apply it only from form down. Which initialy seemed to be working. Both chrome and firefox now saves the password properly. Unfortunately in chrome you can not use saved credentials, on firefox this works.

I'm out of ideas maybe someone can make it work.

https://github.com/BrnoPCmaniak/amplify-js/commit/fe91c7ea71d1efaa73a8923864a2b01c2e70cc33

[TAConsulting]

Any updates on this?

[simon-lanf]

Please fix this, it is also affecting almost every testing frameworks. You can't use Selenium, Cypress and stuff like that.

[adamjmarkham]

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?

[ericclemmons]

There's a lot of research in this thread to look into, thanks for that!

In the meantime, @simon-lanf can you provide more info on you how Cypress isn't working? We have Cypress tests using commands like the following successfully:

`js cy.get(selectors.usernameInput).type(COGNITO_SIGN_IN_USERNAME); cy.get(selectors.signInPasswordInput).type(COGNITO_SIGN_IN_PASSWORD); cy.get(selectors.signInSignInButton).contains('Sign In').click();

[p0fi]

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

[ryan-mars]

This makes @aws-amplify/ui-react a no-go for us. Password managers are a healthy security pattern.

Happy to contribute but I'm not sure where to start.

[ryan-mars]

@BrnoPCmaniak does this change work? ---> https://github.com/BrnoPCmaniak/amplify-js/commit/fe91c7ea71d1efaa73a8923864a2b01c2e70cc33

[BrnoPCmaniak]

@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.