Thoughts on the Credential Management API

Paul Kinlan

Entering usernames, emails, identifiers and passwords is a massive pain for users. It’s even worse on mobile as the use has to fiddle around with.

Browsers have done a number of things over the years to help with this problem. We started with enhancing autofill across browsers by making it more intelligent, more secure but more importantly synchronised across browsers (so that if you enter data on your desktop it is available instantly on your mobile). Autofill has helped us make signing up for services more efficient and it has also improved the accuracy and speed for logging back in to a service. Everyone should be using it!

As a developer, autofill is great but we don’t have any control over it. The Credential Management API is designed to help smooth out that process of signing back into a service. It gives you programmatic access to the username and password (not strictly true, you get access to an opaque PasswordCredential object) for the current user on your site. You can save the details, you can retrieve the details.

There are three API’s: navigator.credentials.get() and navigator.credentials.store() are self explanatory, navigator.credentials.requireUserMediation() is effectively a sign-out button which will require the user to provide a user gesture again on the site before another get() will resolve.

Watch the video at the top of the article to show this in action and how quickly (two taps) that you can log back in to a service.

Eiji on my team created a full document “Streamlining the Sign-in Flow Using Credential Management API“ that explains the process and how to implement it.

You can experience a demo and check out the sample code.

This API is Chrome only at the moment, which presents an interesting story: How do you integrate this experience across all platforms? It starts with just optimising your account sign-up and sign-in pages, use the correct autofill fields so that the browser. email, username, new-password and current-password are normally good ones to ensure you are helping all browsers do the right thing when it comes to understanding your user’s data effectively. Once you have a good set-up for your forms, it is pretty easy to detect if the API exists, if there are credentials available for the user and you can then offer a seamless sign-in for the user.

I’ve a vision for the future where we remove product landing pages and sign-in pages altogether, you land on a site and you are using the site or app immediately. I want to get to a web where if you want, you are signed in to your websites for as long as needed and you don’t have to re-authenticate every other day but if you do that process is as streamlined as possible. I think the Credential Management API is a good step in that direction.

There is also an interesting overlap between this API and the Web Payment Request API, which I think if combined can create a really smooth experience for e-commerce sites.

Paul Kinlan

Trying to make the web and developers better.

RSS Github Medium