Retrieving Credentials

[00:00:00]
>> So we have saved credentials. Now we need to retrieve credentials. So for that, I'm going to create another function here. I will call that autoLogin. Can also be called silent login, that's another way. So in this case, again, I will check if I do have the PasswordCredential, Class or constructor, JavaScript constructor.

[00:00:26]
And I'm going to ask navigator.credentials.get. And I need the passwords, not just the username, but you can also ask just for the username, okay? But in this case, I also want the password. This is returning a promise, so I will await for it. And because I'm having await, I need to change the signature of my function and add the async modifier.

[00:00:52]
And I'm missing also the arrow function, the arrow character, okay? So when I have the credentials, here you have two options. You can use the credential to just pre-populate the form or you can just call login. So you can go to your server and login the user without letting the user know what's going on.

[00:01:17]
It's your decision, okay? You have the password, unhashed password. You have the clear text password at this point, okay? Maybe you'll think, yeah, but how the browser is. Well, the password manager, even if the password is encrypting the password, it's encrypting the password in a way that it can decrypt the password because we need to send the password again to the server.

[00:01:40]
So this is not like the server where we are hashing the password and we cannot get back the original password. Here, client side, we will get back their password again, and we can get the password here. So I can do a console.log and we will see the password in the console.

[00:02:00]
And when to call autoLogin? When the page loads, for example. And for a to-do homework, maybe it's a good idea to ask the user if she wants auto login with a checkbox or a little UI element. So it's up to the user if she wants to be auto-logged in or not next time, okay?

[00:02:25]
So for now, I can go back here at the bottom. I can add a quick Auth.autoLogin when this class is loaded with this module. This ECMAScript module is loaded. That is kind of when the page is loading. I'm still not logging in, just sending that to the console.

[00:02:48]
But if I refresh, look what happens now. So if I refresh the page, immediately I've got the dialog that says, hey, do you wanna sign in as Jane or as Max? That's my autoLogin credentials.get dialog. And there is a promise, the spending promise. So if I say Max, okay, if I inspect now, here I have my password credential.

[00:03:19]
And you can see it has the password, the plain in plaintext. If I refresh and now select Jane, I'm getting Jane's password. I know it sounds scary. That means Safari doesn't want this API because it lets the client see the password again and Safari feels like yeah, maybe.

[00:03:45]
But it's the website anyway, we will get that password client server side anyway, right, so yeah. So the next step after we have the credential is to actually, well, we can fill the form and decide to click login or just fill the form, it's up to us. So once we have the credentials, okay?

[00:04:07]
So now back here to my autoLogin. Now that I have the credentials, I can just change the value of the login_email with the ID. Remember here it's called the ID. So within credentials, it's the ID, not the username, not the email, it's called ID. And for the password, the password.

[00:04:31]
And it's up to you, okay, if you wanna force a login right now, call login, or just let the user click on the button, it's up to you. Remember, this is not going to work in Safari. This auto retrieval when the page loads, it will work on Chromium-based browsers only.

[00:05:01]
So now if I refresh, I select Jane, okay? And we have a problem because it says, hey, we cannot prevent default. So it's not working, why? Because the login Auth.login was preventing default on the event. And now I don't have an event, so maybe I can just add a quick, if the event exists.

[00:05:24]
Because now, okay, we are not submitting the form, so there is no event submission in the DOM. Okay, I'm calling login from my own code. I'm hard coding that call. So if I refresh, I select Jane, it's autologin. But I should change Jane's password. So by the way, how can I delete one?

[00:05:50]
Let's say I don't want Jane anymore. Well, as a user, you cannot use it from the web app. The web app has no API to do that. So as a user, you click there and there is the delete there. So now I only have one, Max, as a valid credential stored for this website.

[00:06:07]
So if I refresh, I'm autologging in as Max. Look at this, if you have in Chrome only one account registered with Credential Managements API or manually in that website, you don't get any selector. You automatically get logged in. So now every time I refresh, I'm automatically logged in without anything that express that there was an autologin.

[00:06:37]
The only thing that expressed that something has happened is this icon here. So if you see the key icon, it's because there was a call to the credential manager, okay, make sense? And that's all for credential management, and indeed for this API. Do you have any question?
>> Is that something that can be turned off in Chrome?

[00:07:08]
>> As a user, you said? Yeah, you can turn off the whole password manager. So then if you do that, when you try to store a credential, you will get an exception because, yeah, you don't have that.
>> Cuz I'm getting a positive for Windows.passwordCredential
>> Where?
>> But navigator.credentials.get is not working.

[00:07:27]
>> It's not working. Well, that's maybe because you have disabled. So I mean, you have the API, so you can try it, but then you as a user have decided not to have any password storage in your browser. So that means we should also check that. How to check that?

[00:07:47]
I'm using await. So actually, let me search for credentials. And we are postLogin, where is it, postLogin, here. Here, I should do try catch, that how, That how you handle. I mean, can you do anything? No, more than updating the UI saying, yeah, we couldn't save, or go to the browser and go to settings, something like that.

[00:08:24]
So more than giving user instructions, there's nothing you can do about it.