-: In the last section,
we put together a sign out component.
Again, notice how we're kind of
taking an interesting approach here where when
a user tries to sign out we're actually
going to send them to a very distinct route
inside our application
and show them some content.
This is definitely slightly at odds
perhaps with some other types
of applications where you might just say
Log out a user and send them back
to the root route, or something like that.
Again, I really like this pattern
because it gives us the ability to show some type
of custom message to the user, something to kind
of keep them on the hook
or come back again in the future.
Our component right now,
although it does show some content
and it is in theory hooked up to our router
we don't have a action creator just yet to
actually sign the user out.
So we're assuming
that this action creator right here exists.
But again, we haven't made it just yet.
Let's flip over
to our types file where it looks like in the past
we already set up the action type
to unauthenticated user.
All we have to do is import this unauth user type
into our Action creator's file
and then we can create the actual action creator.
So up at the top in the import statement
inside of my Action Creator's file
I'm gonna pull in the action type unauth user.
And again, if you wanna go with deauth,
which certainly makes more sense,
but I just can't stand how it looks like Death user.
[Laughing]
Too creepy for me.
So I like Unauth user just a little bit more.
All right, let's make our action creator.
I'm going to export a function called
sign out user.
And inside of here,
we really wanna accomplish two things.
Not only do we want to return
an action of type Unauth user,
and if you recall, the purpose of this action is
I'm gonna flip over really quick here
to our authentication reducer.
The purpose of that type is to catch this case
over here that we had already set up.
So we already set up this Unauth user case where
it flips the authenticated flag over to false
so the rest of our application knows,
Hey this user is no longer authenticated.
Don't show them, you know, anything, any links
or anything like that
associated with them being logged in.
The other thing that we need
to do inside of here though
is we need to get rid of
the token that we've saved.
So presumably whenever a user signs out
of our application, that means I don't want to
be able to access this application anymore
from this browser or on this machine.
So the expectation from the user here is
that when they sign out, they are really signed
out and they cannot make any more
authenticated requests.
So the other thing that we have to do inside of
this Sign Out Action creator that we've created,
is we need to make sure that we get rid of this
token that we set inside of local state.
To do so,
pretty straightforward on the local storage side
we can just call local storage,
remove item token like so.
So this will find some key inside of local
state called Token
and if there's any data associated with it.
Poof. It just gets nuked.
That's all.
All right,
I think we're now ready for a shot
inside the browser.
We should now have the ability to both sign in
and sign out for our application.
It looks like I immediately have an error,
cannot find module off, sign out.
Probably means I've got it typo somewhere.
So I'm gonna check inside of Node.
Yep. Looks like I've got a oh,
import star as actions to.
Well, it looks like I was kind of going with
the from and to there.
[Laughing]
Oh man.
I'm sure this is the kind of thing where as
you're watching the video
you're just sitting there watching
me write to right here and you're saying,
Why in the world did he put to there?
I've never seen to before.
I apologize for that.
It should definitely be from.
And it looks like we're valid again.
So let's give it a shot.
I'm going to go back to sign in.
Here's our form.
Test 1, 2, 3.
Put in my password.
And sweet.
I'm still at feature, which is not good
but I should now be able to go to sign out.
I click on sign out.
I see my message.
Sorry to see you go.
And I see my links at the top.
Once again, go to sign in and sign up.
So I can now go back to sign in
and if I so chose, I can sign in again.
All right, so this is looking pretty darn good.
I can also go back to my root route,
if I so chose,
but we don't have any content here right now
but we'll get to that.
This is looking pretty good.
Looks like our sign out route
is working successfully.
Definitely in the next logical place to go to
I think is gonna be our signup component.
So let's take care of that in the next section.