1 00:00:01,140 --> 00:00:04,410 ‫Next up, we're gonna implement the actual login 2 00:00:04,410 --> 00:00:08,013 ‫and log out functionalities in the application. 3 00:00:09,720 --> 00:00:13,020 ‫But before we go do that, I should probably mention 4 00:00:13,020 --> 00:00:15,480 ‫that when you build your own applications, 5 00:00:15,480 --> 00:00:18,360 ‫you should never ever do this, 6 00:00:18,360 --> 00:00:22,230 ‫so you should never have a fake user in your code like this 7 00:00:22,230 --> 00:00:25,410 ‫which contains the plain word password, 8 00:00:25,410 --> 00:00:29,310 ‫because with this, everyone who inspects your code 9 00:00:29,310 --> 00:00:32,340 ‫can get access to your application. 10 00:00:32,340 --> 00:00:36,240 ‫All the code that you write inside your React application 11 00:00:36,240 --> 00:00:38,640 ‫will be available on the front end, 12 00:00:38,640 --> 00:00:40,770 ‫so the browsers will download it. 13 00:00:40,770 --> 00:00:43,410 ‫And so, any malicious attacker will be able 14 00:00:43,410 --> 00:00:46,710 ‫to find this combination of email and password 15 00:00:46,710 --> 00:00:48,060 ‫in your source code. 16 00:00:48,060 --> 00:00:51,540 ‫And so then, they will get access to your application. 17 00:00:51,540 --> 00:00:53,400 ‫Again, never, never do this. 18 00:00:53,400 --> 00:00:55,050 ‫We are just doing it here 19 00:00:55,050 --> 00:00:57,750 ‫because I just want you to learn the mechanics 20 00:00:57,750 --> 00:01:00,780 ‫of authentication in isolation, 21 00:01:00,780 --> 00:01:03,750 ‫so basically without having all that stuff, 22 00:01:03,750 --> 00:01:08,610 ‫like an actual API call and implementing your own database 23 00:01:08,610 --> 00:01:11,820 ‫and all that, like we will do later. 24 00:01:11,820 --> 00:01:14,520 ‫All right, but with that out of the way, 25 00:01:14,520 --> 00:01:18,570 ‫I now want you to come to this user.JSX file 26 00:01:18,570 --> 00:01:21,450 ‫because I want to suggest to you 27 00:01:21,450 --> 00:01:24,000 ‫that you actually implement this lecture 28 00:01:24,000 --> 00:01:26,043 ‫on your own as a challenge. 29 00:01:27,090 --> 00:01:31,650 ‫Down here, I basically have the match plan for this lecture, 30 00:01:31,650 --> 00:01:34,260 ‫so the five things that we will need to do 31 00:01:34,260 --> 00:01:37,290 ‫in order to implement what we want to implement 32 00:01:37,290 --> 00:01:38,610 ‫in this video. 33 00:01:38,610 --> 00:01:42,180 ‫And so again, if you'd like, you can now post the video, 34 00:01:42,180 --> 00:01:44,310 ‫read through these instructions, 35 00:01:44,310 --> 00:01:46,695 ‫and then implement them on your own. 36 00:01:46,695 --> 00:01:50,700 ‫Again, that's a very nice opportunity for you to practice 37 00:01:50,700 --> 00:01:53,400 ‫and for you to implement part of this feature 38 00:01:53,400 --> 00:01:56,910 ‫actually on your own like you will have to do in the future 39 00:01:56,910 --> 00:02:00,930 ‫in your job or even when building your own applications. 40 00:02:00,930 --> 00:02:03,030 ‫If you'd like, just pause the video now 41 00:02:03,030 --> 00:02:04,563 ‫and I meet you back here. 42 00:02:06,507 --> 00:02:10,263 ‫All right, so, how did it go? 43 00:02:11,400 --> 00:02:13,740 ‫I hope that wasn't too hard. 44 00:02:13,740 --> 00:02:17,790 ‫And let's now finish the first step of the five, 45 00:02:17,790 --> 00:02:19,650 ‫which is the easiest one, 46 00:02:19,650 --> 00:02:23,130 ‫so which is to provide the AuthProvider, 47 00:02:23,130 --> 00:02:26,493 ‫so the AuthContext, to our entire component tree. 48 00:02:28,500 --> 00:02:30,003 ‫Let's do that out here. 49 00:02:31,746 --> 00:02:36,543 ‫AuthProvider, I think that's what it's called, no? 50 00:02:40,200 --> 00:02:42,453 ‫Yeah, but somehow it's not being imported, 51 00:02:44,130 --> 00:02:45,830 ‫so let's just duplicate this here. 52 00:02:50,518 --> 00:02:54,185 ‫Auth, and here, it's called FakeAuthContext. 53 00:02:58,343 --> 00:03:02,370 ‫All right, and let's grab this, put it here 54 00:03:02,370 --> 00:03:05,493 ‫all the way in the end, and there we go. 55 00:03:06,900 --> 00:03:08,430 ‫Now, the order of these two here 56 00:03:08,430 --> 00:03:10,290 ‫doesn't really matter in this case, 57 00:03:10,290 --> 00:03:12,423 ‫so it could also be like this. 58 00:03:13,500 --> 00:03:14,730 ‫Now in some situations, 59 00:03:14,730 --> 00:03:18,270 ‫we might actually need inside the CitiesProvider 60 00:03:18,270 --> 00:03:20,850 ‫some state from the AuthProvider, 61 00:03:20,850 --> 00:03:22,980 ‫which would perfectly be possible. 62 00:03:22,980 --> 00:03:26,550 ‫We could, of course, call that custom hook from here 63 00:03:26,550 --> 00:03:28,533 ‫also inside the CitiesProvider. 64 00:03:29,370 --> 00:03:31,410 ‫And so, in that case, the AuthProvider 65 00:03:31,410 --> 00:03:34,650 ‫really would have to be the parent of this one, 66 00:03:34,650 --> 00:03:37,890 ‫but in this case, it doesn't really matter. 67 00:03:37,890 --> 00:03:42,180 ‫But anyway, let's now come to our actual login page here 68 00:03:42,180 --> 00:03:46,350 ‫so that we can now handle clicking here on this button, 69 00:03:46,350 --> 00:03:50,070 ‫so basically, when the user submits this form. 70 00:03:50,070 --> 00:03:50,903 ‫And first of all, 71 00:03:50,903 --> 00:03:53,613 ‫here we now want to get that actual button, 72 00:03:54,870 --> 00:03:57,483 ‫so the component that we created earlier, 73 00:03:58,500 --> 00:04:03,473 ‫of the type primary and then login. 74 00:04:05,130 --> 00:04:09,210 ‫Let's come here, and that looks a lot nicer. 75 00:04:09,210 --> 00:04:12,930 ‫And notice how here we already have these values predefined 76 00:04:12,930 --> 00:04:15,840 ‫so that fake email, enter fake password, 77 00:04:15,840 --> 00:04:17,970 ‫just so we don't have to type them 78 00:04:17,970 --> 00:04:20,280 ‫over and over again while testing. 79 00:04:20,280 --> 00:04:23,610 ‫And I also already set up our form here, 80 00:04:23,610 --> 00:04:27,090 ‫which is two state variables, and of course, 81 00:04:27,090 --> 00:04:30,810 ‫with our controlled elements like we already know how to do, 82 00:04:30,810 --> 00:04:33,540 ‫so there's no need to type the same thing 83 00:04:33,540 --> 00:04:34,773 ‫over and over again. 84 00:04:35,700 --> 00:04:40,700 ‫Now here, we will create a handle submit function like this. 85 00:04:44,220 --> 00:04:45,990 ‫Let's place that out here. 86 00:04:45,990 --> 00:04:47,103 ‫Function. 87 00:04:49,440 --> 00:04:52,650 ‫And so, this receives the event object 88 00:04:52,650 --> 00:04:56,133 ‫so that, as always, we can do our preventDefault. 89 00:04:59,010 --> 00:05:01,770 ‫All right, and then here is where we will want 90 00:05:01,770 --> 00:05:05,400 ‫to call that login function, but we only want to do it 91 00:05:05,400 --> 00:05:09,090 ‫if the email and password are actually set, 92 00:05:09,090 --> 00:05:13,320 ‫so if we have an email and a password, 93 00:05:13,320 --> 00:05:17,010 ‫then we want to call the login function. 94 00:05:17,010 --> 00:05:19,683 ‫Let's grab that from our context. 95 00:05:22,890 --> 00:05:25,203 ‫Login from useAuth. 96 00:05:30,197 --> 00:05:34,560 ‫And then here, let's then paste in the email 97 00:05:34,560 --> 00:05:36,483 ‫and the password. 98 00:05:37,800 --> 00:05:40,890 ‫Exactly the email and passwords that we need, 99 00:05:40,890 --> 00:05:43,290 ‫then inside the login function 100 00:05:43,290 --> 00:05:47,463 ‫to check if they are the same as this and this one. 101 00:05:48,720 --> 00:05:50,703 ‫Now, what's wrong in here? 102 00:05:53,730 --> 00:05:58,200 ‫Cannot destructure the login out of useAuth, 103 00:05:58,200 --> 00:06:02,250 ‫so probably there are some buck error like, 104 00:06:02,250 --> 00:06:07,250 ‫oh yeah, of course, I forgot to then return the context. 105 00:06:07,290 --> 00:06:08,280 ‫And so, this is good 106 00:06:08,280 --> 00:06:12,090 ‫that you see that everyone makes mistakes. 107 00:06:12,090 --> 00:06:14,880 ‫I wasn't copying the code here from anywhere. 108 00:06:14,880 --> 00:06:19,503 ‫And so, then I forgot to return that context value there. 109 00:06:20,940 --> 00:06:22,740 ‫All right, so with this, 110 00:06:22,740 --> 00:06:25,203 ‫we are now ready to actually log in. 111 00:06:26,610 --> 00:06:29,100 ‫We click and nothing happens, 112 00:06:29,100 --> 00:06:32,850 ‫but also, nothing is supposed to be happening. 113 00:06:32,850 --> 00:06:37,290 ‫Let's just check our state, so in the AuthProvider, 114 00:06:37,290 --> 00:06:40,800 ‫because here, it actually has changed, 115 00:06:40,800 --> 00:06:43,560 ‫so we see that we now are authenticated 116 00:06:43,560 --> 00:06:47,730 ‫and the user is set to that fake user, 117 00:06:47,730 --> 00:06:49,893 ‫so we were actually successful. 118 00:06:51,360 --> 00:06:53,910 ‫And so here, on this page, we should now check 119 00:06:53,910 --> 00:06:57,750 ‫whether the isAuthenticated state is now true. 120 00:06:57,750 --> 00:07:02,750 ‫And if it is, we want to redirect the user to the app, 121 00:07:03,090 --> 00:07:05,640 ‫so to slash app right here. 122 00:07:05,640 --> 00:07:07,200 ‫And so, that's why I told you 123 00:07:07,200 --> 00:07:11,970 ‫in this step number three, exactly here, 124 00:07:11,970 --> 00:07:15,180 ‫so that inside an effect, we need to do this check. 125 00:07:15,180 --> 00:07:17,373 ‫And if so, we navigate to app. 126 00:07:18,660 --> 00:07:21,783 ‫Let's do that by including a useEffect. 127 00:07:25,320 --> 00:07:26,823 ‫Creating our function. 128 00:07:27,930 --> 00:07:29,920 ‫And then here, what we want to check 129 00:07:29,920 --> 00:07:34,293 ‫is whether the isAuthenticated state has changed. 130 00:07:37,170 --> 00:07:39,090 ‫Basically, we want to run this effect 131 00:07:39,090 --> 00:07:41,730 ‫where we redirect the user each time 132 00:07:41,730 --> 00:07:43,653 ‫that this state here has changed. 133 00:07:44,820 --> 00:07:48,540 ‫Then we also need to get that from our context, of course, 134 00:07:48,540 --> 00:07:50,267 ‫so isAuthenticated. 135 00:07:51,270 --> 00:07:56,040 ‫And so now, let's just say, if isAuthenticated, 136 00:07:56,040 --> 00:07:58,347 ‫then we want to navigate to that page. 137 00:07:58,347 --> 00:08:02,760 ‫And so for that, we need to grab the navigate function 138 00:08:02,760 --> 00:08:04,083 ‫from React Router. 139 00:08:05,070 --> 00:08:08,580 ‫That's, again, the programmatic navigation 140 00:08:08,580 --> 00:08:10,383 ‫that we have talked about before. 141 00:08:12,240 --> 00:08:13,073 ‫Let's see. 142 00:08:14,070 --> 00:08:18,123 ‫Navigate to slash app. 143 00:08:19,380 --> 00:08:24,380 ‫Now here, we also need the navigate function. 144 00:08:26,700 --> 00:08:30,630 ‫And you see that it actually immediately redirected us 145 00:08:30,630 --> 00:08:32,850 ‫here to this app. 146 00:08:32,850 --> 00:08:34,560 ‫Let's just reload this, 147 00:08:34,560 --> 00:08:38,490 ‫so go to the beginning, reload, come here, 148 00:08:38,490 --> 00:08:41,400 ‫but apparently we have a buck, 149 00:08:41,400 --> 00:08:43,980 ‫so that should not be happening. 150 00:08:43,980 --> 00:08:45,213 ‫Let's try that again. 151 00:08:46,110 --> 00:08:47,850 ‫Ah, but actually it's because here, 152 00:08:47,850 --> 00:08:51,390 ‫we are directly going to slash app, 153 00:08:51,390 --> 00:08:53,310 ‫so we should change that here as well. 154 00:08:53,310 --> 00:08:55,083 ‫But for now, let's just check. 155 00:08:55,920 --> 00:08:57,780 ‫Here we come to log in. 156 00:08:57,780 --> 00:09:02,490 ‫And so now, let's change just email here to something wrong. 157 00:09:02,490 --> 00:09:05,580 ‫And so then, when I click, nothing happens. 158 00:09:05,580 --> 00:09:08,040 ‫In this situation, we actually would want 159 00:09:08,040 --> 00:09:11,970 ‫to display some message here, so somewhere on the screen, 160 00:09:11,970 --> 00:09:15,750 ‫telling the user that login was not successful. 161 00:09:15,750 --> 00:09:20,520 ‫We can add some other piece of state here, 162 00:09:20,520 --> 00:09:22,350 ‫like an error or so, 163 00:09:22,350 --> 00:09:25,080 ‫and then display that error to the user. 164 00:09:25,080 --> 00:09:27,933 ‫But again, here we just want to keep it simple. 165 00:09:29,610 --> 00:09:31,323 ‫Now, let's test the correct case. 166 00:09:32,220 --> 00:09:34,560 ‫And beautiful. 167 00:09:34,560 --> 00:09:35,790 ‫That worked. 168 00:09:35,790 --> 00:09:39,690 ‫Our fake login is actually working right now. 169 00:09:39,690 --> 00:09:44,690 ‫And so, this part here, so this effect has two big purposes. 170 00:09:45,300 --> 00:09:48,540 ‫First of all, when the user successfully authenticates, 171 00:09:48,540 --> 00:09:52,380 ‫then, of course, after this function has been called, 172 00:09:52,380 --> 00:09:55,800 ‫the isAuthentic state will change to true. 173 00:09:55,800 --> 00:09:58,470 ‫And so then, this component will re-render, 174 00:09:58,470 --> 00:10:01,530 ‫and then in this effect, this will already be true, 175 00:10:01,530 --> 00:10:04,290 ‫and then we navigate to the application. 176 00:10:04,290 --> 00:10:07,500 ‫While in the beginning, this is still false. 177 00:10:07,500 --> 00:10:10,653 ‫On the initial render, this effect will also run, 178 00:10:11,610 --> 00:10:13,980 ‫but then this here is still false. 179 00:10:13,980 --> 00:10:17,550 ‫And so then, we don't navigate to the application. 180 00:10:17,550 --> 00:10:20,250 ‫Now, the nice side effect of that is 181 00:10:20,250 --> 00:10:22,560 ‫when the user is already authenticated 182 00:10:22,560 --> 00:10:24,540 ‫but then clicks on login, 183 00:10:24,540 --> 00:10:27,180 ‫they will automatically and immediately 184 00:10:27,180 --> 00:10:29,643 ‫get redirected to the app itself. 185 00:10:31,140 --> 00:10:31,973 ‫You saw that. 186 00:10:32,850 --> 00:10:36,003 ‫Now, watch what happens when we click here on back. 187 00:10:37,680 --> 00:10:39,333 ‫That doesn't work at all. 188 00:10:40,740 --> 00:10:43,260 ‫And the reason for that is that it keeps going back 189 00:10:43,260 --> 00:10:46,410 ‫to the login page, but since we already logged in, 190 00:10:46,410 --> 00:10:48,993 ‫it keeps redirecting us to this page. 191 00:10:50,250 --> 00:10:52,080 ‫Again, when we click here, it goes back, 192 00:10:52,080 --> 00:10:54,843 ‫but then immediately, it goes forward again. 193 00:10:56,040 --> 00:11:00,303 ‫Now, if we reload this here and log in again, 194 00:11:01,350 --> 00:11:04,410 ‫yeah well, then the same thing is gonna happen. 195 00:11:04,410 --> 00:11:05,673 ‫Always the same problem. 196 00:11:06,630 --> 00:11:09,660 ‫The solution to this is to not even go back 197 00:11:09,660 --> 00:11:11,490 ‫to the login page, but instead, 198 00:11:11,490 --> 00:11:14,403 ‫really replace that we have ever been there. 199 00:11:15,750 --> 00:11:18,430 ‫We can do that by specifying an object 200 00:11:20,100 --> 00:11:24,090 ‫with the replace option set to true. 201 00:11:24,090 --> 00:11:27,060 ‫And so then, in this case, once this navigation happens, 202 00:11:27,060 --> 00:11:29,310 ‫it will replace the login page 203 00:11:29,310 --> 00:11:32,613 ‫in the history stack with just this one. 204 00:11:33,630 --> 00:11:36,333 ‫Let's try this once again. 205 00:11:37,590 --> 00:11:40,650 ‫Login here, and then as we go back, 206 00:11:40,650 --> 00:11:44,370 ‫it just goes back to where we were before the login page, 207 00:11:44,370 --> 00:11:47,790 ‫so it has overwritten basically that we were ever there. 208 00:11:47,790 --> 00:11:49,950 ‫And so, this part here is very important 209 00:11:49,950 --> 00:11:52,800 ‫to make the browser work as usual, 210 00:11:52,800 --> 00:11:55,143 ‫so in the way in which the user is familiar. 211 00:11:56,010 --> 00:11:59,520 ‫Now okay, so we're already running a bit long, 212 00:11:59,520 --> 00:12:01,290 ‫but this part is finished. 213 00:12:01,290 --> 00:12:03,540 ‫And so now, let's very quickly 214 00:12:03,540 --> 00:12:05,943 ‫create the logout part as well. 215 00:12:07,410 --> 00:12:11,080 ‫From our instructions, remember that we 216 00:12:12,420 --> 00:12:14,160 ‫should come here to this component 217 00:12:14,160 --> 00:12:17,523 ‫and then read the logged-in user and display it. 218 00:12:19,029 --> 00:12:22,917 ‫Now, we can actually get rid of this fake user. 219 00:12:27,139 --> 00:12:30,893 ‫And then, let's read user from useAuth like this. 220 00:12:33,750 --> 00:12:35,910 ‫And this should already be enough 221 00:12:35,910 --> 00:12:40,770 ‫because all the JSX code has already been written for us, 222 00:12:40,770 --> 00:12:44,170 ‫so let's now come to the app layout 223 00:12:45,900 --> 00:12:49,653 ‫and then I will just include that here after the map. 224 00:12:50,700 --> 00:12:55,170 ‫User like this, doesn't need any props. 225 00:12:55,170 --> 00:12:57,000 ‫And there it is. 226 00:12:57,000 --> 00:12:58,230 ‫Nice. 227 00:12:58,230 --> 00:12:59,760 ‫And so, this data is, of course, 228 00:12:59,760 --> 00:13:02,433 ‫now coming from our fake user. 229 00:13:03,300 --> 00:13:05,060 ‫If I change the name there... 230 00:13:07,230 --> 00:13:08,703 ‫like where is that? 231 00:13:12,090 --> 00:13:14,550 ‫Then it should change to Jonas right here, 232 00:13:14,550 --> 00:13:18,813 ‫which didn't really work, but if we do this again, 233 00:13:20,730 --> 00:13:22,290 ‫then there it is. 234 00:13:22,290 --> 00:13:26,220 ‫That's our fake logged-in user right there. 235 00:13:26,220 --> 00:13:27,780 ‫And so now, all we have to do 236 00:13:27,780 --> 00:13:30,243 ‫is to make that logout button work. 237 00:13:32,790 --> 00:13:34,650 ‫That shouldn't be too hard 238 00:13:34,650 --> 00:13:37,083 ‫because we already have our logout function. 239 00:13:37,950 --> 00:13:40,680 ‫Let's grab that from the context 240 00:13:40,680 --> 00:13:43,443 ‫and then here we can simply call that. 241 00:13:46,020 --> 00:13:47,580 ‫Just logout. 242 00:13:47,580 --> 00:13:49,260 ‫However, if we do this now, 243 00:13:49,260 --> 00:13:51,510 ‫then nothing is really gonna happen. 244 00:13:51,510 --> 00:13:54,420 ‫I mean, the user here will disappear, 245 00:13:54,420 --> 00:13:56,790 ‫but we will stay on this page. 246 00:13:56,790 --> 00:13:57,933 ‫Watch what happens. 247 00:13:58,770 --> 00:14:01,920 ‫And so, we actually get an error 248 00:14:01,920 --> 00:14:04,920 ‫because we are then trying to read all this data here 249 00:14:04,920 --> 00:14:07,530 ‫from the user that no longer exists, 250 00:14:07,530 --> 00:14:09,750 ‫so we set the user back to null, 251 00:14:09,750 --> 00:14:13,330 ‫and so then, of course, all these properties doesn't exist 252 00:14:14,580 --> 00:14:15,750 ‫or don't exist. 253 00:14:15,750 --> 00:14:17,640 ‫And so then, what we need to do 254 00:14:17,640 --> 00:14:21,723 ‫is to redirect again to the homepage. 255 00:14:23,340 --> 00:14:24,843 ‫Const navigate. 256 00:14:26,220 --> 00:14:28,050 ‫And so here, more and more, 257 00:14:28,050 --> 00:14:31,380 ‫you see the programmatic navigation in action, 258 00:14:31,380 --> 00:14:33,840 ‫'cause this, of course, cannot really happen 259 00:14:33,840 --> 00:14:35,790 ‫just by the user clicking. 260 00:14:35,790 --> 00:14:38,187 ‫We first need to log out the user 261 00:14:38,187 --> 00:14:41,673 ‫and then we can navigate to slash app. 262 00:14:42,900 --> 00:14:46,533 ‫All right, so let's try that again. 263 00:14:48,570 --> 00:14:49,710 ‫And so, that also doesn't work 264 00:14:49,710 --> 00:14:53,640 ‫and that's because we are still here in cities. 265 00:14:53,640 --> 00:14:54,830 ‫In slash app... 266 00:14:56,430 --> 00:15:00,150 ‫and actually, let's now change here the link 267 00:15:00,150 --> 00:15:03,453 ‫from app to the login page. 268 00:15:05,910 --> 00:15:08,700 ‫We can now only really reach the application 269 00:15:08,700 --> 00:15:10,503 ‫by going through the login page. 270 00:15:12,150 --> 00:15:13,053 ‫Let's do that. 271 00:15:14,040 --> 00:15:15,090 ‫That still works. 272 00:15:15,090 --> 00:15:16,503 ‫And now, as we log out, 273 00:15:17,340 --> 00:15:20,583 ‫well, we still have some problem here, 274 00:15:22,020 --> 00:15:24,960 ‫but yeah, I don't even need to read that 275 00:15:24,960 --> 00:15:27,060 ‫'cause I just noticed that, of course, 276 00:15:27,060 --> 00:15:30,393 ‫we want to redirect to the homepage. 277 00:15:31,620 --> 00:15:33,900 ‫We are out of the app, of course. 278 00:15:33,900 --> 00:15:34,980 ‫Maybe you spotted 279 00:15:34,980 --> 00:15:37,893 ‫that it's actually in the instructions. 280 00:15:39,270 --> 00:15:41,370 ‫And beautiful. 281 00:15:41,370 --> 00:15:42,203 ‫Great. 282 00:15:43,800 --> 00:15:46,290 ‫Let's try that again because now I want to show you 283 00:15:46,290 --> 00:15:50,790 ‫what happens when we try to basically open this page 284 00:15:50,790 --> 00:15:52,620 ‫without being logged in. 285 00:15:52,620 --> 00:15:55,623 ‫That's what's gonna happen when we just reload the page. 286 00:15:56,610 --> 00:15:59,460 ‫If we try to just enter this URL 287 00:15:59,460 --> 00:16:01,800 ‫without first going to the login flow, 288 00:16:01,800 --> 00:16:04,290 ‫then we get this error. 289 00:16:04,290 --> 00:16:06,120 ‫And so, we need to prevent that 290 00:16:06,120 --> 00:16:08,460 ‫by basically protecting our application 291 00:16:08,460 --> 00:16:10,920 ‫against unauthorized access. 292 00:16:10,920 --> 00:16:13,230 ‫And so, remember from the very beginning, 293 00:16:13,230 --> 00:16:14,970 ‫that that is the third part 294 00:16:14,970 --> 00:16:18,570 ‫of a typical login flow in front end applications. 295 00:16:18,570 --> 00:16:21,633 ‫And so, let's implement that in the next video.