1 00:00:00,300 --> 00:00:05,490 Welcome back in this lesson which is part 3 of adding authentication to your camp we're going to focus 2 00:00:05,490 --> 00:00:11,520 on loggin will be writing the two in routes and then also the log and template with the form kids started 3 00:00:11,520 --> 00:00:12,230 here. 4 00:00:12,720 --> 00:00:15,840 So just like register log in needs to have two routes. 5 00:00:15,960 --> 00:00:20,790 This should be a bit of a review from the last unit where we covered in more detail but we need a GET 6 00:00:20,790 --> 00:00:25,260 request to show the form and then opposed to actually do the logging in. 7 00:00:25,260 --> 00:00:28,620 So let's start with the form and I'll add a comment here. 8 00:00:28,620 --> 00:00:31,830 Show log in form just like that. 9 00:00:32,250 --> 00:00:41,040 And then once you've an appetite get slashed log in our request response and the callback every go and 10 00:00:41,040 --> 00:00:46,130 then will render the log in template that doesn't exist yet. 11 00:00:46,140 --> 00:00:49,920 Now let's create that touch views slash log in. 12 00:00:49,960 --> 00:00:50,320 E.J.. 13 00:00:50,340 --> 00:00:52,200 Yes and now it's open that 14 00:00:55,020 --> 00:00:55,890 much to start with. 15 00:00:55,880 --> 00:01:02,660 And each one that just says log in and save a start the server. 16 00:01:03,420 --> 00:01:08,070 Let's go to our app and try and visit slash logon. 17 00:01:08,100 --> 00:01:08,910 There we go. 18 00:01:08,910 --> 00:01:09,770 Looks good. 19 00:01:10,010 --> 00:01:11,910 No lunch at the forum. 20 00:01:12,180 --> 00:01:18,690 So we need to have a form tag and let's start with our inputs and put type calls text and we could just 21 00:01:18,690 --> 00:01:20,260 steal this from the register form. 22 00:01:20,490 --> 00:01:23,070 But it's good practice to type it again from scratch. 23 00:01:23,070 --> 00:01:32,230 So input type goes text name equals username placeholder equals username as well. 24 00:01:33,180 --> 00:01:45,210 And then another one input type equals password name equals password placeholder equals password. 25 00:01:45,210 --> 00:01:50,430 And then rather than doing a button which I've been doing I'm just going to use an input type submit 26 00:01:50,640 --> 00:01:53,430 just to demonstrate that you can use either one. 27 00:01:53,440 --> 00:01:55,590 So input type submit. 28 00:01:56,580 --> 00:01:58,140 And then we need to give it a value. 29 00:01:58,590 --> 00:02:00,100 And that's what will actually show up. 30 00:02:00,150 --> 00:02:05,780 So value will just say log in but save Take a look at our form. 31 00:02:06,200 --> 00:02:06,770 OK. 32 00:02:06,960 --> 00:02:07,880 We have the form. 33 00:02:07,920 --> 00:02:13,680 It doesn't do anything right now because we need to give it an action and a method. 34 00:02:14,160 --> 00:02:20,490 And just like register on register we have a post request that we're making to slash register on the 35 00:02:20,490 --> 00:02:21,540 logon form. 36 00:02:21,540 --> 00:02:25,040 We're going to make a post request to slash logon. 37 00:02:25,620 --> 00:02:34,110 So action should be social logon and the method should be post and we'll save it to make sure that works 38 00:02:34,110 --> 00:02:34,640 . 39 00:02:35,010 --> 00:02:40,740 Then if I hit log in right now we'll get a little message that says can not post slash log in because 40 00:02:40,740 --> 00:02:42,750 we don't have a route for that. 41 00:02:42,750 --> 00:02:49,530 So I'll go back to actually yes and add in our log in route and this route will be responsible for handling 42 00:02:50,010 --> 00:02:51,970 log in logic. 43 00:02:52,380 --> 00:02:59,750 So amped up post slash log in at our callback. 44 00:02:59,790 --> 00:03:05,100 And then what we'll do is just do a simple read send log in. 45 00:03:05,190 --> 00:03:12,360 Logic happens here and we just want to make sure we see that and we do have to restart the server whenever 46 00:03:12,360 --> 00:03:15,420 we change or add a new route. 47 00:03:15,420 --> 00:03:18,140 Now let's refresh type anything. 48 00:03:18,240 --> 00:03:23,290 We actually don't even have to fill those out log in and we get log in logic happens here. 49 00:03:23,610 --> 00:03:24,300 All right. 50 00:03:24,420 --> 00:03:24,720 Great. 51 00:03:24,720 --> 00:03:29,700 So we have the routes that up correctly but I'm actually going to get rid of all this because if you 52 00:03:29,700 --> 00:03:34,300 remember back from the last unit the way that we can do log in is by using a middleware. 53 00:03:34,590 --> 00:03:35,690 And that's the passport. 54 00:03:35,720 --> 00:03:36,960 Authenticate middleware. 55 00:03:37,050 --> 00:03:42,400 So add that in here Khama passport dot authenticate. 56 00:03:42,780 --> 00:03:45,530 And then inside we need to provide local. 57 00:03:45,720 --> 00:03:51,600 And then after local as a second argument we provide an object and that object will take two things 58 00:03:51,660 --> 00:03:53,040 success. 59 00:03:53,040 --> 00:03:54,300 Redirect. 60 00:03:54,750 --> 00:04:03,580 And if a user successfully logs in let's redirect to slash campgrounds and a failure redirect and let's 61 00:04:03,580 --> 00:04:08,020 indent this now that we have enough text here. 62 00:04:08,910 --> 00:04:13,020 OK so success redirect and a failure redirect 63 00:04:16,370 --> 00:04:18,800 and it will redirect just back to slash logon. 64 00:04:18,840 --> 00:04:26,580 If it fails just like this there's a lot of tick in here and we still need a comma and then we should 65 00:04:26,580 --> 00:04:27,750 be good to go. 66 00:04:27,750 --> 00:04:29,220 So let's walk through this again. 67 00:04:29,220 --> 00:04:35,010 It's a bit of review from before we haven't amped up post route to slash log in when a request comes 68 00:04:35,010 --> 00:04:36,170 in slash log in. 69 00:04:36,210 --> 00:04:37,580 This is going to run first. 70 00:04:37,620 --> 00:04:40,860 All of this and this is all just the second argument. 71 00:04:40,860 --> 00:04:47,430 So it really looks like this apt up post we have Slash log in then we have the middleware and then we 72 00:04:47,430 --> 00:04:49,280 have our callback. 73 00:04:49,980 --> 00:04:55,860 So the middleware goes from here down to there which is always a little confusing when you put things 74 00:04:55,860 --> 00:04:56,520 on new lines. 75 00:04:56,520 --> 00:05:02,100 But it's much better than just having one gigantic line not middleware we'll call authenticate method 76 00:05:02,580 --> 00:05:09,060 which we set up up here so much code to go through towards the top. 77 00:05:09,090 --> 00:05:10,170 Here we are. 78 00:05:10,500 --> 00:05:14,870 Passport don't use local strategy user or authenticate. 79 00:05:14,880 --> 00:05:22,020 So when we call user data things Kate or passport dot authenticate on a local strategy it will use the 80 00:05:22,020 --> 00:05:23,650 method that we didn't have to write. 81 00:05:23,670 --> 00:05:27,900 It was given to us for free by using the passport local mongoose package. 82 00:05:28,020 --> 00:05:33,390 But it's going to call that authenticate which will then take up body password request up by the username 83 00:05:33,570 --> 00:05:37,730 and then it will authenticate that password with what we have stored in the database for that user. 84 00:05:37,810 --> 00:05:41,050 And it takes care of all the complex logic that we don't have to worry about. 85 00:05:41,460 --> 00:05:47,670 And then if it works redirects such camp grounds if it doesn't work redirect to slash in and then we 86 00:05:47,670 --> 00:05:49,670 have this Colbeck here that really doesn't do anything. 87 00:05:49,670 --> 00:05:51,320 And we can get rid of that if we wanted to. 88 00:05:51,780 --> 00:05:55,670 But I just want to leave it there so that you are aware that this is a middleware. 89 00:05:56,070 --> 00:05:56,810 OK. 90 00:05:57,030 --> 00:05:59,210 So restart the server. 91 00:05:59,670 --> 00:06:02,730 Let's see what happens I'll get rid of this line. 92 00:06:03,050 --> 00:06:05,330 It's complaining about that. 93 00:06:05,370 --> 00:06:06,700 There we go. 94 00:06:07,560 --> 00:06:14,130 Let's refresh and let's plug in with that same account that they created last time Severus and password 95 00:06:14,280 --> 00:06:19,810 is password Nahit log in and I go to slash campgrounds. 96 00:06:19,860 --> 00:06:20,880 Great. 97 00:06:20,880 --> 00:06:22,430 Now let's go back. 98 00:06:22,500 --> 00:06:28,240 I'll reset the server again and let me try and read something that I know doesn't work. 99 00:06:29,070 --> 00:06:34,350 Hopefully we don't have an account with that password and I get back to the log in form because that's 100 00:06:34,350 --> 00:06:36,900 what I set as the failure redirect. 101 00:06:37,320 --> 00:06:40,470 OK so let me just reiterate this because it is an important concept. 102 00:06:40,470 --> 00:06:46,050 This is the same passport that authenticate that we're using instead of register as we're using instead 103 00:06:46,050 --> 00:06:46,710 of log. 104 00:06:46,710 --> 00:06:52,500 The difference is that instead of register we're doing other things before we run passport authenticate 105 00:06:52,830 --> 00:06:54,990 we're actually registering the user making a new user. 106 00:06:54,990 --> 00:07:02,400 And then if that works then we're logging the user in versus here on slash log in the user is presumed 107 00:07:02,400 --> 00:07:03,560 to exist already. 108 00:07:03,570 --> 00:07:07,210 So all we do is passport does authenticate which will log them in. 109 00:07:07,530 --> 00:07:09,630 OK so that's everything I want to get done. 110 00:07:09,900 --> 00:07:14,740 The log in logic with those two routes after I get log in APT up post log in. 111 00:07:14,940 --> 00:07:16,500 And then we also have the form here. 112 00:07:16,620 --> 00:07:18,650 Just a simple form just like register. 113 00:07:18,660 --> 00:07:22,870 The only difference is this right here where we're submitting the form to. 114 00:07:23,310 --> 00:07:23,750 Awesome. 115 00:07:23,760 --> 00:07:28,340 In the next video be working on logging out and also making our NAV bar a little bit better.