1 00:00:01,170 --> 00:00:03,900 ‫Now it's time to turn our attention 2 00:00:03,900 --> 00:00:06,690 ‫to one of the most fundamental parts 3 00:00:06,690 --> 00:00:09,060 ‫of building web applications 4 00:00:09,060 --> 00:00:13,653 ‫and that is user authentication and authorization. 5 00:00:15,060 --> 00:00:18,150 ‫So at the very beginning we said that 6 00:00:18,150 --> 00:00:21,750 ‫users actually need to be logged into the application 7 00:00:21,750 --> 00:00:23,550 ‫in order to use it. 8 00:00:23,550 --> 00:00:26,520 ‫And so now we're going to use Supabase 9 00:00:26,520 --> 00:00:30,510 ‫to implement this super important part of this 10 00:00:30,510 --> 00:00:34,080 ‫and of most other web applications. 11 00:00:34,080 --> 00:00:36,000 ‫We will also use Supabase 12 00:00:36,000 --> 00:00:38,730 ‫to sign up users in the first place, 13 00:00:38,730 --> 00:00:41,940 ‫to update their data and password 14 00:00:41,940 --> 00:00:45,540 ‫and even to upload a user avatar. 15 00:00:45,540 --> 00:00:48,900 ‫So this is really, really exciting stuff 16 00:00:48,900 --> 00:00:51,960 ‫that we use in the real world all the time. 17 00:00:51,960 --> 00:00:54,220 ‫And so let's now get to it 18 00:00:56,068 --> 00:00:59,970 ‫and we're gonna start by implementing the login form. 19 00:00:59,970 --> 00:01:02,825 ‫So we already have the login page and the login route, 20 00:01:02,825 --> 00:01:07,825 ‫but then we don't have any real content here. 21 00:01:08,010 --> 00:01:09,600 ‫And so now we need that form 22 00:01:09,600 --> 00:01:13,950 ‫where the user can input their email or their username 23 00:01:13,950 --> 00:01:15,543 ‫and their passwords. 24 00:01:17,160 --> 00:01:21,960 ‫So we actually already have most of that stuff done. 25 00:01:21,960 --> 00:01:25,830 ‫So here inside our features folder in authentication 26 00:01:25,830 --> 00:01:28,860 ‫we already have the login form. 27 00:01:28,860 --> 00:01:33,860 ‫And so let's move here to the pages, so to the login page. 28 00:01:34,260 --> 00:01:35,610 ‫And then here 29 00:01:35,610 --> 00:01:40,263 ‫let's basically import that login form component. 30 00:01:42,600 --> 00:01:47,223 ‫So login form like this and nice, 31 00:01:49,847 --> 00:01:51,843 ‫so this already looks like something, 32 00:01:52,890 --> 00:01:55,140 ‫make this a bit smaller. 33 00:01:55,140 --> 00:01:59,760 ‫And then maybe let's also place the company's logo here 34 00:01:59,760 --> 00:02:02,403 ‫and also some tile there. 35 00:02:03,630 --> 00:02:05,130 ‫So for that we can use 36 00:02:05,130 --> 00:02:08,820 ‫the logo component that we already have 37 00:02:08,820 --> 00:02:12,510 ‫and also the heading component. 38 00:02:12,510 --> 00:02:14,830 ‫And let's try an h3 here 39 00:02:17,820 --> 00:02:22,720 ‫and then log in to your account. 40 00:02:25,530 --> 00:02:26,970 ‫All right. 41 00:02:26,970 --> 00:02:30,480 ‫Now here, maybe we need some other type of heading. 42 00:02:30,480 --> 00:02:35,480 ‫So let's try to create an h4, so that doesn't exist yet. 43 00:02:36,090 --> 00:02:37,330 ‫And so let's come here 44 00:02:39,210 --> 00:02:43,710 ‫and then let's just copy paste this part 45 00:02:43,710 --> 00:02:46,023 ‫and create an h4. 46 00:02:51,030 --> 00:02:55,300 ‫So let's make it slightly bigger here 47 00:02:57,043 --> 00:02:57,960 ‫a bit more font weight 48 00:02:57,960 --> 00:03:02,960 ‫and also text align to the center and beautiful. 49 00:03:03,990 --> 00:03:07,410 ‫So that's looking really nice I think. 50 00:03:07,410 --> 00:03:10,680 ‫And so with this, we finished the login page 51 00:03:10,680 --> 00:03:14,193 ‫and so let's now come check out our login form. 52 00:03:15,911 --> 00:03:16,744 ‫So here we already have two pieces of state 53 00:03:16,744 --> 00:03:21,720 ‫because here we simply have these two inputs 54 00:03:21,720 --> 00:03:24,330 ‫which are controlled elements. 55 00:03:24,330 --> 00:03:27,393 ‫Then here we also have the form row vertical. 56 00:03:28,560 --> 00:03:32,160 ‫So this component that was already in your starter files 57 00:03:32,160 --> 00:03:34,920 ‫and which is very similar to the form row 58 00:03:34,920 --> 00:03:37,530 ‫that we built ourselves earlier. 59 00:03:37,530 --> 00:03:39,630 ‫So it's just the difference that here 60 00:03:39,630 --> 00:03:42,213 ‫the styling is a lot simpler. 61 00:03:43,200 --> 00:03:45,030 ‫Then here we have the standard stuff 62 00:03:45,030 --> 00:03:47,160 ‫for controlled elements 63 00:03:47,160 --> 00:03:50,160 ‫and then here we also have this auto complete prop, 64 00:03:50,160 --> 00:03:53,340 ‫which is basically used by password managers 65 00:03:53,340 --> 00:03:56,703 ‫to make login forms work a little bit better. 66 00:03:58,530 --> 00:04:00,600 ‫So this has nothing to do with React, 67 00:04:00,600 --> 00:04:05,600 ‫it's again just for password managers now, right? 68 00:04:06,990 --> 00:04:11,670 ‫And so this is the JSX basically that we need for a form 69 00:04:11,670 --> 00:04:15,960 ‫and then we can now start working on the handle submit. 70 00:04:15,960 --> 00:04:17,490 ‫But before we can do that, 71 00:04:17,490 --> 00:04:21,180 ‫let's actually finally head over to Supabase 72 00:04:21,180 --> 00:04:24,723 ‫and create our very first user here. 73 00:04:25,770 --> 00:04:28,500 ‫Now, remember how I mentioned earlier 74 00:04:28,500 --> 00:04:32,190 ‫that the users are not a normal table right here 75 00:04:32,190 --> 00:04:35,170 ‫but instead we come to the authentication tab 76 00:04:36,300 --> 00:04:38,850 ‫and then here is where we have basically 77 00:04:38,850 --> 00:04:41,613 ‫a table with our users. 78 00:04:42,510 --> 00:04:46,170 ‫Now, before we create a new user here 79 00:04:46,170 --> 00:04:49,080 ‫let's first come to the providers here. 80 00:04:49,080 --> 00:04:51,360 ‫And so here you can actually enable 81 00:04:51,360 --> 00:04:53,700 ‫all kinds of different providers 82 00:04:53,700 --> 00:04:58,170 ‫where by default we have the email provider activated. 83 00:04:58,170 --> 00:05:00,840 ‫So basically this allows users to sign up 84 00:05:00,840 --> 00:05:03,453 ‫using a password and an email. 85 00:05:04,290 --> 00:05:06,420 ‫Now what I want you to do here is to 86 00:05:06,420 --> 00:05:09,570 ‫deactivate this confirm email. 87 00:05:09,570 --> 00:05:11,790 ‫So for now, we don't need this part 88 00:05:11,790 --> 00:05:13,380 ‫because for development 89 00:05:13,380 --> 00:05:16,260 ‫this is going to be a bit easier, 90 00:05:16,260 --> 00:05:18,510 ‫but here you can really use all kinds of 91 00:05:18,510 --> 00:05:21,240 ‫third party services very easily, 92 00:05:21,240 --> 00:05:24,060 ‫all integrated into Supabase. 93 00:05:24,060 --> 00:05:29,060 ‫So you can have login with Apple or with GitHub 94 00:05:29,460 --> 00:05:32,190 ‫and here you just have to set up 95 00:05:32,190 --> 00:05:34,620 ‫a few things from your GitHub account. 96 00:05:34,620 --> 00:05:35,970 ‫And then with that 97 00:05:35,970 --> 00:05:39,240 ‫you can start accepting logins from GitHub. 98 00:05:39,240 --> 00:05:41,460 ‫So this is really, really cool, 99 00:05:41,460 --> 00:05:43,350 ‫but I'm not gonna go into that 100 00:05:43,350 --> 00:05:46,440 ‫because you can always go read the documentation 101 00:05:46,440 --> 00:05:47,970 ‫for those parts. 102 00:05:47,970 --> 00:05:49,290 ‫Here in this application 103 00:05:49,290 --> 00:05:51,390 ‫we will just use the very simple 104 00:05:51,390 --> 00:05:54,033 ‫and standard email authentication. 105 00:05:56,010 --> 00:05:59,430 ‫All right, so let's come back here to our users 106 00:05:59,430 --> 00:06:01,353 ‫and let's add a new user. 107 00:06:04,020 --> 00:06:08,460 ‫So here I will just use jonas@example.com 108 00:06:08,460 --> 00:06:11,400 ‫but of course you can use any email that you want. 109 00:06:11,400 --> 00:06:15,630 ‫And then here as a password, I will just use pass. 110 00:06:15,630 --> 00:06:19,170 ‫So P-A-S-S 0987. 111 00:06:19,170 --> 00:06:22,893 ‫And again, you can just create any password that you want. 112 00:06:23,820 --> 00:06:26,640 ‫So then let's create our user. 113 00:06:26,640 --> 00:06:28,560 ‫And then all we have to do is to 114 00:06:28,560 --> 00:06:31,983 ‫connect this entire thing with our front end. 115 00:06:33,240 --> 00:06:36,900 ‫All right, so let's then again come here 116 00:06:36,900 --> 00:06:39,183 ‫to our API documentation. 117 00:06:40,020 --> 00:06:44,070 ‫And then here, let's select authentication. 118 00:06:44,070 --> 00:06:46,620 ‫So here to explain a little bit 119 00:06:46,620 --> 00:06:48,720 ‫how authentication works here. 120 00:06:48,720 --> 00:06:50,400 ‫And basically behind the scenes 121 00:06:50,400 --> 00:06:53,580 ‫this is using the JWT technology 122 00:06:53,580 --> 00:06:55,740 ‫which I'm not gonna go into here. 123 00:06:55,740 --> 00:06:58,170 ‫So you can check all of that out if you want 124 00:06:58,170 --> 00:06:59,940 ‫in my Node JS course 125 00:06:59,940 --> 00:07:02,733 ‫where we basically do this here from scratch. 126 00:07:04,050 --> 00:07:07,380 ‫But anyway, what really matters here is actually 127 00:07:07,380 --> 00:07:09,840 ‫the user management part. 128 00:07:09,840 --> 00:07:13,020 ‫So here we can see how to sign up users, 129 00:07:13,020 --> 00:07:15,990 ‫how to log them in with email password 130 00:07:15,990 --> 00:07:18,663 ‫and in other ways as well. 131 00:07:21,360 --> 00:07:24,780 ‫We can also then use OAuth. 132 00:07:24,780 --> 00:07:27,360 ‫We can get the currently logged in user 133 00:07:27,360 --> 00:07:30,370 ‫and we can even do a password reset flow 134 00:07:31,740 --> 00:07:33,960 ‫and then updating and logging out. 135 00:07:33,960 --> 00:07:36,810 ‫So we will use some of them here later. 136 00:07:36,810 --> 00:07:40,650 ‫But for now, let's grab this one right here. 137 00:07:40,650 --> 00:07:42,330 ‫So we already have the user 138 00:07:42,330 --> 00:07:45,210 ‫so we will do user sign up a bit later. 139 00:07:45,210 --> 00:07:48,363 ‫And for now, let's just take this part right here. 140 00:07:50,220 --> 00:07:52,140 ‫So copying that. 141 00:07:52,140 --> 00:07:55,893 ‫And so now we can as always create a new service. 142 00:07:58,230 --> 00:08:01,303 ‫So let's call this one here apiAuth.js. 143 00:08:04,560 --> 00:08:09,560 ‫And then here, let's start with a function called login. 144 00:08:14,370 --> 00:08:16,710 ‫So then let's paste that in here. 145 00:08:16,710 --> 00:08:20,700 ‫And of course it needs to be an async function 146 00:08:20,700 --> 00:08:24,600 ‫and we need to import our Supabase client. 147 00:08:24,600 --> 00:08:28,893 ‫So this Supabase here as always is the Supabase client. 148 00:08:29,940 --> 00:08:33,480 ‫So this one right here that we have created earlier 149 00:08:33,480 --> 00:08:37,023 ‫in this Supabase file, remember that. 150 00:08:38,130 --> 00:08:41,430 ‫But anyway, of course here we don't want to 151 00:08:41,430 --> 00:08:43,200 ‫hard code these values, 152 00:08:43,200 --> 00:08:46,950 ‫but this function should receive them as inputs. 153 00:08:46,950 --> 00:08:49,680 ‫So let's actually paste in an object here 154 00:08:49,680 --> 00:08:53,430 ‫containing email and password. 155 00:08:53,430 --> 00:08:55,500 ‫So in modern front end development 156 00:08:55,500 --> 00:08:57,810 ‫it's pretty common to not pass 157 00:08:57,810 --> 00:09:02,810 ‫in multiple arguments into a function, but just one object. 158 00:09:02,970 --> 00:09:05,970 ‫So here we then immediately de-structure that 159 00:09:05,970 --> 00:09:09,090 ‫and then here we just create a new object 160 00:09:09,090 --> 00:09:11,043 ‫with email and password. 161 00:09:14,820 --> 00:09:15,813 ‫All right. 162 00:09:17,520 --> 00:09:21,400 ‫Then as always here, let's say if there is an error 163 00:09:22,470 --> 00:09:25,710 ‫then just throw a new error. 164 00:09:25,710 --> 00:09:30,710 ‫And this time let's use the error.message. 165 00:09:31,200 --> 00:09:34,470 ‫Then let's also return the data 166 00:09:34,470 --> 00:09:38,700 ‫and maybe for now also log it to the console. 167 00:09:38,700 --> 00:09:41,820 ‫So, basically on our Supabase client 168 00:09:41,820 --> 00:09:44,700 ‫we can use the Auth sub module. 169 00:09:44,700 --> 00:09:48,330 ‫And so then on here we can call all kinds of methods. 170 00:09:48,330 --> 00:09:52,860 ‫And the most basic one is exactly the sign in with password. 171 00:09:52,860 --> 00:09:54,960 ‫And so this then accepts an object 172 00:09:54,960 --> 00:09:57,510 ‫which contains exactly the email 173 00:09:57,510 --> 00:09:59,373 ‫and the user's password. 174 00:10:00,270 --> 00:10:01,410 ‫Now, right? 175 00:10:01,410 --> 00:10:05,340 ‫And so now we can go use this function to log that user 176 00:10:05,340 --> 00:10:08,310 ‫that we created initially in. 177 00:10:08,310 --> 00:10:12,510 ‫Now, in order to do this, we will again use React Query, 178 00:10:12,510 --> 00:10:15,540 ‫but for now, just to see if this actually works 179 00:10:15,540 --> 00:10:18,300 ‫let's call this function here directly 180 00:10:18,300 --> 00:10:20,490 ‫inside our login form. 181 00:10:20,490 --> 00:10:24,188 ‫So right here, this is just a regular form here 182 00:10:24,188 --> 00:10:27,310 ‫so we need to start by preventing default 183 00:10:30,450 --> 00:10:33,270 ‫and then also we need to make sure that email 184 00:10:33,270 --> 00:10:35,670 ‫and passwords actually exist. 185 00:10:35,670 --> 00:10:38,020 ‫So if there is no email 186 00:10:40,560 --> 00:10:45,540 ‫or no password, then just return. 187 00:10:45,540 --> 00:10:49,890 ‫But otherwise, let's call our login function 188 00:10:49,890 --> 00:10:51,660 ‫that we just created 189 00:10:51,660 --> 00:10:56,660 ‫and paste in that object with email and password. 190 00:10:58,170 --> 00:11:00,603 ‫So let's go try this out. 191 00:11:01,920 --> 00:11:04,260 ‫So this doesn't need to be so big. 192 00:11:04,260 --> 00:11:08,223 ‫And here let's see if we then get something in our console. 193 00:11:09,420 --> 00:11:14,160 ‫So let's use that email that I had earlier 194 00:11:14,160 --> 00:11:19,160 ‫and then the password of PASS0987, let's click log in 195 00:11:20,790 --> 00:11:24,810 ‫and then let's wait if something actually happens. 196 00:11:24,810 --> 00:11:28,650 ‫And indeed now here we got our data back 197 00:11:28,650 --> 00:11:30,840 ‫from authentication. 198 00:11:30,840 --> 00:11:35,460 ‫So we have this active session now with this access token. 199 00:11:35,460 --> 00:11:36,990 ‫And so maybe you recognize 200 00:11:36,990 --> 00:11:41,280 ‫that this is really just a JWT token. 201 00:11:41,280 --> 00:11:43,203 ‫We have a refresh token even. 202 00:11:44,460 --> 00:11:46,980 ‫And so that's the stuff about the session. 203 00:11:46,980 --> 00:11:49,323 ‫And we have the user itself. 204 00:11:50,550 --> 00:11:54,520 ‫So we have when they were created, we have their email 205 00:11:55,920 --> 00:11:57,960 ‫and very importantly 206 00:11:57,960 --> 00:12:00,810 ‫we have this role here of authenticated, 207 00:12:00,810 --> 00:12:05,160 ‫which means that indeed the user is now authenticated. 208 00:12:05,160 --> 00:12:08,580 ‫And so from now on, on all the next requests 209 00:12:08,580 --> 00:12:12,810 ‫Supabase will automatically send this data to the server 210 00:12:12,810 --> 00:12:15,540 ‫to basically let Supabase know 211 00:12:15,540 --> 00:12:18,630 ‫that we are currently authenticated. 212 00:12:18,630 --> 00:12:23,163 ‫So Supabase, I believe stores this data in local storage. 213 00:12:24,240 --> 00:12:25,533 ‫So let's check. 214 00:12:27,360 --> 00:12:32,360 ‫And yeah, so here is the access token 215 00:12:32,430 --> 00:12:35,820 ‫that we just saw earlier with the same refresh token 216 00:12:35,820 --> 00:12:40,293 ‫and with the user object itself as well. 217 00:12:42,000 --> 00:12:47,000 ‫Now right, now maybe this changes in the future in some way. 218 00:12:47,520 --> 00:12:49,233 ‫Ah, well now I deleted it. 219 00:12:50,070 --> 00:12:55,070 ‫So let's get that again actually because we will need it 220 00:12:55,530 --> 00:12:59,400 ‫inside that local storage in the future. 221 00:12:59,400 --> 00:13:02,913 ‫So not sure if this is the data that just came back, 222 00:13:03,930 --> 00:13:05,760 ‫but yeah, so now we have this data 223 00:13:05,760 --> 00:13:07,593 ‫back in our local storage. 224 00:13:10,620 --> 00:13:11,700 ‫Great. 225 00:13:11,700 --> 00:13:13,860 ‫Now of course, once this is done 226 00:13:13,860 --> 00:13:16,800 ‫we then want to redirect the user 227 00:13:16,800 --> 00:13:19,560 ‫to the homepage of the application, 228 00:13:19,560 --> 00:13:22,380 ‫which in our case is gonna be the dashboard. 229 00:13:22,380 --> 00:13:25,620 ‫And we also want to show some indicator here 230 00:13:25,620 --> 00:13:28,770 ‫that login is actually happening right now. 231 00:13:28,770 --> 00:13:33,273 ‫And so for all that it's best to again use React Query. 232 00:13:35,070 --> 00:13:39,660 ‫So let's create inside authentication here 233 00:13:39,660 --> 00:13:43,393 ‫a new custom hook called useLogin.js. 234 00:13:46,950 --> 00:13:51,093 ‫And then here, let's get rid of this part. 235 00:13:54,660 --> 00:13:59,280 ‫And also let's actually grab this email address from here. 236 00:13:59,280 --> 00:14:02,100 ‫And temporarily while we are developing 237 00:14:02,100 --> 00:14:05,490 ‫I will just place them here as default values 238 00:14:05,490 --> 00:14:09,303 ‫so that we don't have to always type it by hand. 239 00:14:11,580 --> 00:14:13,050 ‫Now, right? 240 00:14:13,050 --> 00:14:18,050 ‫And so now here, let's create that function. 241 00:14:18,750 --> 00:14:20,650 ‫So use log in 242 00:14:23,490 --> 00:14:27,060 ‫and then here we will use a mutation actually 243 00:14:27,060 --> 00:14:30,060 ‫to handle this login. 244 00:14:30,060 --> 00:14:31,410 ‫So it's a mutation 245 00:14:31,410 --> 00:14:34,830 ‫because actually something changes on the server. 246 00:14:34,830 --> 00:14:38,280 ‫So basically a user gets authenticated 247 00:14:38,280 --> 00:14:41,070 ‫and also it's gonna be a lot easier 248 00:14:41,070 --> 00:14:42,870 ‫to then handle the success 249 00:14:42,870 --> 00:14:46,350 ‫and error states if this is a mutation. 250 00:14:46,350 --> 00:14:48,873 ‫So that's really how this should be done. 251 00:14:50,700 --> 00:14:53,970 ‫So here we need that mutation function. 252 00:14:53,970 --> 00:14:58,500 ‫And so that will then of course also receive the email 253 00:14:58,500 --> 00:15:01,470 ‫and password as an object 254 00:15:01,470 --> 00:15:03,870 ‫that we immediately de-structure here. 255 00:15:03,870 --> 00:15:07,350 ‫And then this is where we actually call the login function 256 00:15:07,350 --> 00:15:08,550 ‫that we created earlier. 257 00:15:09,480 --> 00:15:13,800 ‫So again, we paste in email and password. 258 00:15:13,800 --> 00:15:17,160 ‫And so while this is actually exactly the same 259 00:15:17,160 --> 00:15:21,660 ‫so we could just rename this here to credentials or so 260 00:15:21,660 --> 00:15:24,240 ‫but let's just leave it like this. 261 00:15:24,240 --> 00:15:25,773 ‫It's a bit more explicit. 262 00:15:27,000 --> 00:15:32,000 ‫But anyway, here, let's now have our on success handler. 263 00:15:32,430 --> 00:15:37,200 ‫So not unsettled, but this one here. 264 00:15:37,200 --> 00:15:40,620 ‫And so what we want to do for now at least 265 00:15:40,620 --> 00:15:44,160 ‫is to then navigate to the dashboard. 266 00:15:44,160 --> 00:15:49,023 ‫So let's grab the navigate function. 267 00:15:52,430 --> 00:15:53,263 ‫And then as I was saying, we go to the dashboard. 268 00:16:01,050 --> 00:16:01,980 ‫Now, right. 269 00:16:01,980 --> 00:16:04,743 ‫Now, this here of course returns something. 270 00:16:06,000 --> 00:16:11,000 ‫So as always, the mutate function and the is loading state 271 00:16:11,040 --> 00:16:14,640 ‫among many other things that we could also use. 272 00:16:14,640 --> 00:16:18,270 ‫And so here, let's rename this one to login. 273 00:16:18,270 --> 00:16:20,760 ‫And then we actually have a problem 274 00:16:20,760 --> 00:16:23,430 ‫where this conflicts with this function. 275 00:16:23,430 --> 00:16:28,233 ‫So just as before, let's rename this as loginApi. 276 00:16:31,260 --> 00:16:33,560 ‫So here then this is gonna be called loginApi. 277 00:16:35,280 --> 00:16:37,260 ‫And the function that we actually get 278 00:16:37,260 --> 00:16:40,563 ‫and return is the one called login. 279 00:16:41,460 --> 00:16:45,213 ‫So login and is loading will be returned. 280 00:16:46,230 --> 00:16:50,610 ‫And actually let's also create an on error handler. 281 00:16:50,610 --> 00:16:54,120 ‫And here let's actually receive the error object 282 00:16:54,120 --> 00:16:57,540 ‫which will be whatever error is returned here 283 00:16:57,540 --> 00:16:59,520 ‫from the mutation function. 284 00:16:59,520 --> 00:17:02,490 ‫And so that's then going to be this one right here 285 00:17:02,490 --> 00:17:03,873 ‫with this error message. 286 00:17:05,040 --> 00:17:09,513 ‫And so here, let's then just log this to the console. 287 00:17:12,420 --> 00:17:15,267 ‫So just to know that this is our own one. 288 00:17:15,267 --> 00:17:20,267 ‫And then let's also add a toast.error 289 00:17:21,600 --> 00:17:26,600 ‫saying that the provided email or password are incorrect. 290 00:17:32,220 --> 00:17:33,240 ‫And finally, 291 00:17:33,240 --> 00:17:38,070 ‫here we can also log the new user to the console 292 00:17:38,070 --> 00:17:41,430 ‫because remember that here in the on success handler 293 00:17:41,430 --> 00:17:44,250 ‫we can actually get the data that was received 294 00:17:44,250 --> 00:17:47,040 ‫from the function as an input. 295 00:17:47,040 --> 00:17:51,330 ‫So let's maybe even call that user and not just data. 296 00:17:51,330 --> 00:17:55,923 ‫And then let's log that to the console as well. 297 00:17:57,450 --> 00:18:01,560 ‫All right, so I think we are done here, 298 00:18:01,560 --> 00:18:04,440 ‫but let's just leave it all open 299 00:18:04,440 --> 00:18:06,970 ‫and then we can get that in here. 300 00:18:11,910 --> 00:18:16,910 ‫So the login and is loading state from use login like this. 301 00:18:21,600 --> 00:18:25,350 ‫And so here basically we now do exactly what we had before, 302 00:18:25,350 --> 00:18:29,253 ‫login with email and password. 303 00:18:30,630 --> 00:18:31,860 ‫Great. 304 00:18:31,860 --> 00:18:34,590 ‫Now next up, let's then also quickly use 305 00:18:34,590 --> 00:18:36,933 ‫these is loading states. 306 00:18:40,440 --> 00:18:45,440 ‫So just to disable this is loading 307 00:18:46,740 --> 00:18:48,903 ‫and then we need this on all of them. 308 00:18:50,460 --> 00:18:54,870 ‫So here as well and here as well. 309 00:18:54,870 --> 00:18:57,570 ‫And now as a final nice touch 310 00:18:57,570 --> 00:19:02,570 ‫we actually have a really small spinner somewhere here. 311 00:19:04,380 --> 00:19:06,420 ‫So spinner. 312 00:19:06,420 --> 00:19:08,850 ‫Yeah, this spinner mini. 313 00:19:08,850 --> 00:19:10,803 ‫So this is going to look really cool. 314 00:19:11,820 --> 00:19:16,820 ‫So here, let's say if it's not loading 315 00:19:17,190 --> 00:19:20,460 ‫then just return the text that we had earlier. 316 00:19:20,460 --> 00:19:23,520 ‫So log in, but otherwise here then 317 00:19:23,520 --> 00:19:27,000 ‫let's bring in that spinner. 318 00:19:27,000 --> 00:19:31,290 ‫And actually it's called spinner mini. 319 00:19:31,290 --> 00:19:33,633 ‫Well, for some reason that's not importing. 320 00:19:34,500 --> 00:19:36,120 ‫So let's import this one 321 00:19:36,120 --> 00:19:41,120 ‫and then reload them or rename them actually everywhere. 322 00:19:45,030 --> 00:19:49,380 ‫Okay, and with this, I believe we are all set. 323 00:19:49,380 --> 00:19:50,970 ‫So let's reload here 324 00:19:50,970 --> 00:19:54,270 ‫and then see what happens here with the spinner. 325 00:19:54,270 --> 00:19:57,630 ‫Nice and beautiful. 326 00:19:57,630 --> 00:20:01,800 ‫So that seems to have worked just fine. 327 00:20:01,800 --> 00:20:06,210 ‫So we got our new user logged into the console even twice 328 00:20:06,210 --> 00:20:11,210 ‫and we were redirected here to the page's dashboard. 329 00:20:11,940 --> 00:20:13,080 ‫Great. 330 00:20:13,080 --> 00:20:15,720 ‫So log in is indeed working. 331 00:20:15,720 --> 00:20:18,693 ‫Let's get rid of these console.logs. 332 00:20:20,460 --> 00:20:23,883 ‫And then let's also try it with a wrong password. 333 00:20:26,370 --> 00:20:30,063 ‫So let's go back here, let's reload, 334 00:20:31,440 --> 00:20:33,420 ‫add something more here. 335 00:20:33,420 --> 00:20:35,400 ‫And then here we get provided email 336 00:20:35,400 --> 00:20:37,620 ‫and password are incorrect. 337 00:20:37,620 --> 00:20:40,410 ‫And here we then get this error, 338 00:20:40,410 --> 00:20:43,290 ‫which is the actual error from Supabase, 339 00:20:43,290 --> 00:20:46,380 ‫which says invalid login credentials. 340 00:20:46,380 --> 00:20:48,600 ‫So we could actually even use 341 00:20:48,600 --> 00:20:51,450 ‫this error message here for a toast, 342 00:20:51,450 --> 00:20:55,080 ‫but the one that we wrote is also fine 343 00:20:55,080 --> 00:20:59,550 ‫but now let's use, paste the correct one again 344 00:20:59,550 --> 00:21:03,060 ‫and there we are in our application. 345 00:21:03,060 --> 00:21:06,420 ‫Now the problem with this is that at this point 346 00:21:06,420 --> 00:21:09,060 ‫the only thing that is happening is that 347 00:21:09,060 --> 00:21:12,390 ‫we get the user object from Supabase 348 00:21:12,390 --> 00:21:16,650 ‫but that doesn't mean that a user that is not logged in 349 00:21:16,650 --> 00:21:20,220 ‫cannot access our application. 350 00:21:20,220 --> 00:21:25,220 ‫So anyone can still basically open up any of these pages 351 00:21:25,950 --> 00:21:28,710 ‫even if they are not authenticated. 352 00:21:28,710 --> 00:21:31,350 ‫And we can easily prove that by 353 00:21:31,350 --> 00:21:34,230 ‫coming again to the application part 354 00:21:34,230 --> 00:21:37,953 ‫then deleting this really here from local storage. 355 00:21:38,880 --> 00:21:40,530 ‫So now there's nothing here 356 00:21:40,530 --> 00:21:43,350 ‫about the authentication anymore, 357 00:21:43,350 --> 00:21:46,740 ‫but still the user, if they reload the page 358 00:21:46,740 --> 00:21:49,830 ‫they can still get access to all of this. 359 00:21:49,830 --> 00:21:52,560 ‫And so this is where the second part 360 00:21:52,560 --> 00:21:55,350 ‫of this entire flow comes into place, 361 00:21:55,350 --> 00:21:57,480 ‫which is authorization. 362 00:21:57,480 --> 00:21:59,640 ‫So basically only authorizing 363 00:21:59,640 --> 00:22:03,183 ‫the authenticated users into our application.