1
00:00:00,150 --> 00:00:04,980
Welcome back this lesson is part 2 of adding authentication to your camp.

2
00:00:05,310 --> 00:00:10,710
Well focus on configuring passport first and then we'll add the logic for the sign up or register routes

3
00:00:10,770 --> 00:00:11,630
and template.

4
00:00:12,000 --> 00:00:13,040
Let's get started here.

5
00:00:13,260 --> 00:00:19,620
So I have my app US Open and I've already required everything what we need to do now is configure passport

6
00:00:20,100 --> 00:00:25,650
and we have a few lines so I'm going to add in a line here that's just passport configuration just to

7
00:00:25,650 --> 00:00:26,850
make it clear.

8
00:00:26,910 --> 00:00:29,820
The first thing that will do is set up a Express session.

9
00:00:29,820 --> 00:00:38,520
So after use then require express Dasch session and then we're going to execute that.

10
00:00:39,210 --> 00:00:45,540
And inside of that when we run that Choire statement we're going to pass in an object and I'll give

11
00:00:45,540 --> 00:00:46,470
it a secret.

12
00:00:46,650 --> 00:00:49,710
And this can be anything we want Last time I think I did.

13
00:00:49,710 --> 00:00:54,660
Rusty is the best and cutest dog or something like that this time I do something similar.

14
00:00:54,660 --> 00:00:59,100
Again this can be anything that we want but I'll just do once again.

15
00:00:59,100 --> 00:01:00,320
Rusty wins.

16
00:01:00,390 --> 00:01:01,740
Cutest Dog.

17
00:01:02,220 --> 00:01:06,060
Although I have to say Russell is getting a little bit chubby and I don't I don't feel confident that

18
00:01:06,060 --> 00:01:06,810
he would actually win.

19
00:01:06,810 --> 00:01:08,060
Cutest Dog any more.

20
00:01:08,280 --> 00:01:10,260
And then show people his older CUPE photos.

21
00:01:10,320 --> 00:01:11,960
He's a little sausage like now.

22
00:01:12,210 --> 00:01:19,440
OK so we have the secret setup that you need to add in resave and that should be false and then save

23
00:01:20,070 --> 00:01:21,420
on initialized.

24
00:01:21,420 --> 00:01:23,280
Make sure we spelt this one right.

25
00:01:23,400 --> 00:01:24,650
False.

26
00:01:25,020 --> 00:01:30,630
And these are just two options that we have to add and we'll save notes continue on down and work on

27
00:01:30,630 --> 00:01:32,030
configuring passport.

28
00:01:32,070 --> 00:01:35,010
So far this has nothing to do with passport just yet.

29
00:01:35,400 --> 00:01:44,770
We're going to do have that U.S passport that initialize and then another one don't use passport that

30
00:01:45,000 --> 00:01:48,320
session just like that.

31
00:01:48,600 --> 00:01:55,140
Then we're going to do a passport use and this is where we give it the local strategy that we imported

32
00:01:55,650 --> 00:01:56,430
here.

33
00:01:56,850 --> 00:02:05,460
So we're going to run new local strategy then inside of that we're going to give it a method user doesn't

34
00:02:05,970 --> 00:02:11,020
authenticate and user does authenticate is not one that we wrote.

35
00:02:11,340 --> 00:02:14,390
It's one that comes with passport local mongoose.

36
00:02:14,400 --> 00:02:18,560
If we didn't have this package you would have to write that method ourself.

37
00:02:19,140 --> 00:02:20,520
Then we have two more methods.

38
00:02:20,670 --> 00:02:24,220
Passport dot serialise user.

39
00:02:24,670 --> 00:02:31,080
And that's going to be using user dot serialise user which is another one that comes for free with that

40
00:02:31,080 --> 00:02:32,970
passport local mongoose.

41
00:02:32,970 --> 00:02:40,930
And then we need the serialise ups the serialise user and it's the same name over here.

42
00:02:40,950 --> 00:02:45,130
The serialise user user serialize the user.

43
00:02:45,420 --> 00:02:46,210
OK.

44
00:02:46,470 --> 00:02:50,470
So that's all the configuration we need to do before we move on to the route to register.

45
00:02:50,640 --> 00:02:54,010
Let's test that out just see if everything runs OK.

46
00:02:54,330 --> 00:02:55,280
And what do you know.

47
00:02:55,320 --> 00:03:01,380
I spelled save uninitialized wrong again just like I did in the last video and it went out of my way

48
00:03:01,380 --> 00:03:06,480
to try and avoid that let's just copy this in and paste it here.

49
00:03:06,630 --> 00:03:08,440
Hopefully you caught that before me.

50
00:03:08,610 --> 00:03:11,600
Let's save again and restart.

51
00:03:11,790 --> 00:03:15,170
Now we don't get any errors or any warnings and we're good to go.

52
00:03:15,730 --> 00:03:17,850
OK so that's all the set up we have to do.

53
00:03:17,970 --> 00:03:22,490
Now we have to go through and add the routes in our templates and we'll start with the register.

54
00:03:22,680 --> 00:03:29,400
So I'm going to go down to the very bottom and down here below all of our comment routes and our campground

55
00:03:29,430 --> 00:03:29,950
routes.

56
00:03:30,090 --> 00:03:32,220
I'm going to add in our Auth. routes.

57
00:03:32,220 --> 00:03:37,410
So we'll make a little note here and very soon.

58
00:03:37,560 --> 00:03:41,850
I keep saying this but very soon we'll be splitting all the routes into separate files because it's

59
00:03:41,850 --> 00:03:46,750
getting a little bit difficult to manage with all of this code and here is a lot of code.

60
00:03:46,770 --> 00:03:47,070
Okay.

61
00:03:47,070 --> 00:03:50,590
So our first route is going to show the register form.

62
00:03:51,780 --> 00:04:01,500
And that's just apt get cash register and then we need to call back here request response.

63
00:04:01,500 --> 00:04:08,320
And then in here redstart render register which doesn't exist yet.

64
00:04:08,340 --> 00:04:09,910
So now it's go create that.

65
00:04:09,930 --> 00:04:11,640
So touch use.

66
00:04:11,670 --> 00:04:13,230
So cash register.

67
00:04:13,500 --> 00:04:14,370
Yes.

68
00:04:14,370 --> 00:04:23,760
And then let's open that file and we'll add in our simple H1 Sign-Up and let's make sure we see that

69
00:04:23,790 --> 00:04:26,130
when we start the server and we go to that route

70
00:04:28,810 --> 00:04:33,030
slash register and we get the Sign-Up H1.

71
00:04:33,120 --> 00:04:34,950
Now it's added in the form.

72
00:04:34,950 --> 00:04:44,790
So we're going to have a forum tag that form is going to go to slash register doesn't exist yet and

73
00:04:44,790 --> 00:04:46,870
method will be post.

74
00:04:47,310 --> 00:04:58,220
We need to input first on type because text name is equal to username and placeholder is equal to user

75
00:04:58,220 --> 00:05:00,300
name as well.

76
00:05:00,300 --> 00:05:02,630
Then you need another input type.

77
00:05:02,660 --> 00:05:05,300
This one is password.

78
00:05:05,770 --> 00:05:14,150
And then we want name to be password and then a placeholder here can also be password ready.

79
00:05:14,190 --> 00:05:22,570
One more item which is the button to submit it it will just say Sign-Up save let's refresh.

80
00:05:22,820 --> 00:05:24,120
Here's our form.

81
00:05:24,140 --> 00:05:28,430
So right now if we submit the form it's going to send a post request slash register.

82
00:05:28,440 --> 00:05:32,120
We don't have a route to handle that lets go and add that route.

83
00:05:32,120 --> 00:05:42,540
So this route will handle Sign-Up logic and inside of that going to have an apt up post to slash register

84
00:05:43,940 --> 00:05:45,360
or callback.

85
00:05:45,950 --> 00:05:55,260
And let's start with a simple red dot send signing you up and just make sure we see that when we submit

86
00:05:55,250 --> 00:05:56,240
the form.

87
00:05:56,250 --> 00:05:58,840
So we need to restart the server when we add a new route.

88
00:05:58,840 --> 00:06:03,050
And now let's go back to the form refresh.

89
00:06:03,320 --> 00:06:04,560
Fill it out.

90
00:06:04,560 --> 00:06:07,130
Hit sign up and we get signing you up.

91
00:06:07,330 --> 00:06:07,600
OK.

92
00:06:07,620 --> 00:06:09,450
So the route is now set up.

93
00:06:09,440 --> 00:06:16,210
Now let's actually add in all of the important logic we need to use that user dot register.

94
00:06:16,580 --> 00:06:20,400
That's provided by the passport local mongoose package.

95
00:06:20,420 --> 00:06:28,080
So you should not register and we pass in a new user that has a user name assigned and username should

96
00:06:28,070 --> 00:06:34,500
be request top body that username like that.

97
00:06:34,670 --> 00:06:40,290
And then afterwards we pass in the password as a second argument to use or not register.

98
00:06:40,760 --> 00:06:46,700
So what we can actually do is make this into a separate variable to clean it up a little bit and we'll

99
00:06:46,700 --> 00:06:53,160
call it for our new user equals new user that has a user name.

100
00:06:53,570 --> 00:07:02,040
And then we're going to register with new user Khama request dot body dot password.

101
00:07:02,540 --> 00:07:04,510
And that's the password from the form.

102
00:07:04,520 --> 00:07:08,080
This is the username from the form which should be reviewed by now hopefully.

103
00:07:08,270 --> 00:07:12,890
And then we're passing in this new user that only has a user name assigned and register is going to

104
00:07:12,890 --> 00:07:18,060
handle all the logic of taking that password and then rather than storing the password it actually stores

105
00:07:18,050 --> 00:07:19,660
that crazy hash.

106
00:07:19,700 --> 00:07:24,430
So let's make sure that it works so users don't register and then add in a callback.

107
00:07:24,500 --> 00:07:30,060
And this will have error and then user and that user will be the newly created user.

108
00:07:30,140 --> 00:07:31,340
If it worked.

109
00:07:31,340 --> 00:07:33,690
So let's start with an if error.

110
00:07:34,040 --> 00:07:36,600
Well do a constant log error.

111
00:07:36,770 --> 00:07:46,310
But we also want to handle it and we'll do a rez render register and we'll do a return here.

112
00:07:46,620 --> 00:07:51,890
And that's just a nice way to short circuit and get out of this entire callback if we return.

113
00:07:51,890 --> 00:08:01,400
And then down here we run passport dot authenticate with a local strategy and we're going to call that

114
00:08:01,400 --> 00:08:05,520
with the request response and then a callback function that it will handle.

115
00:08:05,750 --> 00:08:12,620
Once it authenticates and what we want to do is redirect and let's redirect to slash campgrounds for

116
00:08:12,620 --> 00:08:13,730
now.

117
00:08:14,570 --> 00:08:20,360
So once the user has signed up then we're going to log them in authenticate them and then we're going

118
00:08:20,370 --> 00:08:22,230
to redirect them to slash campgrounds.

119
00:08:22,460 --> 00:08:28,130
And if we don't and if there's a problem signing the user up then we're going to cancel that log the

120
00:08:28,130 --> 00:08:31,670
error and then we're going to render the form again.

121
00:08:31,700 --> 00:08:33,090
So let's give that a shot.

122
00:08:33,290 --> 00:08:34,990
Start the server up.

123
00:08:35,300 --> 00:08:40,190
If we go to register and fill it out and then we hit submit and we make it to slash campgrounds.

124
00:08:40,280 --> 00:08:42,270
That means that things went well for us.

125
00:08:42,530 --> 00:08:53,180
Let's refresh all sign up here with severance and password or the password again sign up and it takes

126
00:08:53,180 --> 00:08:54,210
us to slash campgrounds.

127
00:08:54,240 --> 00:08:55,110
Excellent.

128
00:08:55,500 --> 00:09:03,630
So we can trust that that worked but we could also open up Mongo and connect to our database show Digby's

129
00:09:05,540 --> 00:09:07,850
and we're using Yelp camp V-6.

130
00:09:07,910 --> 00:09:17,960
So I'm going to use Yelp camp V-6 and then I'm going to do a D-B that users find.

131
00:09:18,230 --> 00:09:22,090
And we should see a single user in here is gigantic looking thing.

132
00:09:22,910 --> 00:09:24,760
If we see that it means that it worked.

133
00:09:25,010 --> 00:09:30,280
So we have our user name that we added ourself when we did user data new here or new user.

134
00:09:30,650 --> 00:09:34,920
And then all of this stuff was added from the user data register.

135
00:09:35,660 --> 00:09:36,400
OK great.

136
00:09:36,410 --> 00:09:41,760
So we have that working all Control-C out of here and we can start the server up again.

137
00:09:43,640 --> 00:09:48,270
And let's see what happens if I go back to the form and I try and register as Severus again

138
00:09:52,380 --> 00:09:53,760
takes me back to the forum.

139
00:09:54,200 --> 00:10:01,170
Every time I do that with the same username It's taken me back to the form and we're getting a message

140
00:10:01,160 --> 00:10:04,640
here that says a user with a given user name is already registered.

141
00:10:04,640 --> 00:10:08,270
So we get that for free by using Passport local mongoose.

142
00:10:08,270 --> 00:10:09,830
We automatically get that message.

143
00:10:09,840 --> 00:10:13,700
It's great we can use it in our view in a later video and we will.

144
00:10:13,700 --> 00:10:17,760
Because right now we're not explaining to the user the problem which is always really frustrating if

145
00:10:17,750 --> 00:10:19,660
you're a user and you don't know what's going wrong.

146
00:10:19,670 --> 00:10:22,140
But you know that something is not working.

147
00:10:22,130 --> 00:10:24,430
But for now all that we care about is that it works.

148
00:10:24,440 --> 00:10:29,410
So we have these two render statements are redstart render and a restaurant redirect.

149
00:10:29,630 --> 00:10:34,910
And we're getting either one depending on if we're successfully signing up or if we're causing an error

150
00:10:35,120 --> 00:10:38,110
in this case by setting up with the user name that's already registered.

151
00:10:38,480 --> 00:10:39,040
Great.

152
00:10:39,060 --> 00:10:43,130
So we did everything you want to do and that's video in the next one we're going to handle the log in

153
00:10:43,130 --> 00:10:44,000
logic and wraps