Protecting Client-Side Routes

[00:00:00]
>> Maximiliano Firtman: So to solve the problem, we need to think about this. Let's talk about from a route point of view, maybe I wanna add something like this, Like a flag in some routes saying hey, for that route, you need to be logged in, you need to be authenticated.

[00:00:19]
Does it make sense? So and then how to deal with this? It's not really complicated, from the router we are not we need to change our router. In our router, remember the Go part was the one that is, was making the magic, at some point, it recognized that there is a page element.

[00:00:40]
Okay, to we need to go to a page element, so at some point you will find that we do have a page element, okay? So if we do have a page element, we actually need to check before going there. So before saying that you wanna go we need to check if we have access to it, okay.

[00:01:02]
So what does that mean? So for example, where do we know that we have a page to go, or we have, we have already find the page. For example, after these four, after this we know if we have a page, okay? So we know if page element exists, so if exist is we have a page from browsers, but now we need to verify check first is if it has the property logged in, right.

[00:01:41]
And if it's true, it needs a property and needs to be true, and also, if it's the user is the current logged in state is false. So if those conditions are true, it means the route needs an authenticated user and the user is not authenticated. Does it make sense?

[00:02:11]
So if that's the case, I'm not going to that page. What do I need to do? I need to go to the library page and just return, just get out of here, okay. Again, this part of the condition is asking for the current logging status. This is false, so it means you're not logged in and it means that the current route that we have chat found needs to log in.

[00:02:42]
The problem is that this is page element, and actually we have the logged in property in the route, not in the page element, okay, so in R, so there is a situation here. I'm not sure if you understand what's going on, but the R is the route, so the route is actually this object.

[00:03:09]
Login is a property of the route, not of the component, okay, makes sense? So the problem is that the route, the router here is if we are looping through routes and then we are storing only the component. So we can do a dirty trick, really dirty trick, saying that, for example, the R component dot logged in is equals to R logged in.

[00:03:42]
This is a very dirty C the trick, to be honest, and if not, it's as simple as creating a flag. Let needs login equals to false, and then we just say needs login is equals to if the current route has a logged in property and that logged in property is true.

[00:04:09]
Well I'm not just saying logged in because if it's undefined it will say undefined and I prefer boolean so I'm saying if it's equals, equals true. So it must be true if not, it's gonna be false, so then I don't need this page element login, I can just say if it's need login.

[00:04:30]
I think that's probably easier to understand, so if I need login and the user is not logged in, let's go to the login page. You're not going to see the account page, okay, makes sense.? So now let's try this, first., if I refresh, I'm still seeing my account, so let's see why is this happening, so if I am asking,
>> Maximiliano Firtman: App.store.login is giving me true, which is not true, actually, right?

[00:05:10]
Because if I log out, okay, now it's giving me false, so now it's working, so it was a still in memory I think. So if I go to my account, I'm still seeing that, okay? But logged in is false, so let's debug this to see what's going on, first, let's look at application, I'm setting the null.

[00:05:35]
We should check just in case what happens in our store when we are checking here. This is not null, so it should tell me, okay, false, which is okay now, so it's okay, it's giving me false, okay, so it's false, always false. So it's okay, we are not logged in, but we shouldn't be seeing this, so for that, let's go back to the router.

[00:06:02]
So we need to debug this, this is the route we can do this Actually, yeah, I know why we have it back. Because actually we need to do this only if it matches the string, or actually before the break, because it's not so gonna work, because I was actually taking the logged in property of the last route.

[00:06:40]
>> Maximiliano Firtman: That does it make sense? So if it's the selector route, I need to check that, in fact, we can actually even add a debugger here. So if I refresh now, it's stopping there, needs login is true, okay? So it recognize that you get into the account because I'm trying to, I'm trying to get the account.

[00:07:10]
So let's add some watches here so we know already that needs login, it's true now let's add App Store, logged in as another watch, and it's giving me true. So we have a problem here, why it's giving me true, if technically I shouldn't be logged in. So when I'm loading the page, for some reason it's giving me true, so we have problem there, okay.

[00:07:42]
Does it make sense? So that's why, if I continue executing this, at some point, it showed me the page, because it thinks that I'm logged in, okay. Does it make sense? So App Store logged in gives me true initially, now it's, but you can see it's giving me true.

[00:08:05]
So if you look at the store, it should give me false, because actually JWT is null, and if you look at that null, it's a little weird. Can you can you spot something on that null?
>> Student 1: It's a string and not null.
>> Maximiliano Firtman: It's a string half quote, why is that?

[00:08:28]
Does anyone know?
>> Student 2: Came from local storage?
>> Maximiliano Firtman: Sorry, what?
>> Student 2: Came from local storage.
>> Maximiliano Firtman: It came from local storage, that's correct, so when we were here reading the item, we We're storing null. So that was a problem, we should check what's going on. When we are saving, actually the problem is here, we are setting the I bin, so we should check if the value is null.

[00:08:57]
I don't need to set null because it's saving the null value as a string. Does it make sense? So do I have a way to remove this? Have remove item, so we remove the JWT instead of saving the null because local storage works with strings. So now to run this again, one good way to do that is to go to application, storage, and clear site data.

[00:09:29]
So let's start from scratch, okay? So if I start from scratch, now, logged in is false, needs login is true. So if I continue this, I need to remove my debuggers, it's going to the login screen. So let's remove the debuggers that we have in the router, have one here.

[00:09:58]
>> Maximiliano Firtman: Think it's the only one, so let's do that again. If I go to the Home,
>> Maximiliano Firtman: So if I go to the Home, it works, I can get into the details, which it works, if I go to My Account, it's not going to account, it's going to log in.

[00:10:14]
If I log in
>> Maximiliano Firtman: It goes to My Account, now, let's do the process again, I'm going to the home, it works. I'm getting here, I'm going to my account, and now I'm logged in, so it's not sending me to the login form, it's working. If I log out, and now I try to go to My Account, it's sending me to the login screen, so now it's working.

[00:10:43]
So now we can create as many pages as we want and mark them as needs login. For example, favorites and watch list will have that. That's the next and final step for our project.