Credential Management API

[00:00:00]
>> Credential management API. The question here is that can we create an auto login? First, how do we do auto login? We need the credentials client side, right? So we need to save client inside, the username and the password. So then we can autofill the form, and send the form.

[00:00:20]
The problem is that where are we going to save the data? We have IndexedDB, we have local storage, but all of them are currently public, and really insecure in terms of saving passwords and secret data. So it's a very bad idea. Well, fortunately, what we have available is credential management API.

[00:00:47]
The credential management API, let us save and retrieve data in the browser's password manager. So the same password manager that you saw before that were appearing automatically can now be accessed through an API, okay? So we start now talking about APIs that maybe you haven't heard before. The password manager accepts to store credentials, so that's username and password, the pair of username and password.

[00:01:19]
Also federated credentials, that's how you can actually save metadata that is coming from signing in with Google, or signing in with Apple, okay? So that's not just user name and password, because you don't get Google's user name and password when you are doing this. You'll get the token, and metadata, IDs, and some things that we will see in a minute.

[00:01:41]
Well, you can save that also in the Password Manager. And the credential management, API can also store public and private keys. In fact, that's the API that WebAuthn is using behind the scenes. So WebAuthn, Web Authentication, that we haven't seen that yet, but is the API that let us use biometric authentication on the browser.

[00:02:08]
It's using credential management API behind the scenes, okay? And we can with this implement autoloading safely, because we can save our credentials in the browser secure bolt, and retrieve that later without actually being insecure, okay, make sense? For credentials, both username and password, so plain credentials and federated credentials, this API is chromium only.

[00:02:41]
So it will work in Google Chrome, in Microsoft Edge, Opera, Brave, Samsung Internet browser. So not on Safari or Firefox, but Safari and Firefox are supporting, credential Management is coming on Firefox, but for now, not on Safari. On Safari, it's used only for public and private keys, so the API is there.

[00:03:06]
So we are going to see in a couple of minutes how to detect API. So the API is there, so in Safari, if you check the object, the object is there, but it's not there for saving our own passwords, okay? It's there for web authentication. So we need to be very careful how we use feature detection here, okay?

[00:03:26]
Because maybe the API is there, but not for what we want, make sense? So Safari only supports the public and private key parts that is being used by the WebAuthn API. So the API is actually pretty simple. So, it's navigator.credentials.store that will store credentials, and you can create federated credentials, or password credentials.

[00:03:54]
Password credentials receive ID and password, the ID is your username or your email or your number, you decide what it is, okay? But it's a key value, so it's username and the password, that's all. So, you call this, and Chrome, or the browser will actually save that locally, okay?

[00:04:14]
It can be Edge as well, it works with Edge. And to retrieve the password is.get. Navigator.credentials.get, and we can request to get only usernames, or username, and passwords. And if you look at the API, the API is actually too simple, I would say, not just simple, it's too simple.

[00:04:36]
For example, what happens if the user has more than one credential stored for my website? I cannot pick which one do I want. In fact, this will trigger a dialogue in for the user, the user will pick the credential, not us. So I cannot request the password for the user m@m.com, I can just request hey, browser, bring me username and password from this website.

[00:05:04]
And the user will pick one, and you will get that one, the one that the user has chosen, okay? Also, another limitation of this API, you cannot remove credentials as a developer, so the API has no remove. There have been some discussions to add that, but right now, no.

[00:05:25]
So the user has to go and remove the credentials manually, I will show you how it looks like on Chrome in a minute.