Instructor: We now have the ability
to programmatically navigate our user
around our application.
We're now gonna work on the other two things
that we need to do inside of our success case here.
We need to update our state
to indicate that a user is authenticated.
So keep in mind, we haven't really added any reducers
just yet of our own.
And so we'll need to make a reducer for that.
And we'll also need to somehow save our JWT token.
So that's what we're gonna work on inside this section.
The purpose of adding this state here
to indicate that our user is authenticated
is simply to have a very simple true or false flag
that we can make reference to
throughout our application to say,
hey, is this user, are they authenticated or not?
And so it's gonna be a very simple Boolean
to figure that out.
One place that we'll probably immediately use that in
is on our header.
By default, our header is currently always showing
the text sign in but if you think back to our mock-ups,
whenever a user is authenticated,
we don't wanna show the text sign in and sign up
at the top anymore.
We wanna show something like sign out
would be more appropriate.
And so having this piece of state in our application
just to indicate whether or not the user is authenticated
will make it really easy to make those decisions
on exactly what text or components we want to render
on the screen.
So whenever we have any state,
that implies that we need to have a reducer of sorts
to produce that piece of state.
So we're gonna make a new reducer
and we're gonna call it auth_reducer.js.
And inside of here, we want to handle just very simply
whether or not the user is currently authenticated.
Okay?
So let's first write the reducer
and then we'll figure out the exact types
and actions we want to handle inside of it.
So we'll put in our kind of default code
for our reducer.
I'm gonna default our state to be an object
because this auth_reducer right here
is probably gonna have several different properties
that we wanna keep track of.
Then we will switch over our action.type.
We don't really have any cases that we want
to handle just yet, so we'll leave it blank for right now.
Again, we're just putting a little bit
of scaffolding here.
By default, we return our state
and then let's just go ahead and hook this up
to our combinedReducers call
inside of our reducers, index file.
We can import authReducer from auth_reducer.
And now I'm gonna add it as the auth property state.
So just auth is authReducer, like so.
If you want to, you could always name authReducer
just auth by itself
and then since you had the same key and value names,
you could omit the colon there.
So totally up to you.
I kinda like to just leave it separate
just to make it really clear
that hey, I've got an authReducer
and it's producing the auth piece of state
but again, totally your call.
So we've got our reducer in place.
Thinking back to what we're trying to achieve here.
We wanna have just a very simple Boolean,
just something that very simply says
whether or not the user is currently authenticated.
So to handle that,
I'm gonna add a return statement here
and we'll say that oh, excuse me.
We don't want the return statement.
Here I wanna add a case statement.
Let's say that in the cases
that we get an action coming through with type AUTH_USER.
So AUTH_USER.
Whenever we get this action coming through,
that means that the user
was just successfully authenticated,
which means we want to set some sort
of like authenticated Boolean flag to being true.
So in that case, we'll return all of our existing state
and authenticated is true.
Now it kind of follows
that we wanna have the reverse case as well.
We wanna have a case where a user
is logging out or unauthenticating.
So I'm gonna add in another case statement here
for UNAUTH_USER.
You can also use DEAUTH but I chose to go with UNAUTH
because DEAUTH kind of looks like DEATH_USER,
which is a little unsettling.
If you could think of a better term here for UNAUTH,
that would be fantastic.
Just let me know.
So in this case,
I wanna flip the authenticated flag to false.
All right?
Now, we haven't defined these types yet.
We're just kind of scaffolding this out,
kind of giving it a spike right now.
Kind of our best shot.
So let's go create our types file,
add the types and then import them into this reducer.
In my actions directory, I'll create types.js.
And then inside of here,
we'll export AUTH_USER as auth_user.
And we'll also export UNAUTH_USER as
unauth_user.
Okay.
So like I was saying,
back inside of our action creator signinUser,
I'm back in the action creators file now,
the goal here was to update our state
to indicate whether or not a user is authenticated.
So we've now got this very precise,
very small action that we can dispatch
that just says hey, is the user authenticated or not?
Yes or no.
So as long as we send off or dispatch an action
of type AUTH_USER, it will flip that authenticated flag
from false to true.
So we can now take care of this update state case right here
or this update state.
If we are inside of the then case,
that means that we just successfully authenticated,
so I want to dispatch an action here of type
AUTH_USER.
And we'll talk about the dispatch here in a second.
Let's first make sure that we import our type at the top.
I'm gonna import AUTH_USER
from types like so.
Okay, so tons of code in this section, tons of code.
Let's take a break in the next section
and do a little bit of review of everything we just did.
Unfortunately, authentication is something
that's really hard to go through in a very linear fashion
and so we are doing kind of a little bit
of a jumping around here
as we go through and adding all this functionality,
which is kind of unfortunate but again,
it's kind of a necessity.
So let's take a little bit of a break in the next section
and review on all the code we just wrote.
I'll see you there.