What are password managers and how to design forms for them


form
Radek Crlík photo
Radek Crlík
java developer
14 Jun 2021
89
Technology topics
#Programming

We’ve all heard the following: Use strong passwords! Passwords should be long and include numbers and/or special characters. Do not reuse the same password between multiple services. And change them regularly. Because even if a system uses state-of-the-art security features and advanced encryption algorithms, you simply waste the time of all those mathematicians and engineers if your password is ‘password123’.

Do I want you to remember so many passwords?

No, not at all. Because you don’t have to. That’s what password managers are for. They can remember passwords for you and ensure they have reasonable strength. There are many managers today - they exist for every major operating system and for web browsers as well. But for websites to play nicely with them, they need to have their forms correctly implemented.

Amazon board

What are password managers capable of?

In a nutshell, they can save your usernames and passwords, encrypting them with one master password so this is the only password you will ever need to remember. There are different types of managers with different capabilities. Let’s have a look:

Desktop-based managers - these store all your data on your local machine where no one can access them. The disadvantage is that they can’t be accessed from a different device, such as your mobile phone or a tablet, for example.

Browser-based managers - web browsers today, such as Chrome or Firefox, support their own built-in password managers. They are easy to use but they lack advanced features. And they share with desktop-managers the same problems around synchronisation with other devices.

Cloud-based managers - a third category is cloud-based password managers, like LastPass or 1Password. Your credentials are stored on a service provider’s servers and are transmitted to your browser through a secure communication channel. Your data are in the hands of the provider but are encrypted by a master password, so they, the provider, don’t have access to your passwords in plain text. User accounts on these services are juicy targets for hackers so you are strongly advised to use a good master password.

There are other types, such as token-based password managers. But they are outside the scope of this article,  and are used mainly by people who need to achieve even higher levels of security than the generality of users.

Here is a short, non-exhaustive list of some useful features that password managers provide (depending on the type):

  • Strong Encryption - good password managers must use strong encryption to keep your passwords safe.
  • Multi-Factor Authentication - you can turn on a second method of authentication to improve security.
  • Password generator - managers can generate random passwords for you, with certain criteria so that you don’t need to check them manually if they are strong or not.
  • Password sharing - Cloud-based managers allow password sharing with your colleagues, family, or between your own devices.
  • Automatic password renewal - managers can remind you that you haven’t changed your password for a particular service for a long time and can change your password automatically (if the service or website supports it). This makes regular password renewal painless.
  • Duplicate password alerts - if you accidentally use the same password on two different websites, the manager can warn you and offer to change one of those passwords.

Various products can have different features, of course. They can also vary if you use a free-tier plan or you are a paying customer. Some can even co-operate with services like haveibeenpwned and notify you automatically if there was a data leak on a service you use. Then you can change your password immediately.

With these features it’s much easier and more secure to manage your passwords than keeping them in your head or on a paper, don’t you think?

How to design login forms to play nicely with the managers

It’s not difficult, although there are still many websites that struggle with this. My first advice is: don’t over engineer your forms and use standard components for the fields. Managers may have trouble identifying username and password fields if you use some special Javascript or CSS tricks.

Secondly, almost every provider has their own list of tips on how to make your forms work with their product, like the already mentioned LastPass or 1Password.

But here is a list with some basic recommendations:

  • Avoid login via AJAX (if possible).
  • Use <form> elements with action attributes and the POST method.
  • Wrap your username and password fields in the same <form> element.
  • Separate unrelated fields into different <form> elements. For example, put login and registration fields in different forms.
  • Try to stay away from dynamically adding and removing input fields.

Multi-step login forms

If websites use different login methods for different kinds of user, they often use multi-step login pages. Such forms are supported by password managers as well but they require a bit more work and testing. I noticed LastPass has some issues with these. Just make sure your method of hiding a password field doesn’t hinder a manager’s algorithm for identifying correct fields. Also make sure that the form works if you decide to use hidden fields.

Change a password forms

Password form

Sometimes the basic tips might not be enough and you may find out that password managers are still filling usernames and passwords into wrong fields. This is often visible in forms where you need to provide an old password, a new password and a repetition of the new password as a confirmation. Here, you can go a bit further and use the autocomplete attribute for input fields. They can be used in login forms as well and their purpose is to prevent browsers from auto completing your fields with incorrect data. Valid values are: 

  • username
  • current-password
  • new-password.

If you are curious to see some examples, you can check out this Chromium’s design document https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands

Conclusion

Even though many services roll-out two-factor authentication to secure accounts of their users and try to come up with clever ways of simplifying signing procedures, it looks like passwords are going to be with us for a while. And password managers can be an essential first line of defense against hackers.

You may argue that it should be a password manager’s job to recognise fields in forms automatically. But no software is perfect and they may fail on websites that do not follow best practices. So you might need to put more work into designing your forms. But I believe user experience should be a priority and it’s definitely worth the extra effort.

Did you find this article useful? Share it on social media.

Need expert advice from our consultants?

Articles

CN Group

CN Group CZ a.s.
Prague Office 
Ve Smečkách 20 
110 00 Prague 1 
Czech Republic
Registration No.:
07885041

Locations
Contacts
Social Media
LinkedIn
Twitter
Xing
Facebook
YouTube
Instagram
Reviews on Clutch
clutch logo
© 2020-2021 CN Group CZ a.s., All rights reserved.
  • Sitemap
  • Legal Terms / Impressum
  • GDPR