1 00:00:00,400 --> 00:00:06,540 And once we have our log-in on logout functionality in place now, let's start restricting the access 2 00:00:06,540 --> 00:00:10,380 to a dashboard to the people who haven't logged in. 3 00:00:10,940 --> 00:00:18,450 So if we take a look at our complete application, once I log out, I'm being kicked back to a log and 4 00:00:18,450 --> 00:00:18,750 page. 5 00:00:19,310 --> 00:00:23,610 And even though that I know that my dashboard is essentially my home page. 6 00:00:23,860 --> 00:00:30,690 So just my domain, if I'm trying to get there, since I haven't logged in, I'm being kicked back to 7 00:00:30,720 --> 00:00:31,360 a logging one. 8 00:00:31,860 --> 00:00:36,840 So I only can access the dashboard if I log in. 9 00:00:37,620 --> 00:00:41,220 So if I haven't logged in, then of course, this is not going to work on this case. 10 00:00:41,220 --> 00:00:43,980 Of course, I removed my coding addict, I think. 11 00:00:44,390 --> 00:00:49,890 So let me just log in with a Google and then once I do, of course, I can see my dashboard. 12 00:00:50,230 --> 00:00:53,400 Now, how do we do that in our application? 13 00:00:53,880 --> 00:00:56,490 Well, first we will need to set up a private account. 14 00:00:56,940 --> 00:00:57,960 So how does that look like? 15 00:00:58,530 --> 00:01:03,750 Well, if we take a look at the objects, we have one Rodford dashboard. 16 00:01:03,780 --> 00:01:05,650 We have one for the log in. 17 00:01:05,940 --> 00:01:08,970 And then, of course, we have also one for their car. 18 00:01:09,240 --> 00:01:16,400 You'll notice here that we have a component in the pages that has the name of Private Road. 19 00:01:17,010 --> 00:01:19,210 So this is where we'll set this up. 20 00:01:20,070 --> 00:01:26,040 Well, essentially, the way it's going to work is we're going to have a private route and we will wrap 21 00:01:26,310 --> 00:01:26,960 our route. 22 00:01:27,300 --> 00:01:33,840 The one that we would want to protect in this case, of course, is that is going to be our dashboard 23 00:01:33,840 --> 00:01:34,080 one. 24 00:01:34,410 --> 00:01:36,380 We'll wrap this one in. 25 00:01:36,900 --> 00:01:37,740 A private truck. 26 00:01:38,490 --> 00:01:39,920 And in that private, you're out. 27 00:01:40,350 --> 00:01:41,040 We will check. 28 00:01:41,550 --> 00:01:42,660 Hey, what's happening? 29 00:01:43,170 --> 00:01:44,640 Are we returning something? 30 00:01:44,940 --> 00:01:46,320 Are we locked then and all that? 31 00:01:46,980 --> 00:01:48,060 So let's try to do that. 32 00:01:48,540 --> 00:01:54,750 So in the private route, first, what I would want you to understand, that route is still going to 33 00:01:54,750 --> 00:01:55,410 be passed in. 34 00:01:55,410 --> 00:01:55,840 And by the way. 35 00:01:55,860 --> 00:01:56,520 This is annoying. 36 00:01:56,580 --> 00:01:58,440 I don't know why it's not opening a new one here. 37 00:01:59,090 --> 00:02:00,620 So let me close these ones. 38 00:02:00,660 --> 00:02:04,830 I'm gonna close the dashboards for now and then we'll only have two of them. 39 00:02:05,300 --> 00:02:06,250 We don't need context. 40 00:02:06,270 --> 00:02:13,330 Read me or index and what you need to understand that still the private route will wrap dashboard. 41 00:02:14,130 --> 00:02:15,240 So that will still happen. 42 00:02:15,270 --> 00:02:18,810 That's my will right away say that I would want to access to things. 43 00:02:19,410 --> 00:02:27,150 I would want to access children because again, the dashboard will be a child of private route. 44 00:02:27,520 --> 00:02:29,340 And I definitely want to render it here. 45 00:02:29,460 --> 00:02:34,010 What we're doing here is we are collecting Devourers and then we can just give it some kind of name, 46 00:02:34,020 --> 00:02:35,670 which in my case is going to be addressed. 47 00:02:36,180 --> 00:02:37,830 So what am I doing over here? 48 00:02:38,340 --> 00:02:44,820 Well, still, the private route is going to have the path as well as exact on all that. 49 00:02:45,630 --> 00:02:47,460 So that's not going to change. 50 00:02:47,880 --> 00:02:55,380 So first, I would want to grab my children so that it was a special prop and then I would want to collect 51 00:02:55,840 --> 00:03:02,160 rest of the props that are going to be on my component, whatever they are. 52 00:03:02,880 --> 00:03:07,520 And once we have this particular set up, then for the time being, we're just going to come up with 53 00:03:07,520 --> 00:03:13,670 a local variable and I'm going to say is authenticated or something like that or is used there. 54 00:03:13,680 --> 00:03:14,610 Let's use the same one. 55 00:03:15,050 --> 00:03:18,810 And for the time being, we'll say, yeah, the user is true. 56 00:03:19,020 --> 00:03:22,680 But of course, eventually we'll use our use off and all that. 57 00:03:23,400 --> 00:03:28,560 Now, once we have this particular setup now, I would want to decide what am I doing? 58 00:03:29,340 --> 00:03:32,470 So in here, I'll say that I'm returning a year out. 59 00:03:33,030 --> 00:03:36,900 So that is still coming from reactor RDM snorers in the app. 60 00:03:36,930 --> 00:03:37,860 We imported it out. 61 00:03:38,160 --> 00:03:39,630 So we're doing the same thing over here. 62 00:03:40,080 --> 00:03:41,100 I'm still importing. 63 00:03:41,100 --> 00:03:41,540 They're out. 64 00:03:42,000 --> 00:03:44,720 So in the private out, I will return a year out. 65 00:03:45,300 --> 00:03:50,550 I will grab all the props that I'll set up on a private route. 66 00:03:50,970 --> 00:03:51,720 That's why I'll do. 67 00:03:51,720 --> 00:03:52,030 Yeah. 68 00:03:52,260 --> 00:03:57,820 Grab me arrest or whatever name you give over here to the rest of the props. 69 00:03:57,870 --> 00:04:00,030 So notice how we're now spreading out. 70 00:04:00,300 --> 00:04:06,600 So here we were collecting them, collecting the rest of the props that were on the private route. 71 00:04:06,840 --> 00:04:08,040 And now I'm just spreading them out. 72 00:04:08,250 --> 00:04:10,560 Now I'm placing on that route that I'm returning. 73 00:04:11,190 --> 00:04:15,630 And then for the route, we would have a render prop. 74 00:04:15,990 --> 00:04:17,440 So we're going to go with a render. 75 00:04:17,940 --> 00:04:21,120 And then in that run prop, we need to pass in the function. 76 00:04:21,840 --> 00:04:25,260 Now, from that function, wherever we're going to return. 77 00:04:25,320 --> 00:04:28,020 Well, that is what we're going to render. 78 00:04:28,590 --> 00:04:32,040 So in here, what I could say is a return. 79 00:04:32,430 --> 00:04:33,990 And then I'm just going to check my user. 80 00:04:34,320 --> 00:04:39,360 So if the user is true, then I'm just going to pass in children. 81 00:04:39,750 --> 00:04:42,600 If it's not, then we have another component. 82 00:04:42,810 --> 00:04:44,550 Then we have redirect. 83 00:04:45,060 --> 00:04:52,950 So in this case, I'm going to say if the user is false, then go to redirect and then kick it back 84 00:04:52,950 --> 00:04:56,020 to a log one or wherever you'd want. 85 00:04:56,490 --> 00:05:00,140 So in this case, I know that I have an option of logging in the log in page. 86 00:05:00,150 --> 00:05:03,360 So that's why I'm kicking the user back to a logging page. 87 00:05:03,840 --> 00:05:04,830 So we're gonna do that. 88 00:05:05,370 --> 00:05:08,370 And then, of course, I'll close out my component. 89 00:05:08,670 --> 00:05:09,680 So that should be our setup. 90 00:05:10,050 --> 00:05:12,420 And now, of course, we don't need this private throughout anymore. 91 00:05:12,960 --> 00:05:13,980 So now we'll save it. 92 00:05:14,220 --> 00:05:19,560 Hopefully everything is clear what's happening at least up until this point, because we're just using 93 00:05:19,560 --> 00:05:20,270 a local variable. 94 00:05:20,280 --> 00:05:21,930 And don't worry, we'll fix that in a second. 95 00:05:22,730 --> 00:05:27,120 But now in the app Jayesh, I'm also importing the private route. 96 00:05:27,780 --> 00:05:36,450 So now what I would want to do is the changes are on correct because now instead of the normal route 97 00:05:36,840 --> 00:05:38,730 since I set up the private route. 98 00:05:39,250 --> 00:05:42,530 Well, now I'm going to say private rock like so. 99 00:05:43,010 --> 00:05:46,020 So now once we save it, everything should be displayed. 100 00:05:46,560 --> 00:05:46,910 Correct. 101 00:05:47,400 --> 00:05:51,300 Because in the private route, this is still true. 102 00:05:52,200 --> 00:05:59,040 So we're still random dashboard just because our users true horror knows what happens here. 103 00:05:59,550 --> 00:06:03,830 If I go back to false now, I'm being kicked back to a lock. 104 00:06:03,830 --> 00:06:04,780 And why? 105 00:06:05,180 --> 00:06:06,510 Well, because this value is false. 106 00:06:07,150 --> 00:06:10,650 So now in my render prop, what am I doing here? 107 00:06:11,160 --> 00:06:14,490 I'm checking if the user that only display the children. 108 00:06:14,730 --> 00:06:15,630 What are the children? 109 00:06:16,230 --> 00:06:16,930 That's the dashboard. 110 00:06:17,470 --> 00:06:19,350 However, if it's not, then. 111 00:06:19,520 --> 00:06:26,100 Please use the redirect component and kick the user or a visitor back to a logging page. 112 00:06:26,630 --> 00:06:30,680 Now I can click all day long and I'm not gonna get there all day long. 113 00:06:30,690 --> 00:06:33,110 I can just keep on typing, keep on typing and all that. 114 00:06:33,590 --> 00:06:34,910 And nothing is going to happen. 115 00:06:35,810 --> 00:06:37,520 And what is our next step? 116 00:06:37,790 --> 00:06:42,650 Well, now, of course, I would want to hook it up to the use off. 117 00:06:43,070 --> 00:06:43,430 Correct. 118 00:06:43,880 --> 00:06:47,930 I would want to check whether the user has logged in. 119 00:06:48,410 --> 00:06:51,710 And if that is the case, then I'm only going to display the dashboard. 120 00:06:52,190 --> 00:06:56,210 So instead of just displaying this as a local variable. 121 00:06:56,540 --> 00:07:01,580 Now, I would want to access my user off just like we were doing a number. 122 00:07:01,880 --> 00:07:02,930 So that doesn't change. 123 00:07:03,290 --> 00:07:11,990 I'm just gonna go with cons online is authenticated, authenticated and then user and also equal to 124 00:07:12,020 --> 00:07:14,110 a use of remember. 125 00:07:14,630 --> 00:07:15,760 And then I'll invoke it. 126 00:07:16,190 --> 00:07:21,410 Now the same how in another bar is going to say is authenticated. 127 00:07:21,980 --> 00:07:22,940 Right away I messed it up. 128 00:07:23,540 --> 00:07:26,390 Authenticated and user. 129 00:07:26,780 --> 00:07:27,860 So if that is the case. 130 00:07:28,070 --> 00:07:28,730 Beautiful. 131 00:07:29,100 --> 00:07:30,720 Then is users gonna be true. 132 00:07:31,100 --> 00:07:35,540 And then of course will render Barack right the way that there's a gotcha. 133 00:07:36,010 --> 00:07:40,070 And that Godhra has to do with the fact that we don't have the wrapper yet. 134 00:07:40,790 --> 00:07:44,900 That's why I previously mentioned that it's so important for us to have the wrapper, because you will 135 00:07:44,900 --> 00:07:50,360 see, even though technically on a surface our functionality makes sense, it's not going to work. 136 00:07:50,720 --> 00:07:51,470 I just showed you that. 137 00:07:51,470 --> 00:07:51,830 Yes. 138 00:07:52,220 --> 00:07:55,790 If you're just hardcoded, you're not going to be able back to a dashboard. 139 00:07:56,150 --> 00:08:00,620 But I can tell you right away, even with a log in functionality, we're not going to get there. 140 00:08:01,430 --> 00:08:02,660 That's why we'll need a wrapper. 141 00:08:03,080 --> 00:08:03,830 So say it. 142 00:08:04,700 --> 00:08:07,640 This is going to kick me back to airlock, and we already know that. 143 00:08:08,060 --> 00:08:14,150 So now, of course, let's bravely navigate to our logon page, and the only thing we need to do is 144 00:08:14,150 --> 00:08:18,650 essentially use the use off and then set up a log in functionality. 145 00:08:19,010 --> 00:08:21,590 Not not while we're at it in the log. 146 00:08:22,160 --> 00:08:28,010 I might as well also log in, maybe sign up, because maybe some people are confused. 147 00:08:28,070 --> 00:08:29,540 So sign up, Mike. 148 00:08:29,570 --> 00:08:30,770 So let's try it out. 149 00:08:30,800 --> 00:08:31,430 How does that look? 150 00:08:31,800 --> 00:08:32,810 I think it looks good enough. 151 00:08:33,180 --> 00:08:34,610 And in here. 152 00:08:34,760 --> 00:08:35,660 What are we looking for? 153 00:08:36,410 --> 00:08:41,360 Well, we all need to import, of course, our use off, which of course, we already are doing. 154 00:08:42,020 --> 00:08:42,650 And then. 155 00:08:43,570 --> 00:08:50,170 We would want to get our log-in with redirect, because even though we were using this a number, correct, 156 00:08:50,710 --> 00:08:56,200 again, technically at the end, we're not going to use that Navar anyway, because once we log animals 157 00:08:56,260 --> 00:08:59,890 display the dashboard and that log in link won't show up. 158 00:09:00,460 --> 00:09:03,460 Now, I'm not going to delete that because I would want you to have it for reference. 159 00:09:03,490 --> 00:09:06,930 But I'm just telling you why we won't use that log in. 160 00:09:07,270 --> 00:09:09,250 We redirect in the number. 161 00:09:09,760 --> 00:09:12,850 Now, I will head back to a logging page. 162 00:09:13,240 --> 00:09:15,400 Then we will get that from Yusoff. 163 00:09:15,430 --> 00:09:18,650 So concert and then log in with redirect. 164 00:09:18,700 --> 00:09:21,640 So log in with redirect. 165 00:09:22,590 --> 00:09:22,890 Here. 166 00:09:23,400 --> 00:09:25,750 And that is going to be equal to a use off. 167 00:09:26,130 --> 00:09:26,710 We will. 168 00:09:26,820 --> 00:09:27,410 And Volkert. 169 00:09:27,840 --> 00:09:29,400 And now, of course, for my button. 170 00:09:29,580 --> 00:09:30,450 What do I need to do? 171 00:09:30,900 --> 00:09:31,920 Well, I just need to set this up. 172 00:09:32,190 --> 00:09:35,010 I need to say oncologic is equal. 173 00:09:35,410 --> 00:09:38,070 And then a log-in with redirect. 174 00:09:38,550 --> 00:09:41,090 Let's say it just to make it interesting. 175 00:09:41,100 --> 00:09:42,630 I'm going to navigate to a bigger screen. 176 00:09:43,800 --> 00:09:44,640 We have our star. 177 00:09:44,670 --> 00:09:45,450 Beautiful. 178 00:09:45,810 --> 00:09:46,890 I can refresh, of course. 179 00:09:47,220 --> 00:09:50,820 I haven't logged in and all that, so that's why I don't see the dashboard. 180 00:09:51,270 --> 00:09:56,790 But since it is loading, I can tell right away that even when we log in, this is not going to work. 181 00:09:57,210 --> 00:09:58,810 So let me try it now. 182 00:09:59,160 --> 00:10:00,720 Remember my e-mail that I changed? 183 00:10:01,230 --> 00:10:04,890 Let me try with this one, John, and log in. 184 00:10:05,530 --> 00:10:09,180 And yep, I technically logged in and everything is fine. 185 00:10:09,210 --> 00:10:15,270 But Norrish, I'm being kicked back all the time and this is exactly what will fix in the next video.