 Hello, this is Christian. So in this video, we're going to look at sessions in Node.js. Now, before we do that, I want to go ahead and just show you a little bit about the meaning of the sessions and why they are so important in web applications. So imagine you have a website that looks like this. You have some content that are publicly available to anyone. But you have some other content that you want to restrict users from accessing this information. So usually, maybe it hasn't like this. So in this first image here, you see that the public page is available, but you have three sites or pages that are not available. And if you don't have any way of allowing users to get into this, no login or no access information, you can't really log in. So this is really kind of useless for your user. And another idea you can have is that every page that you have, you can allow the user to be authenticated and then they can view the information. But if you go to another page on the same site, you have to keep logging in again and again. And this will work. And it'll annoy the hack out of your users and they'll just leave you. But ideally, the idea is just that when you have a series of information or data that are private, but you want to give this to your registered users, then the solution is to really create what's called a session. So that will look like this in the first picture I show you here. So that once they log in, then all these pages can be accessible as long as the user is active and signed in. So that is the idea behind sessions. Now, session is not new. It's something that's been done for a long, long time. And if you have a background in PHP, then you'll probably use that quite a lot in PHP. And it's very easy to use in PHP. But in Node.js, you have to install some kind of module. So before we begin, I want to just give a little bit background on my application here. I basically made a copy of my module 2, which is a very simple site. The site I have a couple pages. And I made that into a sessions PG. The PG here is because I want to add a postgresql to have some kind of permanent data store. So for now, let's see what this app looks like. So I'm going to go ahead and run this in the terminal so we can see what it looks like. And I'm going to launch at 480. So that's good. So here is the site. You've probably seen this before. I have four pages here. And they're all accessible. So let's say that I want to restrict these three pages, the about, contact, and portfolio. So only a user who is signed in or registered can view them. Otherwise, they will be only seeing the home page. And maybe if they try to click any one of these pages over here, it will direct them to a login or registration page. So let's see how this is done. Well, first of all, we need to install some libraries. So I'll keep this running as is. It's fine. I'm going to open another terminal over here. And we're going to install a package called express-session. And another one called cookie-parcer. These are the two modules that you need to retain state in Node.js. So that's done. I basically can close that now. So here is what you can do in Node.js. In the app or an express framework, there is a property called locals. Let me show you. We go right into the RoutesR. If I do something like this, app.locals, and this locals property, I can attach any property of my choice. Let's say I'm going to attach a variable called login, and I will set that to true. So this is very similar to sessions in PHP again. So this locals login, what I'm doing here because I'm using the express handlebars. So my template is over here. You can see, if I go to the home page, it's a handlebar. So I have to find a way to pass data from my source out to the view. The view here is public-facing, but at the same time, it's managed by view Node.js. So what I'm going to show you here is that once I create a variable called login or property called login to the locals app, property here in the app, I can access this variable directly in the template. So if I go to the main HBS, use the home page, I can hide these sections. So from here to, I can just do something like this. I'll say, if the login is true, that's what that means. Then show the content. If it's not true, then turn it off. So if I save that and then go back to the page. So here we go. If I go and refresh the page, you see that everything, you can see here, that's fine. Let me go and make it a little bit smaller. It's easier for us to see. So you can see that this is visible. Now, if I go ahead and turn this to be false, that's now false. And if I refresh the page, you see that the content is now gone. So of course, you can't see in the view. If you see the view, there's nothing shown. You just see that header and then that's it. So that is the idea behind using sessions. But imagine if I go here and have to check that every time. But how do you know to turn this on and off? That is the key and that is by using session. So we'll keep that on for now. And I'm going to remove this. OK, so let's see how we can do this. So that means when I go to the, let me expand this here, go to the header. Yeah, I'll keep that for now. And I'm sorry, the index page, OK. So when I log in here, first, I want to create a session. So first, let's import the sessions up here. So I'm going to write above here. We'll call this just session, express session right here. I need that. I also want to get the, I mean, it's type session here, by the way, let's fix that first. The cookie parser with the same name. This is for writing right and right and cookies from the back end to the front end. OK, so those two out there. And then right down here, after I set the, this again, this would be your middleware. I usually put a note here saying this is your middleware. OK, middleware are the one that has the used attribute. OK, so I have another one here now, use the cookie parser. Let's invoke that so it will be injected into the program. OK, and then the next thing I want to do is I'm going to create, I'll keep that there, it's fine. I'm going to create a session right here, sessions. So you want to, again, another, let me put this down here. This is still part of the middleware, OK? So add that use, and then here is session. It's a function that takes an object, OK? So this object has about three or four key elements that you would need to put. The first one is the key. The key here makes your session unique, and this is just a key of your choice. Sometimes people call it login, sometimes people call it user, and I'll call my user ID or SID for user session ID, OK? So that is the key that you need to access when you create the cookie and destroy your cookies. You need a secret key. The secret key is used for hashing purposes. So it's a secret message of this is my secret. It's just a series of text or strings. You make it as long as possible to make it really hard to hash your key for prevention of session hijacking stuff and also prevent the session from writing. And then the next thing is called the resave attribute. This is usually set to false, OK? And because you don't want to resave your session every time and doing so can have some problems. The other one is called the save initialize. This one here also set to false, because if you don't set to false, then every time we load a page, it will recreate a new session every time, and that can consume a lot of RAM. So you don't want to do that here. You do that in probably very, very rare cases. And then finally, you want to set a cookie attribute here. The cookie takes an object, and one of the objects probably you use is the expires. And you basically give it in milliseconds how long Tsuki will persist in the user's machine, OK? Not on the server side. I think it's on the client side machine. So give it a number. You want milliseconds, let's say, like 6,000, whatever. Is that 60,000? That's like a week or so. Any number you want, basically, I'll leave it at that. So that is basically the session. You create that into that cookie, the program. OK, so now when you access the log, this is the home page. These two are the home pages, right? And here is the about page contact and the portfolio. So these three will be the ones that I want to restrict those. Now, when you create a GET API like this, usually we have the first one here is the URL pattern. And then immediately it follows by the request callback function to render the content. Of course, you can add, as far as I know, as many functions in here if you want, callback functions, if you know how to do them, OK? So what I'm saying is when you go to the about page, OK, you want to restrict this before you render this to the user. So what you do is right in between here, you can add another one that looks like this. Request, response, and then we have a next. Next here means to load the next middleware. So it's a middleware function. So this is a callback function, but it is a middleware function that can call the next one here. And you can add many more, OK? So what that means is if this function does not resolve in here, right, that's not in here, you can pass the process to the next function over here, OK? So in here, then what you can do is you can check to see the state of your session, right? So if the session is active, then that means that the user is logged in. If it's not active, then you want to force the user to go to a login page. OK, so what I'm doing is I would say if there be a request session, now again, request session, now it's built into the session because we import it and add it to the program session. You can add any property of your choice. Let's say I'm going to call a user, OK? If the user is not, is true, right? If the request session is active and the request that cookies of the user ID, SID, that is, so this key here is the key I created up here, OK? If this session ID is active and the cookie is active, that means that user is active. If that is the case, then go ahead and send the user to the next callback, right, the next middleware, which next do you want next to it, which is this guy right here. And then what it's going to do, it's going to render the app out page, OK? If it's not true, if this is both of these, if one of these is not true, then we go to the else class. And what we're going to do, we're going to redirect, so a response, redirect the user back to a login page, all right? So that is where it ends, right? Either go to the next callback if the user is logged in or send it off to the next page with the user login page. OK, so in my example, I'll be created a login page has a username and a password, OK? And then when they log in, then, of course, you're going to create over here a login route first, which I don't have, OK? So let's create a login page. I'm going to cut it right above here. The reason we're going to do that, and we'll put here, this is the login. So it'll be login, and then we have the login page, OK? So the login page over here, when we submit the login, we're going to send it off to the login URL again, but via a post. So now I need to create another one here for the post to the login. So this is, I should put here post, then login, OK? This is the get, I'm going to show in the form, OK? So this would be a post. When I go to this URL, what am I going to do? I'm going to write something very simple. All I'm going to do is basically set these two variables here, OK? So I'll put request.session.user is going to be a user. I'll call a username, and then it's calling me. Yeah, set that to that property. And also set the cookie, I don't actually, I don't have to set a cookie yet. All I'm doing is, once you set this, the cookie is set, OK? So I'm going to do that. And also, I want to turn on this variable here, right? Remember, this is set to, initially, let's set to false, OK? You don't want to allow a user to log in or get access to pages. So this would be false. But once they log in, they want to set the username to that username. And they will also want to set the log in to true as well. And then we're going to render, we're going to redirect them, OK? This redirect is different from a render. We're going to direct them to the home page, basically, because now they are logged in, right? So let me see if this thing works, OK? Let's see if this thing runs. Now, first, I want to do is go to the header page. So here is the log and the links. So again, if I go back to the page, if you can see if I go to about, you can see it's already directing me to the login page. And this is the only one I worked on. So the contact doesn't work yet, because I did not restrict those. But surely, about, you can't see it until you log in, OK? So if I go and log in just any jibberish, it doesn't really matter, because I didn't verify those. If I click Submit, you're going to see that it asked me to, just saying that I'm logged in, it should be. So I should be able to see the about page now, OK? So you can see that it's now good, right? Because I'm logged in. That is the key here. But I want to restrict these two as well. So now, how do we log out? There must also be a way to log out the user. So ideally, you're going to have a button over here to log in, register, and also log out. So when the user is not logged in, we want to restrict this, or maybe, either that, or maybe you can hide all these here and show it log in and registration button. Once they are logged in, then you can see these four buttons here, plus a log out. So the design is entirely up to you, OK? So that is working already. So I'm going to create another one here called a log out. So I'm going to copy this right here. This is the log out. You just say get, and it's just back to the get. When they click on the URL log out, then we're basically going to destroy this session here. You destroy that by, you can set it to empty if you want. I could do this, right, to like a null. You want to do that as optional. But ideally, you want to just set the cookies to, you want to basically clear the cookies. So you can do an arrest that is a clear cookie right here. And what is your cookie ID? It's called user underscore S-I-D, OK? You clear that cookie, then basically it is also destroyed. So really, it's kind of redundant. I don't really need that. And then once I do that, I want to set this log and pack back to false. And then redirect the user back to the home page wherever you want to direct it to, OK? All right, so that is the log out. So I mean, let's save and see if it's still active. So we go over here. Again, I'm still log in. I actually am logged out already because it's reset, OK? So I can't see that about page. If I do something here, log in, boom. I should be able to see the about page here. If I log out, I'm going to go to the URL and just type log out. And it should log me out already. I should not be able to access the about page, as you can see, is back to that once again. But it's kind of hard to indicate whether you log in or not, right? So using this ID, I'm going to go into the header, HBS over here, and add some of the links. I'm going to add one, two. This is for the log in. This is the register. And we'll do one more for the log out, OK? So this is log out. This is register. And this is the log in. All right, so I want to separate this. I'm just saying that if the user is not logged in, I want to hide this three, show the log in and register. So these two are actually going to go up. Here. Yeah, OK, show these three. Once they are logged in, then I want to show the other three. Yeah, show these four. So you basically separate this group. This is public, right? This is public page. But if right here, I'm going to put here, if log in, I want to do that with it around. If log in, then show these instead else, show these. And then I want to end it right here. OK, so that is the logic. And you can do this a little bit nicer. So if it's true, then show these, else show the other ones. And then let's see if this true. Let's say this, go to our page. And here we go. Refresh the page. And here we are. So you can see that we are now logged in. So I don't see the other pages anymore. I can register again. I don't have that yet, which I think I should have. Yeah, I don't have the route yet. But you can see I can log in. So again, just something here. And then we log in. And boom, you can see that now the other pages show up. And these have no restriction now, because I'm going to log in. And then now I can log out. Once I log out, then the other links are gone back to what's before. So basically, that is the idea behind sessions. So that is good. I will leave that as is. And then the index page, I have a log in, log out. I need a registration. So let's just add another one over here. It'll be just one of these guys. And put it right here is fine. This is for the register. We're going to load the register page. And likewise, you're going to have another one for the register using the post. So this is the post when the user register, let's send the data back to the register. And then here, you can do something like the post up here. But for now, we're going to just leave that for now. Let's see. I'm going to redirect the user back to the home page once they are registered. You have to do some, you know, registration in your right. And so now, as you can see that, if I do this every time, if I happen to, like, not using this logic, that all these links will be available, right? And then sometimes people can actually access these pages directly. What I mean is this. So let's say if I'm not logged in, if I know the URL to the contact page, you can see that it actually takes me to the contact page, right, I'm kind of faking this because I know the page goes here. So you also want to restrict these pages as well, in addition to the navigation link because you can go behind it. Same thing to the portfolio, right? Because that is also available, even though I don't have in the link, you know, it's actually accessible because can sneak around it, right? Except for the contact because we kind of, I mean, the above page, we kind of already restrict that page. So that is what you want to do for every page in here. Okay, so basically you want to copy this and add it to every one of the contact and the portfolio page. But, you know, instead of doing that way, then you want to move this out to a function, right? So we can call a function up here. Yeah, we put up here. Okay, we can do something like this. Use error function is okay. I use error function, I can say is active or some, what do we call it? Is session active, okay? And then use error function. And then we check that here. If it's not, then, you know, we're not, okay? That is it for that one, right? So we can use this function in its place down here. When the user goes to the above page, place this is section active. If it's true, if it's active, then load this. Otherwise go to the login. Then the contact is same thing, right? Because we check this session active or not. Same thing down here. So any place, any link that you want to check this session, you add that function here, okay? So I think that's the only one. These I think ignore this one now. All right, so now if this is working, if I go back, now as you can see that I go to the profile page, it directs me to the login. If I go to the contact page, it directs me to the login. And the portfolio should also direct me to the login. If I type it correctly. Okay, so now it's restricted until I basically login. Then they're back on, how do we know it's working or not? You can click on it, boom, right? You can see, I can see the content because I already logged in. So it shows the data, okay? Otherwise it would not let me see this information. Okay, so I hope this clarifies what we just done here, okay? So basically you create a sessions, create a function to check the state of your sessions. Basically the user property and the cookies of the user ID that you create, user ID here is this name right here. Whatever you call it, you pass it right here. Okay, it attaches to the cookies object. If both of these are true, then the user is in the login, then you go to the next callback, okay? Or the next middleware. Otherwise you keep to redirecting the user to the login page. You force them to login, okay? And then you create a variable called login. I mean a product called login to the app locals. So you can check the state of that and you can show in high information on the browser and the view, okay? And then down here is basically you do the function stuff, right? We log in, you set the username to that. Of course, this is a very simple one. You have to actually direct check is from the database and we do that in the next video. So you authenticate a user from the database and then with that it's true. Again, you go ahead and set these two variables and redirect to the home page. Otherwise you keep redirecting to the login page until they actually authenticate themselves. Logout is exactly as this here. I think that's not much we can do here. This is pretty good already. We'll see what we can do a little bit later. This is all done. The other ones that we need to do is the registration here. So this is pretty straightforward. Just load the register page. Once we submit the data here, then we need to save the information to the database and then as we can use this data back to log in. Okay, so I'm gonna stop here and in the next video, we're going to perform this same operation but we're gonna save the data to a PostgreSQL database system. Any questions, please let me know. Thank you.