1
00:00:00,750 --> 00:00:03,510
Instructor: By defining our context types

2
00:00:03,510 --> 00:00:05,220
on a class level property,

3
00:00:05,220 --> 00:00:07,260
we now have access to our router,

4
00:00:07,260 --> 00:00:08,193
React Router.

5
00:00:09,120 --> 00:00:11,280
Let's go ahead and give Reactor Router a shot.

6
00:00:11,280 --> 00:00:13,380
Let's just do some something totally goofy

7
00:00:13,380 --> 00:00:15,570
just to see if we can get it working.

8
00:00:15,570 --> 00:00:17,040
Let's say that

9
00:00:17,040 --> 00:00:18,960
we're gonna change the purpose of authentication

10
00:00:18,960 --> 00:00:19,927
and we're gonna say,

11
00:00:19,927 --> 00:00:22,440
"If a user ever tries to visit this component

12
00:00:22,440 --> 00:00:24,270
they should just instantly be kicked back

13
00:00:24,270 --> 00:00:25,830
to the home route."

14
00:00:25,830 --> 00:00:27,780
So let's see what that would look like.

15
00:00:28,620 --> 00:00:30,370
I'm gonna add a componentWillMount.

16
00:00:32,273 --> 00:00:34,110
This is gonna run every single time

17
00:00:34,110 --> 00:00:36,510
that this component is about to be rendered to the dom.

18
00:00:36,510 --> 00:00:37,830
And then inside of here,

19
00:00:37,830 --> 00:00:42,830
I'm gonna say this.context.router.push, home.

20
00:00:45,210 --> 00:00:46,590
Our root route.

21
00:00:46,590 --> 00:00:49,290
So whenever this component is about to render,

22
00:00:49,290 --> 00:00:51,600
just kick our users back to the home route.

23
00:00:51,600 --> 00:00:54,060
Let's see what this looks like in practice.

24
00:00:54,060 --> 00:00:55,920
I'm gonna go back to Chrome,

25
00:00:55,920 --> 00:00:57,303
refresh the page.

26
00:00:58,200 --> 00:01:00,780
And then I'm currently on local host 80 80.

27
00:01:00,780 --> 00:01:03,030
I'm gonna try navigating two Resources.

28
00:01:03,030 --> 00:01:04,860
So I'm gonna click on Resources

29
00:01:04,860 --> 00:01:06,120
and you can see that the URL

30
00:01:06,120 --> 00:01:09,180
changes for like just the smallest instant

31
00:01:09,180 --> 00:01:11,430
and then it just disappears.

32
00:01:11,430 --> 00:01:12,720
So this is React Router

33
00:01:12,720 --> 00:01:14,940
in our higher order component in action.

34
00:01:14,940 --> 00:01:17,220
If the user is trying to visit Resources,

35
00:01:17,220 --> 00:01:20,280
they just instantly get booted back to local host 80 80

36
00:01:20,280 --> 00:01:22,413
or our route route, so to speak.

37
00:01:23,310 --> 00:01:24,870
So we're still doing our console log over here.

38
00:01:24,870 --> 00:01:26,760
Let's clean that up really quick.

39
00:01:26,760 --> 00:01:28,410
So inside of our render method

40
00:01:28,410 --> 00:01:29,940
I'm gonna dump the console log.

41
00:01:29,940 --> 00:01:30,930
Very good.

42
00:01:30,930 --> 00:01:32,760
Now the only thing we need to do

43
00:01:32,760 --> 00:01:36,660
is figure out how to handle our user,

44
00:01:36,660 --> 00:01:38,610
or how to only navigate our user around

45
00:01:38,610 --> 00:01:40,980
when they are not authenticated.

46
00:01:40,980 --> 00:01:42,630
So luckily, we already hooked up

47
00:01:42,630 --> 00:01:44,880
our application state to this component.

48
00:01:44,880 --> 00:01:48,430
So we can just say if this component is about to mount

49
00:01:49,730 --> 00:01:54,730
and if the user is not currently authenticated,

50
00:01:58,050 --> 00:02:01,590
then I want to navigate the user to the root route.

51
00:02:01,590 --> 00:02:04,770
So if not authenticated,

52
00:02:04,770 --> 00:02:07,140
navigate the user back to the root route.

53
00:02:07,140 --> 00:02:08,460
Let's go ahead and give this a shot.

54
00:02:08,460 --> 00:02:10,169
I'm gonna save,

55
00:02:10,169 --> 00:02:11,370
flip back over to the browser.

56
00:02:11,370 --> 00:02:13,473
I'm currently on local host 80 80.

57
00:02:14,490 --> 00:02:15,323
I refresh.

58
00:02:15,323 --> 00:02:16,710
I am not signed in

59
00:02:16,710 --> 00:02:18,270
and I'm gonna go to Resources.

60
00:02:18,270 --> 00:02:19,140
And huh,

61
00:02:19,140 --> 00:02:20,910
I'm still getting kicked back right away.

62
00:02:20,910 --> 00:02:22,800
So this is kind of interesting.

63
00:02:22,800 --> 00:02:25,110
Let's try signing in.

64
00:02:25,110 --> 00:02:26,250
I'm gonna go to Resources

65
00:02:26,250 --> 00:02:27,780
and now just as I expect,

66
00:02:27,780 --> 00:02:31,560
I'm able to successfully go to the Resources page.

67
00:02:31,560 --> 00:02:33,930
So this is basically our authentication component

68
00:02:33,930 --> 00:02:36,270
in great practice right here.

69
00:02:36,270 --> 00:02:38,250
If I go to Home and Sign Out,

70
00:02:38,250 --> 00:02:40,410
I can't go to Resources.

71
00:02:40,410 --> 00:02:43,230
If I go to Sign In and then I go to Resources,

72
00:02:43,230 --> 00:02:44,820
boom, I'm good to go.

73
00:02:44,820 --> 00:02:46,200
Awesome.

74
00:02:46,200 --> 00:02:47,790
So this is working pretty well.

75
00:02:47,790 --> 00:02:50,730
Definitely this is our higher order component practice,

76
00:02:50,730 --> 00:02:52,260
definitely what we wanna achieve.

77
00:02:52,260 --> 00:02:54,240
There's just something a little bit funky here.

78
00:02:54,240 --> 00:02:56,190
I'm gonna click Sign Out

79
00:02:56,190 --> 00:02:59,853
and you can see that I'm still on this component right here.

80
00:03:00,690 --> 00:03:03,450
I'm still able to see the protected route

81
00:03:03,450 --> 00:03:05,280
even though I just signed out.

82
00:03:05,280 --> 00:03:07,680
So chances are that if our user signs out

83
00:03:07,680 --> 00:03:10,380
or we kind of forcibly sign our user out,

84
00:03:10,380 --> 00:03:11,460
we would want to make sure

85
00:03:11,460 --> 00:03:14,550
that they get kicked back to the homepage as well.

86
00:03:14,550 --> 00:03:17,580
So to handle this kind of edge case,

87
00:03:17,580 --> 00:03:20,010
we can define another life cycle method

88
00:03:20,010 --> 00:03:22,500
called componentWillUpdate.

89
00:03:22,500 --> 00:03:24,100
So we'll do componentWillUpdate.

90
00:03:25,980 --> 00:03:28,140
And componentWillUpdate gets called

91
00:03:28,140 --> 00:03:30,180
whenever the component is about to be handed

92
00:03:30,180 --> 00:03:31,653
a new set of props.

93
00:03:32,640 --> 00:03:34,200
Or be re-rendered.

94
00:03:34,200 --> 00:03:38,583
And the first argument to this is nextProps.

95
00:03:39,660 --> 00:03:42,120
So this nextProps object

96
00:03:42,120 --> 00:03:44,400
represents what the next set of properties

97
00:03:44,400 --> 00:03:46,650
the component will be rendered with.

98
00:03:46,650 --> 00:03:47,880
So this handles the case

99
00:03:47,880 --> 00:03:51,330
in which a user would view our protected route.

100
00:03:51,330 --> 00:03:52,650
Then click the Sign Out button

101
00:03:52,650 --> 00:03:55,500
and we expect them to get kicked back.

102
00:03:55,500 --> 00:03:56,520
When we click Sign Out,

103
00:03:56,520 --> 00:03:58,830
we know that our component's gonna re-render

104
00:03:58,830 --> 00:04:01,020
but only componentWillMount

105
00:04:01,020 --> 00:04:02,340
is checking for whether or not

106
00:04:02,340 --> 00:04:03,930
the user needs to get kicked out.

107
00:04:03,930 --> 00:04:07,590
So once the user is already looking at the Resources page,

108
00:04:07,590 --> 00:04:09,870
componentWillMount has already ran.

109
00:04:09,870 --> 00:04:12,270
And so we need to make sure that we call it again

110
00:04:12,270 --> 00:04:15,210
whenever the component is about to be updated.

111
00:04:15,210 --> 00:04:17,279
So now we're gonna have very similar logic in here.

112
00:04:17,279 --> 00:04:22,140
We'll say if nextProps.authenticated.

113
00:04:22,140 --> 00:04:24,480
So if the next version of props that come through

114
00:04:24,480 --> 00:04:26,820
if they're still not authenticated,

115
00:04:26,820 --> 00:04:31,820
this.context.router.push back to the home route.

116
00:04:32,640 --> 00:04:34,113
All right, let's save this.

117
00:04:35,280 --> 00:04:36,780
We'll refresh

118
00:04:36,780 --> 00:04:38,670
and you can see that we just got kicked back

119
00:04:38,670 --> 00:04:39,870
to local host 80. 80.

120
00:04:39,870 --> 00:04:41,730
Great.
I'm gonna click Resources.

121
00:04:41,730 --> 00:04:43,470
I can't go there.

122
00:04:43,470 --> 00:04:44,820
I'm gonna Sign In.

123
00:04:44,820 --> 00:04:46,470
Now I can go to Resources

124
00:04:46,470 --> 00:04:48,390
and now when I Sign Out, boom.

125
00:04:48,390 --> 00:04:51,180
I get kicked back to our Home route.

126
00:04:51,180 --> 00:04:52,013
So that's it.

127
00:04:52,013 --> 00:04:54,090
That's our authenticated component

128
00:04:54,090 --> 00:04:58,230
or our authenticated higher order component in practice.

129
00:04:58,230 --> 00:04:59,550
This looks great.

130
00:04:59,550 --> 00:05:02,523
Let's go ahead and do a wrap up in the next section.