Instructor: In the last section, we created
our Sign In component and in the process
we reused a ton of code from the Sign out component.
In this section, we're going to create
our sign in action creator and make sure
that we are able to sign a user in
if they already have an account.
So to get started, I'll open up my index.js file.
I'll then take my entire signup action creator right here.
I'm gonna copy the entire thing
and I'll paste a copy of it down underneath
and then I will rename that new function signin.
So just about everything inside of here
almost identical to the logic we had for signup.
All we really have to change is the name
of the action creator. I'm gonna make sure
I change the route that we're trying to post this to
so it should be signin instead of signup
and then for our AUTH_ERROR, rather than
dispatching a payload of 'Email in use',
we'll change that default error to say
'Invalid login credentials' or something similar.
And so this is just gonna tell the user, hey look
you put in an email and password.
We don't know what it is. You gotta try something else.
Okay, so that looks pretty good.
So we've got the signin action creator.
Let's do a quick check here. I think everything else
is good to go so I'll save this file.
I'll flip back over to my browser
and I'm going to try to visit the Sign In route.
I'm gonna do a hard refresh here just make sure
this stuff actually shows up correctly. Okay.
So I'll go to sign in. So you'll see
that the button now says Sign In
and I will attempt to sign in
with an email that I've already created.
So a little bit ago, I did browser@browser.com
and I will enter in my password as well.
And you'll notice I've got my network request tab open here
so I should see a request go out to the Sign In route.
Okay, so there's sign in. I got back my token.
It is presumably being saved to my local storage
and I'm able to flip it over to my slash feature route.
Perfect. Okay, so this is looking pretty darn good.
I think one of the last things we have to do
is to make sure that our header
looks way better than it does right now.
So we're gonna do a little bit of styling on it
and we're also gonna make sure
that you only see the buttons that are relevant
depending upon your authentication status.
So quick break and I'll see you in just a moment.