Username/ID hint for navigator.credentials.get()

I haven't combed over the entire spec so I'm mostly basing this on how Chrome has currently implemented the feature. Apologies if this is covered in the spec or this is something specific to Chrome.

The mediation argument takes a few values, but silent and optional are unique in that they behave differently when there is only one credential for an origin as apposed to more than one. Both indicate that they'll try to supply creds without prompting the user, only differing in how it behaves when it fails to automatically select credentials. On Chrome, required mediation or "failed" optional mediation result in a UI prompt to select a credential if there are multiple available.

There are a few occasions where one would need to enter a password after already authenticating. One such example is a password change event. Another, would be a password confirmation screen. In these cases, we know the ID of the supposed human behind a keyboard so we would may want to pre-fill the password without user interaction by supplying the ID to navigator.credential.get(). I've attached a potato quality screen recording of the experience which I think can be improved upon.

Expand the details for narration of the gif

When adding an email address, I'm required to provide my password.

If I am the only user on this device, it is pre-filled and I get a notification about signing in (separate matter).
If I save a new credential, I am prompted to choose when the second credential is clearly not relevant here.
Lastly, I remove the second credential and I'm happily pre-filled

ezgif-1-f595e709d754

If navigator.credentials.get() accepted an ID hint, it could allow us to bypass the credential selection step even if there are many stored credentials. This is mostly helpful for those with multiple accounts for various sites.

navigator.credentials.get({
  password: true,
  mediation: "optional",
  id: username, // no prompt regardless of number of users if match
})

cc @mikewest @ptoomey3

This same need also applies to sites where the username and password entry fields are split and reside on different pages. This scenario is extremely common in the US Banking industry. The username entry field exists on one page (domain) and the password field exists on a different one. For a demo of this flow see https://garden-fi.com/ and https://digital.garden-fi.com/login

My sites have supported the credential management api almost since it was introduced, but only when initiated from the username screen. Since the normal case is for the username to be submitted via a form POST on another site, the credential management APIs have very low adoption.

The scenario also applies to OAuth2 login flows where a login_hint parameter is utilized.

w3c / webappsec-credential-management

Username/ID hint for navigator.credentials.get() #144