Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Implementing the Sign up form. The signup form sends a post request to the API to create a new user.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
In order for a user to log into your app,
they'll first need to Sign up.
0:00
Let's take a look at
the UserSignUp component.
0:05
This component renders the signup form,
which stores the name,
0:08
username, and
password the user enters as references.
0:14
Once the user submits the signup form,
0:18
we'll need to send the user's credentials
to the server to create a new user.
0:21
We'll do this by using the fetch method.
0:27
To handle the promise
the fetch method returns,
0:30
we'll be using the async / await syntax.
0:34
We'll start off by tagging
the handleSubmit function with
0:39
the async keyword.
0:44
Let's create a user variable that contains
the user's name, username, and password.
0:46
We'll want to set each of these properties
to the current value of their references.
0:57
For name,
we'll set it equal to name.current.value,
1:02
username.current.value for
the username property,
1:08
and password.current.value for
the password property.
1:15
All right, to add a new user to
the server, we'll need to call a fetch
1:22
request with the user's info and
wait for the server's response.
1:27
So let's type const
1:32
response = await fetch().
1:36
To know exactly what to
parse to the fetch method,
1:41
we'll take a look at MDN's
documentation on fetch.
1:44
Fetch takes in a resource
that you wish to fetch.
1:48
For us, that will be the URL our server
listens to to create a new user.
1:52
To send the new users credentials, we'll
need to pass fetch an options object.
1:58
Our options object will tell
fetch the request method,
2:04
any headers, and the body of the request.
2:09
This is where we'll
provide the user's info.
2:13
All right, the first argument we'll pass
to fetch is the URL to create a new user.
2:16
Our server is running
on localhost:5000 and
2:23
the route that creates a new
user is that api/users.
2:29
To keep things neat, we'll create the
options object in a separate variable and
2:34
pass that variable to fetch.
2:40
I'll call our options
object fetchOptions and
2:42
set it equal to an object.
2:47
Since we're adding a new user to the
server, the fetch method should be POST.
2:50
We'll add a property of method and
set it equal to POST.
2:56
To send the user's info,
we'll add a body property.
3:01
The body property accepts a string object.
3:06
To convert our user object
into a string object,
3:10
we'll need to use
the JSON.stringify() method.
3:14
Set the body equal to JSON.stringify and
3:19
pass it our user object.
3:24
Some HTTP servers require that
requests with a body must
3:27
also specify the body type via
a content type request header.
3:32
So above body, add a headers
property whose value is an object.
3:38
In the object will provide
the Content-Type property.
3:45
To let the server know that
the body type is JSON,
3:50
we'll set the content type to
application/json; charset=utf-8.
3:56
This content type is saying that
the body has a type of json whose
4:04
character encoding is utf-8, which is
the default character encoding for JSON.
4:10
All right, our fetch options is all set.
4:17
Let's pass it to our fetch method.
4:20
We'll take a look at what
the server returns to us by
4:23
logging to the console response.
4:26
I'll fill out the form by entering
my name, username, and password.
4:29
We'll submit our form and
open up the Console, awesome.
4:36
We know our fetch method is working
because our response has a status of 201,
4:40
which stands for created.
4:46
Now let's refresh the page and
submit a blank signup form.
4:48
The server responds with
a 400 bad request status.
4:53
Which is what we expected,
because we submitted an empty form.
4:58
Our API responds with a list of errors,
which is in the body of the response.
5:02
I'll show you how to access that soon.
5:07
All right,
let's handle these status codes.
5:10
We'll replace our console.log
with an if statement.
5:13
First, we'll check if
the response status code is 201.
5:18
If so,
we'll log to the console the message
5:23
user.username is successfully
signed up and authenticated.
5:28
Now we'll handle the 400 status code
by adding an else if statement.
5:36
If the response status is
400 will store the data
5:44
the API responds with in
a variable called data.
5:49
We'll need to parse
the body text to JSON and
5:54
we'll do so
by calling the json method on response.
5:57
This method returns a promise, so
6:01
we'll add the await keyword to the front
to wait for the promise to be fulfilled.
6:04
Let's make sure this works by
logging data to the console.
6:10
We'll save our changes and
head on over to the browser.
6:16
Reload the page and submit an empty form.
6:21
In the console we can see
that data is an object that
6:24
contains the list of errors, great.
6:29
We'll store the list of
errors to our errors state so
6:32
that it renders the errors on
the page right above the form.
6:36
We'll delete our console.log statement and
6:41
type setErrors to update the errors state.
6:45
The list of errors is
in the errors property.
6:50
So we'll parse set errors data.errors.
6:53
All right,
let's test our if else statement.
6:58
I'll reload the page and
submit an empty form.
7:02
Great, we see the list of
errors pop up above the form.
7:05
We can even partially fill out the form
and see the error list update.
7:10
Now, I'll fill out the form completely,
7:15
and we get the message, laurac is
successfully signed up and authenticated.
7:23
Great, our application knows how to
handle the status codes 201 and 400.
7:28
But, what if we got a different
status code or the server is down?
7:35
We would want to throw an error and
navigate them to our error route.
7:39
In our app when a user is
navigated to the error route,
7:45
the NotFound component is rendered.
7:49
A more advanced app might have more
detailed error routes, but for
7:52
this example, NotFound will suffice.
7:56
To catch errors when using async / await,
we need to add a try / catch block.
8:00
In the try block,
we'll try to add a new user to the server.
8:08
So we'll move our fetch and
if / else statements into the try block.
8:12
To catch any other response that
doesn't have a status code of 201 or
8:19
400, we'll add an else statement that
throws an error with throw new Error().
8:25
Whenever an error is thrown,
our catch block will handle it.
8:33
We'll first want catch to log the error
to the console with console.log(error).
8:37
Then navigate the user to the error route.
8:44
Now, if you remember from our React Router
course, to navigate to a new route,
8:48
we'll need to use React Router's
useNavigate hook.
8:53
So at the top of the file,
we'll import useNavigate by
8:57
adding it next to Link
in the import statement.
9:02
Hooks need to be used towards
the top of a component.
9:06
So right under the useContext hook,
9:09
we'll type const navigate = useNavigate().
9:13
All right, now in our catch block,
9:19
we can navigate the user to
the error route by calling navigate,
9:22
and passing it the route we
want to navigate to, /error.
9:27
To test our error handling,
we'll stop the server by
9:32
opening the terminal that's running
the server and pressing ctrl C.
9:35
Head back to the signup Route and
fill out the Sign up form.
9:41
Great, our app navigated us to the error
route and logged the error to the console.
9:48
Our signup form is almost done.
9:55
Currently, nothing happens when
we click the Cancel button.
9:57
Instead, we want to navigate the user
back to the root route when they click
10:01
the Cancel button.
10:05
Let's not forget to start up our server
again by typing npm start in the terminal.
10:08
In the handleCancel function, we'll call
navigate and pass it the root route.
10:15
Let's save our changes and
head on over to the browser.
10:21
When we click the Cancel button,
we're navigated to the root route.
10:25
Nice work so far,
you've created a user registration
10:29
component that successfully
creates a new authenticated user,
10:33
as well as display validation
errors when necessary.
10:37
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up