1
00:00:00,690 --> 00:00:05,760
Welcome back in this lesson we're picking up where we left off with the authentication code along and

2
00:00:05,920 --> 00:00:08,370
we're going to add in the log in functionality.

3
00:00:08,550 --> 00:00:14,130
So that means you need to add in that to log in routes one that's for the form renders the form and

4
00:00:14,130 --> 00:00:16,700
the other one that actually does the log in logic.

5
00:00:17,100 --> 00:00:20,210
And then we actually need to create the form and then we'll test it out.

6
00:00:20,220 --> 00:00:22,250
So let's get started inside.

7
00:00:22,480 --> 00:00:26,420
Yes we're going to add two routes and those two routes again.

8
00:00:26,460 --> 00:00:29,310
One is the GET request and one is a POST request.

9
00:00:29,310 --> 00:00:33,320
Both will be slash log in just like we did for register.

10
00:00:33,870 --> 00:00:37,470
So let's start with the form and I'll make another note here.

11
00:00:37,470 --> 00:00:45,150
These will be logged in routes and the first one is just going to render log in form and that one's

12
00:00:45,180 --> 00:00:57,030
nice and easy don't get slash logon request response and they call back and we'll just do a rez render

13
00:00:57,840 --> 00:01:00,050
log in.

14
00:01:00,060 --> 00:01:01,630
Now let's create that form.

15
00:01:01,680 --> 00:01:10,870
So touch use slash logon Ejay us and then open that up views slash log in that E.J. Yes.

16
00:01:11,100 --> 00:01:11,850
Great.

17
00:01:11,970 --> 00:01:18,300
And we'll just add a nice H-1 that says log in and let's make sure that we see this when we start the

18
00:01:18,300 --> 00:01:19,540
app.

19
00:01:20,460 --> 00:01:26,470
Let's go to our application and go to slash log in and receive the template.

20
00:01:26,680 --> 00:01:32,640
So now it's Add in the form and this will be just like the registration form except for one big difference

21
00:01:32,730 --> 00:01:34,980
which is where the form submits to.

22
00:01:35,010 --> 00:01:38,410
So we'll add that last Let's just go with the inputs again.

23
00:01:38,460 --> 00:01:47,820
So type equals text on the first one name equals username and placeholder equals username and then we'll

24
00:01:47,820 --> 00:01:58,410
duplicate that and here we'll do type equals password name password again and placeholder will be password

25
00:01:58,420 --> 00:01:59,460
.

26
00:02:00,180 --> 00:02:09,720
And then we'll add an R button to submit the form and we'll just write log in and then we have to work

27
00:02:09,720 --> 00:02:11,400
on the actual form itself.

28
00:02:11,400 --> 00:02:18,120
So this form needs to send a post request to slash logon log in as a post will be our other route that

29
00:02:18,120 --> 00:02:22,770
we haven't defined yet but that's where we'll actually process the data and figure out if the credentials

30
00:02:22,770 --> 00:02:23,720
match.

31
00:02:24,230 --> 00:02:34,950
So let's set that up instead of log in each case we have action equals slash log in and method is also

32
00:02:34,950 --> 00:02:35,980
a post.

33
00:02:36,450 --> 00:02:42,690
So this form is actually on the slash logon as it get route and it submits to slash log in as a post

34
00:02:42,690 --> 00:02:43,320
.

35
00:02:43,320 --> 00:02:44,580
Now let's take a look at it.

36
00:02:44,850 --> 00:02:47,720
Refresh the page we see the form.

37
00:02:47,790 --> 00:02:53,910
Great if we try and submit it right now we don't have a slash log in as a post route and it will just

38
00:02:53,970 --> 00:02:54,790
timeout.

39
00:02:55,170 --> 00:03:03,420
So we'll go back now and add the log in post route and this route will be responsible for log in logic

40
00:03:03,420 --> 00:03:04,170
.

41
00:03:04,320 --> 00:03:17,070
So at top post slash log in function request in response and in here we have some new logic and it's

42
00:03:17,070 --> 00:03:22,890
actually not that new because we already used it up here or we have passport dot authenticate local

43
00:03:23,340 --> 00:03:28,860
We'll do the exact same thing except there's a small twist which is that we're not going to do it inside

44
00:03:28,860 --> 00:03:30,110
of the callback here.

45
00:03:30,300 --> 00:03:34,420
We're actually going to do it right here as a second argument.

46
00:03:34,560 --> 00:03:37,260
So let me show you what it looks like first and then go over it.

47
00:03:37,260 --> 00:03:45,300
So amped up post log in and then we're going to add passport dot authenticate and that will take local

48
00:03:45,420 --> 00:03:51,970
as a string comma and then opening and closing braces.

49
00:03:52,200 --> 00:03:58,170
And inside those braces is an object and we're going to pass in success redirect.

50
00:03:58,170 --> 00:04:08,520
And that will be slash secret and then failure redirect will be slash log in again and we'll save and

51
00:04:08,520 --> 00:04:14,030
or authenticated needs to actually close here around that.

52
00:04:14,030 --> 00:04:19,950
So it takes those two arguments passport that authenticate local And then this entire object.

53
00:04:20,020 --> 00:04:25,470
Those are parameters we're passing in comma and then this is our callback function and we don't actually

54
00:04:25,470 --> 00:04:26,940
need to put anything in here for now.

55
00:04:26,970 --> 00:04:28,970
So we'll just leave it up the.

56
00:04:29,040 --> 00:04:31,030
So now let's talk about what we've done here.

57
00:04:31,350 --> 00:04:37,020
We've already seen passport dot authenticate but we haven't seen it use like this inside of the up post

58
00:04:37,230 --> 00:04:39,440
where it's not in the callback itself.

59
00:04:40,050 --> 00:04:45,290
So this is what's known as a middleware and we'll be working with middleware and writing our own middleware

60
00:04:45,300 --> 00:04:46,550
and the next video.

61
00:04:46,590 --> 00:04:54,630
But the idea of middleware I'll spell it out here middle where you said it some code that runs before

62
00:04:54,630 --> 00:04:56,930
our final route callback here.

63
00:04:57,270 --> 00:05:02,970
When our app gets a post request to slash log in it's going to run this code immediately and we can

64
00:05:02,970 --> 00:05:07,650
have multiple middleware stacked up so we can have another thing that will run after we authenticate

65
00:05:07,680 --> 00:05:09,510
and then another thing after that.

66
00:05:09,510 --> 00:05:14,370
And the idea is that they sit between the beginning of your route and then at the end of the route which

67
00:05:14,370 --> 00:05:16,270
is our handler at the very end.

68
00:05:16,590 --> 00:05:18,130
Hence the name middleware.

69
00:05:18,420 --> 00:05:21,260
So again we'll be creating our own middleware in the next video.

70
00:05:21,420 --> 00:05:27,090
But for now all you need to know is that this is called a middleware and recalling passport dot authenticate

71
00:05:27,140 --> 00:05:27,510
.

72
00:05:27,550 --> 00:05:32,340
Remember the whole point of that is that it actually tries to like you when it checks it off then it

73
00:05:32,350 --> 00:05:33,650
keeps your credentials.

74
00:05:33,840 --> 00:05:39,080
So it's going to take the password and the user name that are in the request inside request up body

75
00:05:39,080 --> 00:05:39,690
.

76
00:05:39,750 --> 00:05:44,820
We don't even have to explicitly provide that passport automatically takes the username password from

77
00:05:44,820 --> 00:05:50,580
the form or from the request body and it's basically going to compare the password that the user typed

78
00:05:50,580 --> 00:05:55,950
into the input and compare that to that crazy hash version in the database.

79
00:05:55,950 --> 00:05:58,740
And then we provide an object with two parameters.

80
00:05:58,740 --> 00:06:02,290
Success redirect and failure redirect.

81
00:06:02,310 --> 00:06:07,650
So if it works we're going to redirect to slash secret and if it doesn't work well redirect to slash

82
00:06:07,650 --> 00:06:10,410
log it before we test this out.

83
00:06:10,410 --> 00:06:16,470
There's one other line of code that we need to configure passport with so up top where we did the passport

84
00:06:16,490 --> 00:06:25,860
does serialise and serialise user going to add another one in passport use new local strategy which

85
00:06:25,860 --> 00:06:27,370
is what we imported here.

86
00:06:27,480 --> 00:06:28,710
I support local.

87
00:06:28,710 --> 00:06:30,490
We saved it to local strategy.

88
00:06:30,990 --> 00:06:41,710
So go back to that new local strategy and then in parentheses user dot authenticate and save.

89
00:06:41,790 --> 00:06:46,620
So we're creating a new local strategy using the user does authenticate method.

90
00:06:46,770 --> 00:06:53,130
That is coming from Passport local mongers so we don't actually have to write the authenticate method

91
00:06:53,160 --> 00:06:53,680
either.

92
00:06:53,850 --> 00:07:00,270
That's given to us and then we're just telling passport for the local strategy use that version of user

93
00:07:00,280 --> 00:07:01,440
data authenticate.

94
00:07:01,800 --> 00:07:06,400
OK so now we have that set up our authenticate should work.

95
00:07:06,470 --> 00:07:08,450
So let's give it a shot.

96
00:07:08,580 --> 00:07:10,480
No actually yes.

97
00:07:10,570 --> 00:07:16,350
And let's start by trying to sign up or sign in with an account we know doesn't work.

98
00:07:16,350 --> 00:07:21,860
Log in and it takes you back to the log in page and that's what we had set up here.

99
00:07:22,380 --> 00:07:24,900
Failure redirect slash logon.

100
00:07:25,140 --> 00:07:27,250
Now sign in with an account that I know works

101
00:07:30,720 --> 00:07:33,650
and this time it takes me to the secret page.

102
00:07:34,260 --> 00:07:35,890
So we now have log in working.

103
00:07:36,120 --> 00:07:37,380
We still don't have sign out.

104
00:07:37,500 --> 00:07:43,470
We have logged in working so I can sign up using register and then they can also log in.

105
00:07:43,530 --> 00:07:48,510
We have a form just like Register had a form route and then we have a post route to actually do the

106
00:07:48,510 --> 00:07:54,930
authentication and then we talked about middleware which is the idea of having some code that runs between

107
00:07:54,930 --> 00:08:01,200
the start of a route and the final end of that route handler in the next and final video in this series

108
00:08:01,520 --> 00:08:04,770
are going to implement log out and we'll also create our own middleware