All language subtitles for 007 Sending Signup Requests From The Frontend_Downloadly.ir_en

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.