Our whole authentication flow is pretty rock solid.
The very last thing we have to do is take care of that account screen and make sure that we have the
ability to actually sign out of our application.
So signing out should be really easy.
In order to sign out of our app all we have to do is remove that token out of our async storage and
remove it out of our off context state object as well by essentially unsettling or forgetting that token
we effectively log our user out.
Now this is a very different idea of sign out than a typical Web application where we might have some
like cookie or something like that and we would need to reset that cookie to essentially log a user
out so again because we're using it just on a Web token.
As long as we just forget the token we effectively are logged out because we can no longer prove who
we are that we are who we say we are to our API.
So let's start working on the account screen so inside my screen structure we will find account screen
inside of here we're probably going to need to show some button or something like that that user can
tap on so at the very top I'm gonna make sure that I get a import or button from react native elements.
Remember once again we're using a button from React Native elements just because there's a little bit
more customization around it.
I'm also going to import that space or component we created from components spacer and then finally
in order to make sure that we actually kind of unset our token from our state well we're probably going
to need to make sure that we call a action function from our off context file.
We don't have anything inside of here just yet.
Around signing out.
So while we do have the stub right there but we don't actually have that wired up to anything.
So we need to make sure that we can call that function from account screen whenever user taps on the
button that we're going to show.
So in order to call that function as usual we need to get our use context took from react.
We also need to import our context as off context.
From context of context.
OK.
So now inside of account screen I'm going to wrap that text element inside of a fragment.
I'm going to make sure I clean up that semicolon there at the very end and then underneath that piece
of text I'll show a button with a title of about sign out and an on press let's make sure that we get
our sign out action function side if you're really quickly so going to leave on press just blank for
right now and then we'll do a concert we'll get sine out and that's going to coming from use context
context.
So now whenever user taps on that button or presses it we'll call the sine out function and that should
pretty much be it.
Let's make sure that we also wrap that button element right there with the spacer just to make sure
that we've got a little bit of spacing against the text that's going to be shown right above it.
It's going to wrap button with spacer
okay.
Let's say this.
Now I can go to my account screen which remembers the third button over here on the tab bar and we've
got the sign up button.
Now we can tap it and that does call these sign out function but right now our sign up function doesn't
really do anything.
So let's go back over to our auth context and make sure that we unset or remove that item that token
out of our async storage.
Remove it out of our state object as well and navigate our user back to our authentication flow so inside
of context.
Once again remember we've got this stub for sign out right here.
I'm going to first begin by kind of reformatting the sine out function into the more compact VAX fashion
that we've been using inside of here.
So I'm going to delete the curly braces around the outer function and delete the return statement and
put the inner function on the same line.
Okay.
So then inside of here we want to unset that token piece of authentication state so we can make sure
that we call async storage.
We're gonna dispatch an action to like sign out and we're going to navigate back to our authentication
flow.
That's pretty much it.
So I'll first begin by doing and await async storage then to remove an item out of async storage or
essentially forget it we can call remove item and we'll specify which item we want to forget.
So forget the token well then dispatch an action of type sign out.
Now we don't actually have any case inside of our reducer to handle that.
So let's make sure that we take care that very quickly.
So up inside of my reducer I will add a new case of sign out so anytime we see that we're going to want
to return a token property of null.
So no longer do we have a token there's no token here.
We don't have any token to use to indicate that we're signed in and then optionally we could also decide
to reset our error message property not supercritical.
Nonetheless I'll do it anyways.
It's all set.
Error Message 2 empty string.
Okay so then back down inside of sine out the very last thing that I'll do inside of here will make
sure that we navigate back to our authentication flow.
So that will be a navigate to call to our log and flow so I'll do navigate log in.
Flow
okay.
So that should be it.
So let's save this.
We could do a quick test once again forgot that async keyword we make sure I get that on the inner function
right there.
Save it one more time.
Okay.
So here we go.
We're back at our tracklist screen because we have a token inside of async storage.
So go to account.
I'm gonna sign out and I get kicked back to my log and flow if I now refresh my application.
I'm still back inside the log and flow because we no longer have a token piece of data inside of async
storage.
So if I go to sign in I can sign in with a legitimate email and password and I'm back to my trackless
screen.
If I now refresh I still come back to the trackless screen once again because we've got that token inside
of async storage.
All right that looks pretty good.
I'll do a quick test on Android as well.
It's gonna make sure that I can actually sign out.
Yep.
Going to make sure they can sign back in
and I can go back to account I can refresh as well.
There's the refresh I can go back to account and sign out once again.
All right.
Very good.
It's not the last thing I think we need to take care of on this account screen.
As usual we've got all this context or this text right here that's gonna smushed up against the very
top.
So we need to figure out some way to deal with that.
Turns out that when we're making use of React navigation there's actually a nice little helper that
we can use to solve this issue.
So let's take a quick pause right here and figure out exactly what it is.