WEBVTT

1
00:00:00.400 --> 00:00:01.620
Hi and welcome back.

2
00:00:01.650 --> 00:00:04.340
Today we're going to be
talking about tokens.

3
00:00:04.370 --> 00:00:09.660
So VAR based tokens expire every hour
and when a token express it means that it

4
00:00:09.690 --> 00:00:12.380
is no longer valid
for authenticating the user.

5
00:00:12.410 --> 00:00:17.020
If the user continues to use the app
without logging out, the app will continue

6
00:00:17.040 --> 00:00:22.180
to treat the user as authenticated even
though their token is no longer valid.

7
00:00:22.210 --> 00:00:25.020
And this is very bad because it can lead

8
00:00:25.050 --> 00:00:28.660
to very severe security
and privacy issues.

9
00:00:28.690 --> 00:00:32.900
Simplest examples being that the user
sensitive information may be exposed

10
00:00:32.930 --> 00:00:36.260
to unauthorized users who have
access to the device.

11
00:00:36.280 --> 00:00:39.220
And additionally, if the user's data is
being store on the server,

12
00:00:39.250 --> 00:00:44.620
the server may continue to accept the
request or server might deny the request.

13
00:00:44.650 --> 00:00:49.940
And if we don't log out the user because
their tokens are expired,

14
00:00:49.970 --> 00:00:53.720
then they're going to be getting bunch
of errors if the server is going

15
00:00:53.750 --> 00:00:58.740
to decline, treating them as a logged
in user and their app is not going to be

16
00:00:58.770 --> 00:01:02.820
responding and it's not going to be
showing up as the logged out user.

17
00:01:02.850 --> 00:01:04.660
So what we want to do is make sure

18
00:01:04.690 --> 00:01:09.740
that whenever token expires we'll look
the user out or we get a refresh token.

19
00:01:09.770 --> 00:01:12.770
And I definitely like the latter more

20
00:01:12.800 --> 00:01:16.340
because we don't want to be
logging out the user every 1 hour.

21
00:01:16.370 --> 00:01:20.700
We want to be getting a refresh token
and there's a way to do that using

22
00:01:20.730 --> 00:01:23.660
Firebase and we are
going to be doing that.

23
00:01:23.690 --> 00:01:29.660
But when do we and how do we check
actually that we should refresh the token?

24
00:01:29.690 --> 00:01:35.260
So we could check the token expiration
before making a server request,

25
00:01:35.290 --> 00:01:39.540
which is a good practice because we could
get a new token if the current one has

26
00:01:39.570 --> 00:01:43.140
expired when we're
making any server calls.

27
00:01:43.170 --> 00:01:47.740
And this would be great if you are
accessing the server frequently.

28
00:01:47.770 --> 00:01:52.740
And technically speaking,
servers should be handling

29
00:01:52.770 --> 00:01:57.210
whether the token is expired or
not and telling us to log out.

30
00:01:57.240 --> 00:02:00.060
But right now we don't
have a lot of API calls.

31
00:02:00.090 --> 00:02:02.540
We are only making APIs to create

32
00:02:02.570 --> 00:02:05.260
the user, log in the user
and log out the user.

33
00:02:05.290 --> 00:02:07.570
So we're going to have to create some kind

34
00:02:07.600 --> 00:02:13.220
of function to check whenever a user gets
out of our application and comes back

35
00:02:13.250 --> 00:02:19.500
in several hours later, for example,
that their token is expired or not.

36
00:02:19.530 --> 00:02:24.450
To do that, we're going to have
to use something called appstate.

37
00:02:24.480 --> 00:02:26.300
So to tell you shortly,

38
00:02:26.330 --> 00:02:31.140
appstate API from react native is used
to track whether the user is running your

39
00:02:31.170 --> 00:02:33.820
application in the foreground
or in the background.

40
00:02:33.840 --> 00:02:35.220
And we can use it to make sure

41
00:02:35.250 --> 00:02:39.380
that whenever user comes back
from the background or inactive node

42
00:02:39.410 --> 00:02:46.580
to the active mode of the app state,
then we check the token and make sure

43
00:02:46.610 --> 00:02:50.220
that if it needs to be
refreshed, we refresh it.

44
00:02:50.250 --> 00:02:54.060
So what we should do for that is go to our

45
00:02:54.090 --> 00:03:00.180
app file and make sure that we track
the changes of the app state and to do

46
00:03:00.210 --> 00:03:06.300
that the only thing that we're going to be
needing is importing the app state

47
00:03:06.330 --> 00:03:12.260
from react native and we're going to be
using it to track the app state changes.

48
00:03:12.290 --> 00:03:15.660
First of all we're going to need
a reference to the app state.

49
00:03:15.690 --> 00:03:22.580
So let's create an app state here and use
ref to the app state

50
00:03:22.610 --> 00:03:29.610
and let's say current state and then
we need to import this use ref here.

51
00:03:29.640 --> 00:03:35.420
And now we have the reference to the app
state and what we need to do is make sure

52
00:03:35.450 --> 00:03:41.900
that we use effect
to set up an event listener.

53
00:03:41.930 --> 00:03:45.980
Let's import use effect here

54
00:03:46.010 --> 00:03:51.660
and then what we want to do is
subscribe to the changes of the update.

55
00:03:51.690 --> 00:03:58.920
So let's create a const subscription
and say app state add

56
00:03:59.560 --> 00:04:06.460
event listener for a change
and anytime a change in the app state

57
00:04:06.490 --> 00:04:11.300
occurs we're going to be
checking what the app state is.

58
00:04:11.330 --> 00:04:14.060
So we're going to need a next app state

59
00:04:14.090 --> 00:04:21.180
here because that's what we're going
to get and the we want to see if state

60
00:04:21.210 --> 00:04:26.860
current matches inactive or background

61
00:04:26.890 --> 00:04:31.660
and next useState is active.

62
00:04:31.690 --> 00:04:38.140
Then we know that we are combine
from background to the foreground

63
00:04:38.160 --> 00:04:44.500
which means that user just went out
of the application and came back in.

64
00:04:44.530 --> 00:04:52.500
So we got to make sure that we update the
app state as the next app state comes in.

65
00:04:52.530 --> 00:04:56.660
So here we would just say state current is

66
00:04:56.690 --> 00:05:02.260
equal to next app state so that we
don't miss out on any updates.

67
00:05:02.280 --> 00:05:04.540
And then what we could do here is just

68
00:05:04.570 --> 00:05:12.580
like console log for example,
you have come back into the app.

69
00:05:12.600 --> 00:05:15.420
Now let me find if we have any console log

70
00:05:15.450 --> 00:05:20.060
here and just get rid of them really
quickly so that they don't mess with us.

71
00:05:20.090 --> 00:05:23.420
Great and then let's reload

72
00:05:23.450 --> 00:05:26.098
the application and now we're going to get

73
00:05:26.298 --> 00:05:28.620
out and then we're going to come back in

74
00:05:28.650 --> 00:05:31.660
and we're going to see you
have come back into the app.

75
00:05:31.690 --> 00:05:33.406
So if we do that one more time

76
00:05:33.606 --> 00:05:35.180
you're going to see that again.

77
00:05:35.210 --> 00:05:38.740
If we completely quit this application

78
00:05:38.770 --> 00:05:43.740
and code back in we're not going
to be seeing that message anymore.

79
00:05:43.770 --> 00:05:47.220
So what we might want to do is make sure

80
00:05:47.250 --> 00:05:53.380
that we check the user's token
when an application is rendered.

81
00:05:53.410 --> 00:05:57.460
So here if we console log application

82
00:05:57.480 --> 00:06:02.020
has rendered
let's see what we're going to see.

83
00:06:02.040 --> 00:06:05.100
So application has rendered is here

84
00:06:05.130 --> 00:06:10.140
and now if we get out and come back in we
only see the message you have come back

85
00:06:10.170 --> 00:06:15.740
into the app but if we completely quit
again and come back into the app we're

86
00:06:15.770 --> 00:06:18.340
only going to see
application has rendered.

87
00:06:18.360 --> 00:06:20.300
So basically we're going to use these two

88
00:06:20.330 --> 00:06:26.340
places where we just place our console
logs to get refreshed tokens.

89
00:06:26.360 --> 00:06:29.000
So now let's explore the way to do

90
00:06:29.030 --> 00:06:36.500
that using the firebase in our user JS
file and let's put a function check token

91
00:06:36.530 --> 00:06:43.500
and it's going to be asynchronous and all
it's going to do is try to use the Auth

92
00:06:43.530 --> 00:06:50.300
to get the current user and the get
the ID token and force to refresh it.

93
00:06:50.330 --> 00:06:53.560
True.
So we want to force refresh it and we want

94
00:06:53.590 --> 00:07:00.640
to get the response from here
and let's catch any errors here

95
00:07:01.040 --> 00:07:06.940
and let's return that error from here
and let's return the response from here.

96
00:07:06.970 --> 00:07:12.500
Whoops, let's make sure we do this
and then let's console log the response

97
00:07:12.530 --> 00:07:16.100
because it would be interesting
to see what it would say.

98
00:07:16.130 --> 00:07:19.100
And then here we can
just call that function.

99
00:07:19.130 --> 00:07:22.100
So we would have to make this

100
00:07:22.130 --> 00:07:29.540
an Asynchronous action where we can await
for check token from the user

101
00:07:29.570 --> 00:07:36.280
and the we can await for check token
here as well

102
00:07:38.600 --> 00:07:43.900
and we can't make the use effects
asynchronous, so we can just leave it as

103
00:07:43.920 --> 00:07:49.100
it is and then we see that we
get a new token back.

104
00:07:49.130 --> 00:07:52.140
So what we want to do with this new token

105
00:07:52.170 --> 00:07:56.860
is actually update our user
JS file with the new token.

106
00:07:56.890 --> 00:08:02.400
So Update Token is going to be here

107
00:08:04.000 --> 00:08:08.780
and we're going to say that State Token is

108
00:08:08.800 --> 00:08:14.140
going to be equal to Action payload
and we want to make sure that we export

109
00:08:14.170 --> 00:08:22.060
this and then let's go to our user JS file
and if everything was successful,

110
00:08:22.090 --> 00:08:30.700
we are going to use the store to dispatch
Update Token action with the response.

111
00:08:30.730 --> 00:08:37.660
Okay, so let's import the store
here and let's import update token.

112
00:08:37.690 --> 00:08:47.320
Let's save this and let's say here
we are updating token for you.

113
00:08:48.000 --> 00:08:48.620
Great.

114
00:08:48.650 --> 00:08:55.820
So now if we go here
and reload our application,

115
00:08:55.850 --> 00:08:59.540
you're going to see that they
are updating the token for us.

116
00:08:59.560 --> 00:09:06.260
And if we go back to our home screen
and come back into the application,

117
00:09:06.290 --> 00:09:09.500
then the token is going
to be updated again.

118
00:09:09.530 --> 00:09:12.220
So this way user wouldn't be logged out

119
00:09:12.250 --> 00:09:14.380
if their token is expired,

120
00:09:14.410 --> 00:09:17.620
we're just going to be refreshing
the tokens for them,

121
00:09:17.650 --> 00:09:22.660
ensuring that the back end and the font
end are going to be working synchronously

122
00:09:22.690 --> 00:09:26.940
together well, and there are going to be
no issues with communicating with your

123
00:09:26.970 --> 00:09:31.020
servers if you're planning on creating
any applications and APIs.

124
00:09:31.050 --> 00:09:33.380
So that's all for today.

125
00:09:33.410 --> 00:09:35.900
Stay tuned and I'll see
you in the next section.

126
00:09:35.920 --> 00:09:36.960
Thanks so much for watching.