1 00:00:00,600 --> 00:00:02,009 -: So, our app is now developed 2 00:00:02,009 --> 00:00:05,880 to a spot where we have a home route, a resources route 3 00:00:05,880 --> 00:00:08,310 and the user can sign in and sign out. 4 00:00:08,310 --> 00:00:10,800 So, we have some at least internal representation 5 00:00:10,800 --> 00:00:13,500 of this authentication flag. 6 00:00:13,500 --> 00:00:16,020 So now, we get to get to the really interesting stuff, 7 00:00:16,020 --> 00:00:17,370 the higher order components. 8 00:00:17,370 --> 00:00:20,040 So, I know it's been a long time to lead up to this, 9 00:00:20,040 --> 00:00:21,120 but now that we've got all 10 00:00:21,120 --> 00:00:23,250 of the kind of infrastructure in place 11 00:00:23,250 --> 00:00:25,470 the rest of this is gonna come over to pretty nicely. 12 00:00:25,470 --> 00:00:27,390 I think you're gonna like it. 13 00:00:27,390 --> 00:00:29,130 So, just to make sure that we're on the same page 14 00:00:29,130 --> 00:00:30,390 of where we're trying to go here. 15 00:00:30,390 --> 00:00:31,470 I'm gonna pull a diagram 16 00:00:31,470 --> 00:00:34,650 on the screen that we've looked at one time before. 17 00:00:34,650 --> 00:00:35,550 So, this is the purpose 18 00:00:35,550 --> 00:00:38,730 of our authentication higher order component. 19 00:00:38,730 --> 00:00:40,800 We want to have a higher order component 20 00:00:40,800 --> 00:00:43,590 that we can choose to wrap any child component 21 00:00:43,590 --> 00:00:44,583 that we care about. 22 00:00:46,380 --> 00:00:48,390 Once a component has been wrapped 23 00:00:48,390 --> 00:00:50,310 by this higher order component, 24 00:00:50,310 --> 00:00:52,620 it's gonna give that target component 25 00:00:52,620 --> 00:00:55,410 or that child component, or that composed component. 26 00:00:55,410 --> 00:00:57,600 These are all kind of interchangeable terms here. 27 00:00:57,600 --> 00:00:59,940 Some additional behavior. 28 00:00:59,940 --> 00:01:01,497 In particular, we're gonna watch 29 00:01:01,497 --> 00:01:05,489 for if the user tries to visit a protected route. 30 00:01:05,489 --> 00:01:08,190 If the user tries to visit a protected route 31 00:01:08,190 --> 00:01:10,410 and they are currently logged in, so yes 32 00:01:10,410 --> 00:01:12,510 they're currently authenticated, 33 00:01:12,510 --> 00:01:14,910 then we're gonna allow the user access. 34 00:01:14,910 --> 00:01:16,410 But if they're not logged in, 35 00:01:16,410 --> 00:01:18,360 if they're in this no case right here, 36 00:01:18,360 --> 00:01:21,810 we're gonna redirect the user back to the home route. 37 00:01:21,810 --> 00:01:23,400 So again, that's the purpose 38 00:01:23,400 --> 00:01:25,950 of this higher order component that we're creating. 39 00:01:27,840 --> 00:01:29,820 So, the good thing about higher order components 40 00:01:29,820 --> 00:01:31,590 and actually putting them together is 41 00:01:31,590 --> 00:01:34,380 that they really follow a very common pattern 42 00:01:34,380 --> 00:01:37,110 between every higher order component 43 00:01:37,110 --> 00:01:37,943 that you'll ever create. 44 00:01:37,943 --> 00:01:39,330 Very common pattern. 45 00:01:39,330 --> 00:01:40,440 The behavior that you stick 46 00:01:40,440 --> 00:01:42,600 into it is gonna be a little bit different 47 00:01:42,600 --> 00:01:46,020 but the code itself is gonna generally look pretty similar. 48 00:01:46,020 --> 00:01:47,910 So, for this first part that we're gonna go through. 49 00:01:47,910 --> 00:01:52,167 We're gonna put up the code that's gonna be very repeatable, 50 00:01:52,167 --> 00:01:55,620 very copy pastable to other projects in the future. 51 00:01:55,620 --> 00:01:57,480 Once we get that code on the screen, I'll say, 52 00:01:57,480 --> 00:02:00,369 okay, now we're gonna start adding some very custom, 53 00:02:00,369 --> 00:02:03,870 some very custom logic to this higher order component. 54 00:02:03,870 --> 00:02:06,240 So, let's go ahead and get started. 55 00:02:06,240 --> 00:02:08,280 Inside of our components directory, 56 00:02:08,280 --> 00:02:11,160 I'm gonna make a new file, and this new file is 57 00:02:11,160 --> 00:02:13,410 gonna contain our higher order component. 58 00:02:13,410 --> 00:02:14,790 And I'm going to name the file 59 00:02:14,790 --> 00:02:17,227 after kind of what this higher order component does 60 00:02:17,227 --> 00:02:19,950 or tries to accomplish. 61 00:02:19,950 --> 00:02:21,630 What it's really gonna do is it's going 62 00:02:21,630 --> 00:02:24,630 to require authentication. 63 00:02:24,630 --> 00:02:27,840 So, I'll call it require authentication dot js. 64 00:02:27,840 --> 00:02:30,750 You could also call it require off or anything similar 65 00:02:30,750 --> 00:02:31,583 like that. 66 00:02:32,970 --> 00:02:35,850 Also, one other quick note, it's very common 67 00:02:35,850 --> 00:02:37,800 to place all your higher order components 68 00:02:37,800 --> 00:02:41,160 into a nested directory inside of your components folder. 69 00:02:41,160 --> 00:02:42,750 I'm not gonna do that this time around 70 00:02:42,750 --> 00:02:45,360 just because we've only got four files in here. 71 00:02:45,360 --> 00:02:47,190 But if you want to, you could definitely toss it 72 00:02:47,190 --> 00:02:50,070 into a nested directory into in here. 73 00:02:50,070 --> 00:02:50,970 Totally up to you. 74 00:02:52,170 --> 00:02:55,151 Okay, so let's get started on the very reproducible, 75 00:02:55,151 --> 00:02:57,660 very copy pastable code. 76 00:02:57,660 --> 00:03:01,410 At the top, we're going to import React 77 00:03:01,410 --> 00:03:04,083 and component from React. 78 00:03:05,430 --> 00:03:07,530 And then, here's where it's gonna get really interesting. 79 00:03:07,530 --> 00:03:09,000 Now, we're gonna put the code on the screen 80 00:03:09,000 --> 00:03:12,690 and then as usual, we'll talk about exactly what it's doing. 81 00:03:12,690 --> 00:03:14,670 So. I'm going to export default. 82 00:03:14,670 --> 00:03:18,510 And rather than exporting default a class, 83 00:03:18,510 --> 00:03:22,110 we're going to export a function here instead. 84 00:03:22,110 --> 00:03:22,943 All right. 85 00:03:22,943 --> 00:03:25,080 So, this is where it's getting a little bit interesting. 86 00:03:25,080 --> 00:03:29,283 Now, I have one argument to this function. 87 00:03:30,150 --> 00:03:32,340 And the argument is gonna be the component 88 00:03:32,340 --> 00:03:34,170 that I want to wrap 89 00:03:34,170 --> 00:03:37,830 with my require authentication, higher order component. 90 00:03:37,830 --> 00:03:39,720 And by convention we usually refer 91 00:03:39,720 --> 00:03:44,583 to it as the composed component like so. 92 00:03:45,750 --> 00:03:47,100 Now, we're gonna put some more code 93 00:03:47,100 --> 00:03:49,020 that's gonna look a little mysterious, so bear with me. 94 00:03:49,020 --> 00:03:50,670 But this is really gonna be the whole shebang here 95 00:03:50,670 --> 00:03:52,500 in just a couple lines. 96 00:03:52,500 --> 00:03:57,303 So, we'll do class authentication extends component. 97 00:04:00,720 --> 00:04:02,460 We're going to render, 98 00:04:02,460 --> 00:04:05,770 and inside the render we will return 99 00:04:08,220 --> 00:04:09,543 composed component. 100 00:04:10,620 --> 00:04:12,780 One little, two more little weird parts here 101 00:04:12,780 --> 00:04:15,240 and then we'll just about be done. 102 00:04:15,240 --> 00:04:18,140 We're gonna put curly braces inside the composed component 103 00:04:19,110 --> 00:04:21,180 and write, dot, dot, dot, 104 00:04:21,180 --> 00:04:23,433 this dot props. 105 00:04:24,390 --> 00:04:29,100 Now, one last step outside of the authentication class. 106 00:04:29,100 --> 00:04:30,800 We're gonna put a new line in here 107 00:04:32,400 --> 00:04:37,203 and we're going to return authentication. 108 00:04:38,340 --> 00:04:41,970 Okay. So, definitely not like a regular react component 109 00:04:41,970 --> 00:04:43,020 that we're used to seeing, 110 00:04:43,020 --> 00:04:45,870 but we did at least get all the code on the screen here. 111 00:04:45,870 --> 00:04:48,810 I'm gonna save this file and at this point in time, 112 00:04:48,810 --> 00:04:50,010 I'd like to do a real deep dive 113 00:04:50,010 --> 00:04:53,130 on discussion about what exactly is going on here. 114 00:04:53,130 --> 00:04:54,090 And so, let's go ahead 115 00:04:54,090 --> 00:04:56,253 and tackle that inside the next section.