Hi and welcome back.
Today we're going to be talking about tokens.
So VAR based tokens expire every hour and when a token express it means that it
is no longer valid for authenticating the user.
If the user continues to use the app without logging out, the app will continue
to treat the user as authenticated even though their token is no longer valid.
And this is very bad because it can lead
to very severe security and privacy issues.
Simplest examples being that the user sensitive information may be exposed
to unauthorized users who have access to the device.
And additionally, if the user's data is being store on the server,
the server may continue to accept the request or server might deny the request.
And if we don't log out the user because their tokens are expired,
then they're going to be getting bunch of errors if the server is going
to decline, treating them as a logged in user and their app is not going to be
responding and it's not going to be showing up as the logged out user.
So what we want to do is make sure
that whenever token expires we'll look the user out or we get a refresh token.
And I definitely like the latter more
because we don't want to be logging out the user every 1 hour.
We want to be getting a refresh token and there's a way to do that using
Firebase and we are going to be doing that.
But when do we and how do we check actually that we should refresh the token?
So we could check the token expiration before making a server request,
which is a good practice because we could get a new token if the current one has
expired when we're making any server calls.
And this would be great if you are accessing the server frequently.
And technically speaking, servers should be handling
whether the token is expired or not and telling us to log out.
But right now we don't have a lot of API calls.
We are only making APIs to create
the user, log in the user and log out the user.
So we're going to have to create some kind
of function to check whenever a user gets out of our application and comes back
in several hours later, for example, that their token is expired or not.
To do that, we're going to have to use something called appstate.
So to tell you shortly,
appstate API from react native is used to track whether the user is running your
application in the foreground or in the background.
And we can use it to make sure
that whenever user comes back from the background or inactive node
to the active mode of the app state, then we check the token and make sure
that if it needs to be refreshed, we refresh it.
So what we should do for that is go to our
app file and make sure that we track the changes of the app state and to do
that the only thing that we're going to be needing is importing the app state
from react native and we're going to be using it to track the app state changes.
First of all we're going to need a reference to the app state.
So let's create an app state here and use ref to the app state
and let's say current state and then we need to import this use ref here.
And now we have the reference to the app state and what we need to do is make sure
that we use effect to set up an event listener.
Let's import use effect here
and then what we want to do is subscribe to the changes of the update.
So let's create a const subscription and say app state add
event listener for a change and anytime a change in the app state
occurs we're going to be checking what the app state is.
So we're going to need a next app state
here because that's what we're going to get and the we want to see if state
current matches inactive or background
and next useState is active.
Then we know that we are combine from background to the foreground
which means that user just went out of the application and came back in.
So we got to make sure that we update the app state as the next app state comes in.
So here we would just say state current is
equal to next app state so that we don't miss out on any updates.
And then what we could do here is just
like console log for example, you have come back into the app.
Now let me find if we have any console log
here and just get rid of them really quickly so that they don't mess with us.
Great and then let's reload
the application and now we're going to get
out and then we're going to come back in
and we're going to see you have come back into the app.
So if we do that one more time
you're going to see that again.
If we completely quit this application
and code back in we're not going to be seeing that message anymore.
So what we might want to do is make sure
that we check the user's token when an application is rendered.
So here if we console log application
has rendered let's see what we're going to see.
So application has rendered is here
and now if we get out and come back in we only see the message you have come back
into the app but if we completely quit again and come back into the app we're
only going to see application has rendered.
So basically we're going to use these two
places where we just place our console logs to get refreshed tokens.
So now let's explore the way to do
that using the firebase in our user JS file and let's put a function check token
and it's going to be asynchronous and all it's going to do is try to use the Auth
to get the current user and the get the ID token and force to refresh it.
True. So we want to force refresh it and we want
to get the response from here and let's catch any errors here
and let's return that error from here and let's return the response from here.
Whoops, let's make sure we do this and then let's console log the response
because it would be interesting to see what it would say.
And then here we can just call that function.
So we would have to make this
an Asynchronous action where we can await for check token from the user
and the we can await for check token here as well
and we can't make the use effects asynchronous, so we can just leave it as
it is and then we see that we get a new token back.
So what we want to do with this new token
is actually update our user JS file with the new token.
So Update Token is going to be here
and we're going to say that State Token is
going to be equal to Action payload and we want to make sure that we export
this and then let's go to our user JS file and if everything was successful,
we are going to use the store to dispatch Update Token action with the response.
Okay, so let's import the store here and let's import update token.
Let's save this and let's say here we are updating token for you.
Great.
So now if we go here and reload our application,
you're going to see that they are updating the token for us.
And if we go back to our home screen and come back into the application,
then the token is going to be updated again.
So this way user wouldn't be logged out
if their token is expired,
we're just going to be refreshing the tokens for them,
ensuring that the back end and the font end are going to be working synchronously
together well, and there are going to be no issues with communicating with your
servers if you're planning on creating any applications and APIs.
So that's all for today.
Stay tuned and I'll see you in the next section.
Thanks so much for watching.