1
00:00:00,540 --> 00:00:03,090
Instructor: Our application now has the core sign in,

2
00:00:03,090 --> 00:00:06,240
sign up and sign out logic put together.

3
00:00:06,240 --> 00:00:09,330
But we've been testing as this kind of feature route

4
00:00:09,330 --> 00:00:11,640
right here that's been completely undefined

5
00:00:11,640 --> 00:00:13,530
for the entire life of our application

6
00:00:13,530 --> 00:00:15,270
which has been pretty darn annoying.

7
00:00:15,270 --> 00:00:17,370
So it's probably gonna be a good time now to say

8
00:00:17,370 --> 00:00:18,870
let's put this feature component together

9
00:00:18,870 --> 00:00:20,520
and see what it actually looks like.

10
00:00:20,520 --> 00:00:23,370
So remember, feature right here is a route

11
00:00:23,370 --> 00:00:26,760
or a component that should only be visible to a user

12
00:00:26,760 --> 00:00:28,860
once they have successfully authenticated

13
00:00:28,860 --> 00:00:30,243
inside our application.

14
00:00:31,410 --> 00:00:33,120
So for right now, let's just kind of

15
00:00:33,120 --> 00:00:34,830
put this kind of component together,

16
00:00:34,830 --> 00:00:36,810
hook it up to our router and make sure that we can actually

17
00:00:36,810 --> 00:00:38,670
get something showing up on the screen

18
00:00:38,670 --> 00:00:41,520
and then talk about what we're gonna do with it.

19
00:00:41,520 --> 00:00:43,320
So inside of my components directory

20
00:00:43,320 --> 00:00:44,940
I'm gonna make a new file,

21
00:00:44,940 --> 00:00:47,190
which I'm just gonna call feature.

22
00:00:47,190 --> 00:00:48,900
Now again, we're calling this thing feature,

23
00:00:48,900 --> 00:00:51,450
but really it should be whatever your application

24
00:00:51,450 --> 00:00:52,410
is designed to do.

25
00:00:52,410 --> 00:00:55,650
So if you are a like Twitter equivalent,

26
00:00:55,650 --> 00:00:58,620
you should perhaps should be something called like

27
00:00:58,620 --> 00:01:01,500
list of tweets or tweets index or what have you.

28
00:01:01,500 --> 00:01:03,360
Or if you're making an Uber equivalent,

29
00:01:03,360 --> 00:01:05,340
it should be like map view or something.

30
00:01:05,340 --> 00:01:07,350
You know, what whatever it might be.

31
00:01:07,350 --> 00:01:10,795
Just for the sake of making a project around authentication,

32
00:01:10,795 --> 00:01:14,673
I'm just gonna very generically call this component feature.

33
00:01:16,350 --> 00:01:17,790
So right now my number one goal

34
00:01:17,790 --> 00:01:19,710
is just to get something to show up on the screen.

35
00:01:19,710 --> 00:01:21,420
So we're gonna put some scaffolding

36
00:01:21,420 --> 00:01:23,280
inside this component here.

37
00:01:23,280 --> 00:01:27,453
So I'll import React and component from React,

38
00:01:29,160 --> 00:01:33,843
and I'm gonna make a class feature that extends component.

39
00:01:36,810 --> 00:01:38,470
And we'll go ahead and render

40
00:01:40,980 --> 00:01:43,720
right now just a Div

41
00:01:47,520 --> 00:01:49,070
that says, "This is a feature,"

42
00:01:49,950 --> 00:01:54,183
and at the bottom we'll export default feature.

43
00:01:55,050 --> 00:01:57,033
Now let's hook this up to our router.

44
00:01:58,230 --> 00:01:59,220
Over inside our router,

45
00:01:59,220 --> 00:02:04,120
I'm gonna say import feature from components feature.

46
00:02:06,360 --> 00:02:08,220
And then whenever a user navigates

47
00:02:08,220 --> 00:02:12,900
to route with path of feature,

48
00:02:12,900 --> 00:02:16,023
we're gonna show them the feature component.

49
00:02:17,220 --> 00:02:21,570
Okay, so we imported feature, we defined a route for it,

50
00:02:21,570 --> 00:02:24,510
and we've also got our feature component put together.

51
00:02:24,510 --> 00:02:26,400
Let's test this out inside the browser.

52
00:02:26,400 --> 00:02:28,140
I'm gonna just refresh the page.

53
00:02:28,140 --> 00:02:30,270
I'm currently on the route feature right here.

54
00:02:30,270 --> 00:02:32,760
And so of course I do successfully see the text

55
00:02:32,760 --> 00:02:34,980
that says, "This is a feature."

56
00:02:34,980 --> 00:02:37,440
Let's sign in really quick and see what happens.

57
00:02:37,440 --> 00:02:42,063
I still have a test one, two, three@example.com.

58
00:02:43,650 --> 00:02:46,110
I'll sign in and successfully now,

59
00:02:46,110 --> 00:02:48,000
okay, I see feature, I'm on the route feature

60
00:02:48,000 --> 00:02:50,820
and I see the text, "This is a feature."

61
00:02:50,820 --> 00:02:53,310
And I can also sign out here if I want to.

62
00:02:53,310 --> 00:02:55,800
So one thing that I'm gonna point out immediately,

63
00:02:55,800 --> 00:02:57,570
remember this is a route here,

64
00:02:57,570 --> 00:03:00,210
a component that a user is only supposed to see

65
00:03:00,210 --> 00:03:02,340
after they have been authenticated.

66
00:03:02,340 --> 00:03:03,480
So let's see what happens

67
00:03:03,480 --> 00:03:06,570
when I click sign out, so I'm no longer authenticated.

68
00:03:06,570 --> 00:03:09,600
We see our message here that says, "Sorry to see you go."

69
00:03:09,600 --> 00:03:13,830
But I can manually still go back to slash feature.

70
00:03:13,830 --> 00:03:15,450
So right now there is absolutely

71
00:03:15,450 --> 00:03:18,210
no protection on this route whatsoever.

72
00:03:18,210 --> 00:03:21,030
We're not doing any sort of check to make sure,

73
00:03:21,030 --> 00:03:23,940
hey, is this user actually authenticated

74
00:03:23,940 --> 00:03:27,750
before they tried to visit this feature route right here?

75
00:03:27,750 --> 00:03:28,920
So this is definitely a big problem.

76
00:03:28,920 --> 00:03:30,870
This is the entire point that we put authentication

77
00:03:30,870 --> 00:03:33,240
into our application the first part.

78
00:03:33,240 --> 00:03:35,400
Certain parts of the app, we want to make sure that

79
00:03:35,400 --> 00:03:37,020
hey, are you actually signed in

80
00:03:37,020 --> 00:03:39,900
before we allow a user to get any type of access

81
00:03:39,900 --> 00:03:41,313
or visibility to it.

82
00:03:42,630 --> 00:03:45,360
So if you recall or if you've kind of been going through

83
00:03:45,360 --> 00:03:47,280
sections in this course in order,

84
00:03:47,280 --> 00:03:51,540
you might remember that we put together a higher order

85
00:03:51,540 --> 00:03:53,340
component in an earlier section

86
00:03:53,340 --> 00:03:56,763
which we called a require off higher order component.

87
00:03:58,020 --> 00:03:59,670
So this higher order component that we created

88
00:03:59,670 --> 00:04:01,650
in this previous section,

89
00:04:01,650 --> 00:04:04,710
the sole purpose was to kind of protect certain routes

90
00:04:04,710 --> 00:04:07,740
from a user navigating to if they haven't already

91
00:04:07,740 --> 00:04:11,070
been authenticated in some fashion with our application.

92
00:04:11,070 --> 00:04:14,430
So again, this is kind of a more meta-level discussion here

93
00:04:14,430 --> 00:04:16,380
where I'm talking about a higher order component

94
00:04:16,380 --> 00:04:18,480
that we put together in a previous section.

95
00:04:18,480 --> 00:04:20,250
But that higher erotic component that we put together

96
00:04:20,250 --> 00:04:23,400
was really completely ideal for what we're trying

97
00:04:23,400 --> 00:04:25,230
to do here for this application.

98
00:04:25,230 --> 00:04:26,550
We're trying to make sure

99
00:04:26,550 --> 00:04:29,190
that if a user is not authenticated,

100
00:04:29,190 --> 00:04:31,170
they should not see or get access

101
00:04:31,170 --> 00:04:33,020
to this feature component right here.

102
00:04:34,290 --> 00:04:37,260
So if you did not already go through that previous section

103
00:04:37,260 --> 00:04:39,750
on higher order components, that's totally fine.

104
00:04:39,750 --> 00:04:42,720
We're going to copy paste the code from that section in here

105
00:04:42,720 --> 00:04:44,940
and make immediate use of it.

106
00:04:44,940 --> 00:04:47,850
I do recommend if you have not yet gone through that section

107
00:04:47,850 --> 00:04:50,310
after we finish talking about authentication,

108
00:04:50,310 --> 00:04:53,700
I really recommend going back and going through that section

109
00:04:53,700 --> 00:04:54,960
on higher order components though.

110
00:04:54,960 --> 00:04:57,060
So really is a good topic to go over.

111
00:04:57,060 --> 00:04:58,290
We're going to make use of the code

112
00:04:58,290 --> 00:05:00,750
that was written inside that section.

113
00:05:00,750 --> 00:05:02,040
Again, if you haven't gone through it

114
00:05:02,040 --> 00:05:03,633
I really recommend you do so.

115
00:05:04,560 --> 00:05:07,440
So like I said, we're gonna do a very direct copy paste

116
00:05:07,440 --> 00:05:08,910
to reuse some code.

117
00:05:08,910 --> 00:05:13,230
I'm gonna create a new file inside of our off directory here

118
00:05:13,230 --> 00:05:17,610
and I'm gonna call it require auth dot JS.

119
00:05:17,610 --> 00:05:20,220
So then this is gonna be our higher order component

120
00:05:20,220 --> 00:05:22,570
to make sure that a user is actually logged in.

121
00:05:24,240 --> 00:05:25,860
Since we already went through the creation

122
00:05:25,860 --> 00:05:27,180
of this higher order component,

123
00:05:27,180 --> 00:05:29,190
I'm just gonna go straight over to GitHub

124
00:05:29,190 --> 00:05:31,260
and copy paste all the code for it directly

125
00:05:31,260 --> 00:05:32,850
into our project.

126
00:05:32,850 --> 00:05:37,383
So I'm gonna navigate to github.com/stevengrider.

127
00:05:39,720 --> 00:05:41,763
I'm gonna click on the repositories tab,

128
00:05:42,900 --> 00:05:45,990
and find the repo called advanced redux code.

129
00:05:45,990 --> 00:05:48,780
Remember, that's all the code for this course

130
00:05:48,780 --> 00:05:50,380
that we've been working through.

131
00:05:51,300 --> 00:05:54,480
I'm gonna find the folder for higher order components,

132
00:05:54,480 --> 00:05:55,830
here it is right here, HOC.

133
00:05:58,110 --> 00:06:00,310
Then I'm gonna go into the source directory.

134
00:06:01,320 --> 00:06:03,810
I'm gonna go into the components directory,

135
00:06:03,810 --> 00:06:06,210
and here is the require authentication

136
00:06:06,210 --> 00:06:07,617
higher order component.

137
00:06:07,617 --> 00:06:10,230
And so if you lost on the click through here,

138
00:06:10,230 --> 00:06:11,520
you can certainly pause the video.

139
00:06:11,520 --> 00:06:13,770
Here is the route that I went to

140
00:06:13,770 --> 00:06:15,453
to get to this file right here.

141
00:06:17,880 --> 00:06:19,620
So here is all the code that we need,

142
00:06:19,620 --> 00:06:21,880
I'm going to just copy all of it

143
00:06:24,030 --> 00:06:26,834
the entire file and paste it over here.

144
00:06:26,834 --> 00:06:29,700
Make sure to do a little bit of a quick check,

145
00:06:29,700 --> 00:06:31,680
just make sure that you've got all the necessities.

146
00:06:31,680 --> 00:06:33,840
We should see import at the top.

147
00:06:33,840 --> 00:06:36,240
At the very bottom, we should see

148
00:06:36,240 --> 00:06:38,040
this final set of curly braces here.

149
00:06:38,040 --> 00:06:40,740
We should also see the connect helper in here as well.

150
00:06:42,420 --> 00:06:43,410
So this is looking pretty good.

151
00:06:43,410 --> 00:06:46,410
We've got this authentication helper here.

152
00:06:46,410 --> 00:06:48,120
If you recall when we put this together,

153
00:06:48,120 --> 00:06:51,420
the purpose was to pass a component directly in

154
00:06:51,420 --> 00:06:54,240
and then if a user was not authenticated

155
00:06:54,240 --> 00:06:55,320
inside our application

156
00:06:55,320 --> 00:06:57,600
they would automatically get redirected out

157
00:06:57,600 --> 00:06:58,950
to some other route.

158
00:06:58,950 --> 00:07:00,633
In this case, the root route.

159
00:07:02,250 --> 00:07:03,810
There's one small change that we need

160
00:07:03,810 --> 00:07:05,640
to make to this application though.

161
00:07:05,640 --> 00:07:07,620
When we put the higher order component together,

162
00:07:07,620 --> 00:07:10,200
we assumed that we were going to be pulling this

163
00:07:10,200 --> 00:07:14,670
authenticated piece of state from state dot authenticated.

164
00:07:14,670 --> 00:07:16,710
But as we've put our application together

165
00:07:16,710 --> 00:07:18,540
we have that off reducer,

166
00:07:18,540 --> 00:07:22,440
which produces the off piece of state, if you recall.

167
00:07:22,440 --> 00:07:23,880
And so rather than making a reference

168
00:07:23,880 --> 00:07:25,680
to state dot authenticated,

169
00:07:25,680 --> 00:07:26,610
we're gonna make a reference

170
00:07:26,610 --> 00:07:30,903
to state dot auth dot authenticated like so.

171
00:07:33,060 --> 00:07:35,370
Okay, so we've got our higher component now,

172
00:07:35,370 --> 00:07:38,310
and we know exactly which component we want to secure

173
00:07:38,310 --> 00:07:40,410
against people logging in.

174
00:07:40,410 --> 00:07:42,210
So I'm gonna close a couple tabs,

175
00:07:42,210 --> 00:07:44,490
and let's talk about exactly what we're going to do

176
00:07:44,490 --> 00:07:48,420
to make this higher order component go to work for us.

177
00:07:48,420 --> 00:07:50,730
It's actually gonna be pretty darn straightforward.

178
00:07:50,730 --> 00:07:53,430
All we have to do is inside of our top level

179
00:07:53,430 --> 00:07:57,210
index dot JS file, I'm going to find our, excuse me,

180
00:07:57,210 --> 00:07:58,620
I'm gonna find my import statements

181
00:07:58,620 --> 00:08:02,850
and I'm going to import require auth

182
00:08:02,850 --> 00:08:06,963
from components auth require auth.

183
00:08:10,830 --> 00:08:13,380
So now at the router level,

184
00:08:13,380 --> 00:08:15,540
any route that we want to secure

185
00:08:15,540 --> 00:08:18,120
against an unauthenticated user,

186
00:08:18,120 --> 00:08:21,330
we have to just wrap the component that we're passing

187
00:08:21,330 --> 00:08:26,160
to React router with require auth like so.

188
00:08:26,160 --> 00:08:27,540
And that's it, that's the magic.

189
00:08:27,540 --> 00:08:29,850
That's basically everything in this course

190
00:08:29,850 --> 00:08:31,830
coming together in a pretty big way.

191
00:08:31,830 --> 00:08:34,470
We brought in our high order component,

192
00:08:34,470 --> 00:08:36,900
higher order components wrap existing components

193
00:08:36,900 --> 00:08:40,080
and augment functionality to them.

194
00:08:40,080 --> 00:08:42,360
We said, "Okay, I've got this feature component,

195
00:08:42,360 --> 00:08:44,250
I don't want anyone to see feature

196
00:08:44,250 --> 00:08:46,110
if they are not authenticated.

197
00:08:46,110 --> 00:08:49,890
And so we were able to very simply just wrap feature

198
00:08:49,890 --> 00:08:51,480
with require auth right here.

199
00:08:51,480 --> 00:08:53,820
So let's now test this out in the browser.

200
00:08:53,820 --> 00:08:55,530
When we're not logged in,

201
00:08:55,530 --> 00:08:57,532
this require auth higher order component

202
00:08:57,532 --> 00:09:00,060
should instantly kick us back out

203
00:09:00,060 --> 00:09:01,950
to the root route of our application.

204
00:09:01,950 --> 00:09:03,250
So let's give this a shot.

205
00:09:04,680 --> 00:09:06,570
And go back over to my project,

206
00:09:06,570 --> 00:09:09,330
notice how I'm currently on the route feature.

207
00:09:09,330 --> 00:09:11,250
I'm gonna refresh the page

208
00:09:11,250 --> 00:09:12,930
and you'll notice that when I refresh it

209
00:09:12,930 --> 00:09:15,660
I go instantly back to the root route.

210
00:09:15,660 --> 00:09:17,763
I'm gonna try going back to feature again,

211
00:09:18,720 --> 00:09:20,490
and I get kicked back to the root route.

212
00:09:20,490 --> 00:09:23,850
So awesome, looks like it's working exactly as we expect.

213
00:09:23,850 --> 00:09:28,140
Now I'm gonna try signing in with a legitimate account.

214
00:09:28,140 --> 00:09:32,460
I'm gonna sign in and only now can I see the text feature.

215
00:09:32,460 --> 00:09:33,300
This is a feature.

216
00:09:33,300 --> 00:09:36,480
Only now can I access the route slash feature.

217
00:09:36,480 --> 00:09:37,313
So this is really it.

218
00:09:37,313 --> 00:09:40,320
This is our awesome authentication app in practice.

219
00:09:40,320 --> 00:09:41,850
We definitely still have, you know, don't get me wrong

220
00:09:41,850 --> 00:09:43,560
we still have a couple topics to go over here

221
00:09:43,560 --> 00:09:44,580
without a doubt,

222
00:09:44,580 --> 00:09:46,980
but this is how we secure individual routes

223
00:09:46,980 --> 00:09:48,513
inside of our application.

224
00:09:50,100 --> 00:09:52,530
I go back to password and boom, there we go.

225
00:09:52,530 --> 00:09:55,830
Here's feature, and if I refresh the page

226
00:09:55,830 --> 00:09:58,950
which currently drops my session entirely

227
00:09:58,950 --> 00:10:01,950
I can no longer get access to the feature route.

228
00:10:01,950 --> 00:10:03,300
So this is it. This is pretty awesome.

229
00:10:03,300 --> 00:10:04,440
I really like this.

230
00:10:04,440 --> 00:10:06,390
Definitely a pretty solid approach.

231
00:10:06,390 --> 00:10:09,870
We can very precisely decide which routes

232
00:10:09,870 --> 00:10:13,680
we want to have require authentication inside of our app.

233
00:10:13,680 --> 00:10:16,410
Let's continue in the next section where we still have

234
00:10:16,410 --> 00:10:18,660
you know, a couple different topics to wrap up on.

235
00:10:18,660 --> 00:10:21,410
Let's talk about what they are inside the next section.