So now we want to do our register functionality.
So the first step is in our users API slice.
We're going to create a register mutation.
I'm going to put this right under the login and above the logout.
So let's say register.
And we'll set that to a mutation.
And it's going to be a query and the URL is going to go to our endpoint slash register and it's going
to be a post request and we're going to send the data that's in the body.
Okay.
Then we can close that up.
And yeah, that should do it Now.
We do want to export this.
So down here, use register mutation.
Save that.
Now we don't have the screen, so we're going to have to create that.
So let's go to screens and screens.
And I guess what we could do is just.
We could just copy the login screen.
And then let's rename that to register screen because it is very similar.
But we're going to have to just change and add a couple things.
So first of all, let's change the name instead of login screen here and at the bottom, change it to
register screen.
And for the state.
In addition to email and password, we're going to have the name.
So let's do right here.
We'll say name.
And that will be set name.
And then I'm also going to have a password confirmation.
So let's copy that down and we'll call this.
Let's say, confirm password and then set.
Confirm password.
All right.
And then.
What else do we want to do here?
Instead of the login mutation, we're going to bring in use register mutation.
And then as far as, let's see the set credentials, we're still going to set the credentials because
remember, when we register, we want them to be logged in after.
So we took care of that on the back end.
It'll register and it will set the Http only cookie.
We also want to call set credentials from here once they're registered.
Um, what else do we want?
I think that's pretty much it as far as imports.
Now let's go down here and let's.
Let's see.
Let's get rid of.
So instead of the use login mutation, I just want to make it so we don't get any errors so we can actually
show the page.
So use register mutation and instead of login, we're going to change that to register.
Right.
And then let's see, we're going to do the same thing here where we get the redirect and then in the
use effect, we're going to check for user info.
And then navigate.
To redirect if they are logged in and then in the submit handler instead of calling.
Let's see, instead of calling log in, we're going to want to call register and we're also going to
want to pass the name in.
So let's say name.
And we also want to check to make sure that the passwords match.
So what I'll do is.
I guess.
I guess we could put it above the trycatch.
And just say, if they don't match, then let's do a toast.
So we'll just say passwords don't match.
Else then we'll put this whole try catch inside of that else.
Okay.
And they're going to register.
Then we're going to dispatch set credentials.
That's going to be the same.
That's the same.
This is all going to be the same as well.
All right.
And let's change h one sign up now.
We have some more stuff to change down here, but I just want to create the route for now.
So let's save what we have and let's go to our index.js in the front end and let's bring down that and
change this to register.
Change that to register and then let's add that.
Here.
All right.
So let's see if the route works.
So if we go to sign in and then we click register.
Yep.
You can see we get sign up.
So we know the page works and all of this other stuff should be all set as far as submitting, but we
just need to change the form up a little bit.
So let's.
We have our email address which can stay, but let's copy this form group and let's go above it because
we need to add the name.
So we'll paste that in and then let's change the control ID to name.
We'll change the label here.
To name the type.
We're going to change that to text.
Placeholder will say Enter name.
Value is going to be named from our component state and then set name.
Okay.
So if I save that and we take a look, we now have a name field.
Now, we want to also do the confirm password.
So let's come down here and let's copy the form group for password.
And let's see.
We're going to call.
Control ID, let's say confirm password and here in the label confirm password type is going to be password
here.
We'll say confirm.
Value is going to be confirm.
And set.
Confirm password.
Okay.
So now we have that as well.
And let's see for the button.
That should be.
That should be fine.
We just want to change this.
Let's say register.
Now for the link.
This is going to be different because now we're on the register page.
So instead of saying new customer, let's say.
Um.
Already.
Have an account.
And then that's going to go to instead of slash register, that's going to be slash login.
And then this is going to be instead of register, that will also be log in.
And this as well.
All right.
So let's check that out.
Okay.
So now we can go back and forth from the register to log in.
Now let's try to register a user.
So for name, I'll say let's say Steve Rogers and email address Steve at email.
Password.
And register.
Not found API slash user slash.
Oh, you know what?
I know what the issue is in our users API slice.
To register.
We make a post request just to API slash users, not slash register.
So we just want to get rid of that.
All right, so let's try that again.
Let's reload the page.
Try that again.
And there we go.
So you can see I'm now logged in as Steve Rogers.
Okay.
So, I mean, it does the same exact thing as the authentication, except it creates the new user and
I can log out and that's that.
So now our full stack authentication is all set.
So in the next section, what we're going to do is continue on with our cart process, right?
Because now if I proceed to checkout, it'll ask me to sign in.
I'll sign in as.
Let's just do John.
Actually, we'll do the.
The person we just registered.
Click and you'll see it takes me right to shipping because of that redirect.
So now we need to just continue on with the process and continue with shipping.