Now with the SignUp API route added,
let's go back to the auth form
and make sure that we talk to this API route
when the user authenticates.
For this in the end, we wanna listen to the form submission
And then if we are not in login mode,
which means we are in create mode,
then we wanna send a request
to our backend here to create a new user.
For this I'll add a new function.
The submit handler, let's say
where we get that event which we use to again,
prevent the default
as we did it many times before this course.
And then here I'll first of all check
if we are in log in mode,
which means we want to log user in,
we want to log a user in.
That's something we can't do yet.
So I'll do nothing here.
But if we are in the not login mode, so in the create mode
then we wanna send a request that creates a new user.
For this I'll create a new function
outside of the component function.
We could also create it in a brand new file.
I'll just do it here to keep the component function lean
and I'll name this function,
create user, like this.
And here I expect to get the email and the password.
We will need to retrieve that from the form in a second.
And then here I wanna send a request.
So again we can use the fetch function
as we did multiple times before in the course
and send the request to slash API slash off
slash sign up to target this signup API route.
Now it should be a post request.
So add this second argument here
and set the methods to post and then add the body.
And the body will be in JSON format
and I'll add an object with email and password,
so with that data we get as parameters.
Then let's also add some headers to pass extra information
about the fact that we're sending JSON data
by adding that content type header like this
And we configured this request.
Now I will turn,
create user into an async function
so that again we can use await here
and of course then we can
wait for our response
and then handle that response.
Now, for example, by getting the data
out of that response with response JSON and awaiting debts
since that all's returns a promise
and then maybe check if not response, okay.
So if it's not okay, if we got a error status code
and then we could frown a new error
where we use data message as a message,
or if we don't have that just say something went wrong.
And then ultimately I'll return data here though,
if we make it past the safe check.
So that's create user.
Now here in that L's case and submit handler,
we wanna call create user
and pass into email and password.
Now for this we need to get access
to the entered email and password.
And we can use state with two way binding for that.
We did that in the block project, for example
or we use refs for a quick and easy access
And I'll do the latter.
I'll import use ref from react like this.
And then in the component function, just create two refs
or the two inputs we have
and we have to email input ref then
and we also have the password input ref like this then.
Now we just need to wire them up.
So on the email input, we set ref equal to email input ref
and on the password input
we set that equal to password input ref.
Now that we got those refs
we can get to data in the submit handler.
So here we got the entered email
by accessing the email input ref dot current dot value.
As you saw before in the course
and get the entered password
by accessing password input ref dot current dot value.
Now we could add validation here.
That's optional.
We definitely need validation in the API route though
because that validation here on the client
can always be tricked
and we do have validation on the API route.
So we'll save some time here
and save some code and not add validation in this component.
So we'll skip this here.
And instead we'll use that data just like this
and then create a user here.
So for this we pass the entered email
as a first argument to create user
and the entered password as a second argument.
Now of course create user is a async function
and hence returns a promise.
So we can all turn submit handler into async function
so that we can use await in here as well.
And await that response, that result of that operation
maybe all the rapid with try catch
to catch any errors we might be facing here.
And then we can handle these errors.
And for the moment I'll just console log
any errors we might be getting, like this.
And if we are successful though
if we stay in that try block
then we of course know that know a user was created.
So then here I'll just console log the regular result
for the moment.
And we can give the user a better feedback, but we did dive
into those things before in the course already.
And therefore here, I really wanna focus
on the authentication exclusive part.
Hence here for the moment, we will just locked a result
to the console and not do anything else.
Now that should be sending a request.
Of course, we now still need to connect the foreign though.
So we connect on submit to the submit handler like this.
And there also is something we still need to do
on the API route.
Because I'm sending a post request here
and indeed only post requests
should trigger this user creation.
So here in this async function handler
I actually wanna check if request method is equal to post
and only continue in that case.
So if request method is post,
then I will execute that code,
otherwise I don't do anything.
Of course therefore alternatively, if I revert this,
we could all check, if the request method is not post
and then just return and only continue if it is post.
Then we don't need to wrap everything with that if check.
We could have done that before
in the course as well in similar cases.
Okay. So now if we save everything this should work.
If we go back to the auth form
reload and click on create new account
and I opened a developer tools to check
for output and errors.
If I enter some data here
let's say a password which is too short,
then I get back a 422 response
with my error message that the password is too short.
And of course we might wanna show that to the user
but for the reasons mentioned a couple of seconds ago
I'm not doing this here.
So if I now enter a password which is long enough
and I sent this request, that looks better
and I get created user as a response.
And if we have a look into our MongoDB collections here,
we have the auth demo database
and in users we see our user data
and we see that password actually is an object though.
That's not entirely correct.
I'll have to look into that again.
That should not be a object.
It should be a super long, strange looking string
But generally it's working.
If you are getting some error with your connection
to MongoDB or something like this
double check that you also white listed your local IP
under network access by the way.
But with that, let's have a look at our password generation
What's going wrong there in the API route.
I'm creating that hash password.
And yes, that of course returns a promise.
I forgot to await that
And hence I stored the promise in that database
instead of the result of that promise,
which would be that string.
And hence we need to await hash password here.
If we do that
And I then send that same request again for the same user.
Now, if we update MongoDB
we see that here, that's our hashed password.
So that's looking good.
Let me delete the average user.
And that's how we can create users.
Totally on our own with the tools we learned
about before in the course already.