1 00:00:01,140 --> 00:00:04,860 ‫So now let's use the form that we just created 2 00:00:04,860 --> 00:00:06,840 ‫in order to sign up users 3 00:00:06,840 --> 00:00:11,840 ‫to our application and basically to our Superbase database. 4 00:00:13,214 --> 00:00:16,260 ‫And as you can imagine, once again, 5 00:00:16,260 --> 00:00:21,260 ‫we will have to write a new function here into our off file. 6 00:00:22,350 --> 00:00:25,380 ‫So let's make it here close, or actually let's 7 00:00:25,380 --> 00:00:28,202 ‫make it the first one because, usually in a flow, 8 00:00:28,202 --> 00:00:31,533 ‫that's always the first thing that needs to happen. 9 00:00:33,240 --> 00:00:36,410 ‫So we really need to write a lot 10 00:00:36,410 --> 00:00:39,510 ‫of code to make all of this happen. 11 00:00:39,510 --> 00:00:41,700 ‫But yeah, it's also one 12 00:00:41,700 --> 00:00:44,314 ‫of the most important parts of the app, 13 00:00:44,314 --> 00:00:48,663 ‫and it's also pretty easy to reuse this stuff, 14 00:00:49,530 --> 00:00:50,580 ‫at least if you're using 15 00:00:50,580 --> 00:00:53,613 ‫a similar tech stack in another application. 16 00:00:55,068 --> 00:00:56,820 ‫But anyway, 17 00:00:56,820 --> 00:01:01,820 ‫here we will have to await superbase.auth.signUp 18 00:01:07,080 --> 00:01:11,870 ‫like this, and actually it is with an uppercase U. 19 00:01:14,010 --> 00:01:17,850 ‫And then what this function receives is usually 20 00:01:17,850 --> 00:01:21,030 ‫just the email and the passwords. 21 00:01:21,030 --> 00:01:25,233 ‫However, we can also pass in an options object. 22 00:01:26,250 --> 00:01:29,160 ‫So we call that options here. 23 00:01:29,160 --> 00:01:32,490 ‫And then inside that options object, 24 00:01:32,490 --> 00:01:35,880 ‫we can specify a field called data 25 00:01:35,880 --> 00:01:38,310 ‫which is then another object. 26 00:01:38,310 --> 00:01:40,920 ‫And so in this object, we can pass 27 00:01:40,920 --> 00:01:45,920 ‫in any kind of information that we want about this user. 28 00:01:46,200 --> 00:01:49,560 ‫So here we want to pass in the full name. 29 00:01:49,560 --> 00:01:52,855 ‫And also we want to set an avatar 30 00:01:52,855 --> 00:01:56,944 ‫to an empty string for now, because later on 31 00:01:56,944 --> 00:02:01,944 ‫we will then upload our own avatars and store the URL here. 32 00:02:02,460 --> 00:02:05,700 ‫So just like with the cabin images. 33 00:02:05,700 --> 00:02:07,530 ‫And so as always, 34 00:02:07,530 --> 00:02:12,530 ‫here we then receive the data and some possible error. 35 00:02:15,930 --> 00:02:17,763 ‫So let's just copy this. 36 00:02:19,830 --> 00:02:21,570 ‫And there we go. 37 00:02:21,570 --> 00:02:26,430 ‫So this is enough to sign up a user into Superbase. 38 00:02:26,430 --> 00:02:29,400 ‫And again, this optional part here is just 39 00:02:29,400 --> 00:02:31,601 ‫so we can add some optional data 40 00:02:31,601 --> 00:02:34,353 ‫into the newly created user. 41 00:02:35,880 --> 00:02:37,713 ‫Now, okay, next up. 42 00:02:38,550 --> 00:02:43,550 ‫Also, as you can imagine, now we create use signup.js 43 00:02:44,250 --> 00:02:48,150 ‫where we then actually use the state once again 44 00:02:48,150 --> 00:02:50,490 ‫using React query. 45 00:02:50,490 --> 00:02:55,490 ‫So export, function, use signup, and here, 46 00:02:59,070 --> 00:03:02,883 ‫just like before we do a mutation. 47 00:03:03,750 --> 00:03:07,050 ‫So if log in and log out our mutations, 48 00:03:07,050 --> 00:03:08,613 ‫then so are sign ups. 49 00:03:10,230 --> 00:03:15,021 ‫All right, so our mutation function will just be the sign up 50 00:03:15,021 --> 00:03:17,640 ‫that we just created. 51 00:03:17,640 --> 00:03:19,860 ‫Let's just rename this here again. 52 00:03:19,860 --> 00:03:23,543 ‫So sign up as signupApi, so that then, 53 00:03:28,470 --> 00:03:33,470 ‫we can call the returned mutate function as sign up. 54 00:03:37,860 --> 00:03:42,210 ‫So all of this is pretty standard stuff at this point, 55 00:03:42,210 --> 00:03:43,043 ‫right? 56 00:03:47,548 --> 00:03:50,460 ‫And here, let's also just quickly define 57 00:03:50,460 --> 00:03:52,810 ‫the unsuccess handler 58 00:03:54,030 --> 00:03:59,030 ‫which here will receive as the data, the newly created user. 59 00:04:00,630 --> 00:04:05,630 ‫So let's receive that here, log it to the console, 60 00:04:07,620 --> 00:04:11,733 ‫and then let's also have a toast.success. 61 00:04:14,520 --> 00:04:18,040 ‫So account successfully created. 62 00:04:21,030 --> 00:04:24,870 ‫And later on we will also have to verify the email address. 63 00:04:24,870 --> 00:04:28,050 ‫And so let's just write that here. 64 00:04:28,050 --> 00:04:33,050 ‫Please verify the new account from the user's, 65 00:04:35,910 --> 00:04:40,420 ‫here we need to escape this, email address. 66 00:04:45,030 --> 00:04:48,360 ‫And now all we need to do is to call that function 67 00:04:48,360 --> 00:04:51,240 ‫right here with the data. 68 00:04:51,240 --> 00:04:53,280 ‫Now here, let's immediately destructure 69 00:04:53,280 --> 00:04:56,937 ‫everything that we need, which is the full name, 70 00:04:56,937 --> 00:04:59,880 ‫the email entity password. 71 00:04:59,880 --> 00:05:02,820 ‫So the confirmed password we no longer need, 72 00:05:02,820 --> 00:05:06,120 ‫all we needed it for was to really make sure 73 00:05:06,120 --> 00:05:09,720 ‫that it was the same as the main password. 74 00:05:09,720 --> 00:05:14,580 ‫So only if they are the same the form get validated, right? 75 00:05:14,580 --> 00:05:16,863 ‫And so then we no longer need that. 76 00:05:19,433 --> 00:05:24,433 ‫Now, okay, so here, let's call sign up, but not this one. 77 00:05:24,930 --> 00:05:29,930 ‫So let's first grab actually those functions from the hook 78 00:05:35,310 --> 00:05:37,320 ‫that we just created. 79 00:05:37,320 --> 00:05:39,603 ‫So use sign up, 80 00:05:41,640 --> 00:05:45,663 ‫and then here we can finally call that. 81 00:05:47,340 --> 00:05:52,340 ‫So sign up with the object of full name, 82 00:05:54,150 --> 00:05:56,850 ‫email, and password. 83 00:05:56,850 --> 00:06:01,850 ‫And then, whenever this is finished, so unsettled, 84 00:06:03,120 --> 00:06:08,120 ‫so not only unsuccess but on all situations, 85 00:06:08,160 --> 00:06:10,740 ‫then let's actually reset the form. 86 00:06:10,740 --> 00:06:11,700 ‫And so for that, 87 00:06:11,700 --> 00:06:15,993 ‫the use form hook exposes the reset function. 88 00:06:17,010 --> 00:06:22,010 ‫So then here, let's just call that and that should be it. 89 00:06:24,300 --> 00:06:25,743 ‫So let's reload this. 90 00:06:26,700 --> 00:06:30,840 ‫And before we go any further, let's come here. 91 00:06:30,840 --> 00:06:34,023 ‫Also, just make sure to reload this page. 92 00:06:35,850 --> 00:06:39,010 ‫And then I just want to make sure that here on the providers 93 00:06:40,110 --> 00:06:45,090 ‫for email, we have to confirm email turned off. 94 00:06:45,090 --> 00:06:47,640 ‫So we actually turned this off earlier, 95 00:06:47,640 --> 00:06:50,850 ‫so I'm not sure why that is back on. 96 00:06:50,850 --> 00:06:52,350 ‫Maybe we have to save. 97 00:06:52,350 --> 00:06:56,250 ‫Ah, so here's the safe button. 98 00:06:56,250 --> 00:06:57,513 ‫I didn't know about that. 99 00:07:00,390 --> 00:07:01,290 ‫All right. 100 00:07:01,290 --> 00:07:05,160 ‫And so now we will not have a confirmed email for now, 101 00:07:05,160 --> 00:07:06,780 ‫but we will do that later. 102 00:07:06,780 --> 00:07:11,640 ‫But for now here we can just keep using any value. 103 00:07:11,640 --> 00:07:16,640 ‫Let's just call it test user, then here, test@test.com. 104 00:07:18,450 --> 00:07:21,213 ‫And here just some random password. 105 00:07:23,340 --> 00:07:25,950 ‫So for now, I will make it different just to see 106 00:07:25,950 --> 00:07:27,636 ‫if it triggers an error. 107 00:07:27,636 --> 00:07:29,433 ‫And indeed it does. 108 00:07:30,450 --> 00:07:33,208 ‫And so when you do this, also just make sure 109 00:07:33,208 --> 00:07:37,323 ‫that the both of them are the same no matter what they are. 110 00:07:38,760 --> 00:07:43,350 ‫And then there we quickly got a success message. 111 00:07:43,350 --> 00:07:46,080 ‫But here we have some problem. 112 00:07:46,080 --> 00:07:51,080 ‫So cannot read properties of null somewhere. 113 00:07:51,780 --> 00:07:55,770 ‫So I'm not sure where this is happening, but probably 114 00:07:55,770 --> 00:08:00,770 ‫it has something to do with this reset function here. 115 00:08:01,290 --> 00:08:02,700 ‫But anyway, 116 00:08:02,700 --> 00:08:06,810 ‫what matters is that we got this new user here back 117 00:08:06,810 --> 00:08:11,760 ‫which yeah, is exactly the one that we just created. 118 00:08:11,760 --> 00:08:13,542 ‫And notice how right now 119 00:08:13,542 --> 00:08:17,640 ‫we also got here the role of authenticated. 120 00:08:17,640 --> 00:08:19,770 ‫So if you were billing some other application 121 00:08:19,770 --> 00:08:22,200 ‫where everyone can simply sign up, 122 00:08:22,200 --> 00:08:26,010 ‫you would probably then make the newly created user 123 00:08:26,010 --> 00:08:28,530 ‫the new active user of the app 124 00:08:28,530 --> 00:08:33,090 ‫and immediately redirect them to the application itself. 125 00:08:33,090 --> 00:08:35,670 ‫Now, here again, we are not doing that 126 00:08:35,670 --> 00:08:39,900 ‫and so we really don't actually need this data for anything. 127 00:08:39,900 --> 00:08:42,266 ‫This was just two see. 128 00:08:42,266 --> 00:08:47,266 ‫So let's get rid of that console.log here. 129 00:08:48,753 --> 00:08:52,740 ‫And now what's gonna be interesting is if that user shows 130 00:08:52,740 --> 00:08:57,660 ‫up here, and indeed here it is, and actually let's now log 131 00:08:57,660 --> 00:09:02,660 ‫out from here and then just reload. 132 00:09:04,710 --> 00:09:09,710 ‫And now I will try to log in as that user 6, 7, 8 log in. 133 00:09:16,800 --> 00:09:18,210 ‫And there we go. 134 00:09:18,210 --> 00:09:22,413 ‫So now that user can also log into the application. 135 00:09:23,670 --> 00:09:25,980 ‫Great, but now finally, 136 00:09:25,980 --> 00:09:30,980 ‫let's turn on again here, the confirm email. 137 00:09:31,440 --> 00:09:33,780 ‫And so with this, all our new users 138 00:09:33,780 --> 00:09:36,210 ‫are only really signed up 139 00:09:36,210 --> 00:09:39,460 ‫after they have confirmed their email address. 140 00:09:40,380 --> 00:09:44,280 ‫So let's change that and save it here. 141 00:09:44,280 --> 00:09:48,690 ‫But besides that, we will have to change some other things. 142 00:09:48,690 --> 00:09:52,860 ‫So first, we can change here all the email templates 143 00:09:52,860 --> 00:09:54,606 ‫that users will receive, 144 00:09:54,606 --> 00:09:58,350 ‫which is again a really, really nice feature. 145 00:09:58,350 --> 00:09:59,490 ‫And then down here, 146 00:09:59,490 --> 00:10:04,440 ‫what we need to do now is to actually change our site's URL. 147 00:10:04,440 --> 00:10:07,560 ‫So here we are not at local host 3000, 148 00:10:07,560 --> 00:10:09,390 ‫but actually at this one. 149 00:10:09,390 --> 00:10:12,060 ‫And so whenever the user gets an email 150 00:10:12,060 --> 00:10:14,580 ‫so they can confirm their account, 151 00:10:14,580 --> 00:10:17,035 ‫we want them to then be redirected 152 00:10:17,035 --> 00:10:20,490 ‫to exactly this URL right here. 153 00:10:20,490 --> 00:10:25,103 ‫So let's copy that, update it here, and then here, 154 00:10:28,620 --> 00:10:31,863 ‫let's also add a new redirect URL. 155 00:10:35,040 --> 00:10:39,150 ‫Just make sure to update these two URLs again 156 00:10:39,150 --> 00:10:43,653 ‫once you deploy this application to a production server. 157 00:10:44,550 --> 00:10:48,390 ‫But anyway, to create that new user, 158 00:10:48,390 --> 00:10:51,720 ‫let's use a service called temp mail. 159 00:10:51,720 --> 00:10:54,897 ‫So this basically gives you a temporary email address 160 00:10:54,897 --> 00:10:57,810 ‫that you can use for this kind of things. 161 00:10:57,810 --> 00:11:01,110 ‫And I actually use this all the time myself to sign up 162 00:11:01,110 --> 00:11:04,950 ‫for some services that I'm only gonna use once. 163 00:11:04,950 --> 00:11:09,330 ‫So then I'm not gonna get sent some, like, 164 00:11:09,330 --> 00:11:12,060 ‫junk stuff that I don't want. 165 00:11:12,060 --> 00:11:14,490 ‫So here we can now copy this. 166 00:11:14,490 --> 00:11:17,100 ‫And so this is now a real email address, 167 00:11:17,100 --> 00:11:21,333 ‫and we will get any emails here into this inbox. 168 00:11:22,710 --> 00:11:27,710 ‫So let's create a new user, let's call it fake user. 169 00:11:30,148 --> 00:11:32,097 ‫Then here, this fake email address. 170 00:11:32,097 --> 00:11:36,003 ‫And then password, I will say fake. 171 00:11:36,870 --> 00:11:37,703 ‫Fake. 172 00:11:39,810 --> 00:11:42,360 ‫So create a new user, and here, 173 00:11:42,360 --> 00:11:45,003 ‫you probably want some loading indicator as well. 174 00:11:46,230 --> 00:11:48,750 ‫Then here, we need to fix this one. 175 00:11:48,750 --> 00:11:53,430 ‫But now let's see what happened in our user's table. 176 00:11:53,430 --> 00:11:56,190 ‫So the new user is already there, 177 00:11:56,190 --> 00:11:59,580 ‫but here it says, now waiting for verification. 178 00:11:59,580 --> 00:12:03,363 ‫And so right now we couldn't log in with this user yet. 179 00:12:04,260 --> 00:12:07,446 ‫Instead, now we got this email from Superbase 180 00:12:07,446 --> 00:12:11,343 ‫which we need to open up and then we can click here. 181 00:12:13,740 --> 00:12:17,580 ‫And so that then took us right back to our application. 182 00:12:17,580 --> 00:12:22,580 ‫And if we reload this now, then probably we will get, yeah. 183 00:12:25,050 --> 00:12:27,720 ‫So now we have another last sign in here, 184 00:12:27,720 --> 00:12:31,833 ‫which was exactly the moment that that link was clicked. 185 00:12:32,940 --> 00:12:33,773 ‫Great. 186 00:12:35,190 --> 00:12:38,493 ‫Let's just add those loading indicators there. 187 00:12:41,310 --> 00:12:43,770 ‫So yeah, right here. 188 00:12:43,770 --> 00:12:45,570 ‫So this is loading state, 189 00:12:45,570 --> 00:12:48,404 ‫which we are indeed not even using. 190 00:12:48,404 --> 00:12:52,583 ‫So disabled and set it to "isLoading". 191 00:12:57,720 --> 00:13:00,843 ‫So just pasting that everywhere, 192 00:13:06,870 --> 00:13:08,913 ‫including these buttons. 193 00:13:10,890 --> 00:13:13,653 ‫And yeah, this other reset one as well. 194 00:13:15,360 --> 00:13:20,280 ‫So this one here is just an HTML reset button, 195 00:13:20,280 --> 00:13:22,860 ‫so it doesn't even require any JavaScript. 196 00:13:22,860 --> 00:13:27,120 ‫And it will then automatically just reset the form. 197 00:13:27,120 --> 00:13:29,880 ‫Now, here again, I'm not sure what that is. 198 00:13:29,880 --> 00:13:32,763 ‫I will maybe try to find out later. 199 00:13:33,750 --> 00:13:36,570 ‫So I mean this should work just fine. 200 00:13:36,570 --> 00:13:40,890 ‫Maybe we have to call this here separately, 201 00:13:40,890 --> 00:13:43,200 ‫but I'm not going to test that here now again 202 00:13:43,200 --> 00:13:45,960 ‫because that will then just create a new user 203 00:13:45,960 --> 00:13:47,313 ‫which we do not need. 204 00:13:48,210 --> 00:13:51,840 ‫But anyway, with this we are finished with signing up 205 00:13:51,840 --> 00:13:55,950 ‫new users, and in fact, we are kind of finished 206 00:13:55,950 --> 00:14:00,240 ‫with this whole authentication and authorization process. 207 00:14:00,240 --> 00:14:02,580 ‫So congratulations with this. 208 00:14:02,580 --> 00:14:04,320 ‫You have just finished one 209 00:14:04,320 --> 00:14:08,010 ‫of the most important parts that you need to implement 210 00:14:08,010 --> 00:14:12,210 ‫in basically all web applications that you will ever build. 211 00:14:12,210 --> 00:14:14,070 ‫And so I hope that the mechanics 212 00:14:14,070 --> 00:14:18,330 ‫behind all of this made really a lot of sense to you. 213 00:14:18,330 --> 00:14:20,730 ‫So even if you're not gonna use Superbase 214 00:14:20,730 --> 00:14:23,160 ‫in the future in some other app, 215 00:14:23,160 --> 00:14:26,580 ‫then hopefully the way that all of this works, 216 00:14:26,580 --> 00:14:30,390 ‫so really the fundamentals were still crystal clear. 217 00:14:30,390 --> 00:14:33,210 ‫There is just one thing that we need to do now 218 00:14:33,210 --> 00:14:36,231 ‫which is actually related to Superbase, 219 00:14:36,231 --> 00:14:38,010 ‫which is to change 220 00:14:38,010 --> 00:14:41,910 ‫the row level security policies to only allow access 221 00:14:41,910 --> 00:14:43,890 ‫to all of these resources here 222 00:14:43,890 --> 00:14:47,700 ‫to users that are actually authenticated. 223 00:14:47,700 --> 00:14:51,240 ‫So our application itself here is protected, 224 00:14:51,240 --> 00:14:55,230 ‫but not the resources coming from the Superbase Api. 225 00:14:55,230 --> 00:14:58,743 ‫And so let's move on now and also do that.