How to hint Google Smart Lock to use a specific input field as the username in a website

Question

I've been trying to search for some documentation on how to hint Google Smart Lock for Chrome to use a specific input field as the one associated with the username without any luck.

For the password it works perfectly as it is using type="password" but when it comes down to the username in a multi field form, where the username is not specified before the password or not as the first field in the form it picks another of the fields in the form as the username.

Does anyone have any clue on how to hint Google Smart Lock to use a specific input field as the username?

Answer 1

Google smart lock is a build-in feature of chrome, there is the same function on firefox. It based on the last input type="password" to detect password field would be saved. Here are some things I have tested on FireFox and Chrome

1. Chrome:
   • Based on the last input type password (you even have more than 2 input password elements)
   • If 2 last input type password has the same value -> decide to save password
   • Look up to find an upper input type text from the first input type password (Not a hidden type nor disabled) to pick it as username
2. Firefox:
   • Based on the last input type password (you even have more than 2 input password elements)
   • If 2 last input type password has the same value -> decide to save password
   • Look up to find an upper input type text from the first input type password (Not a hidden type) to pick it as username, note that FF allow input disabled is an username :)

Answer 2

You just need to put:

autocomplete="username"

on the required field (usually the user's email, or site's user name).

then it will know to use it as the key to the smartlock feature (tested on chrome).

Answer 3

You can use display: none css to hide a username input. The following code snippet is taken from Chromium design document. They discuss a few use cases there.

<style>
  #emailfield { display: none; }
</style>
<form id="login" action="login.php" method="post">
  <input id="emailfield" type="text" value="me@example.test" autocomplete="username">
  <input type="password" autocomplete="current-password">
  <input type="submit" value="Sign In!">
</form>

Check out this article that explains how to make it work on Chrome, Firefox and Safari for 3 different cases: normal login, username first login and reset password page with verification input first.

I have also made a CodePen where you can try it out.