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.
I lead the Chrome Developer Relations team at Google.
We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.
Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on web.dev, contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.
I love to learn about what you are building, and how I can help with Chrome or Web development in general, so if you want to chat with me directly, please feel free to book a consultation.
I'm trialing a newsletter, you can subscribe below (thank you!)
