Save credential in login page with web component

user_4488265 0
Viewed 534

I'm trying to build a simple login page with a username and password input and login button but the difference is my inputs and button are web components (jb-input is what we use).

When the user logs in and redirects the user to his/her dashboard, chrome and Firefox don't ask for saving a credential, probably because our web component using shadow DOM and browser couldn't detect input element with a username and password name attribute. how can I make it work and make chrome and Firefox or any other password manager detect successful login and save user credentials?

shadow-dom web-component authentication javascript
2 Answers

Don't use shadowDOM, so the Browser Tab can access all DOM elements.

Or if you do need shadowDOM, add hidden non-shadowDOM inputs in the DOM, your code inside the Web Component can read.

shadowDOM are sealed boxes to Password Managers, they can't (or rather won't) access.
No different than using an <iframe> for your password form.

Maybe someday they will dive into open shadowRoots

user_25208000

As Danny has mentioned, your input web-component has to be accessible from the 'document' layer (most likely by avoiding shadowDOM).

You can see a live working example of a login form built with web-components based on Polymer here (where both username & password for demo is: 'admin') in which the input fields are accessible by browser password managers. It is also mentioned in the source code of this example:

Component has to be accessible from the document layer in order to allow password managers to work properly with form values.

The component doesn't have a shadowRoot, so the <form> and input fields can be styled from a global scope.

One might also find a workaround to this by using Polymer's feature-rich elements like dom-bind or dom-if as they allow using Polymer's template features (data binding, declarative event listeners, etc.) in the main document.

user_88853240
Related