1
00:00:00,690 --> 00:00:02,130
Instructor: We spent some time in the last section

2
00:00:02,130 --> 00:00:04,260
doing a quick review of everything

3
00:00:04,260 --> 00:00:05,340
we've done up to this point,

4
00:00:05,340 --> 00:00:08,370
including redux thunk, the dispatch method,

5
00:00:08,370 --> 00:00:10,170
and browser history here.

6
00:00:10,170 --> 00:00:11,160
At this point in time,

7
00:00:11,160 --> 00:00:14,490
in our success case where a user successfully authenticates

8
00:00:14,490 --> 00:00:16,050
with our backend API,

9
00:00:16,050 --> 00:00:18,060
there's only one last step we have to do,

10
00:00:18,060 --> 00:00:21,210
and that is save the JWT token.

11
00:00:21,210 --> 00:00:22,740
So remember the token is something

12
00:00:22,740 --> 00:00:25,440
that the server is providing to us.

13
00:00:25,440 --> 00:00:27,000
It's something that the server generates

14
00:00:27,000 --> 00:00:30,060
and is gonna send back to us inside the response.

15
00:00:30,060 --> 00:00:32,910
So we need to get a hold of that JWT token

16
00:00:32,910 --> 00:00:35,520
and for any follow up request in the future,

17
00:00:35,520 --> 00:00:38,040
that we wanna make that should be authenticated,

18
00:00:38,040 --> 00:00:40,800
we need to include that token.

19
00:00:40,800 --> 00:00:41,970
So when we put the line here,

20
00:00:41,970 --> 00:00:45,750
the comment save the JWT token, the real question is,

21
00:00:45,750 --> 00:00:47,940
well where do we save it?

22
00:00:47,940 --> 00:00:49,240
That's kinda the question.

23
00:00:50,370 --> 00:00:53,190
To save our token, we're going to employ something

24
00:00:53,190 --> 00:00:55,470
called local storage.

25
00:00:55,470 --> 00:00:58,020
So local storage is something that is available

26
00:00:58,020 --> 00:01:01,620
in most modern browsers as a native API.

27
00:01:01,620 --> 00:01:03,570
So in this diagram right here, let's take a look

28
00:01:03,570 --> 00:01:06,900
at what local storage is and what is doing it for us.

29
00:01:06,900 --> 00:01:09,120
This diagram is split into two columns.

30
00:01:09,120 --> 00:01:11,640
The client or kind of web browser, you know,

31
00:01:11,640 --> 00:01:14,340
your user's machine, and the server,

32
00:01:14,340 --> 00:01:18,810
the server providing down some JavaScript, HTML CSS

33
00:01:18,810 --> 00:01:22,290
and otherwise some kind of, JSON data of sorts.

34
00:01:22,290 --> 00:01:25,440
And so we're very used to a back and forth interaction

35
00:01:25,440 --> 00:01:28,083
between our user's client, which is the browser,

36
00:01:28,920 --> 00:01:30,900
and the server, which is going to exchange

37
00:01:30,900 --> 00:01:32,670
all these different resources,

38
00:01:32,670 --> 00:01:35,160
whenever they come visit our server.

39
00:01:35,160 --> 00:01:36,570
Local storage is something that is

40
00:01:36,570 --> 00:01:39,300
sitting in the background, so to speak.

41
00:01:39,300 --> 00:01:42,570
It is something that is managed entirely by a user's browser

42
00:01:42,570 --> 00:01:45,960
and it is not something that ever touches a server at all.

43
00:01:45,960 --> 00:01:48,330
Local storage, you can basically think of,

44
00:01:48,330 --> 00:01:51,360
as kind of hard drive access,

45
00:01:51,360 --> 00:01:54,390
on your user's machine, on your user's computer.

46
00:01:54,390 --> 00:01:58,020
So if we save some data to local storage,

47
00:01:58,020 --> 00:02:00,840
it is saved to the user's local device

48
00:02:00,840 --> 00:02:02,550
or their local machine.

49
00:02:02,550 --> 00:02:06,000
It is not saved or it's not shared in between users,

50
00:02:06,000 --> 00:02:08,550
different machines, let's say they've got a phone

51
00:02:08,550 --> 00:02:10,470
and a tablet and a laptop,

52
00:02:10,470 --> 00:02:12,060
those are all completely different.

53
00:02:12,060 --> 00:02:15,423
Local storage is just for one singular web browser.

54
00:02:16,680 --> 00:02:19,560
So it makes local storage a fantastic place

55
00:02:19,560 --> 00:02:21,780
to dump our token or to save it.

56
00:02:21,780 --> 00:02:24,903
Remember the idea behind the JWT token.

57
00:02:25,770 --> 00:02:27,570
Let me pull up another diagram here,

58
00:02:28,710 --> 00:02:32,760
is that when the server returns a JWT and we save the JWT

59
00:02:32,760 --> 00:02:35,970
to local storage, it's kind of a twofold thing there.

60
00:02:35,970 --> 00:02:37,740
Whenever the user makes a request

61
00:02:37,740 --> 00:02:41,550
that needs to be authenticated, we can attach the JWT,

62
00:02:41,550 --> 00:02:43,800
and that's going to identify us to our server.

63
00:02:43,800 --> 00:02:46,530
But then also very importantly,

64
00:02:46,530 --> 00:02:49,530
whenever a user revisits our application,

65
00:02:49,530 --> 00:02:51,990
local storage does not get cleared

66
00:02:51,990 --> 00:02:54,060
when the user hits the refresh button

67
00:02:54,060 --> 00:02:56,160
in their browser, it is persistent data.

68
00:02:56,160 --> 00:02:58,200
It's persistent storage.

69
00:02:58,200 --> 00:03:01,080
So when a user logs in, navigates away,

70
00:03:01,080 --> 00:03:04,110
maybe comes back to the website tomorrow, the next day,

71
00:03:04,110 --> 00:03:07,830
the token is still available in local storage.

72
00:03:07,830 --> 00:03:10,200
Which again makes it a fantastic candidate

73
00:03:10,200 --> 00:03:12,360
for sticking our token in there.

74
00:03:12,360 --> 00:03:14,100
One last important thing,

75
00:03:14,100 --> 00:03:18,240
the JWT token is not shared across domains, or excuse me,

76
00:03:18,240 --> 00:03:21,060
the local storage is not shared across domains.

77
00:03:21,060 --> 00:03:25,440
So if we on, say google.com, make use of local storage

78
00:03:25,440 --> 00:03:28,710
and put some very critical or sensitive data in there,

79
00:03:28,710 --> 00:03:32,310
and then a user goes over to hackerwebsite.com,

80
00:03:32,310 --> 00:03:35,460
hackerwebsite.com is not going to have access

81
00:03:35,460 --> 00:03:39,090
to the local storage that was contained over at google.com.

82
00:03:39,090 --> 00:03:41,220
So it's unique to a domain.

83
00:03:41,220 --> 00:03:43,290
Which again makes it a great candidate

84
00:03:43,290 --> 00:03:45,213
for saving our token.

85
00:03:46,950 --> 00:03:48,240
So that's gonna be our strategy here.

86
00:03:48,240 --> 00:03:49,650
When we're going to save our token,

87
00:03:49,650 --> 00:03:52,680
we're really just going to toss it into local storage.

88
00:03:52,680 --> 00:03:54,150
And that's pretty much it.

89
00:03:54,150 --> 00:03:55,400
That's all we have to do.

90
00:03:57,090 --> 00:04:02,090
So to make use of our token, excuse me,

91
00:04:02,130 --> 00:04:04,473
all we have to do is save it to local storage.

92
00:04:05,820 --> 00:04:08,883
We can do so by referencing local storage,

93
00:04:10,470 --> 00:04:14,400
and set item token.

94
00:04:14,400 --> 00:04:16,589
And then the data that we want to save here,

95
00:04:16,589 --> 00:04:19,773
which will be response.data.token.

96
00:04:21,209 --> 00:04:24,453
So local storage is a native or,

97
00:04:25,290 --> 00:04:27,570
it is a method that is available on Window scope.

98
00:04:27,570 --> 00:04:29,820
It's an object that's available on Window scope.

99
00:04:29,820 --> 00:04:31,680
So we don't have to import local storage

100
00:04:31,680 --> 00:04:32,880
into this file or anything.

101
00:04:32,880 --> 00:04:35,580
We can call it any time we want.

102
00:04:35,580 --> 00:04:39,240
To save an item, we call the method set item,

103
00:04:39,240 --> 00:04:41,760
which basically means we want to save something

104
00:04:41,760 --> 00:04:43,770
to local storage.

105
00:04:43,770 --> 00:04:46,650
We then provide kind of a key or a name

106
00:04:46,650 --> 00:04:49,110
of the data that we want to save, and then the data

107
00:04:49,110 --> 00:04:50,790
that we actually want to save.

108
00:04:50,790 --> 00:04:51,900
And that's it.

109
00:04:51,900 --> 00:04:53,580
That's all we have to do to get something saved

110
00:04:53,580 --> 00:04:55,560
to local storage.

111
00:04:55,560 --> 00:04:57,810
So let's give this a shot in the browser now.

112
00:04:58,770 --> 00:05:00,483
I'm going to refresh the page.

113
00:05:02,940 --> 00:05:04,920
Looks like we've got a little bit of a typo,

114
00:05:04,920 --> 00:05:07,710
kinda a little bit of bleed over from a previous section.

115
00:05:07,710 --> 00:05:09,600
We have a reference here saying

116
00:05:09,600 --> 00:05:11,523
that auth user is not defined here.

117
00:05:12,690 --> 00:05:15,540
That is due to our reducer, auth reducer,

118
00:05:15,540 --> 00:05:17,370
we never imported the types in here,

119
00:05:17,370 --> 00:05:18,930
so let's take care of that really quick,

120
00:05:18,930 --> 00:05:22,200
sorry for the side diversion here.

121
00:05:22,200 --> 00:05:27,200
We will import auth user and unauth user from actions types.

122
00:05:34,020 --> 00:05:35,730
And now we're good to go.

123
00:05:35,730 --> 00:05:38,673
I'm gonna put in test 1, 2, 3, password.

124
00:05:39,720 --> 00:05:40,800
I'm gonna sign in.

125
00:05:40,800 --> 00:05:43,230
We got an error about featured not matching any routes.

126
00:05:43,230 --> 00:05:44,760
That's okay, that's just because we haven't

127
00:05:44,760 --> 00:05:46,290
defined that route yet.

128
00:05:46,290 --> 00:05:49,023
Now let's go ahead and refresh the page.

129
00:05:50,760 --> 00:05:53,700
We still get the error saying that no route found.

130
00:05:53,700 --> 00:05:56,580
Again, that's totally fine, in the Chrome console,

131
00:05:56,580 --> 00:06:01,320
I'm now going to write local storage get item,

132
00:06:01,320 --> 00:06:05,190
and I'm gonna get whatever saved to the string token

133
00:06:05,190 --> 00:06:08,490
and you'll see that we get back here, the JWT token

134
00:06:08,490 --> 00:06:10,440
even though we just refresh the page.

135
00:06:10,440 --> 00:06:12,153
So we can refresh the page again,

136
00:06:14,070 --> 00:06:15,690
run the local storage get item again,

137
00:06:15,690 --> 00:06:17,670
and we get the token back again.

138
00:06:17,670 --> 00:06:19,590
So looks like our token exists

139
00:06:19,590 --> 00:06:22,170
even when a user refreshes the page.

140
00:06:22,170 --> 00:06:24,150
This will also make logging the user out

141
00:06:24,150 --> 00:06:26,400
in the future very easy, 'cause all we have to do

142
00:06:26,400 --> 00:06:28,830
is remove this token from the local storage

143
00:06:28,830 --> 00:06:32,340
and poof, the user will no longer be logged in.

144
00:06:32,340 --> 00:06:33,740
So this is a great solution.

145
00:06:35,070 --> 00:06:36,330
This looks good so far.

146
00:06:36,330 --> 00:06:38,763
Let's go ahead and continue in the next section.