‫So now let's use the form that we just created
‫in order to sign up users
‫to our application and basically to our Superbase database.
‫And as you can imagine, once again,
‫we will have to write a new function here into our off file.
‫So let's make it here close, or actually let's
‫make it the first one because, usually in a flow,
‫that's always the first thing that needs to happen.
‫So we really need to write a lot
‫of code to make all of this happen.
‫But yeah, it's also one
‫of the most important parts of the app,
‫and it's also pretty easy to reuse this stuff,
‫at least if you're using
‫a similar tech stack in another application.
‫But anyway,
‫here we will have to await superbase.auth.signUp
‫like this, and actually it is with an uppercase U.
‫And then what this function receives is usually
‫just the email and the passwords.
‫However, we can also pass in an options object.
‫So we call that options here.
‫And then inside that options object,
‫we can specify a field called data
‫which is then another object.
‫And so in this object, we can pass
‫in any kind of information that we want about this user.
‫So here we want to pass in the full name.
‫And also we want to set an avatar
‫to an empty string for now, because later on
‫we will then upload our own avatars and store the URL here.
‫So just like with the cabin images.
‫And so as always,
‫here we then receive the data and some possible error.
‫So let's just copy this.
‫And there we go.
‫So this is enough to sign up a user into Superbase.
‫And again, this optional part here is just
‫so we can add some optional data
‫into the newly created user.
‫Now, okay, next up.
‫Also, as you can imagine, now we create use signup.js
‫where we then actually use the state once again
‫using React query.
‫So export, function, use signup, and here,
‫just like before we do a mutation.
‫So if log in and log out our mutations,
‫then so are sign ups.
‫All right, so our mutation function will just be the sign up
‫that we just created.
‫Let's just rename this here again.
‫So sign up as signupApi, so that then,
‫we can call the returned mutate function as sign up.
‫So all of this is pretty standard stuff at this point,
‫right?
‫And here, let's also just quickly define
‫the unsuccess handler
‫which here will receive as the data, the newly created user.
‫So let's receive that here, log it to the console,
‫and then let's also have a toast.success.
‫So account successfully created.
‫And later on we will also have to verify the email address.
‫And so let's just write that here.
‫Please verify the new account from the user's,
‫here we need to escape this, email address.
‫And now all we need to do is to call that function
‫right here with the data.
‫Now here, let's immediately destructure
‫everything that we need, which is the full name,
‫the email entity password.
‫So the confirmed password we no longer need,
‫all we needed it for was to really make sure
‫that it was the same as the main password.
‫So only if they are the same the form get validated, right?
‫And so then we no longer need that.
‫Now, okay, so here, let's call sign up, but not this one.
‫So let's first grab actually those functions from the hook
‫that we just created.
‫So use sign up,
‫and then here we can finally call that.
‫So sign up with the object of full name,
‫email, and password.
‫And then, whenever this is finished, so unsettled,
‫so not only unsuccess but on all situations,
‫then let's actually reset the form.
‫And so for that,
‫the use form hook exposes the reset function.
‫So then here, let's just call that and that should be it.
‫So let's reload this.
‫And before we go any further, let's come here.
‫Also, just make sure to reload this page.
‫And then I just want to make sure that here on the providers
‫for email, we have to confirm email turned off.
‫So we actually turned this off earlier,
‫so I'm not sure why that is back on.
‫Maybe we have to save.
‫Ah, so here's the safe button.
‫I didn't know about that.
‫All right.
‫And so now we will not have a confirmed email for now,
‫but we will do that later.
‫But for now here we can just keep using any value.
‫Let's just call it test user, then here, test@test.com.
‫And here just some random password.
‫So for now, I will make it different just to see
‫if it triggers an error.
‫And indeed it does.
‫And so when you do this, also just make sure
‫that the both of them are the same no matter what they are.
‫And then there we quickly got a success message.
‫But here we have some problem.
‫So cannot read properties of null somewhere.
‫So I'm not sure where this is happening, but probably
‫it has something to do with this reset function here.
‫But anyway,
‫what matters is that we got this new user here back
‫which yeah, is exactly the one that we just created.
‫And notice how right now
‫we also got here the role of authenticated.
‫So if you were billing some other application
‫where everyone can simply sign up,
‫you would probably then make the newly created user
‫the new active user of the app
‫and immediately redirect them to the application itself.
‫Now, here again, we are not doing that
‫and so we really don't actually need this data for anything.
‫This was just two see.
‫So let's get rid of that console.log here.
‫And now what's gonna be interesting is if that user shows
‫up here, and indeed here it is, and actually let's now log
‫out from here and then just reload.
‫And now I will try to log in as that user 6, 7, 8 log in.
‫And there we go.
‫So now that user can also log into the application.
‫Great, but now finally,
‫let's turn on again here, the confirm email.
‫And so with this, all our new users
‫are only really signed up
‫after they have confirmed their email address.
‫So let's change that and save it here.
‫But besides that, we will have to change some other things.
‫So first, we can change here all the email templates
‫that users will receive,
‫which is again a really, really nice feature.
‫And then down here,
‫what we need to do now is to actually change our site's URL.
‫So here we are not at local host 3000,
‫but actually at this one.
‫And so whenever the user gets an email
‫so they can confirm their account,
‫we want them to then be redirected
‫to exactly this URL right here.
‫So let's copy that, update it here, and then here,
‫let's also add a new redirect URL.
‫Just make sure to update these two URLs again
‫once you deploy this application to a production server.
‫But anyway, to create that new user,
‫let's use a service called temp mail.
‫So this basically gives you a temporary email address
‫that you can use for this kind of things.
‫And I actually use this all the time myself to sign up
‫for some services that I'm only gonna use once.
‫So then I'm not gonna get sent some, like,
‫junk stuff that I don't want.
‫So here we can now copy this.
‫And so this is now a real email address,
‫and we will get any emails here into this inbox.
‫So let's create a new user, let's call it fake user.
‫Then here, this fake email address.
‫And then password, I will say fake.
‫Fake.
‫So create a new user, and here,
‫you probably want some loading indicator as well.
‫Then here, we need to fix this one.
‫But now let's see what happened in our user's table.
‫So the new user is already there,
‫but here it says, now waiting for verification.
‫And so right now we couldn't log in with this user yet.
‫Instead, now we got this email from Superbase
‫which we need to open up and then we can click here.
‫And so that then took us right back to our application.
‫And if we reload this now, then probably we will get, yeah.
‫So now we have another last sign in here,
‫which was exactly the moment that that link was clicked.
‫Great.
‫Let's just add those loading indicators there.
‫So yeah, right here.
‫So this is loading state,
‫which we are indeed not even using.
‫So disabled and set it to "isLoading".
‫So just pasting that everywhere,
‫including these buttons.
‫And yeah, this other reset one as well.
‫So this one here is just an HTML reset button,
‫so it doesn't even require any JavaScript.
‫And it will then automatically just reset the form.
‫Now, here again, I'm not sure what that is.
‫I will maybe try to find out later.
‫So I mean this should work just fine.
‫Maybe we have to call this here separately,
‫but I'm not going to test that here now again
‫because that will then just create a new user
‫which we do not need.
‫But anyway, with this we are finished with signing up
‫new users, and in fact, we are kind of finished
‫with this whole authentication and authorization process.
‫So congratulations with this.
‫You have just finished one
‫of the most important parts that you need to implement
‫in basically all web applications that you will ever build.
‫And so I hope that the mechanics
‫behind all of this made really a lot of sense to you.
‫So even if you're not gonna use Superbase
‫in the future in some other app,
‫then hopefully the way that all of this works,
‫so really the fundamentals were still crystal clear.
‫There is just one thing that we need to do now
‫which is actually related to Superbase,
‫which is to change
‫the row level security policies to only allow access
‫to all of these resources here
‫to users that are actually authenticated.
‫So our application itself here is protected,
‫but not the resources coming from the Superbase Api.
‫And so let's move on now and also do that.