Apple keychain support for creating account and login account

[rwzdoorn]

As a Mac user I'm using the Apple Keychain on my Mac and iOS devices. When signing up an account it would be convenient to save the credentials in the Apple Keychain and auto-fill when logging in.

Add the following to the create account screen:

<input id="new-password-text-field" type="password" autocomplete="new-password"/>
<input id="confirm-password-text-field" type="password" autocomplete="new-password"/>

Add the following to the change password screen:

<input id="user-text-field" type="email" autocomplete="username"/>
<input id="password-text-field" type="password" autocomplete="current-password"/>

https://developer.apple.com/documentation/security/password_autofill/enabling_password_autofill_on_an_html_input_element

[tathamoddie]

It looks like these are standard values in HTML5 now, and Chrome follows the same pattern as per the Apple documentation link you provided.

Although it looks like this this is easier said than done.

The Home Assistant frontend uses LitElements.

For form inputs, it uses iron-input. At least, it does so on the login page.

The actual <input> element lives in a shadow DOM.

Autocomplete doesn't work in this scenario, per lit/lit-element#1023

There are underlying and unresolved bugs in every major browser engine:

• Webkit bug #172567
• Chromium bug #649162
• Firefox bug #1629226

There are potential workarounds, but they're out of my current comfort zone to whip up a pull-request for.

[tathamoddie]

Further research: this is already being tracked in #3133.

It looks like some password manager focused fixes have just been landed recently in #9369, thanks to a broader accessibility push by @rianadon

[rianadon]

Thanks for the ping!

That PR already implemented a workaround for these browser bugs, so there shouldn't be any additional workarounds needed.

[rianadon]

If anyone wants to take a stab at implementing this, the best place would be inside the render_input method in src/auth/ha-password-manager-polyfill.ts.

These elements are placed outside the Shadow DOM, so the browser can see process these attributes (see the list of bugs in tahamoddie's answer).