Leverage Browser "Save Password"-Feature

Flow
1

Hi,

I am wondering how, I can tell Vaadin Flow (TextField, PasswordField) to enable the browser’s feature to persist the entered credentials.

2

The existing password managers have an unfortunate limitation of not supporting shadow DOM. As a workaround, we’re implementing a way to use a native <input> element as the child of <vaadin-text-field> and <vaadin-password-field> so that they are in the light DOM instead and password managers can work with them. This is also going to be used in the upcoming official Login component.

3

It looks like implementing a native input element hasn’t happened yet. Is there any way to do this other than using the Login component?

4

If I remember correctly, the Bakery demo for flow supports password managers (or Apple’s at least), by moving the username and password fields into light DOM.

5

Martin Israelsen:
If I remember correctly, the Bakery demo for flow supports password managers (or Apple’s at least), by moving the username and password fields into light DOM.

Here’s how it’s done in the Bakery app. The LoginView implements PageConfigurator and uses the following code to switch out of ShadowDOM

   @Override
   public void configurePage(InitialPageSettings settings) {
      // Force login page to use Shady DOM to avoid problems with browsers and
      // password managers not supporting shadow DOM
      settings.addInlineWithContents(
            InitialPageSettings.Position.PREPEND, "window.customElements=window.customElements||{};"
                  + "window.customElements.forcePolyfill=true;" + "window.ShadyDOM={force:true};",
            InitialPageSettings.WrapMode.JAVASCRIPT);
   }
6

EXACTLY what I was looking for.

Thanks Martin!

7

For Dashlane that solution doesn’t work.

I see that Dashlane recognizes the fields as login fields but it isn’t able to store the values after login.

So just half the solution.

8

Hi,

Jouni Koivuviita:
The existing password managers have an unfortunate limitation of not supporting shadow DOM. As a workaround, we’re implementing a way to use a native <input> element as the child of <vaadin-text-field> and <vaadin-password-field> so that they are in the light DOM instead and password managers can work with them. This is also going to be used in the upcoming official Login component.

Is there some github issue that we can follow to see the progress about this feature ?
Franck

9

Really late with the reply, but: Vaadin input field components have a feature that allows you to slot in a native input element, and thereby allow password managers to work (assuming you do not have any other shadow roots in your DOM in the hierarchy above the input field).

<vaadin-text-field>
  <input type="text" slot="input">
</vaadin-text-field>
10

Hi Jouni,

How is this solution implemented in Java exactly ?

Thanks,