1 00:00:00,750 --> 00:00:01,583 Instructor: In the last section, 2 00:00:01,583 --> 00:00:03,210 we did a quick discussion 3 00:00:03,210 --> 00:00:05,250 of what a higher order component is, 4 00:00:05,250 --> 00:00:07,140 and what purpose it serves. 5 00:00:07,140 --> 00:00:09,870 We also set up our Boilerplate package. 6 00:00:09,870 --> 00:00:10,703 In this section, 7 00:00:10,703 --> 00:00:12,630 I wanna talk a lot more about the application 8 00:00:12,630 --> 00:00:13,950 that we're going to build, 9 00:00:13,950 --> 00:00:16,800 and exactly what type of higher order component 10 00:00:16,800 --> 00:00:18,210 we're going to make. 11 00:00:18,210 --> 00:00:20,160 Remember, there are many different types 12 00:00:20,160 --> 00:00:21,930 of higher order components, 13 00:00:21,930 --> 00:00:24,240 just about any different use or possibility 14 00:00:24,240 --> 00:00:25,530 you can think of. 15 00:00:25,530 --> 00:00:27,150 But in the application that we're gonna build, 16 00:00:27,150 --> 00:00:28,830 we're gonna make one that is gonna probably 17 00:00:28,830 --> 00:00:32,070 be just about immediately useful to us. 18 00:00:32,070 --> 00:00:33,960 So I'm gonna pull a diagram on the screen 19 00:00:33,960 --> 00:00:36,480 of the application that we're going to make. 20 00:00:36,480 --> 00:00:37,650 So the application that we're gonna make 21 00:00:37,650 --> 00:00:41,580 is going to be kind of like a authentication type app 22 00:00:41,580 --> 00:00:43,740 where we have some homepage, 23 00:00:43,740 --> 00:00:46,590 we have some protected resources page 24 00:00:46,590 --> 00:00:48,480 which is currently being displayed, 25 00:00:48,480 --> 00:00:51,930 and we have a sign in or sign out button. 26 00:00:51,930 --> 00:00:55,260 Now, we're not going to do true backend authentication here. 27 00:00:55,260 --> 00:00:58,290 When the user clicks on sign in or sign out, 28 00:00:58,290 --> 00:01:01,590 it's just gonna toggle a boolean flag in memory 29 00:01:01,590 --> 00:01:04,440 as to whether they are currently signed in or signed out. 30 00:01:04,440 --> 00:01:05,489 So, just to be clear, 31 00:01:05,489 --> 00:01:08,220 we're not gonna cover full on authentication here. 32 00:01:08,220 --> 00:01:11,283 This is more of a discussion about higher order components. 33 00:01:12,810 --> 00:01:14,760 So the higher order component that we're gonna make 34 00:01:14,760 --> 00:01:16,920 is gonna be a helper for handling 35 00:01:16,920 --> 00:01:19,980 authentication and protected routes. 36 00:01:19,980 --> 00:01:23,610 As you might imagine, if a user is not signed in 37 00:01:23,610 --> 00:01:25,440 and they're on the homepage, okay, 38 00:01:25,440 --> 00:01:27,450 everything's fine, that's good. 39 00:01:27,450 --> 00:01:30,090 But if they try to go to the resources page 40 00:01:30,090 --> 00:01:32,280 when they are not logged in, 41 00:01:32,280 --> 00:01:36,330 we should automatically redirect them back to the homepage. 42 00:01:36,330 --> 00:01:39,330 So I have another diagram just to make that crystal clear. 43 00:01:39,330 --> 00:01:40,983 Let me pull it onto the screen. 44 00:01:45,000 --> 00:01:47,430 So here's the flow of the authentication 45 00:01:47,430 --> 00:01:49,470 higher order component that we're going to make. 46 00:01:49,470 --> 00:01:51,960 Again, it's a higher order component 47 00:01:51,960 --> 00:01:55,110 for the purpose of helping with authentication. 48 00:01:55,110 --> 00:01:56,280 So the flow is gonna be 49 00:01:56,280 --> 00:01:59,970 if a user tries to visit a protected resources route, 50 00:01:59,970 --> 00:02:03,480 and we're gonna define what a protected resource is, 51 00:02:03,480 --> 00:02:04,313 you know we're gonna say, 52 00:02:04,313 --> 00:02:05,850 we're gonna make a distinct component, 53 00:02:05,850 --> 00:02:07,470 and we're gonna say if the user tries 54 00:02:07,470 --> 00:02:09,720 to navigate to this component, 55 00:02:09,720 --> 00:02:12,690 we're gonna check whether or not they are logged in. 56 00:02:12,690 --> 00:02:15,660 If the user is logged in, yes, 57 00:02:15,660 --> 00:02:18,000 then we'll allow them access to that path, 58 00:02:18,000 --> 00:02:20,520 and then we'll let them see that component. 59 00:02:20,520 --> 00:02:22,440 If the user is not logged in, 60 00:02:22,440 --> 00:02:25,500 we're gonna kick them back until, back to the home screen 61 00:02:25,500 --> 00:02:29,340 until they are successfully logged in to our application. 62 00:02:29,340 --> 00:02:31,170 So this is kind of the flow here 63 00:02:31,170 --> 00:02:32,760 that we're gonna be mastering 64 00:02:32,760 --> 00:02:35,790 with our higher order component that we're gonna create. 65 00:02:35,790 --> 00:02:38,100 So the last question we kinda need to answer here is, 66 00:02:38,100 --> 00:02:40,860 you know, okay, we're going to make this login flow, 67 00:02:40,860 --> 00:02:43,920 but exactly what is the higher order component doing? 68 00:02:43,920 --> 00:02:45,810 You know, what is its job? 69 00:02:45,810 --> 00:02:48,603 So I've got one more diagram to answer that question. 70 00:02:49,770 --> 00:02:51,220 Let me pull it on the screen. 71 00:02:52,440 --> 00:02:55,770 So here's, we're gonna see similar diagrams 72 00:02:55,770 --> 00:02:58,650 over and over and over for higher order components. 73 00:02:58,650 --> 00:02:59,483 In our our case, 74 00:02:59,483 --> 00:03:02,130 we're going to have a resource list component. 75 00:03:02,130 --> 00:03:03,990 It's gonna be a component that is, 76 00:03:03,990 --> 00:03:07,800 its sole job is to render or show some protected resource, 77 00:03:07,800 --> 00:03:11,790 some resource that the user must be logged in to see. 78 00:03:11,790 --> 00:03:14,250 So we're gonna take the resource list component, 79 00:03:14,250 --> 00:03:15,780 we're gonna combine it with a 80 00:03:15,780 --> 00:03:19,200 require_auth higher order component. 81 00:03:19,200 --> 00:03:21,060 This is the one that we're gonna write. 82 00:03:21,060 --> 00:03:22,290 This is the higher order component 83 00:03:22,290 --> 00:03:24,600 that we're gonna create for this application. 84 00:03:24,600 --> 00:03:26,310 And the result will be, 85 00:03:26,310 --> 00:03:28,440 the results of these two files put together, 86 00:03:28,440 --> 00:03:30,450 or these two components put together, 87 00:03:30,450 --> 00:03:33,870 will be a composed or enhanced component 88 00:03:33,870 --> 00:03:37,080 that's always gonna check the user's authentication status 89 00:03:37,080 --> 00:03:39,180 before the component renders. 90 00:03:39,180 --> 00:03:41,460 And if the user is not authenticated, 91 00:03:41,460 --> 00:03:44,070 it's gonna kick them back to the home route, 92 00:03:44,070 --> 00:03:45,723 or the login route. 93 00:03:46,620 --> 00:03:48,870 So this is the app that we're gonna be making. 94 00:03:48,870 --> 00:03:51,420 I think that it's very practical example 95 00:03:51,420 --> 00:03:52,890 because if we, you know, 96 00:03:52,890 --> 00:03:56,280 start talking about authentication anytime soon, 97 00:03:56,280 --> 00:03:58,320 this is a component that we will certainly 98 00:03:58,320 --> 00:04:00,300 have to have around, or some functionality 99 00:04:00,300 --> 00:04:02,280 that we're certainly gonna have to have. 100 00:04:02,280 --> 00:04:04,710 If a user tries to go somewhere that they're not allowed 101 00:04:04,710 --> 00:04:07,980 in our application, we need to show them a login screen. 102 00:04:07,980 --> 00:04:10,560 We need to kind of kick them out of where they are, 103 00:04:10,560 --> 00:04:12,270 and get them authenticated first, 104 00:04:12,270 --> 00:04:13,290 and then they can go back 105 00:04:13,290 --> 00:04:15,450 to where they were trying to go to. 106 00:04:15,450 --> 00:04:17,519 So let's get started with the implementation 107 00:04:17,519 --> 00:04:18,692 in the next section.