 Hello everyone, welcome back. In this part of the video, we're going to use a Postgres SQL database system to store user information, basically, user login data so we can complete this session for this Node.js application. So in the previous video, we learned how to create sessions using a really simple process to login user. I'm here. I'm not updating anybody yet. I'm just testing that to show that it does work by logging in, and we're able to see the content that was hidden before when you log out. Those are hidden and then and so forth. OK, so this time we're going to process a little bit deeper by allowing user to register and save the username, email, password to a database. So first of all, in your Postgres database system over here, so I have a under my DB, I have a schema. Let's see, under the public, go to the tables. I have a table called users. Now, let me see, actually, how to set up on my simple users table here has four columns. So if I click on that, go to the, there should be an option. Let me see here, where is it? Maybe the columns. Oh, it should be here. This is another properties, OK? It's down here. I couldn't show my screen, but there's a properties. Again, I'm going to show you. I'm going to show you CSO. Let me make it a little bit smaller, OK? So under the users, click that and still can't see it. Interesting. OK, it may be a little bit smaller. OK, here we go. Click and then it's hidden down here, OK? At the very bottom, you will see it on your screen. See it down here? This is the properties right here, OK? Click on that one and you will see the screen here. I'll make it a little bigger now. That was weird. And so on my columns, I have four columns. The ID is the integer and I made that as the primary key. OK, so now only that in the code I make it, it's also identity. And then the others are just strings and an under character. Make sure you use the character varying so that it doesn't consume the entire 100 characters in various space and how you interpret it. And I made all those are not normal, OK? So that is, I think that is for much it. Yeah, so that is that. And then if I make the query, I put some example here. If I select from the user, there should be no data in there yet. If I answer one user, notice again, I'm just picking two. There's three fields. I ignore the ID because ID is an identity already. And so I'm just answer this formation to the user table. And then I should have that user added here. So if I run it again, I'm going to add the same user, but the ID would be updated to two as opposed to one, OK? It's managed by the system. And if you want to reset everything here, I'll use the Tronka table users. And if you want to restart that identity back to one again, just make sure you put restart identity in the end over here so that it will start at one. And that was if I don't use that, right? If I just put Tronka tables, usually on a SQL server, it would do this automatically for you, but Postgres doesn't. So if I select just that part, if I run that, my data should have been deleted, OK? If I add the data back, you're going to see that the ID starts at three, right? I want to start at one again. That's why you want to restart identity when you do that, OK? So reset that and then empty. If I reset, reenter, and then the user is again starting back at one, OK? So that is basically what that is for. All right, let's reset the whole thing. And then now let's go to Node.js and create a application. So over here, one thing I want to just quickly fix in here is that when we log in, OK, when we log in here, we want to just basically, the way I have it, it's fine. But I wanted to make it a little bit nicer so you can check the login user, OK? If not in the Postgres and the get over here. If the user will log in, I don't want to redirect back to the login. So basically, you can put something if the request that session that user is already logged in, then you can do something. If it's not logged in, then if they try to access that, I'm going to redirect them to the login page. Yeah, I'm going to render the login page. If they already logged in, then we're going to just basically redirect them to the home page. That's a really tiny piece of, but it's sometimes important, OK? So basically, I just do that. The same thing for the log out. I'm going to go here. I want to log out right here. So your log out is basically when you, if the session is, the user is active, you want to turn all these off, OK? Otherwise, if it's not active, then you can redirect them to the login page. And here, if they are already active, turn them off. If they're not active, then it's kind of weird, but maybe I'll send them back to the index page. Get to the home page so that when they log out, you can take them to the home page, and the login, I guess, go to the login page. OK, so that is all I want to do for that piece. All right, so now, in our data over here, I'm going to create a folder called DB. Inside of DB, we create a file called user.js. Yeah, I'll call it that. OK, so in here, we're going to create the pool from the PG. Again, I'm going to grab that from the pool. So again, I don't think I installed that one yet. Let me go back to the terminal and make a copy of actually do another one. I want to install the PG tool and also install a library called bcrypt for encryption. So install those two there. And I think that should be good. OK, so back to the user. So I'll create that using the pool. You can also use the client. If you choose to do that, the difference is that a pool gives you a pool of clients as opposed to a single client. So I'm going to go ahead and create my DB connection. And this is for Postgres. So the user is going to be just Postgres in my case. The host is localhost. The database is called myDB. And then the password for my is called demo1. I think that's what I call. And then the port number is 5, 4, 3, 2. So that is the default setup for Postgres. And then I'm going to have a pool object set to the instantiation of the pool. And you pass in that DB to connect. And then you basically export this out. Explore the pool. So that is a simple setup for that. Make sure it's plural here. So export that out. And then in the index, we're going to import it. So I'm going to put it way on the top. So let's put it way up here. I'm going to import the user. I'll call it user but a capital U for an object. And we're going to get that from the DB slash user. So that is our user database tool. So now when we log in right here in the post log in, we want to access the database and get the data from the database. So you do a query. So this time, I'm using a fake object called user here. But now we're going to get directly data from the user. So not only that, when we log in, we're going to get the data from the view. So if you look at the form that we have, like the log in, we have the username and the password. And these are the data we're going to use to compare against the one in the database. So that means that I'm not going to do this way. I'm going to do something like console user name. It's useful to the body of the user name coming from the form. So whatever your form is called, field is called use that. In other words, in your view and the login. So notice I have the field for username. I call it username and then I call it password. So we submit this form. It's going to go to login to the post, right? So that's why you're going to go to the login in the post. And I get that username and then also get the password from the repressed body password. OK, so I got that there. Now I need to then check against the database. And that is coming from the user, right? User re-imported the query function. We're passing here the query. You can put it here if you want to put it outside here. That's fine too. Some people like to do this. Like query is equal to select everything from the users where the lower case of username because it is case sensitive and post-grasp unlike SQL Server. So you want to cast username for lower case and also check the username also in lower case as well. Otherwise it won't work, right? Equal to $1, right? Like that. You can see how that was done. And then that is full security reason, OK? So the username is equal to the username here, right? We're going to pass that directly to the query here. And then the second part is the keys matching the 1, 2, or 3, however you want. There's only one attribute. So here is going to be the username. Again, to lower, OK? To lower. That is the lower case. I think that was called lower case, OK? So username here to lower case matches the lower case here. And then we have the callback here. So we have the error and then we have the results. That's spelled correctly. Again, the call result and call what you want doesn't matter. And then in here is what we do this session. So basically all of these are going to go inside here eventually, OK? So what is the first thing we do? We check for the error. So if there's any error, if the error is there, then we're going to throw the error. Usually you'll catch it, but for now we're just going to throw the error, OK? So if there's an error, then none of the code below will run. So now then that means if the user does exist, right? Then we are good. Otherwise, we have to again redirect the user back to the form again and say, hey, there's no user, right? So we can check the users. But first I'm going to create a user becoming from the results.row, OK? Row of 0. Basically, the row is an array, right? It looks like this array. And then you have like that, right? So I want just the object out of this. If there's one record, you have two records and then so on like that, right? So I want just the first record. This should only be one, hopefully. And then I'm going to extract that object assigned that to the user so I don't need the array part, OK? That's what I'm doing here. So if the object is not empty, if there is an object, then we can go ahead and then process this information. Otherwise, hey, there is no information, OK? So you can check here. So if the user does exist and then if it does, then we also want to check the password. If the user that password, this is from the database, right? The user from the password, this matches our password from the form that is true. Then we have authenticated a user and therefore all of these will go in here, OK? Go in there. If the user doesn't exist or if the password do not match, then we go to the else clause. Now that we do, you can put some messages or in our case, it's going to redirect back to the login page again. So again, basically, click the form intro again and so forth. OK. I don't know what I want to try first or see what happens, OK? Again, the user here is we are sending an entire session of the user to that user. And then the user name here is extracting that only from the object from the database. So let's save this and see what happens on our web page. So here we go. I'm going to log in. I don't have any data. So it should reload the login page because it doesn't match. You can see, I don't know if it's working or not. Oh, it has some error. And when that happens, that means there's an error in your code. OK, that means you want to go check in the terminal and see what is telling you over here. It says from, OK, from it's not, oh, typo, sorry, star, not end. So let's try again and run the page one more time. Go back and then refresh the page, log in. Log in. Again, just some gibberish. Boom. You can see it be directing back to log in again and again because of that. So let's say that I'm in my database. I should probably go back and try again. So let's say I'm going to insert this user to the database. And just to confirm that it is in there, here we go. User is called me. Password is 123. OK, so now let's go and see if this works. So I put here me and lowercase. It doesn't matter, right? 123. And boom. So you can see I'm in log in. Log in now I can see the content because it has authenticated my user log in. And I can see that information so far. So good, yeah? All right, so good. That's what we expect to get from that. So that's working beautifully. Now the next thing is the register. OK, so let's do something kind of similar. But in the register page down here when we add the user. OK, so when you register, the first thing, what do we do? We have the username, email, and the password. We have two passwords here. So the first thing you do is you make sure that both passwords are matched, right? If they do match, then go ahead and proceed with the registration. Otherwise, you just keep sending them a message saying, hey, the non-log correct. OK, so that is the first thing I want to do. Put here, I'll say if we request that body, that password, that's the first password is not equal, strictly equal to, the password of password two, right? That's word two. But that's not true. Then I'm going to redirect back to the log in registration page. So again, basically show the form again. OK, otherwise, if that is good to go, then we proceed with the registration page. So now, now the data coming from the body is already an object, but it has two password fields. I just want the first three fields, right? So I'm going to create a new password. I'm going to add the user here. I want to get the username. I'm going to direct that body, that username, OK? The email is when I get the email out of that. And then just one password. Once they match, then we can choose either one. I'll just choose the first one. But that is my object. I'm going to pass this object to my query. So again, the query, you can do query here again. If it's difficult to see, I'm going to insert into the users and I'm passing here the username only like we did in the example and Postgres username, the email and the password values going to be one, two, three, right? That is all I'm going to use for this. And then in the query from the user object to the query just above, you pass in the query and then this array of strings to match that. And then we have the error and then the results. So it's like the other one, OK? So what goes in here? The first value is the user names. That is the username here. So I'm going to put username.username. I'm going to the user object, OK? So user.username, user.email, and so forth here. User.email and user.password, OK? And if it's successful, you get the result. Otherwise, if there's an error, OK? If there are no errors, then go ahead and proceed as follows. So we're going to basically what I do here at the post. You can do one, two things. You can redirect the user back to the login page. They can log in with a new credential or you can assign, set up the login right away. So I'm going to choose to just sign the user in automatically, OK, that is by resetting the request that session, that user to the user, which is the one we just create up here, right? If it's good, then that is good. The app.locals.username, remember? Excuse me. Coming from the user.username. And then also set the app.locals.login to true, right? Same as the login above. And then finally, I'm going to redirect the user. So this line here actually goes right in here, OK? To the home page. And I think that's all we need for this one, OK? So again, the logic. If the password or the body of the two passwords do not match, then we keep showing that form. Once they are matched, then we get the username, email, and then the password, build an object called user. And then we insert into the table, using actually users, what I call a user, I think it's plural. The three fields, the first field is the ID, which is identity. And then we pass those three data set over here. We call the query function of the user object. And then we pass in the three data here, check the result. And then here, again, here, the result here, I'm not using that, but you can use it for other reasons. And then once they are good, we set the user session user, they use the name and then the log into truth, and then we direct back to the home page, OK? So let's see if this thing actually works. Go to the browser. Now we are going to register. So I'm going to put here U and then U at U.com. And the password just say, I'll make it so that it's not matched, OK? So put 1, 2, 1, 2, 1, 2. I'll put here so you can see it. Usually you make this hidden as well, OK? So 1, 2, 1, 2, 1, 2, 1, 3, OK? It doesn't match. So as you can see, keep loading that same form again and again, OK? So put here U again at U at U.com. And then 1, 2, 1, 2, and then 1, 2, 1, 2. And then boom, OK? So it looks good. Now we are logged in automatically. That's why I'm able to see all this information here, OK? If we can verify in the database as well, just to make sure it is in there. So we run this select statement. And boom. So you can see we're now logged in. Password is 1, 2, 1, 2. Perfect, right? So great. That is good. Now, and that is basically all we need for this one. The last thing I want to cover here is basically we want to encrypt the passwords, OK? So you can see the password or just 1, 2, 3. Show you again. You can see that here. You want to encrypt this password. You can see it. So if anybody steals your database, at least they can't map the site for your password, OK? So that is by going through the Bcrypt library I had to install earlier in the video. So on the very top, we're going to import that library called Bcrypt. It's for encryption purposes. Now Bcrypt has two approaches, either the asynchronous approach or the synchronous approach. The preferred approach is the asynchronous, OK? But that's a little bit harder to do and to understand. So in our example, I'll just use the synchronous option, OK? And you can read one about it on the NPS, NPM Bcrypt site. But the Bcrypt has two functions. So I want to go right down here when you insert the data. So not to log in, we'll do that a little bit later. When I add the data, we'll do register here, OK? So before you register, when you insert to the table, you want to hash your password first, encrypt that first. And you do that by using a function called, I think, what's it called, hash or something? Yeah, let's see if it's called hash, yeah. By the way, so before I do that, I want to hash the password. I compare the password in the form. They're good to go. Then I build my use object. And in this password, I'm going to hash it right here, OK? So you use the Bcrypt function, Bcrypt dot. And you can have like compare and the compare sync, OK? Compare, this is the asynchronous. The sync is the synchronous. When we compare later, we log in, right? So we're going to hash it using the hash and hash sync. So again, the hash is the asynchronous. Hash is the synchronous. So our data is pretty small, so it doesn't really matter. But if you build a really big site, then you want to use the asynchronous. So in this case, I'm going to use the hash sync. And this one here takes two parameters. The first is the data you want to hash. And then the second is called a salt or rounds, OK? The salt here, it's just a number that gets multiplied to like the end, I think, two or something to the power of whatever the number is. That is the make it so that it's so hard, so difficult to hack to decipher, basically. So this is the plain text, text, password. And then a salt number will be anywhere from like 1, 2, like 10, 12, 13, 14, OK? The bigger the number, the harder it is to guess. But also the more time consuming for the system to hash its password. So 10 is a pretty good number. You know, you don't want to go any larger than that, unless you do like very sensitive data. If you work with like a financial institution or the stock market or something, then yeah, you want to make it bigger. But again, that takes a lot of CPU power, OK? So 10 is pretty standard, pretty good. So make that hash at the salt of 10, OK? So if the 10 here is an integer number, usually you put a 10 here, you can create a variable called salt equals 10, put it here, OK? So I'm encrypting that to that word. Now to unhash a bag, you have to go to the same program to unhash it, OK? If you use a different hash number, a different salt, I mean, different hash function is not going to work. So basically that's all I'm doing. And it's very simple like that. Now we log in up here, OK? When we compare the passwords, this is the hash password coming from the database. This is the regular password. So we're not going to do it this way. Instead, we're going to use a function called compare sync. So I'm going to just turn this off for now. Maybe copy as you can see, compare. And we'll turn this off. So I'm going to do this way. If the user is true, then this part here, we're going to use the becrypt compare sync, OK? Takes two passwords, right? The first one is the data. This is the plain password. The second is the encrypted password, OK? So the first is just to call it rec.body.password. Well, actually, you just call password. I think we've already kind of struck out, right? It's this password here. The second is the hash password. It's coming from the user.password. I mean that the data from the user database has already been hashed. Otherwise, it won't work. So in our example, it should not work, OK? So let's say if I save this, go back to the login page. Let's log out, right? If I log in using U, they call it 1, 2, 1, 2, right? So you notice that it will match anymore because I'm calling a hashing and then the password is not hashed, right? So again, if I put me and then put here 1, 2, I forget what it was, but OK, so that doesn't work. So now let's go ahead and register again with a different user. We call it day and then day at t.com. Password again, it's going to be 1, 2, 1, 2, OK, 1, 2, 1, 2. I'm going to hash it now. Register, so they match perfectly fine. Let's check the database over here. I'm going to check it again. You will see that now the password for day is now hash. You can see that you cannot decipher this anymore, right? So the only way to decipher it back, is to unhash it using the bcrypt function, OK? So it was 1, 2, 1, 2, like this one, just so you know. OK, so I'm going to log out, OK? I'm going to put day. Password is 1, 2, 1, 2. I'm just going to put some numbers. It doesn't match in purpose, right? No match, good. So I'll put a day and then put 1, 2, 1, 2, and boom, right? So that's how you do it using hash, OK? So the last thing I want to do is to indicate how can a user tell their log in here. Of course, you can tell by these changes in the menu here, but a nice way is to have a little message here to show the user that they're logged in. So basically adding a welcome message here or some sort, that will help a lot. So back in here in the code, I'm going to add in the headers page up here, right under the UL, outside I'm going to add a span tag. Put here hello, and then we'll put here a username, right? I'm going to get a username from the same idea using the login appear, OK? And I'll give it an idea from the user name. You call it hello, hello message, OK? And so we can kind of stamp this. So that ended the index.js file where we created our user login. So here it is, right? I created one already. I call it user is equal to guest, OK? And then once you log in, I want to change the username to the user, that username, OK? So you add that here. The login is true. You update the username to that. When you log in, when you log out, it should also change back to guest, right? And then to false here. So now if I go back to the browser and refresh the page, you see this message hello guest here because I'm not login. Let's go and log in here. We have to use the hash function now. So it's only they will work, OK? So I put they here and I will put here one, two, one, two, and boom, so you can see hello, they, right? So if I go here, you see that it's logged in. Try to log out and change it back to guest, OK? So that is the idea. I mean, you make it nice so you can style this, changing the CSS to make it on the right side over here, maybe. In my case, it's very simple fix, I believe, and I'll just do that. So I call it, what do I call it? The hello message. I want to style it, make this maybe a line block and then move this on the right side. So in my CSS over here, public CSS, somewhere right here, it's OK. Random URL. But that here is a pound sign. And I just make it margin left, maybe 10 pixels wide. And then the URL will be the display over here to inline block, OK? So that will put it right next to each other. Change a little thing here. And you can style it how you like it, but that's good enough for me. And refresh it. And there we go. It's on the right side. You can make it right, justify two. But again, log in. And then one, two, one, two, and boom. And here we go. And now they are good to go. So that's how you would use sessions and how you hash data to securely, you know, secure passwords into the database. Of course, you can hash anything you want, not just the data. You can hash email, you know, sensitive data like financial data or social security numbers and credit cards and all this stuff, OK? So, well, thank you so much. Any questions, please let me know. Thank you.