postLogin & logout Functions

[00:00:00]
>> So let's update the UI then. With that, we will finish this first step of our project, the simplest one, okay, that is just having the normal standard flow. So in terms of security and steps that we are missing, and we are not actually doing right now because we have limited time today, is confirming user's email, that's also important, okay?

[00:00:26]
So you shouldn't activate this account if the user is not confirming that the email actually exists and the user is the owner, okay? So there is that missing step that has nothing to do with the authentication, okay? It has more to do with not actually using other people's email, not impersonating other people's email, and also to confirm that at least the email does exist.

[00:00:53]
I don't know about you, but if you are in a public Wi-Fi, I travel a lot, so in a lot of airports. So have you try airport Wi-Fi on another countries? Typically, they force you to register with an email. I typically put whatever email comes through my mind at that moment.

[00:01:15]
And most of the time, you'll get in. So that database is full of fake emails, okay? And the problem is that maybe you're using an email of someone that has that address, and you will receive spam from that airport, which is bad. And so you should confirm users' email addresses.

[00:01:36]
Okay, so what we need to do is something with the response, not just console.log. And actually, after registering and after logging in, if it's okay, we need to do the same thing. So we need to probably set up our client side account, our flag saying, hey, we are logged in, and we need to move to another URL.

[00:02:02]
So that's why what we are going to do is we are going to call, we're going to create a function, another function that we can call that postLogin. That we will call from both situations, because it doesn't matter if you have just register. After registration, typically, you are logged in as well.

[00:02:19]
So after registration or after login, we are doing postLogin. And we are going to receive here maybe the response and maybe the user object with the data. I'm missing the arrow function. So then both after registering, I'm going to do postLogin, I'm going to past their response, and then we need to pass the user.

[00:02:46]
I will see if I should pass this user or not, I will tell you in a minute. And the same here Auth.postLogin response. And here we have credentials, we don't have a user. So I'm not sure if you remember that when we are getting the log in, we are receiving the name and the email from the server, right?

[00:03:12]
Remember that? Well, we already have the email client side because the email was typed by the user, anyway. But well, what we can do, because we have credentials and not the user, we can create a new object and log in that will first populate, or we will populate with credentials, okay, with the spread operator.

[00:03:33]
And then we can add the name that is coming from the response. So then we normalize how postLogin is going to receive the data. postLogin will receive the response object from the server and also a user with name and email, at least. Make sense? From a security point of view, maybe when we are registering, we're also passing the password here.

[00:04:03]
So maybe you say, hey, maybe passing the password is not a good idea. So if you wanna be more secure because maybe you wanna clear the password as soon as possible, so you pass the name of the user from user.name, and you pass the email as user.email. And that's also I create a new object, okay?

[00:04:28]
So I don't keep the password in memory. That is just something to add, okay? So postLogin, what idea with postLogin? Well, first, we should check if response, the ok flag, is true or not. If it's not true, it's simple what we need to do. We need to show the user a message, okay?

[00:04:54]
So far, okay, one thing at a time, I'm going to make an alert. We know we shouldn't be using alert dialog, the native dialogs anymore, but just for making this quick, that's fine. Typically, you will use a UI library, or your own UI library that will render a nice message to the user within the DOM, okay?

[00:05:16]
But again, I wanna keep the project as simple as possible so everybody can actually understand what I'm doing without getting lost. So what to do here? Well, first, our Auth object has a flag, is logged in. So I'm going to change that flag. So is logged in, now is true.

[00:05:37]
And also, it has an account that is currently null. So I'm going to change that, and I'm gonna say that this is the user that I'm receiving as an argument. So remember I'm receiving a user, so I'm saving that as the account. And then I should call updateStatus.

[00:05:57]
updateStatus was the only function that was pre-arranged for us, okay, is the one that is just updating the UI. And after that, I'm going to talk to my router. Again, this is my router, has a go function, where I can just say I wanna go to the root folder, or I wanna go to the account section.

[00:06:26]
So you pass a route and it will go to the route, okay? To me that will React router, but this is a very simple router. Make sense? So if this works now after I'm logged in, let me refresh. So after I'm logging in here, like will m@m, okay?

[00:06:50]
And after I type the right password frontendmasters, now I can save them or not. I'm here in my account, so I'm now logged in. This is the account section that have my name, my email. If I'm going to the home, it says, You are currently logged in as Max.

[00:07:10]
So it's working, and I can go to see my details. And I have a Log out button that is doing nothing. So I still need to create the Log out button, okay? But the first step is done, okay? What about the Log out button? Okay, from our point of view, a Log out button is another function here, logout.

[00:07:41]
We don't need the event, I think, there is no form or something like that. So what I need to do is to do the reverse operation that we did here in postLogin. So I need to change these two properties, the flag and the account, back to null. Make sense?

[00:08:02]
So this is false, the account is going back to null so I don't have any client side logged in account. And I'm also going to call, updateStatus, that will trigger the whole change in the page. And maybe we go to the home, or to the login page, or wherever, it's up to us what we're going to do here.

[00:08:27]
So but if we want, we can talk to the router and we can go to the home. I can have another page for after log out or whatever. Make sense? So if that works, now every time I refreshing my page, you can see I'm logged out, which may be a problem.

[00:08:49]
Well, it seems like a problem, right? So when we are working with authorization, remember authorization happens after authentication. Well, maybe you can store a token for the session or for a couple of days, that's a different problem, it's not actually authentication. But anyway, after this, what we're going to see is, can we do auto login?

[00:09:14]
So we're going to talk about that in a minute. So auto login is like, hey, if the browser is remembering who we are, can we just get in quickly? So let me get back here at the masters, Continue, I'm logged in. And if I click Log out, I'm logged out.

[00:09:35]
So it's working. So that's a standard flow with a big warning that there are still things to do in terms of security, validation, okay? So that's homework, because there are more interesting things to go over today.