00:00 All right, I think it's about time that we make it so that you can't log in as any user just by knowing their username. And so we are actually going to verify that the password is correct. We're going to use bcrypt for this because it has this nice compare method. So you pass in the password that the user supplied and then the hash that we stored in the database

00:18 and that will tell you whether or not it's valid. So you're gonna be doing that and then we're going to start adding some utilities for our UI to know whether the user is currently logged in. And so here we have this useRouteLoaderData hook that we're gonna be using from RemixRunReact, which will get us the loader data

00:38 from any loader that's active on the page and you supply the ID and then it'll give you that data back. And yeah, that'll give us the user that the root is currently loading. But we're gonna be making two hooks for this. We'll have a useOptionalUser and a useUser. The reason that we do that, this is actually super common

00:56 in like almost every application that has users. The reason we do this is because there are some pages that are viewable by both authenticated and unauthenticated users. And then there are other pages that are only viewable by authenticated users. And so by having a separate hook for these,

01:14 you make it a lot easier for the pages that are authenticated to be able to say, I want the user and I know that the user's gonna be there, so just give me back the user and so the types are a lot better and everything is nice. Whereas the useOptionalUser, it's like, oh, it could be null. And so therefore I will render this if it's null

01:33 and I'll render this if the user's logged in. An example of that is actually in our root right here. So if I go open this up in an incognito window here, let's get you so you can see that, there we go. Then we've got a login right there. But if I'm not in an incognito window, then I'm actually logged in

01:52 and we've got our Kodi avatar right there. So that is a UI element that is visible by both authenticated and unauthenticated users and we can kind of control what is shown. So that is one case of using useOptionalUser. Another one is actually the profile page as well. So if I'm not logged in, then I'm not gonna see the logout.

02:11 If I am logged in, then I'm gonna see the logout. And not only am I logged in, but it's also I am the user that I'm looking at. So if we were to go to another user, no logout right there. So you're gonna be doing all of that in this exercise and it's gonna be great. One thing that I wanna mention and call out, the instructions talk about this a little bit,

02:30 but this bcrypt compare, this is kind of slow. And so in the process of login, if you first check, is the user available? No, it's not, so let's exit. And then you then check, okay, the user is available, let's compare the password.

02:47 That introduces an interesting vulnerability to your application or sort of vulnerability, called a timing attack, where a adversary is trying to guess usernames. And so they'll just enter a username they think might be there. And they'll time how long it takes for a username that's definitely not there

03:06 versus a username that might be there. And if it takes longer for a username that might be there, then they're pretty sure that that username is there because you did the password comparison. And in our case, it actually doesn't matter for this app because you can literally see all of the users. You just go to that page and boom, you've got it. But if you were building like a banking application

03:27 or something like that, then you might be concerned about users finding out the different usernames that are available. And so you do want to have some sort of variability on randomness on how long it takes to do this sort of comparison. We're not gonna get into that in this workshop, but it's something I wanted to call out specifically

03:46 because this is one area where a timing attack can definitely occur. So I think that is everything. You should have everything you need to be successful in this exercise. So go forth and have a good time.