1 00:00:01,500 --> 00:00:04,410 ‫Now let's implement authorization 2 00:00:04,410 --> 00:00:06,960 ‫so that only logged in users 3 00:00:06,960 --> 00:00:09,993 ‫can actually access our application. 4 00:00:11,640 --> 00:00:15,270 ‫And the way we are going to implement this in practice 5 00:00:15,270 --> 00:00:19,440 ‫is by basically wrapping the entire application here 6 00:00:19,440 --> 00:00:22,830 ‫into a protected route component. 7 00:00:22,830 --> 00:00:25,650 ‫So we actually did something like this before 8 00:00:25,650 --> 00:00:27,630 ‫in a world wise project, 9 00:00:27,630 --> 00:00:30,900 ‫but here, of course, we are doing it in a bit more 10 00:00:30,900 --> 00:00:32,253 ‫real world way. 11 00:00:33,360 --> 00:00:38,040 ‫So remember that all of these routes right here 12 00:00:38,040 --> 00:00:42,783 ‫are child routes of this layout route right here. 13 00:00:44,940 --> 00:00:48,960 ‫Nowt hat means that basically all of these components, 14 00:00:48,960 --> 00:00:52,260 ‫so all of these pages, are rendered inside 15 00:00:52,260 --> 00:00:56,580 ‫this app layout component that we built earlier. 16 00:00:56,580 --> 00:01:00,930 ‫And so what we're gonna do now is to wrap this app layout 17 00:01:00,930 --> 00:01:05,010 ‫itself into that protected route component. 18 00:01:05,010 --> 00:01:07,260 ‫And so then that will mean that all 19 00:01:07,260 --> 00:01:09,840 ‫of these different routes can only be accessed 20 00:01:09,840 --> 00:01:12,990 ‫if the protected layout component determines 21 00:01:12,990 --> 00:01:15,933 ‫that there is a currently logged in user. 22 00:01:18,540 --> 00:01:22,680 ‫Now that sounds more confusing than it actually is. 23 00:01:22,680 --> 00:01:26,283 ‫So let's just create that component here in UI. 24 00:01:27,600 --> 00:01:32,220 ‫So protected route.jsx like this. 25 00:01:36,090 --> 00:01:41,090 ‫And this then will of course need to receive the children. 26 00:01:41,730 --> 00:01:44,340 ‫And for now all we are going to do here 27 00:01:44,340 --> 00:01:47,370 ‫is to just return the children. 28 00:01:47,370 --> 00:01:50,310 ‫And so then everything will work the same. 29 00:01:50,310 --> 00:01:52,323 ‫So let's just try this out now. 30 00:01:58,890 --> 00:02:01,440 ‫And now we, of course, need to wrap this 31 00:02:01,440 --> 00:02:04,233 ‫around the app layout. 32 00:02:05,460 --> 00:02:06,753 ‫So just like this. 33 00:02:08,700 --> 00:02:11,970 ‫Now these routes here will all be children 34 00:02:11,970 --> 00:02:16,950 ‫not only of the app layout but also of protected route. 35 00:02:16,950 --> 00:02:20,190 ‫And so in that component we will then only return 36 00:02:20,190 --> 00:02:24,153 ‫the children if the user is actually authenticated. 37 00:02:25,380 --> 00:02:28,350 ‫So here we will need to take a few different steps. 38 00:02:28,350 --> 00:02:30,453 ‫And so let's write them all out here. 39 00:02:31,350 --> 00:02:36,350 ‫So first, we need to load the authenticated user. 40 00:02:40,470 --> 00:02:45,430 ‫Then while that is happening, let's show a spinner. 41 00:02:47,610 --> 00:02:52,610 ‫Then if there is no authenticated user, 42 00:02:55,440 --> 00:02:59,540 ‫then redirect to the login page. 43 00:03:01,890 --> 00:03:06,890 ‫And finally, if there is a user, render the app. 44 00:03:10,860 --> 00:03:13,803 ‫And so that's basically this step number four here. 45 00:03:15,738 --> 00:03:18,510 ‫And so now let's do these four here one by one, 46 00:03:18,510 --> 00:03:22,020 ‫starting with loading the authenticated user. 47 00:03:22,020 --> 00:03:26,730 ‫And so for that, we once again will create a new function 48 00:03:26,730 --> 00:03:28,380 ‫here in API auth. 49 00:03:30,240 --> 00:03:33,240 ‫Now you might wonder why we actually need a function 50 00:03:33,240 --> 00:03:36,180 ‫to load the user from Supabase again 51 00:03:36,180 --> 00:03:39,480 ‫if we just saw the user here in the console 52 00:03:39,480 --> 00:03:42,030 ‫right after logging in. 53 00:03:42,030 --> 00:03:45,510 ‫Now the thing is that the user might want to access 54 00:03:45,510 --> 00:03:47,280 ‫this page a bit later, 55 00:03:47,280 --> 00:03:50,400 ‫so not only after they have logged in. 56 00:03:50,400 --> 00:03:53,340 ‫So in a web application, even if you logged in 57 00:03:53,340 --> 00:03:56,970 ‫like a day ago and if you then reload the page, 58 00:03:56,970 --> 00:03:59,433 ‫you will still want to be logged in, 59 00:04:00,420 --> 00:04:05,220 ‫not only immediately after you do that login process. 60 00:04:05,220 --> 00:04:08,400 ‫And so then each time that you reload the page, 61 00:04:08,400 --> 00:04:11,250 ‫for example, a day later, then that user 62 00:04:11,250 --> 00:04:15,723 ‫will need to be refetched from the Supabase API. 63 00:04:17,640 --> 00:04:20,280 ‫And so then we can check if that user exists 64 00:04:20,280 --> 00:04:22,773 ‫and if they are still authenticated. 65 00:04:24,195 --> 00:04:28,673 ‫And so here we will now create a function called get user 66 00:04:31,350 --> 00:04:35,163 ‫or maybe get current user. 67 00:04:36,360 --> 00:04:39,900 ‫So for this, first we actually need to check 68 00:04:39,900 --> 00:04:43,350 ‫whether there is an active session. 69 00:04:43,350 --> 00:04:47,160 ‫So for that we use get session. 70 00:04:47,160 --> 00:04:49,320 ‫And so this will actually get that data 71 00:04:49,320 --> 00:04:52,113 ‫from local storage that I showed you earlier. 72 00:04:55,470 --> 00:04:59,943 ‫So this receives some data, let's rename this to session. 73 00:05:02,128 --> 00:05:05,873 ‫And so if there is no session at all, 74 00:05:07,320 --> 00:05:10,050 ‫if there is no session.session, 75 00:05:10,050 --> 00:05:15,050 ‫which is actually the name, then we just return null here. 76 00:05:15,420 --> 00:05:18,240 ‫So then there is really no current user. 77 00:05:18,240 --> 00:05:19,620 ‫But if there is, 78 00:05:19,620 --> 00:05:23,640 ‫then we can get that user again from Supabase. 79 00:05:23,640 --> 00:05:25,830 ‫And once again, you might think that 80 00:05:25,830 --> 00:05:29,670 ‫we could just get the user here from the session. 81 00:05:29,670 --> 00:05:32,760 ‫And while that is true, it is a bit more secure 82 00:05:32,760 --> 00:05:35,883 ‫to just redownload everything from Supabase. 83 00:05:38,610 --> 00:05:42,300 ‫So this will get the normal data and error 84 00:05:42,300 --> 00:05:46,090 ‫and then, as always, await Supabase 85 00:05:47,224 --> 00:05:51,273 ‫then the auth module and then get user. 86 00:05:53,400 --> 00:05:58,400 ‫So here, let's lock that user, which is called data. 87 00:06:00,270 --> 00:06:05,013 ‫Then here, let's just grab this part. 88 00:06:05,880 --> 00:06:09,330 ‫And then we are actually only really interested in 89 00:06:09,330 --> 00:06:11,820 ‫returning the user itself. 90 00:06:11,820 --> 00:06:15,150 ‫So remember how earlier we saw here an object 91 00:06:15,150 --> 00:06:18,480 ‫which had the session and the user? 92 00:06:18,480 --> 00:06:20,940 ‫So that session is not really important for us. 93 00:06:20,940 --> 00:06:24,930 ‫And so let's just return .user 94 00:06:24,930 --> 00:06:28,623 ‫and also just make sure to check that it actually exists. 95 00:06:32,040 --> 00:06:35,640 ‫Now as always, we will actually manage this state 96 00:06:35,640 --> 00:06:37,500 ‫using React Query. 97 00:06:37,500 --> 00:06:41,943 ‫So let's create ourselves a use user hook 98 00:06:46,920 --> 00:06:50,853 ‫and then export function, use user. 99 00:06:51,900 --> 00:06:54,360 ‫So it will basically get the current user 100 00:06:54,360 --> 00:06:56,130 ‫and store it into cache. 101 00:06:56,130 --> 00:06:58,800 ‫And so then, it will not have to be redownloaded 102 00:06:58,800 --> 00:07:01,080 ‫each time that it's necessary. 103 00:07:01,080 --> 00:07:03,810 ‫So here we're gonna just use query. 104 00:07:03,810 --> 00:07:08,520 ‫And then from there, we get the loading state 105 00:07:08,520 --> 00:07:11,160 ‫which is one of the big reasons why we choose 106 00:07:11,160 --> 00:07:15,090 ‫to manage the state always with redd query. 107 00:07:15,090 --> 00:07:16,500 ‫Then we get our data 108 00:07:16,500 --> 00:07:21,150 ‫which we rename to user and then or error 109 00:07:21,150 --> 00:07:25,653 ‫which we're not really gonna use, so we don't need it. 110 00:07:26,730 --> 00:07:29,310 ‫So use query here. 111 00:07:29,310 --> 00:07:34,083 ‫And then the query, let's start with the key. 112 00:07:35,880 --> 00:07:38,258 ‫Let's call it just user. 113 00:07:38,258 --> 00:07:41,460 ‫And then the query function 114 00:07:41,460 --> 00:07:43,950 ‫will be the one that we just created. 115 00:07:43,950 --> 00:07:47,733 ‫So that's get current user. 116 00:07:50,700 --> 00:07:55,700 ‫And then from here, let's return the is loading state 117 00:07:58,200 --> 00:08:00,063 ‫and the user itself. 118 00:08:02,670 --> 00:08:05,223 ‫So the login form we no longer need. 119 00:08:06,810 --> 00:08:09,630 ‫The app, let's keep it open. 120 00:08:09,630 --> 00:08:12,610 ‫And then here, let's use that custom hook 121 00:08:13,710 --> 00:08:15,840 ‫that we just created. 122 00:08:15,840 --> 00:08:20,700 ‫So we get the user and the is loading state 123 00:08:20,700 --> 00:08:22,743 ‫from use user. 124 00:08:25,920 --> 00:08:27,810 ‫Now while this is loading, 125 00:08:27,810 --> 00:08:32,810 ‫remember we then want to show a loading spinner, 126 00:08:33,030 --> 00:08:36,363 ‫so return spinner. 127 00:08:37,440 --> 00:08:39,330 ‫And actually, we should wrap this here 128 00:08:39,330 --> 00:08:41,850 ‫into a full page element 129 00:08:41,850 --> 00:08:44,640 ‫so that the spinner then really renders 130 00:08:44,640 --> 00:08:47,490 ‫here in the center of the page. 131 00:08:47,490 --> 00:08:49,380 ‫So let's quickly write that here 132 00:08:49,380 --> 00:08:50,943 ‫as a styled component. 133 00:08:52,613 --> 00:08:54,183 ‫That we don't have yet. 134 00:08:55,410 --> 00:08:58,380 ‫So that's styled from styled components 135 00:08:58,380 --> 00:08:59,913 ‫not from React Query. 136 00:09:00,930 --> 00:09:01,953 ‫Dot diff. 137 00:09:03,180 --> 00:09:06,183 ‫And so let's give it a height of 100 VH. 138 00:09:09,540 --> 00:09:10,653 ‫Background color. 139 00:09:11,550 --> 00:09:14,883 ‫Here we get one of our variables. 140 00:09:18,000 --> 00:09:21,660 ‫Then here, for some reason, we got that code. 141 00:09:21,660 --> 00:09:25,293 ‫And then let's just center it using flex box. 142 00:09:26,880 --> 00:09:31,830 ‫Center and finally, justify content center as well. 143 00:09:31,830 --> 00:09:36,830 ‫And then here, let's just wrap that whole thing in there. 144 00:09:42,060 --> 00:09:45,570 ‫Now the most important part is actually this one 145 00:09:45,570 --> 00:09:49,230 ‫but let's actually immediately try this out. 146 00:09:49,230 --> 00:09:52,500 ‫So I believe we did log in earlier, 147 00:09:52,500 --> 00:09:56,790 ‫and so here we should have something, 148 00:09:56,790 --> 00:09:57,843 ‫or actually we don't. 149 00:10:01,740 --> 00:10:04,730 ‫So let's come to the login page. 150 00:10:07,830 --> 00:10:10,410 ‫Here we already have our credentials 151 00:10:10,410 --> 00:10:13,170 ‫and so let's log in and notice 152 00:10:13,170 --> 00:10:16,170 ‫how we actually got that rotating spinner there 153 00:10:16,170 --> 00:10:17,703 ‫like for a split second. 154 00:10:19,410 --> 00:10:20,343 ‫Did you see that? 155 00:10:21,210 --> 00:10:25,350 ‫And so now here, we do have this current user. 156 00:10:25,350 --> 00:10:30,350 ‫And so then here, this function will get that user 157 00:10:31,440 --> 00:10:33,000 ‫from the local storage. 158 00:10:33,000 --> 00:10:35,220 ‫Then that means that we have a session. 159 00:10:35,220 --> 00:10:37,290 ‫And then based on that, 160 00:10:37,290 --> 00:10:41,100 ‫we will fetch the current user from Supabase. 161 00:10:41,100 --> 00:10:46,100 ‫And so later, we then get that data here into our query. 162 00:10:47,400 --> 00:10:50,280 ‫So into our React Query. 163 00:10:50,280 --> 00:10:52,533 ‫And so that should now be in here. 164 00:10:53,970 --> 00:10:57,960 ‫And indeed, here is all the data that we need. 165 00:10:57,960 --> 00:11:00,510 ‫And one of the most important parts 166 00:11:00,510 --> 00:11:04,080 ‫is this role here set to authenticate it. 167 00:11:04,080 --> 00:11:08,070 ‫And so let's actually here immediately use that 168 00:11:08,070 --> 00:11:12,993 ‫to also return the is authenticated data 169 00:11:15,390 --> 00:11:18,300 ‫so that we don't have to check it anywhere else 170 00:11:18,300 --> 00:11:21,063 ‫but instead, we compute that right here. 171 00:11:21,990 --> 00:11:26,990 ‫So user and if they exist, dot role equal authenticated. 172 00:11:33,180 --> 00:11:35,880 ‫So that's exactly what we have here. 173 00:11:35,880 --> 00:11:38,250 ‫So if this part here is true, 174 00:11:38,250 --> 00:11:40,710 ‫then is authenticated will be true. 175 00:11:40,710 --> 00:11:44,430 ‫And then based on that, here we can take this decision. 176 00:11:44,430 --> 00:11:46,710 ‫So whether the user should be redirected 177 00:11:46,710 --> 00:11:50,853 ‫to log in or if the application should be rendered. 178 00:11:52,980 --> 00:11:57,060 ‫And so now for the ultimate test, let's try this again. 179 00:11:57,060 --> 00:12:00,513 ‫And then we should see that rotating spinner there. 180 00:12:01,470 --> 00:12:03,060 ‫So saw that. 181 00:12:03,060 --> 00:12:07,743 ‫That was because our user was fetched from Supabase. 182 00:12:10,320 --> 00:12:12,540 ‫And now for the final part, 183 00:12:12,540 --> 00:12:14,910 ‫if there is no authenticated user 184 00:12:14,910 --> 00:12:18,180 ‫then we want to redirect back to login 185 00:12:18,180 --> 00:12:19,770 ‫because in this situation, 186 00:12:19,770 --> 00:12:23,640 ‫the user is, of course, not allowed into the application. 187 00:12:23,640 --> 00:12:27,903 ‫And so that's what redirecting to login basically means. 188 00:12:29,970 --> 00:12:34,970 ‫So here we will need the navigate function 189 00:12:36,960 --> 00:12:40,710 ‫from use navigate like this 190 00:12:40,710 --> 00:12:43,830 ‫but we are only allowed to call this function here 191 00:12:43,830 --> 00:12:46,980 ‫inside some other function like in a callback 192 00:12:46,980 --> 00:12:48,780 ‫or in a use effect. 193 00:12:48,780 --> 00:12:52,410 ‫So not at the top level of the component. 194 00:12:52,410 --> 00:12:56,253 ‫And so here, let's just use a use effect for that. 195 00:13:00,870 --> 00:13:03,873 ‫So we create our function here. 196 00:13:06,210 --> 00:13:07,910 ‫And so here we can say... 197 00:13:10,560 --> 00:13:12,660 ‫We don't even need the user here 198 00:13:12,660 --> 00:13:15,870 ‫but all we need is that is authenticated state 199 00:13:15,870 --> 00:13:17,283 ‫that we created earlier. 200 00:13:20,670 --> 00:13:25,670 ‫And so now here we can say if is not authenticated, 201 00:13:27,030 --> 00:13:32,030 ‫then we want to navigate to the log in page. 202 00:13:36,000 --> 00:13:38,250 ‫But actually, this is not even enough 203 00:13:38,250 --> 00:13:41,157 ‫because in the beginning, while we are still loading, 204 00:13:41,157 --> 00:13:45,210 ‫the user is also not authenticated yet. 205 00:13:45,210 --> 00:13:46,410 ‫But that doesn't mean 206 00:13:46,410 --> 00:13:49,563 ‫that we want to redirect them to the login page. 207 00:13:50,435 --> 00:13:54,740 ‫And so here, let's also say and is not is loading. 208 00:13:56,430 --> 00:13:59,010 ‫So basically when we are no longer loading 209 00:13:59,010 --> 00:14:01,770 ‫and then the user is not authenticated, 210 00:14:01,770 --> 00:14:04,230 ‫then that means that they are not allowed 211 00:14:04,230 --> 00:14:05,580 ‫into the application. 212 00:14:05,580 --> 00:14:09,840 ‫And so then we redirect them to the login page. 213 00:14:09,840 --> 00:14:14,840 ‫Now here, thanks to this error message, 214 00:14:15,210 --> 00:14:20,010 ‫we can again prevent some big mistake 215 00:14:20,010 --> 00:14:23,643 ‫which would be to call this hook here conditionally. 216 00:14:25,620 --> 00:14:27,720 ‫So this is your condition. 217 00:14:27,720 --> 00:14:30,210 ‫And so that would then change the call order 218 00:14:30,210 --> 00:14:34,080 ‫of our react hooks, which remember, is not allowed. 219 00:14:34,080 --> 00:14:37,170 ‫And so that's why we have these ESLint rules 220 00:14:37,170 --> 00:14:39,393 ‫that prevent us from doing that. 221 00:14:41,040 --> 00:14:44,283 ‫So let's just change the order here. 222 00:14:45,420 --> 00:14:49,230 ‫And then here we need to also give this effect 223 00:14:49,230 --> 00:14:52,200 ‫all the things that it needs. 224 00:14:52,200 --> 00:14:57,200 ‫So is loading, and also the navigate function. 225 00:15:00,120 --> 00:15:04,173 ‫And now I believe that we actually have everything here. 226 00:15:05,340 --> 00:15:07,680 ‫In the end here let's just make sure 227 00:15:07,680 --> 00:15:12,680 ‫that this really only get returned if is authenticated. 228 00:15:13,890 --> 00:15:17,040 ‫So only then return these children, 229 00:15:17,040 --> 00:15:19,953 ‫which again, is just the application itself. 230 00:15:21,240 --> 00:15:25,030 ‫So let's reload and we are still logged in 231 00:15:26,610 --> 00:15:28,830 ‫and so, beautiful. 232 00:15:28,830 --> 00:15:33,830 ‫And I guess that if we remove this access token from here, 233 00:15:34,140 --> 00:15:35,583 ‫so from local storage, 234 00:15:36,480 --> 00:15:39,960 ‫and you can do that or you also don't have to, 235 00:15:39,960 --> 00:15:43,470 ‫then immediately once we go back to the app, 236 00:15:43,470 --> 00:15:46,893 ‫we are redirected to the login page. 237 00:15:48,330 --> 00:15:51,120 ‫So this means that indeed the logic 238 00:15:51,120 --> 00:15:54,570 ‫that we just wrote is working. 239 00:15:54,570 --> 00:15:59,160 ‫So here we do have the user but we see that it is null, 240 00:15:59,160 --> 00:16:01,530 ‫so it doesn't exist, basically. 241 00:16:01,530 --> 00:16:04,260 ‫And the reason for that comes from here 242 00:16:04,260 --> 00:16:06,723 ‫because the session does not exist. 243 00:16:09,540 --> 00:16:14,370 ‫But now let's indeed log in again and well, 244 00:16:14,370 --> 00:16:16,140 ‫nothing happened. 245 00:16:16,140 --> 00:16:20,400 ‫So we should have moved now actually to the dashboard. 246 00:16:20,400 --> 00:16:24,303 ‫So let's just manually reload here and try that again. 247 00:16:25,650 --> 00:16:27,660 ‫And great. 248 00:16:27,660 --> 00:16:29,760 ‫So that does actually work. 249 00:16:29,760 --> 00:16:32,910 ‫We just had to reload the page here. 250 00:16:32,910 --> 00:16:35,640 ‫Now maybe you noticed that we still got 251 00:16:35,640 --> 00:16:37,920 ‫that rotating spinner there. 252 00:16:37,920 --> 00:16:42,300 ‫So let me show that to you again by deleting this here 253 00:16:42,300 --> 00:16:45,450 ‫which is effectively logging out. 254 00:16:45,450 --> 00:16:47,433 ‫And so then if I reload, 255 00:16:48,300 --> 00:16:51,180 ‫then it automatically gets me here. 256 00:16:51,180 --> 00:16:54,190 ‫Let's just make sure again by manually loading 257 00:16:55,770 --> 00:16:59,130 ‫and then watch what happens as I click here. 258 00:16:59,130 --> 00:17:01,050 ‫So for a short period of time, 259 00:17:01,050 --> 00:17:04,203 ‫you will see the spinner rotating there. 260 00:17:06,480 --> 00:17:08,010 ‫Saw that? 261 00:17:08,010 --> 00:17:11,880 ‫Now in this case, that's not really necessary. 262 00:17:11,880 --> 00:17:15,450 ‫It is necessary if we come back later to the page 263 00:17:15,450 --> 00:17:19,740 ‫like so, then here, React Query will need 264 00:17:19,740 --> 00:17:21,990 ‫to refetch the user's data. 265 00:17:21,990 --> 00:17:24,570 ‫But immediately after we logged in, 266 00:17:24,570 --> 00:17:28,860 ‫that data has just been downloaded at that very moment. 267 00:17:28,860 --> 00:17:30,780 ‫And so in that situation, 268 00:17:30,780 --> 00:17:35,250 ‫it's not necessary to then run this again, 269 00:17:35,250 --> 00:17:38,370 ‫so running this get current user again. 270 00:17:38,370 --> 00:17:41,670 ‫Instead, React Query could simply get this data 271 00:17:41,670 --> 00:17:44,820 ‫from the cache if we put it there immediately 272 00:17:44,820 --> 00:17:46,113 ‫after logging in. 273 00:17:47,190 --> 00:17:49,410 ‫So that would be a really nice thing 274 00:17:49,410 --> 00:17:52,680 ‫and make the login a little bit quicker. 275 00:17:52,680 --> 00:17:56,070 ‫So it's not 100% necessary to do this 276 00:17:56,070 --> 00:17:59,100 ‫but I think it's a good idea to do so. 277 00:17:59,100 --> 00:18:03,060 ‫And so let's come in here to use login. 278 00:18:03,060 --> 00:18:04,500 ‫And so on success, 279 00:18:04,500 --> 00:18:07,830 ‫what we're going to do is what I just said. 280 00:18:07,830 --> 00:18:10,950 ‫So we will take the newly logged in user 281 00:18:10,950 --> 00:18:15,753 ‫and manually add them to the React Query cache. 282 00:18:16,710 --> 00:18:21,033 ‫So for that, first of all, we need again our query client. 283 00:18:22,980 --> 00:18:23,910 ‫And so with this, 284 00:18:23,910 --> 00:18:26,940 ‫I will show you yet another really great feature 285 00:18:26,940 --> 00:18:28,173 ‫of React Query. 286 00:18:30,780 --> 00:18:33,690 ‫So use query. 287 00:18:33,690 --> 00:18:35,223 ‫It's use query client. 288 00:18:37,569 --> 00:18:39,510 ‫So this one we do not need. 289 00:18:41,730 --> 00:18:45,720 ‫And then here on that query client 290 00:18:45,720 --> 00:18:49,290 ‫where we also called things like invalidating queries 291 00:18:49,290 --> 00:18:54,290 ‫or prefetching queries, we can also use set query data. 292 00:18:56,070 --> 00:19:00,630 ‫And so then we just specify the query key. 293 00:19:00,630 --> 00:19:04,143 ‫And so that is user and then the value. 294 00:19:05,909 --> 00:19:09,150 ‫And so again, this basically allows us to manually 295 00:19:09,150 --> 00:19:12,990 ‫set some data into the React Query cache. 296 00:19:12,990 --> 00:19:17,970 ‫And so then here in this use user that will be called later 297 00:19:17,970 --> 00:19:20,700 ‫and which uses the same query key, 298 00:19:20,700 --> 00:19:24,840 ‫React Query will then simply get this data from the cache, 299 00:19:24,840 --> 00:19:28,023 ‫so just like in all other situations. 300 00:19:29,760 --> 00:19:31,980 ‫So let's try that. 301 00:19:31,980 --> 00:19:34,530 ‫Let's delete this from here. 302 00:19:34,530 --> 00:19:37,170 ‫And then immediately we are greeted again 303 00:19:37,170 --> 00:19:38,610 ‫with our login page. 304 00:19:38,610 --> 00:19:40,980 ‫And now as we log in, we shouldn't see 305 00:19:40,980 --> 00:19:42,363 ‫that rotating spinner. 306 00:19:43,500 --> 00:19:45,720 ‫And well, it actually was there 307 00:19:45,720 --> 00:19:50,720 ‫but I believe that React Query did not refetch that data. 308 00:19:52,110 --> 00:19:56,763 ‫At least it shouldn't have. 309 00:19:57,720 --> 00:19:59,733 ‫So let's clear all of this here. 310 00:20:01,320 --> 00:20:02,670 ‫And this is not that important. 311 00:20:02,670 --> 00:20:06,183 ‫This is just a bit for fun, so to say. 312 00:20:07,747 --> 00:20:12,747 ‫So let's reload and then let's see how many network requests 313 00:20:13,230 --> 00:20:15,063 ‫are going to be made. 314 00:20:16,110 --> 00:20:21,110 ‫So probably a lot of them, but let's just see. 315 00:20:22,260 --> 00:20:25,350 ‫So this one here is probably the login itself 316 00:20:25,350 --> 00:20:29,880 ‫and then here maybe the user was actually refetched again 317 00:20:29,880 --> 00:20:31,830 ‫so I'm not really sure about that. 318 00:20:31,830 --> 00:20:34,980 ‫But in any case, really what I wanted to do here 319 00:20:34,980 --> 00:20:38,280 ‫mainly was to show you this feature 320 00:20:38,280 --> 00:20:41,190 ‫so that we can also manually set some data 321 00:20:41,190 --> 00:20:43,653 ‫into React Query's cache. 322 00:20:46,920 --> 00:20:51,920 ‫So let's just come back here to the application again 323 00:20:54,720 --> 00:20:57,120 ‫and I will delete this one last time. 324 00:20:57,120 --> 00:20:59,310 ‫And I promise this is the last time, 325 00:20:59,310 --> 00:21:00,720 ‫because in the next lecture, 326 00:21:00,720 --> 00:21:03,393 ‫we will actually implement user logout. 327 00:21:04,410 --> 00:21:07,920 ‫But in any case, let's just do this one more time 328 00:21:07,920 --> 00:21:09,900 ‫because now I want to show you 329 00:21:09,900 --> 00:21:12,780 ‫that we forgot to do something earlier. 330 00:21:12,780 --> 00:21:16,830 ‫So in these situations where the credentials are wrong, 331 00:21:16,830 --> 00:21:20,430 ‫then here after that is wrong, 332 00:21:20,430 --> 00:21:24,060 ‫we actually want to delete these inputs here. 333 00:21:24,060 --> 00:21:28,080 ‫So it's not normal that this password and the address 334 00:21:28,080 --> 00:21:30,663 ‫stay there in the field after the error. 335 00:21:32,040 --> 00:21:33,420 ‫So let's fix that. 336 00:21:33,420 --> 00:21:37,233 ‫And I believe here we can already close all of this. 337 00:21:38,220 --> 00:21:40,983 ‫So we implemented all of this successfully, 338 00:21:42,120 --> 00:21:45,240 ‫including this component right here, 339 00:21:45,240 --> 00:21:47,610 ‫this very important one. 340 00:21:47,610 --> 00:21:50,250 ‫And now let's come back to our login form 341 00:21:50,250 --> 00:21:55,250 ‫and then add some option here to this login function, 342 00:21:57,780 --> 00:22:00,543 ‫'cause remember that this is a mutate function. 343 00:22:01,500 --> 00:22:04,530 ‫And so we can set some options here, 344 00:22:04,530 --> 00:22:09,530 ‫for example, the onsettled handler. 345 00:22:11,280 --> 00:22:13,260 ‫And in this case here, 346 00:22:13,260 --> 00:22:18,260 ‫we cannot add this right into use login. 347 00:22:18,660 --> 00:22:21,750 ‫So we cannot clear these fields here 348 00:22:21,750 --> 00:22:24,870 ‫because of course we don't have access to 349 00:22:24,870 --> 00:22:26,670 ‫these date variables here. 350 00:22:26,670 --> 00:22:30,060 ‫And so therefore we need to do that outside. 351 00:22:30,060 --> 00:22:33,660 ‫So all we need to do is to set email 352 00:22:33,660 --> 00:22:38,660 ‫and set password back to these empty strings. 353 00:22:40,770 --> 00:22:43,953 ‫So let's try that, write something else. 354 00:22:46,950 --> 00:22:48,483 ‫So that's a lot nicer. 355 00:22:50,190 --> 00:22:53,130 ‫And now it does work. 356 00:22:53,130 --> 00:22:54,270 ‫Beautiful. 357 00:22:54,270 --> 00:22:57,120 ‫So we have in this short period of time, 358 00:22:57,120 --> 00:22:59,310 ‫at least relatively short, 359 00:22:59,310 --> 00:23:03,480 ‫implemented both authentication and authorization 360 00:23:03,480 --> 00:23:08,190 ‫and all on the back of this really great Supabase feature 361 00:23:08,190 --> 00:23:10,140 ‫which makes it really, really easy 362 00:23:10,140 --> 00:23:12,690 ‫to add this very important part 363 00:23:12,690 --> 00:23:15,360 ‫to all our web applications. 364 00:23:15,360 --> 00:23:18,090 ‫And now moving on, as I promised, 365 00:23:18,090 --> 00:23:21,093 ‫we will implement the logout functionality.