1 00:00:07,530 --> 00:00:08,730 Welcome back. 2 00:00:08,760 --> 00:00:16,680 In this video, let's implement the login functionality and this is a route that renders the client 3 00:00:16,680 --> 00:00:17,220 side. 4 00:00:17,220 --> 00:00:22,890 For the meantime, we are going to use the front end or the client or the browser, but instead we are 5 00:00:22,890 --> 00:00:25,500 using Postman everything at the back end. 6 00:00:25,500 --> 00:00:28,530 So now this one is for getting the form. 7 00:00:28,530 --> 00:00:36,780 So our code is one get login form or login form and I can copy this one and down here let me paste it 8 00:00:36,780 --> 00:00:40,650 here and going to be the login logic. 9 00:00:41,220 --> 00:00:45,930 Here we go and going to be post requests. 10 00:00:46,050 --> 00:00:46,860 All right. 11 00:00:46,860 --> 00:00:49,260 So how are we going to log in? 12 00:00:49,260 --> 00:00:51,210 So here we go. 13 00:00:51,240 --> 00:00:52,650 Let's look at the step. 14 00:00:52,830 --> 00:01:00,870 Step number one is get the username and password. 15 00:01:00,870 --> 00:01:04,920 So where can we get the person username and password? 16 00:01:04,950 --> 00:01:09,990 We can get it from here when you are making the request using this tool. 17 00:01:10,170 --> 00:01:12,540 Okay, so how are we going to get them? 18 00:01:12,540 --> 00:01:18,350 We can get them from the red dot body so we can go ahead and restructure that. 19 00:01:18,360 --> 00:01:28,200 But let's move step by step by saying that username is equal to req dart body dart username. 20 00:01:28,350 --> 00:01:35,730 And for this one you can log in with the person, full name or email or phone number. 21 00:01:35,730 --> 00:01:37,230 The choice is yours. 22 00:01:37,410 --> 00:01:40,080 The next is get the password. 23 00:01:40,080 --> 00:01:41,040 So let's. 24 00:01:42,040 --> 00:01:44,560 According to one US user password. 25 00:01:46,210 --> 00:01:52,030 Is equal to rec dot body dot password. 26 00:01:52,300 --> 00:01:58,720 So back to the request here or the client here, we are going to make a request to this endpoint. 27 00:01:58,900 --> 00:01:59,560 Log in. 28 00:01:59,650 --> 00:02:03,310 But before we do that, let's make sure that we are getting the data. 29 00:02:03,460 --> 00:02:06,730 So let's console log the username. 30 00:02:09,389 --> 00:02:15,150 And then the user password or password can be that also. 31 00:02:15,300 --> 00:02:18,090 So now let's go ahead and create one request. 32 00:02:18,090 --> 00:02:26,370 So click on the ten client here and now let's duplicate this one and let's rename this 1 to 6. 33 00:02:26,910 --> 00:02:28,230 Log in. 34 00:02:29,970 --> 00:02:30,720 All right. 35 00:02:30,720 --> 00:02:34,230 So here are going to be the log in. 36 00:02:34,740 --> 00:02:36,850 Let's have some room to enter the details. 37 00:02:36,870 --> 00:02:42,540 So for log in, we don't need to pass in the full name, but we need to pass in the username and then 38 00:02:42,540 --> 00:02:43,400 the password. 39 00:02:43,410 --> 00:02:51,960 So let's hit send and let's check our terminal and let's see if everything is working perfectly, which 40 00:02:51,960 --> 00:02:53,040 is this one. 41 00:02:53,700 --> 00:02:59,250 And indeed I have the data down here as Johnny and one, two, three. 42 00:02:59,400 --> 00:03:00,180 All right. 43 00:03:00,180 --> 00:03:01,620 So we are almost there. 44 00:03:01,890 --> 00:03:10,080 So after getting that, the next step is find the user. 45 00:03:10,860 --> 00:03:11,940 Inside. 46 00:03:12,630 --> 00:03:14,010 MongoDB. 47 00:03:14,970 --> 00:03:16,560 MongoDB. 48 00:03:17,410 --> 00:03:19,110 Okay, so here we go. 49 00:03:19,200 --> 00:03:21,740 First of all, we are going to find this particular user. 50 00:03:21,750 --> 00:03:24,450 I'm going to find the user by username. 51 00:03:24,450 --> 00:03:26,100 So here we go. 52 00:03:26,130 --> 00:03:35,850 Const user found, which is equal to for this case, let's make use of async await because we want to 53 00:03:35,850 --> 00:03:37,710 talk to MongoDB. 54 00:03:37,740 --> 00:03:39,450 We need to handle the promises. 55 00:03:39,450 --> 00:03:44,910 Okay, so here, let's await the user model on that. 56 00:03:44,910 --> 00:03:49,350 I'm going to find one find one we can pass in any query. 57 00:03:49,350 --> 00:03:56,760 So here we want to find the user by username, which is equal to username. 58 00:03:56,760 --> 00:03:59,370 Here I can provide as that. 59 00:03:59,370 --> 00:04:05,040 But for SS, if the value and the property name are the same, we can choose the right one. 60 00:04:05,040 --> 00:04:06,600 So this one is same. 61 00:04:06,810 --> 00:04:07,320 Good. 62 00:04:07,320 --> 00:04:10,620 So now let's go ahead and then console.log. 63 00:04:10,620 --> 00:04:16,140 The user found is are found. 64 00:04:16,140 --> 00:04:19,800 So let's go ahead and then make the request again. 65 00:04:20,250 --> 00:04:22,380 We see that I didn't send any response. 66 00:04:22,380 --> 00:04:25,500 That is why my server or the response has hung out. 67 00:04:25,500 --> 00:04:26,550 So don't worry. 68 00:04:26,790 --> 00:04:36,270 Let's click on the log in and let's check the terminal here and it will say that I get back the user, 69 00:04:36,270 --> 00:04:37,350 which is nice. 70 00:04:37,440 --> 00:04:46,380 See, so here let's also check if the user is not found, then we can throw an error for the meantime 71 00:04:46,380 --> 00:04:48,660 because we haven't talked about error handling. 72 00:04:48,690 --> 00:04:50,670 Let's do some custom error. 73 00:04:50,670 --> 00:04:53,130 So here if. 74 00:04:53,910 --> 00:04:56,070 There is no user found. 75 00:04:57,390 --> 00:05:00,540 Then we are going to say that. 76 00:05:01,360 --> 00:05:05,450 Let's return and just send this data here to the user. 77 00:05:05,470 --> 00:05:08,950 This is not the ideal way of handling this kind of error. 78 00:05:08,950 --> 00:05:12,430 But for the meantime, let's talk to that as you move on. 79 00:05:12,430 --> 00:05:13,780 When we get to error handling. 80 00:05:13,810 --> 00:05:16,330 I will show you how we can handle this one perfectly. 81 00:05:16,510 --> 00:05:20,830 So here, let's provide a property code message and we say that. 82 00:05:21,740 --> 00:05:23,000 Invalid. 83 00:05:24,450 --> 00:05:25,530 Username. 84 00:05:26,130 --> 00:05:26,730 Good. 85 00:05:26,730 --> 00:05:27,750 So now. 86 00:05:27,780 --> 00:05:29,080 Errors down here. 87 00:05:29,100 --> 00:05:29,690 Errors. 88 00:05:29,700 --> 00:05:42,270 Then we can return rez dot json and we are going to say message and it says that log in. 89 00:05:43,970 --> 00:05:44,620 Suck. 90 00:05:44,630 --> 00:05:45,440 Six. 91 00:05:45,830 --> 00:05:46,340 Perfect. 92 00:05:46,340 --> 00:05:51,350 And if you want to send a user, why not go ahead and send the user found? 93 00:05:51,620 --> 00:05:52,700 That's a user. 94 00:05:52,730 --> 00:05:56,750 So now let's go ahead and make the request. 95 00:05:56,750 --> 00:05:59,980 So now back to login requests. 96 00:05:59,990 --> 00:06:07,850 Let's hit sign and you can see that we got login success with the user which is inside my DB. 97 00:06:07,880 --> 00:06:09,230 That is awesome. 98 00:06:09,500 --> 00:06:16,520 But let's say that if I change the username to something like this one and let's send and you can see 99 00:06:16,520 --> 00:06:24,980 that we get invalid username meaning that there is no user by joining to that, is it? 100 00:06:24,980 --> 00:06:31,200 But if I try to provide this one by the for the password, I can enter anything. 101 00:06:31,220 --> 00:06:38,210 When I hit send you could see that we got login success even though the password is wrong. 102 00:06:38,210 --> 00:06:45,440 Why is it so we got it because we are not checking the password as well. 103 00:06:45,890 --> 00:06:55,040 So here we can check that if there is no user or the password is not correct. 104 00:06:55,040 --> 00:06:56,960 So how can we check the password? 105 00:06:56,960 --> 00:06:59,030 Well, we're going to be pretty simple, right? 106 00:06:59,300 --> 00:07:04,220 We are also going to compare or find the user by password. 107 00:07:04,400 --> 00:07:05,060 All right. 108 00:07:05,060 --> 00:07:07,790 So here we can copy this one. 109 00:07:08,240 --> 00:07:13,580 And then down here we can pass it and change this one to password. 110 00:07:13,580 --> 00:07:17,150 And here are going to be the user password from the client. 111 00:07:17,150 --> 00:07:19,880 So here, let's change this one to password. 112 00:07:20,660 --> 00:07:21,570 How is that? 113 00:07:21,830 --> 00:07:26,510 So here we are going to check if there is no user or. 114 00:07:27,770 --> 00:07:30,110 There is no password. 115 00:07:30,440 --> 00:07:33,620 Meaning that if there's password, this one going to retain. 116 00:07:33,620 --> 00:07:33,980 True. 117 00:07:34,010 --> 00:07:34,670 Right. 118 00:07:35,420 --> 00:07:36,050 Do you get it? 119 00:07:36,080 --> 00:07:36,820 Yes. 120 00:07:36,830 --> 00:07:41,000 So with this one, we can implement this one in different ways. 121 00:07:41,000 --> 00:07:45,330 But I think making two requests at the same time isn't ideal. 122 00:07:45,350 --> 00:07:51,920 So what we can do is that we can find the user up here with a found, and on that we are going to check 123 00:07:51,920 --> 00:07:55,310 the user name and then the other ones as well. 124 00:07:55,550 --> 00:07:59,150 But for the meantime, let's maintain this as we move on. 125 00:07:59,180 --> 00:08:00,980 We are going to improve our logic. 126 00:08:01,160 --> 00:08:04,570 So now we are taking the password into consideration. 127 00:08:04,580 --> 00:08:13,280 So here let's go ahead and then log in again with those wrong credentials where I still get log in success. 128 00:08:13,280 --> 00:08:14,870 So why is it so? 129 00:08:15,080 --> 00:08:17,750 Well, I need to also inject this one. 130 00:08:17,750 --> 00:08:22,610 Meaning if there is no password, mean that if there is no user found the same thing. 131 00:08:22,610 --> 00:08:27,980 So let's send a non pc see that I got invalid username. 132 00:08:28,040 --> 00:08:33,919 If I change this one to the right password and I signed, I'm able to log in. 133 00:08:34,159 --> 00:08:36,710 Let me give you one security tip here. 134 00:08:36,980 --> 00:08:43,070 So let's say that the user name is found by the password is incorrect. 135 00:08:43,070 --> 00:08:47,780 You shouldn't write something like username is correct, but password is incorrect. 136 00:08:47,780 --> 00:08:52,220 Or you can say that password is incorrect or username is incorrect. 137 00:08:52,220 --> 00:08:55,290 In that way you are giving hand to any hacker. 138 00:08:55,310 --> 00:08:59,300 So what I often use is that invalid login credentials. 139 00:08:59,600 --> 00:09:01,310 Invalid login credentials. 140 00:09:01,310 --> 00:09:06,470 In this way the user might not know whether the password or the username is incorrect. 141 00:09:06,470 --> 00:09:09,170 So this is how we implement it. 142 00:09:09,500 --> 00:09:10,190 All right. 143 00:09:10,190 --> 00:09:14,360 But when we thinking that, what about the profile page? 144 00:09:14,390 --> 00:09:16,910 We can get that one really easily, right? 145 00:09:16,910 --> 00:09:25,100 So on the profile page, we can make the same check here that if this is a found, then we can send 146 00:09:25,100 --> 00:09:27,320 the user details onto the template. 147 00:09:27,320 --> 00:09:30,980 And that is all the same way we are retaining the user here. 148 00:09:30,980 --> 00:09:34,370 We are going to implement the same thing for the profile. 149 00:09:34,430 --> 00:09:39,920 So let's implement this one using a form where we can log in and register from a form.