Before we move on to our tracklist scream this probably one last quick thing we want to take care of.
Remember whenever our application restarts in any way we dump all of our state.
So we need to make sure that if the user still has a token inside of async storage we want to essentially
automatically log them in and send them to the track list.
So in short this is really what we want to whenever the app starts up.
We need to check to see if there is a token in async storage if there is go to the track list.
Otherwise take the user to the sign up or the essentially off flow and we will allow the user to then
sign in and then eventually get over to track list.
So to actually make this question or answer this question we're going to create a new action function
that's just going to look inside of async storage and check to see if there's a token there.
If there is we're then going to dispatch an action with that token and essentially put the token into
our context object.
So let's get to it.
Let's first create a function that's going to check to see if there is a token an async storage.
So once again inside of off context J.S. I'm going to define a new function I'm going to call this one
How about try local sign in.
So the reason I'm calling it this is that we're essentially trying to sign the user in automatically
using just information on the user's device as opposed to making some API request or something like
that and then going to mark the second function here as a sync and then inside there we'll say coins
token is a weight async storage dot get item and remember we stored that token under token so now if
we have a token token there's going to be the token.
Otherwise it's going to be simply null.
So then inside of here we can put in a simple if check will say if there is a token then Let's dispatch
an action immediately.
So I'm going to dispatch an action of type.
Remember we can actually reuse one of our existing action types we have right here which is sign in
and that's going to make sure that we just store the token from the payload inside of our state it's
going to dispatch an action of type sign in and the payload will be the token that we've just pulled
out of local storage or async storage and then immediately after that we're going to make sure that
we navigate our user over to track list so we can once again use the navigate function that we've already
imported into this file so there's navigate right there so to navigate the user around we'll call navigate
and say that we want to go to the track list screen.
Now if we fail to find a token that's totally fine.
We don't actually have to navigate the user over to our log and flow or anything like that but just
to make sure that we're really explicit here.
I'll put it in else case and say okay if we don't find the token let's just make 100 percent certain
that we navigate to our log and flow.
So that's going to make sure that we go to our log and flow right there which by default will show these
sign up screen.
We could alternatively just say very explicitly take me to sign up but either sign up or log and would
be appropriate here okay.
Now we just need a place to call this action function from let's make sure that we first export it at
the bottom of the file.
So I'll go down to the bottom of our file and wired up to our action object right here so try local
signing.
So now we've got that all wired up.
We can probably call this thing anytime that a user navigates to art sign up screen.
Remember that's the default screen that we show an application first starts up.
So inside of my sign up screen I'm going to make sure that I pull off that new try local sign in function.
And then we want to make sure that we only try to call his function exactly at one time when this component
is first shown on the screen of our device.
So to do so we can once again use that U.S. fact hook from the react library.
Remember use effect allows us to call some function just one time when our component sign up screen
first appears on the screen so I can make sure that I import the hook use effect then inside of my component
I'll call use effect I'll pass in the function and remember to actually indicate that we only want to
run that function exactly one time.
We'll put in an empty array like so so then inside of here we can call try local sign in and that should
be at OK.
Now at this point on my device I am definitely signed in so to speak.
In other words I definitely currently have a token inside of easing storage so I'm going to expect that
when I save this file in my application reloads I should eventually appear at the track list screen.
It's going to save this and sure enough I get to the trackless screen.
There's just one little issue when I see that refresh occur you'll notice that for just a split second
I see the authentication screen first.
That's because we first show these sign up screen to the user and only when that sign up screen appears
do we then attempt to do our local sign in so in that very small split seconds that it takes between
showing these sign up screen to the user and then calling try local sign in and actually looking inside
of our async storage.
Well for that very small split second the user ends up seeing the sign up screen which is just a little
bit awkward.
So I didn't go to be really nice to kind of fix that up and make sure that there is no kind of flash
of content like that.
Let's take a quick pause right here when we come back the next video.
We'll figure out how to deal with that.