-: Our application is starting to look pretty darn fantastic
at this point.
We have the ability to sign in
and sign out of our application.
We've also got, again, a nice landing page here
for when a user successfully signs out.
The next logical place to go to
is gonna be the signup functionality.
After we cover sign up,
we'll then work on authenticating for individual routes.
So to make sure a user can only visit certain routes
after they've been successfully authenticated.
And then we'll also investigate how to
make an authenticated request to our backend
to fetch some protected resources on the backend as well.
So in this section, let's continue
by working on the sign up component.
We'll first work on putting together our actual component
for sign up, and then we'll work
on an action creator to actually take the email
and password that a user wants to sign up
with and post it to our backend to make an account for them.
So let's flip over to our code editor
and following a very similar kind of nomenclature
for our existing files that we have
inside of our project already,
I'm gonna create a file inside
of our components off directory.
And as you might guess, I'm gonna call it signup.js.
So thinking back to the wire frames for our project,
signup.js is gonna be very similar to sign in.
We need to collect an email, a password
and a password confirmation from our user.
And then once we have the info, we can go ahead and send it
off to the backend and try to create an account with this.
So let's give a shot at this.
We'll definitely need to use Redux form.
We'll probably be making a class-based component here
because it's gonna have a lot
of logic and a lot of helper methods
even though it isn't gonna have any local state
or anything like that.
So we'll start by importing React and component at the top.
From React, like I said,
we'll certainly need to make use of Redux form.
And finally,
we'll likely also need some action creators in here
as well to handle actually creating an account for our user.
So I'm gonna import all of our actions
from our actions directory.
Now we'll put together some scaffolding
for our class sign up.
We'll define our render method.
I hope you're getting used
to all this boiler plate stuff here guys,
a lot of typing for the boiler plate in these projects.
If you use a code editor that has support for snippets
Adam certainly does.
Very helpful to have, just to kind of put this default
or boiler plate code for all of your components down,
really handy to save some time there.
So by default, inside of this render method,
I'm just gonna return a div that simply says,
sign up for right now.
And we're gonna do that just so we can make sure
that we can see the component inside of our application,
just to test to make sure everything's working fine
to start.
Then at the bottom, I'm going to export default.
Excuse me, export, not expect.
We'll export default sign up.
Now let's make sure that we can actually
visit this component inside of our router.
So I'm gonna go to the top level index.js file.
We currently are importing sign in and sign out.
So we'll also have to import sign up
And then I'll add a route for this as well.
And as we've discussed many times already,
the route is gonna follow the same type
of nomenclature as sign in and sign out.
So I'm gonna add simply sign up and when a user goes
to that route, they should see the sign up component.
So let's save this.
Let's refresh.
I can go to sign up.
I'm on the sign up route right now
and you can see the text, sign up,
which is coming from our component.
Cool. So very simple, very gentle, kind of mild steps here
on the first take, this is probably gonna end up
being by far the most complicated component
inside the entire application.
So let's continue on doing some work
on this in the next section.