Password Managers and the UX of Web Registration

James Allardice on


The registration process

When building Complete Maths we realised early on that the registration process would be slightly different to what you would traditionally see in many web applications. On Complete Maths the usual process is for a single teacher to create an account for their school and for themselves in the process. Then, when setting up their school for the first time, they will create accounts for their colleagues.

Because one user is creating the accounts of many, the other users don't experience the normal registration process. Instead they receive a "welcome" email which includes a link to activate their account and set a password. It was on this "set password" page that we realised there could be improvements to the user experience when the user in question uses a password manager such as 1Password to manage their web login credentials.

Password managers

The majority of password managers work by hooking into HTML form submission events, examining the fields being submitted and then storing the relevant field names and their values. By storing the field name the password manager browser extension is then able to find those fields the next time you visit the page and can populate the relevant fields with the data it remembered for them.

When you register on a website most password managers will detect that the form being submitted contains a password field, along with a username field (or something similar) and will therefore prompt you to save the data you entered. When you then later come to login to that site you want your password manager to be able to fill in your details correctly.

The problem

The problem comes when the login form in question has fields that are named differently to the fields in the registration form. The password manager will be unable to fill any fields with names different to those it has stored. For example:

<!-- Signup -->
<form method="post" action="/signup">
  <input type="text" name="username" placeholder="Username">
  <input type="password" name="password" placeholder="Password">
  <input type="submit">
</form>

<!-- Login -->
<form method="post" action="/login">
  <input type="text" name="username" placeholder="Username">
  <input type="password" name="pass" placeholder="Password">
  <input type="submit">
</form>

Notice how the password input is named differently in each form? If a password manager stores the value entered for password on the signup form it will be unable to populate the pass field on the login form.

In our specific case on Complete Maths the signup form doesn't include a password field at all. Password managers are able to remember your username but since you don't set a password until later they fail to store all of the details required to log in.

The solution in this instance is to include the username in an invisible field in the "set password" form. Now, when the form is submitted, the password manager will see both fields and can store them both. For example (imagine that the value attribute is populated by the server before the page is rendered):

<!-- Set password -->
<form method="post" action="/signup">
  <input type="text" name="username" value="{{ username }}" style="display: none;">
  <input type="password" name="password" placeholder="Password">
  <input type="submit">
</form>

In conclusion there are two pieces of advice:

  • Ensure your registration and login forms use the same field names
  • If your users set their password separately to your registration form then include their username in an invisible field