Saving Credentials

[00:00:00]
>> So, to use the API, Credential Management API, the first step will be that after, for example, on post login, so after we are logged in, we can try to save the current details. At least if we have a password, but we can use it in postLogin, because maybe we want to do after register as well.

[00:00:23]
But also after logging because maybe the user is logging in with new credentials in this computer for the first time. So it's not registering an account on that device. Maybe that account comes from another device or from the past. So on postLogin, I can try to before or after let's do it after because it feels like say Credential Management API Storage.

[00:00:49]
So, again, what's our goal? Auto-login without the token, without saving a token. I want an auto-login that is not involving authorization techniques. So, first, how to check if the API is there? So, one would say, okay, let's try navigator credentials. But if I'm doing this, Safari will give me a false positive.

[00:01:17]
Because in Safari we do have navigator credentials, but not for what we want. Just for WebAuthn. So we're going to check if the password credential constructor or class if you want exists. With capital P because it's like a class, it's a JavaScript constructor. So if it exists and if our user has a password.

[00:01:45]
Because maybe we don't have a password because we are logging in the user from other place where the password is not there. So if we have this situation and by the way, now we should change this as well because now we are not passing the password to postLogin.

[00:02:06]
Remember I mentioned that, maybe you don't want to do that well now we have a use case we need the password for a couple of more seconds. So instead of doing this I'm going to just pass the whole user, make sense? Because now I have something else to do with the password.

[00:02:25]
So I'm passing the password. So if I have in the password now I can try I can call navigator credential.store and we need to pass a credentials object that I need to create. Okay, the credentials object, we need to use the constructor password credential. And by the way, I have a problem here.

[00:02:52]
This is not going to work. This is my fault. So I'm taking full responsibility, is not navigator password credential is window because it's a global constructor. Okay, so that's why here I just say new password credential. And I'm going to pass an object with, it can contain ID.

[00:03:14]
So I will take the ID user email, the password, that I can take the password from the user and also has an optional name. So this is the name of that account. It can be the user's name or it can be any string. This name will appear in the password manager.

[00:03:34]
So the idea is that when if the user has a lot of accounts well, I have John, Jane, okay? I have all the names. That's, why, in this case, I can pass the name or I can pass the email. So I can, I can reuse the email. It's up to you.

[00:03:50]
And by the way, because you can see this is pretty simple. You can actually copy these and try these in the console. I mean, you can fake pretty quickly in Chrome or let me open like as to show you a different browser. I can open the console and we can try to see if navigator.credentials exist.

[00:04:14]
And if I can post or not. Okay, from here, so you can try this directly in your browser. We are there so now every time we log in this will try to save my account into credential. How do I know if this is working? Typically you don't know quickly if it's working or not.

[00:04:43]
But in this case, let me login again frontend masters, I should start saving my passwords so it's easy to get in. So you're going to see so one way in Chrome to see if the API is actually working. Is a key that icon that you will see in the omnibox, okay?

[00:05:02]
So there you will see that your passwords may be saved. So that's the UI that Chrome shows us right now, okay? Make sense? Also, if I go to the console, I can try navigator credentials. Let me move this out a little bit. I will do something else. Like they're logging frontend masters.

[00:05:45]
So I can save the password. And now I can see all the passwords that were saved in my website. So if I log out and I create a new account, another one. So this is going to be Jane. My email that you jane@gmail.com fortunately, we are not sending emails so I can use a strong password or not.

[00:06:10]
Jane 1234, not a good password. I'm registering the account and look at this. It's said, hey, Jane 1234, was already leaked as a password. So here you can see that Chrome, the same happens in Safari because they're using password managers. They're seeing your password and say, hey, that password has been found in a breach.

[00:06:33]
That means that maybe the hashed version of it is already in the breach. So, even if someone is hacking now my server, even if it's a hash, it will take your password anyway, okay? But now I have both credentials saved here for my site, okay? Make sense? So, now we are saving now we need to do the reverse operation that is trying to get this back, okay?

[00:07:03]
Also, it's a good idea because we are going to implement these order login is a good idea to express something on logout. Okay, because if the user is logging out. It's expressing that you want to log out. We don't want to auto-log in next time because it's kind of weird.

[00:07:28]
So when you click log out, the API, Credential Management API, is offering us a way to express that we don't want auto-log in next. So if I go, to log out, first I can check if password credential exists so if the API is there we're going to call navigator credentials prevent silent access.

[00:07:58]
So until the next time you log in, it will prevent an auto-log in known as a silent access. By the way, we are covering Credential Management API, but while we mentioned that it's not in Safari. If you ask me, I don't bet that Safari will implement it, in the future.

[00:08:20]
And there is a good chance that also maybe in a couple of years that API will be deprecated, this API. Because everything is moving to pass keys and what we are going to cover next. So I think that that will change in the future also. Google and Chrome, they are deprecating on a very, let's say scary thing they have I'm not sure if you have seen this.

[00:08:45]
You go to a website, any website wherever for the first time in your life. I've seen this in many airline hotel websites, or tourism based websites like Expedia. It's the first time in your life that you get to do a website and then you see at the top right of your screen so they see your top right you see your photo.

[00:09:08]
And says something like hey do you want to sign in as Max with a Google logo. Which is weird because this is the first time you're accessing that website, so what's going on there? So this is kind of an aggressive API available from Chrome and Google to auto-log in on websites where you have never logged in before.

[00:09:32]
Okay, it was some kind of an idea of a one-click sign-in or something like that. Of course, there is an iframe there pointing to Google. That's how Google is getting your credential, and then Google is injecting your picture in the web, but it's kind of weird, okay? And that's been deprecated for the future so that at least that particular way of of seeing your picture and websites that you have never been before, is going to disappear, okay?

[00:10:00]
So we are not going to even cover that how to do that.