1
00:00:00,630 --> 00:00:01,950
-: So we now have the skeleton

2
00:00:01,950 --> 00:00:04,860
of our higher order component put together.

3
00:00:04,860 --> 00:00:07,500
We export a function from this file

4
00:00:07,500 --> 00:00:10,410
and if we call this function with a component

5
00:00:10,410 --> 00:00:13,350
we will get back another component class

6
00:00:13,350 --> 00:00:16,470
that wraps the one that we call this function with.

7
00:00:16,470 --> 00:00:18,990
So let's see how this works in practice.

8
00:00:18,990 --> 00:00:21,990
I'm gonna flip over to our top level index.js,

9
00:00:21,990 --> 00:00:23,730
which holds our router.

10
00:00:23,730 --> 00:00:27,390
And so the goal here is to call our resources component

11
00:00:27,390 --> 00:00:29,760
which is the one that we want to limit authentication

12
00:00:29,760 --> 00:00:34,760
or limit access to using our higher order component.

13
00:00:35,070 --> 00:00:37,520
So I'm going to import our higher order component

14
00:00:39,150 --> 00:00:40,810
and I'm gonna call it requireAuth

15
00:00:42,390 --> 00:00:47,390
from components require authentication.

16
00:00:49,770 --> 00:00:52,890
Now remember, requireAuth right now is just a function.

17
00:00:52,890 --> 00:00:55,110
If we pass a component to this function

18
00:00:55,110 --> 00:00:57,090
we will get our wrapped component back

19
00:00:57,090 --> 00:00:59,670
which is something that we can render.

20
00:00:59,670 --> 00:01:01,410
So in practice it's really straightforward.

21
00:01:01,410 --> 00:01:04,110
We're just gonna call requireAuth with a component

22
00:01:04,110 --> 00:01:06,120
that we wanna require authentication for,

23
00:01:06,120 --> 00:01:08,550
which is gonna be resources.

24
00:01:08,550 --> 00:01:12,460
So we will wrap resources with requireAuth like so.

25
00:01:15,180 --> 00:01:16,380
I'm gonna save this file

26
00:01:16,380 --> 00:01:17,790
and then we'll flip it over to browser

27
00:01:17,790 --> 00:01:19,690
and make sure that it's still working.

28
00:01:20,820 --> 00:01:21,840
I can refresh

29
00:01:21,840 --> 00:01:24,420
and it's not really doing anything for us just yet,

30
00:01:24,420 --> 00:01:27,000
but definitely everything is still working.

31
00:01:27,000 --> 00:01:29,160
Let's throw a little bit of a console log

32
00:01:29,160 --> 00:01:30,570
into our higher order component

33
00:01:30,570 --> 00:01:33,320
just to make sure that it's still working as we expect.

34
00:01:34,380 --> 00:01:36,870
So I'll flip over to our higher order component.

35
00:01:36,870 --> 00:01:39,240
And in the render method right here,

36
00:01:39,240 --> 00:01:44,240
I'm just gonna console log rendering, composed component.

37
00:01:49,717 --> 00:01:51,060
And so make sure that you've got a string

38
00:01:51,060 --> 00:01:52,410
and then a comma in between.

39
00:01:52,410 --> 00:01:54,690
So second argument will be our ComposedComponent

40
00:01:54,690 --> 00:01:56,910
the one that we're going to try to wrap

41
00:01:56,910 --> 00:01:58,740
with this higher order component.

42
00:01:58,740 --> 00:02:03,740
So I'm gonna save. We'll refresh, and we get rendering

43
00:02:04,320 --> 00:02:07,650
and function and we get some jsx in here.

44
00:02:07,650 --> 00:02:10,410
But you can see the text "Super Special Secret Recipe"

45
00:02:10,410 --> 00:02:12,810
which is our resource list right here.

46
00:02:12,810 --> 00:02:15,000
So we're definitely calling this thing correctly

47
00:02:15,000 --> 00:02:16,350
and we're definitely rendering

48
00:02:16,350 --> 00:02:18,480
our higher order component right here.

49
00:02:18,480 --> 00:02:19,533
So this looks great.

50
00:02:20,430 --> 00:02:23,880
I'm gonna console or delete the console log back here.

51
00:02:23,880 --> 00:02:26,520
Now the only thing we need to do now is figure out

52
00:02:26,520 --> 00:02:28,410
number one, how do we tell

53
00:02:28,410 --> 00:02:31,050
if a user is currently authenticated or not?

54
00:02:31,050 --> 00:02:34,470
And number two, if they're not, how do we handle them?

55
00:02:34,470 --> 00:02:36,300
So step one is really easy.

56
00:02:36,300 --> 00:02:38,670
Step one, figuring out whether or not the user

57
00:02:38,670 --> 00:02:42,640
is currently authenticated means we just need to connect

58
00:02:43,950 --> 00:02:46,953
our authentication class to our redux store.

59
00:02:48,120 --> 00:02:51,240
When we do that, we'll pull off the authenticated property

60
00:02:51,240 --> 00:02:53,640
and if they are currently authenticated, then great

61
00:02:53,640 --> 00:02:55,710
we can let this component render.

62
00:02:55,710 --> 00:02:58,830
If it's not, then we'll handle that case appropriately.

63
00:02:58,830 --> 00:03:00,690
So let's give it a shot.

64
00:03:00,690 --> 00:03:03,543
At the top we will import our connect helper,

65
00:03:07,830 --> 00:03:09,600
and then inside

66
00:03:09,600 --> 00:03:12,270
of our return statement right here, or just below the

67
00:03:12,270 --> 00:03:15,120
or just above the return statement, excuse me

68
00:03:15,120 --> 00:03:18,100
we'll define our mapStateToProps

69
00:03:19,590 --> 00:03:21,780
which gets called with state.

70
00:03:21,780 --> 00:03:24,430
And from here will return authenticated

71
00:03:25,650 --> 00:03:27,633
is state.authenticated.

72
00:03:29,190 --> 00:03:31,740
Then instead of returning just authentication

73
00:03:31,740 --> 00:03:35,070
we'll return our wrapped version of authentication.

74
00:03:35,070 --> 00:03:37,440
Remember, the connect function right here

75
00:03:37,440 --> 00:03:39,870
is really a higher order component in of itself.

76
00:03:39,870 --> 00:03:42,210
So we're wrapping a higher order component

77
00:03:42,210 --> 00:03:44,310
with a higher order component essentially.

78
00:03:45,150 --> 00:03:47,940
We can nest these higher order components

79
00:03:47,940 --> 00:03:49,980
as deeply as we want.

80
00:03:49,980 --> 00:03:52,110
So we could add on, say even another one right here

81
00:03:52,110 --> 00:03:53,283
if we so chose.

82
00:03:55,290 --> 00:03:58,080
All right, let's go ahead and now do a console log

83
00:03:58,080 --> 00:03:59,523
inside of our render method,

84
00:04:01,260 --> 00:04:04,860
this.props authenticated.

85
00:04:04,860 --> 00:04:05,790
So let's just make sure,

86
00:04:05,790 --> 00:04:08,310
can we figure out inside of this component,

87
00:04:08,310 --> 00:04:11,400
whether or not the user is currently authenticated?

88
00:04:11,400 --> 00:04:13,713
I'm gonna save, flip back over.

89
00:04:14,940 --> 00:04:17,519
And we instantly get a console log here a false,

90
00:04:17,519 --> 00:04:19,470
no, the user is not currently authenticated

91
00:04:19,470 --> 00:04:20,310
which makes sense

92
00:04:20,310 --> 00:04:22,620
because we see the button right here says sign in

93
00:04:22,620 --> 00:04:25,230
which indicates that they're not currently signed in.

94
00:04:25,230 --> 00:04:28,350
So we'll sign in and it flips over to true,

95
00:04:28,350 --> 00:04:32,040
it sign out, sign in, sign out, and it flips perfectly.

96
00:04:32,040 --> 00:04:32,940
Great. So that means

97
00:04:32,940 --> 00:04:35,250
that we have our current authentication state

98
00:04:35,250 --> 00:04:37,710
inside of our higher order component.

99
00:04:37,710 --> 00:04:40,350
Now the only thing we need to do is figure out

100
00:04:40,350 --> 00:04:42,990
if the user is currently not authenticated

101
00:04:42,990 --> 00:04:45,480
we need to kick them out of this entire route.

102
00:04:45,480 --> 00:04:48,130
So let's take a shot of that inside the next section.