1
00:00:00,857 --> 00:00:04,620
‫Now the third part of the authentication flow

2
00:00:04,620 --> 00:00:08,973
‫is to protect the application against unauthorized access.

3
00:00:10,650 --> 00:00:14,820
‫So basically what we want to do is to redirect the user

4
00:00:14,820 --> 00:00:18,750
‫back to the homepage whenever they reach one of the routes

5
00:00:18,750 --> 00:00:22,563
‫that they should not reach when they are not logged in.

6
00:00:23,460 --> 00:00:28,200
‫So basically this URL, or this one, or this one.

7
00:00:28,200 --> 00:00:32,310
‫And really the entire application should not be accessible

8
00:00:32,310 --> 00:00:35,400
‫to people that are not logged in.

9
00:00:35,400 --> 00:00:38,640
‫Now in this case here, the application doesn't even work

10
00:00:38,640 --> 00:00:40,560
‫when the user is not logged in

11
00:00:40,560 --> 00:00:43,440
‫but there might be other applications that are different,

12
00:00:43,440 --> 00:00:47,040
‫that maybe just display some secret information

13
00:00:47,040 --> 00:00:48,900
‫which should not be accessible.

14
00:00:48,900 --> 00:00:52,500
‫And so let's now implement that functionality,

15
00:00:52,500 --> 00:00:55,860
‫so that protecting of all routes.

16
00:00:55,860 --> 00:00:59,010
‫Now we could add some functionality of course

17
00:00:59,010 --> 00:01:03,210
‫to every single component that is surrendered here

18
00:01:03,210 --> 00:01:05,610
‫as a product of changing the route

19
00:01:05,610 --> 00:01:08,520
‫but that would be a bit too much work.

20
00:01:08,520 --> 00:01:12,330
‫So we would have to have the exact same redirecting code

21
00:01:12,330 --> 00:01:14,010
‫in all of these components.

22
00:01:14,010 --> 00:01:16,380
‫And that doesn't make a lot of sense.

23
00:01:16,380 --> 00:01:18,930
‫So instead, what's a common practice

24
00:01:18,930 --> 00:01:21,570
‫is to create a specialized component

25
00:01:21,570 --> 00:01:25,110
‫which will handle this redirecting and then wrap

26
00:01:25,110 --> 00:01:28,413
‫the entire application in that component.

27
00:01:29,670 --> 00:01:32,703
‫So let's do that as a page right here,

28
00:01:34,860 --> 00:01:37,527
‫and let's call it ProtectedRoute.jsx.

29
00:01:45,450 --> 00:01:47,280
‫So our snippet here again,

30
00:01:47,280 --> 00:01:50,430
‫because again this is just a component

31
00:01:50,430 --> 00:01:53,280
‫and here it will receive the children,

32
00:01:53,280 --> 00:01:55,440
‫because remember how I said

33
00:01:55,440 --> 00:01:57,840
‫that we will wrap the entire application

34
00:01:57,840 --> 00:01:59,940
‫into this component.

35
00:01:59,940 --> 00:02:04,200
‫So it'll receive basically as children, all the application.

36
00:02:04,200 --> 00:02:08,640
‫And so all this does then, is to return that.

37
00:02:08,640 --> 00:02:12,120
‫So we can actually just do this.

38
00:02:12,120 --> 00:02:15,660
‫So it shouldn't add any JSX to the children.

39
00:02:15,660 --> 00:02:17,400
‫All it'll do is to return them

40
00:02:17,400 --> 00:02:20,040
‫and in case if the user is not allowed

41
00:02:20,040 --> 00:02:23,730
‫to redirect away from the application.

42
00:02:23,730 --> 00:02:27,120
‫So first of all, then this component needs to know

43
00:02:27,120 --> 00:02:30,333
‫whether the user is authenticated or not.

44
00:02:31,744 --> 00:02:33,494
‫Authenticated, so useAuth for that.

45
00:02:40,368 --> 00:02:44,160
‫And then of course we're also going to need

46
00:02:44,160 --> 00:02:47,823
‫the navigate function from React Router.

47
00:02:48,870 --> 00:02:53,100
‫And so actually we should not call the navigate function

48
00:02:53,100 --> 00:02:54,960
‫from the top level code.

49
00:02:54,960 --> 00:02:57,750
‫So that's basically an effect.

50
00:02:57,750 --> 00:03:00,567
‫And so effects belong in useEffect.

51
00:03:04,562 --> 00:03:09,562
‫Okay, and then let's say if the user is not authenticated,

52
00:03:11,160 --> 00:03:16,160
‫then just navigate to the homepage, and that's it.

53
00:03:17,280 --> 00:03:18,870
‫And we want to run this code

54
00:03:18,870 --> 00:03:22,740
‫whenever there is authenticated changes,

55
00:03:22,740 --> 00:03:26,190
‫and then we also need to include

56
00:03:26,190 --> 00:03:28,530
‫the navigate function itself.

57
00:03:28,530 --> 00:03:30,660
‫And this is actually it.

58
00:03:30,660 --> 00:03:33,750
‫This is all we have to do in this component.

59
00:03:33,750 --> 00:03:37,653
‫And so now we need to wrap our application inside of this.

60
00:03:38,550 --> 00:03:41,070
‫Now there are two places where we could do that

61
00:03:41,070 --> 00:03:44,550
‫and the first one is here in the app layout.

62
00:03:44,550 --> 00:03:49,380
‫So basically our entire application is rendered right here.

63
00:03:49,380 --> 00:03:52,470
‫And so we could wrap all this

64
00:03:52,470 --> 00:03:56,040
‫into the protected route like this.

65
00:03:56,040 --> 00:03:58,080
‫So the one we just created.

66
00:03:58,080 --> 00:04:01,140
‫However, I think it's a lot more explicit

67
00:04:01,140 --> 00:04:05,820
‫to actually do this right here in the application.

68
00:04:05,820 --> 00:04:10,820
‫So in App.jsx where we actually define all our routes.

69
00:04:11,010 --> 00:04:12,663
‫So doing it right here.

70
00:04:13,980 --> 00:04:16,830
‫So where do you think we should do this?

71
00:04:16,830 --> 00:04:20,490
‫Maybe in each of the routes individually,

72
00:04:20,490 --> 00:04:25,401
‫well, again, not really, but instead as we just said earlier

73
00:04:25,401 --> 00:04:29,100
‫our entire application is actually in the app layout.

74
00:04:29,100 --> 00:04:32,580
‫And so we can very easily wrap that app layout

75
00:04:32,580 --> 00:04:35,250
‫into the protected route right here,

76
00:04:35,250 --> 00:04:39,030
‫because remember that this simply needs to be an element.

77
00:04:39,030 --> 00:04:41,403
‫It doesn't matter how complex it is.

78
00:04:42,750 --> 00:04:46,413
‫And so let's include protected route here,

79
00:04:47,880 --> 00:04:51,213
‫and that's not what I wanted.

80
00:04:58,050 --> 00:05:02,640
‫Yeah, okay.

81
00:05:02,640 --> 00:05:07,470
‫So in case that we are going to any of the URLs

82
00:05:07,470 --> 00:05:12,030
‫in the application, so that app slash cities,

83
00:05:12,030 --> 00:05:16,320
‫or slash cities, slash ID, or slash countries,

84
00:05:16,320 --> 00:05:18,513
‫or app slash form.

85
00:05:19,770 --> 00:05:23,610
‫So in all those situations, this app layout component here

86
00:05:23,610 --> 00:05:25,650
‫is rendered, right?

87
00:05:25,650 --> 00:05:29,220
‫And then in there is where each of these components

88
00:05:29,220 --> 00:05:30,750
‫is also rendered.

89
00:05:30,750 --> 00:05:34,530
‫And so the idea is to wrap this entire component

90
00:05:34,530 --> 00:05:36,210
‫into the protected route.

91
00:05:36,210 --> 00:05:38,520
‫And so this will then check whether the user

92
00:05:38,520 --> 00:05:40,950
‫is currently logged in or not.

93
00:05:40,950 --> 00:05:44,910
‫And if not, it will simply redirect the user

94
00:05:44,910 --> 00:05:47,040
‫back here to the homepage.

95
00:05:47,040 --> 00:05:52,040
‫So let's try this out and if we reload this page here now,

96
00:05:52,140 --> 00:05:54,123
‫then it should already be working.

97
00:05:54,990 --> 00:05:56,100
‫So let's see.

98
00:05:56,100 --> 00:05:57,000
‫And, (chuckles)

99
00:05:57,000 --> 00:05:59,850
‫actually that doesn't work.

100
00:05:59,850 --> 00:06:03,360
‫So let's go back to our protected route here,

101
00:06:03,360 --> 00:06:07,110
‫and let's try to understand what actually happens.

102
00:06:07,110 --> 00:06:10,320
‫So first let's see what the problem is.

103
00:06:10,320 --> 00:06:13,770
‫And so we are still apparently trying

104
00:06:13,770 --> 00:06:17,490
‫to read something out of avatar here in the user component,

105
00:06:17,490 --> 00:06:19,650
‫which means that the user component

106
00:06:19,650 --> 00:06:23,130
‫is somehow still trying to be rendered.

107
00:06:23,130 --> 00:06:27,000
‫So let's use our understanding of the use effect hook

108
00:06:27,000 --> 00:06:28,833
‫in order to solve this bug.

109
00:06:29,790 --> 00:06:34,680
‫So remember how our effect is actually only executed

110
00:06:34,680 --> 00:06:37,950
‫after the component has already been rendered.

111
00:06:37,950 --> 00:06:39,690
‫And so that is actually the key

112
00:06:39,690 --> 00:06:41,853
‫to understanding why this happens.

113
00:06:42,840 --> 00:06:45,510
‫So our component will actually

114
00:06:45,510 --> 00:06:47,490
‫initially render the children,

115
00:06:47,490 --> 00:06:50,640
‫which does of course include the user.

116
00:06:50,640 --> 00:06:54,390
‫And so then of course everything that the user

117
00:06:54,390 --> 00:06:58,500
‫is trying to read, from the user object does not exist.

118
00:06:58,500 --> 00:07:00,930
‫So that's why we get this error.

119
00:07:00,930 --> 00:07:04,800
‫So right after that is when the navigation happens.

120
00:07:04,800 --> 00:07:08,910
‫But in that split second, we are still trying to attempt,

121
00:07:08,910 --> 00:07:12,300
‫so we are still rendering the user component.

122
00:07:12,300 --> 00:07:15,660
‫And so again, that then gives us that error

123
00:07:15,660 --> 00:07:19,050
‫because again, this effect is only executed

124
00:07:19,050 --> 00:07:21,870
‫after the render has already happened.

125
00:07:21,870 --> 00:07:25,920
‫And so here we should now return conditionally.

126
00:07:25,920 --> 00:07:29,190
‫So we can say if is authenticated,

127
00:07:29,190 --> 00:07:31,590
‫we can actually return the children,

128
00:07:31,590 --> 00:07:35,370
‫but if not, then let's just return null.

129
00:07:35,370 --> 00:07:37,353
‫And so this should then solve it.

130
00:07:38,760 --> 00:07:42,420
‫So basically in case that we are not authenticated,

131
00:07:42,420 --> 00:07:47,220
‫then here in place of the app layout, null will be rendered.

132
00:07:47,220 --> 00:07:48,540
‫Which is not a problem,

133
00:07:48,540 --> 00:07:52,053
‫because we don't want to render the application here anyway.

134
00:07:53,280 --> 00:07:57,990
‫So let's retry, let's log in.

135
00:07:57,990 --> 00:08:01,020
‫And if we reload now, then of course the user

136
00:08:01,020 --> 00:08:03,720
‫will not be authenticated in the beginning

137
00:08:03,720 --> 00:08:05,493
‫as we go to this URL.

138
00:08:06,390 --> 00:08:10,260
‫And so you see that we get immediately redirected here.

139
00:08:10,260 --> 00:08:11,790
‫And of course the same happens

140
00:08:11,790 --> 00:08:15,420
‫if we just try to go to the app like this.

141
00:08:15,420 --> 00:08:18,750
‫So as I hit Enter now, then again immediately

142
00:08:18,750 --> 00:08:20,223
‫we get redirected here.

143
00:08:21,600 --> 00:08:24,150
‫Great, so now it works.

144
00:08:24,150 --> 00:08:26,587
‫And I just want to draw your attention

145
00:08:26,587 --> 00:08:31,380
‫to the fact that here sometimes,

146
00:08:31,380 --> 00:08:34,320
‫the background image does not show up.

147
00:08:34,320 --> 00:08:36,663
‫Now in this case, it actually did show up,

148
00:08:37,770 --> 00:08:41,160
‫but somehow it doesn't sometimes.

149
00:08:41,160 --> 00:08:43,500
‫And so that's happening because here

150
00:08:43,500 --> 00:08:47,250
‫we are trying to read the background image from slash app,

151
00:08:47,250 --> 00:08:49,500
‫which is not where it exists.

152
00:08:49,500 --> 00:08:51,753
‫So it is actually in the root folder.

153
00:08:52,590 --> 00:08:56,250
‫So let's come here to the CSS module

154
00:08:56,250 --> 00:08:58,680
‫where we are using that background image.

155
00:08:58,680 --> 00:09:00,603
‫And so here we are missing this slash.

156
00:09:02,220 --> 00:09:03,690
‫And so now that works.

157
00:09:03,690 --> 00:09:06,993
‫And now that is not going to happen ever again.

158
00:09:08,190 --> 00:09:11,700
‫So not sure how I triggered that, but I think it was this.

159
00:09:11,700 --> 00:09:13,683
‫And yeah, now that works.

160
00:09:14,760 --> 00:09:17,640
‫Nice, and so our authentication

161
00:09:17,640 --> 00:09:21,180
‫is now actually completely implemented.

162
00:09:21,180 --> 00:09:25,560
‫So we completed the three steps of the authentication

163
00:09:25,560 --> 00:09:28,830
‫even though it's a bit of a fake authentication,

164
00:09:28,830 --> 00:09:31,140
‫but that's not really important.

165
00:09:31,140 --> 00:09:34,140
‫Now we are going to come back to this application here

166
00:09:34,140 --> 00:09:36,510
‫in the next section one more time,

167
00:09:36,510 --> 00:09:40,470
‫but I want already to fix this ugly title

168
00:09:40,470 --> 00:09:42,060
‫that we still have here.

169
00:09:42,060 --> 00:09:44,370
‫So it's still this fake title.

170
00:09:44,370 --> 00:09:48,870
‫And so let's come here to our index.html file,

171
00:09:48,870 --> 00:09:50,940
‫and let's change that.

172
00:09:50,940 --> 00:09:55,020
‫So I don't know why I didn't change that earlier.

173
00:09:55,020 --> 00:09:56,427
‫So that's Worldwise.

174
00:09:58,110 --> 00:10:01,623
‫And in here, let's just use some divider like this.

175
00:10:03,720 --> 00:10:08,133
‫Keep track of your adventures.

176
00:10:09,600 --> 00:10:12,840
‫So that looks a little bit nicer indeed.

177
00:10:12,840 --> 00:10:15,753
‫And now we just need to change the fav icon there.

178
00:10:16,800 --> 00:10:20,700
‫So that's probably right here.

179
00:10:20,700 --> 00:10:23,340
‫Yeah, it's this logo.png.

180
00:10:23,340 --> 00:10:28,260
‫I think actually it's this icon.png.

181
00:10:28,260 --> 00:10:33,260
‫So icon.png, and so then here

182
00:10:33,600 --> 00:10:37,233
‫it's also an image.png,

183
00:10:38,520 --> 00:10:40,230
‫and nice.

184
00:10:40,230 --> 00:10:43,143
‫So that's looking a lot more professional already.

185
00:10:44,280 --> 00:10:48,990
‫Now, okay, and with this, we actually finish this section

186
00:10:48,990 --> 00:10:52,890
‫but again, we are actually coming back to this project

187
00:10:52,890 --> 00:10:54,690
‫in the next section again,

188
00:10:54,690 --> 00:10:58,140
‫but the features are actually all implemented now.

189
00:10:58,140 --> 00:11:00,333
‫So application is feature complete.

190
00:11:01,230 --> 00:11:05,760
‫And yeah, it was a long journey, but I hope it was worth it.

191
00:11:05,760 --> 00:11:07,560
‫And I hope that you really enjoyed

192
00:11:07,560 --> 00:11:09,840
‫building this project together,

193
00:11:09,840 --> 00:11:11,610
‫over all of these lectures.

194
00:11:11,610 --> 00:11:13,620
‫So I think you can be really proud

195
00:11:13,620 --> 00:11:16,050
‫for having this project now

196
00:11:16,050 --> 00:11:18,273
‫and hopefully you feel the same.