1 00:00:07,110 --> 00:00:08,280 Welcome back. 2 00:00:08,310 --> 00:00:14,310 In this video, let's see how we can implement what is called protected route. 3 00:00:14,940 --> 00:00:22,770 If you are coming from React router down version five and below to achieve this concept, unless we 4 00:00:22,770 --> 00:00:31,320 write a lot of code that is using what is called high order function but with react router dom and above 5 00:00:31,410 --> 00:00:36,570 is pretty easy to implement what is called protected route. 6 00:00:36,570 --> 00:00:44,280 So let's see inside the component where we added what is called the off route. 7 00:00:44,400 --> 00:00:53,460 So this off route is going to render a component and before it renders, we are going to make some conditions 8 00:00:53,460 --> 00:01:01,350 to check that if a user is logged in, then we can go ahead and allow the user to see that component. 9 00:01:01,350 --> 00:01:05,370 So let's see how we are going to implement that for this one. 10 00:01:05,370 --> 00:01:09,090 We are going to mimic real authentication system. 11 00:01:09,090 --> 00:01:15,400 So here we go inside the off route, let's declare a variable and call this one as is. 12 00:01:15,420 --> 00:01:18,540 Log in and by default is false. 13 00:01:18,930 --> 00:01:24,750 So let's see, this component is going to render a different component. 14 00:01:24,840 --> 00:01:28,920 So here we need to structure that as children. 15 00:01:29,010 --> 00:01:32,220 And this is a special method from React. 16 00:01:32,310 --> 00:01:39,870 The children simply means a component that is going to pass into this specific component is called children. 17 00:01:40,260 --> 00:01:48,060 So next step is that we are going to move everything inside here and now we are going to render the 18 00:01:48,060 --> 00:01:49,830 children, let's save it. 19 00:01:49,830 --> 00:01:54,900 And now it has reformatted to one line and it is same as this. 20 00:01:54,900 --> 00:01:56,220 So don't worry. 21 00:01:56,580 --> 00:01:58,140 Next is less. 22 00:01:58,140 --> 00:02:00,090 Implement our logic. 23 00:02:00,120 --> 00:02:06,210 Before this component renders we are going to implement our custom logic here. 24 00:02:06,330 --> 00:02:08,039 So here we go. 25 00:02:08,250 --> 00:02:12,690 We are going to check if a user is not logged in. 26 00:02:12,690 --> 00:02:17,220 We are going to exit this component from rendering. 27 00:02:17,220 --> 00:02:22,530 So here we need to send something to the user that hey, please log in. 28 00:02:22,530 --> 00:02:25,800 So here we can render any components. 29 00:02:25,800 --> 00:02:29,610 But to make it simple, let's render a simple text. 30 00:02:29,610 --> 00:02:32,400 And here you will see access. 31 00:02:33,720 --> 00:02:34,650 Denied. 32 00:02:36,300 --> 00:02:36,940 Great. 33 00:02:36,960 --> 00:02:39,090 So now it's time to use it. 34 00:02:39,120 --> 00:02:41,040 We are done with the implementation. 35 00:02:41,370 --> 00:02:43,920 So here, how are we going to use it? 36 00:02:43,920 --> 00:02:45,240 And it's pretty simple. 37 00:02:45,330 --> 00:02:47,400 Let's get back to the app. 38 00:02:47,640 --> 00:02:51,240 And now let's require the off route. 39 00:02:53,220 --> 00:02:58,000 And it's down here and it has been imported as that. 40 00:02:58,020 --> 00:02:59,340 So here we go. 41 00:02:59,850 --> 00:03:06,000 If we are familiar with back end development that is expressed, how do we protect roots? 42 00:03:06,030 --> 00:03:08,040 The concept here is the same. 43 00:03:08,040 --> 00:03:15,030 But for this we are going to wrap this component with any component that we want to protect. 44 00:03:15,240 --> 00:03:20,190 So let's say that I want to protect the admin page, this one. 45 00:03:20,370 --> 00:03:26,940 So this is how we are going to do everything remains the same with the exception of how we are handling 46 00:03:26,940 --> 00:03:27,520 this. 47 00:03:27,570 --> 00:03:34,290 So now we are going to cut the component from here and here we are going to return. 48 00:03:34,290 --> 00:03:38,010 Let's have some space and we bring in the off route. 49 00:03:38,760 --> 00:03:46,740 And as that remember, any component we pass in here will be available as children inside this. 50 00:03:46,950 --> 00:03:54,210 So before this particular component, which is this one returns, we need to check this condition first. 51 00:03:54,330 --> 00:03:59,960 If this one is false, then we are going to return from this component and render this. 52 00:03:59,970 --> 00:04:01,800 So here we go. 53 00:04:02,040 --> 00:04:08,840 So our pass in the admin component, which is admin pitched perfect. 54 00:04:08,850 --> 00:04:10,850 So now let's check it out. 55 00:04:10,860 --> 00:04:15,780 We are done with the authentication or how we can protect roots. 56 00:04:16,050 --> 00:04:22,710 So back here, let's click on admin and you can see that access denied. 57 00:04:23,010 --> 00:04:29,700 But if I change the force to true, let's save it now. 58 00:04:29,700 --> 00:04:31,500 Let's see when I refresh it. 59 00:04:31,500 --> 00:04:34,860 You can see that I got at main page. 60 00:04:35,220 --> 00:04:43,200 So this logic might come from way back end and then we can save the logging user into context or you 61 00:04:43,220 --> 00:04:44,880 state or local storage. 62 00:04:45,030 --> 00:04:52,230 And next is we can put it and then check if a user is logged in and we have a section to talk about 63 00:04:52,230 --> 00:04:59,780 how we can develop a complete authentication system using React and then Node.js. 64 00:04:59,790 --> 00:05:02,620 So now everything works fine. 65 00:05:02,640 --> 00:05:08,340 In the next video, we are going to customize the component using some CSS. 66 00:05:08,340 --> 00:05:14,340 And again, because this section is only by CSS, I'm going to provide the component and then CSS for 67 00:05:14,340 --> 00:05:20,040 you and I'll provide as part of resources for this particular section of video. 68 00:05:20,220 --> 00:05:24,270 So the next step is that let's go ahead and then implement this one. 69 00:05:24,270 --> 00:05:28,230 When I click on put that I want to render all the product page. 70 00:05:28,230 --> 00:05:31,050 So let's get into that in the next video.