- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.680 --> 00:00:01.750
In the last guide,
2
00:00:01.750 --> 00:00:05.170
we saw how we were able to communicate with the API
3
00:00:05.170 --> 00:00:07.460
to send authentication data,
4
00:00:07.460 --> 00:00:12.450
and then to receive a secure and encrypted JWT token,
5
00:00:12.450 --> 00:00:14.660
also called a jot token back.
6
00:00:14.660 --> 00:00:18.130
But now, we need to see how can we use this token.
7
00:00:18.130 --> 00:00:19.970
What's the point of getting it?
8
00:00:19.970 --> 00:00:22.000
And the reason why we need it
9
00:00:22.000 --> 00:00:27.000
is because from here on out, any admin specific items,
10
00:00:27.970 --> 00:00:32.440
things like being able to drag and drop the portfolio items,
11
00:00:32.440 --> 00:00:35.810
or create a blog post, or anything like that,
12
00:00:35.810 --> 00:00:39.320
that only you as the site owner should be able to do
13
00:00:39.320 --> 00:00:43.760
is going to require accessing that jot token.
14
00:00:43.760 --> 00:00:47.040
So we first have one task we need to do,
15
00:00:47.040 --> 00:00:51.530
which is to find out how can we store that jot token,
16
00:00:51.530 --> 00:00:53.450
and how can we store it
17
00:00:53.450 --> 00:00:57.810
so that even after the user leaves this page,
18
00:00:57.810 --> 00:00:59.520
we still can access it.
19
00:00:59.520 --> 00:01:00.860
That's going to be the first task.
20
00:01:00.860 --> 00:01:03.110
The other one is how can we go
21
00:01:03.110 --> 00:01:05.600
and can we retrieve it from storage.
22
00:01:05.600 --> 00:01:09.220
And we're going to be able to accomplish both of those tasks
23
00:01:09.220 --> 00:01:11.650
in this video, and we're gonna use a tool
24
00:01:11.650 --> 00:01:14.750
called local storage in order to do it.
25
00:01:14.750 --> 00:01:17.600
Now, local storage is not specific to React.
26
00:01:17.600 --> 00:01:21.530
This is something that is pure vanilla JavaScript code.
27
00:01:21.530 --> 00:01:23.720
And so it gives you an interface
28
00:01:23.720 --> 00:01:28.240
for being able to store very small amounts of data directly
29
00:01:28.240 --> 00:01:30.230
in the user's browser.
30
00:01:30.230 --> 00:01:33.580
And so let's get started with that here.
31
00:01:33.580 --> 00:01:35.970
So the first thing we're gonna do is we're gonna store
32
00:01:35.970 --> 00:01:39.600
this directly inside of our check here.
33
00:01:39.600 --> 00:01:44.600
So when we ask if the response data returned a jot token,
34
00:01:44.710 --> 00:01:46.370
this is where we're gonna store this
35
00:01:46.370 --> 00:01:47.910
in the user's browser.
36
00:01:47.910 --> 00:01:49.970
So right below the console log here,
37
00:01:49.970 --> 00:01:52.590
I'm gonna say local storage
38
00:01:52.590 --> 00:01:54.610
and you can see we already have access to it.
39
00:01:54.610 --> 00:01:56.810
We did not have to import it manually
40
00:01:56.810 --> 00:01:58.480
or do anything like that.
41
00:01:58.480 --> 00:02:03.370
And so you can say localStorage.setItem.
42
00:02:03.370 --> 00:02:06.830
Now setItem is going to take two arguments.
43
00:02:06.830 --> 00:02:10.390
The first argument is gonna be some type of name,
44
00:02:10.390 --> 00:02:12.320
because you need the ability,
45
00:02:12.320 --> 00:02:15.090
since you're gonna have to go and retrieve this token,
46
00:02:15.090 --> 00:02:18.950
you need a name for this token in the browser.
47
00:02:18.950 --> 00:02:19.783
And in a little bit,
48
00:02:19.783 --> 00:02:21.640
I'm gonna show you how you can actually go
49
00:02:21.640 --> 00:02:24.880
into the browser and see all of the tokens
50
00:02:24.880 --> 00:02:26.890
that people have for you.
51
00:02:26.890 --> 00:02:30.180
So localstorage.setItem,
52
00:02:30.180 --> 00:02:31.510
and I'm gonna call this one
53
00:02:31.510 --> 00:02:34.240
'cause we want it to be something that is specific
54
00:02:34.240 --> 00:02:35.850
to our application.
55
00:02:35.850 --> 00:02:38.130
You wouldn't want to just call this token
56
00:02:38.130 --> 00:02:41.230
or then it would be confusing to the browser
57
00:02:41.230 --> 00:02:44.770
if someone else tries to use a generic term like token.
58
00:02:44.770 --> 00:02:48.560
So I always like to use the name of the application
59
00:02:48.560 --> 00:02:51.360
or something like that, that's gonna be unique.
60
00:02:51.360 --> 00:02:54.023
So I'm gonna say here, devcamp_space_secure_token.
61
00:02:59.550 --> 00:03:00.730
And that's gonna be the name,
62
00:03:00.730 --> 00:03:02.440
and you're gonna see how we can find this here
63
00:03:02.440 --> 00:03:03.530
in a little bit.
64
00:03:03.530 --> 00:03:07.170
And then as a second argument, it's the actual value,
65
00:03:07.170 --> 00:03:09.870
which in this case is that jot token.
66
00:03:09.870 --> 00:03:14.003
So I'll say response.data.jwt.
67
00:03:14.980 --> 00:03:16.490
Okay, hit save.
68
00:03:16.490 --> 00:03:20.040
And so now what should happen is when we log in,
69
00:03:20.040 --> 00:03:23.910
we should have a jot token that isn't simply printed out
70
00:03:23.910 --> 00:03:27.000
to the console, but it's also stored in the browser.
71
00:03:27.000 --> 00:03:28.570
So let's test this out.
72
00:03:28.570 --> 00:03:32.423
I'm going to type in one of my accounts on devcamp_space.
73
00:03:35.390 --> 00:03:36.420
Type the wrong password.
74
00:03:36.420 --> 00:03:38.010
There we go.
75
00:03:38.010 --> 00:03:39.683
And I'm gonna hit login.
76
00:03:40.640 --> 00:03:43.480
So right here, you can see if you scroll up,
77
00:03:43.480 --> 00:03:47.010
you can see that we did get our good console log statement.
78
00:03:47.010 --> 00:03:50.100
So it means the JWT token did come through.
79
00:03:50.100 --> 00:03:52.750
So that means I am authenticated.
80
00:03:52.750 --> 00:03:56.280
But now, how can we actually see it in the browser.
81
00:03:56.280 --> 00:03:59.350
I'm gonna extend this and I'm gonna show you.
82
00:03:59.350 --> 00:04:02.030
So if you have Chrome, and you're using Chrome,
83
00:04:02.030 --> 00:04:04.010
it's gonna be slightly different in Firefox
84
00:04:04.010 --> 00:04:05.780
but you can use this with both.
85
00:04:05.780 --> 00:04:09.660
If you go to application, the application tab here,
86
00:04:09.660 --> 00:04:11.760
and go to local storage.
87
00:04:11.760 --> 00:04:14.590
And then depending on how many sites
88
00:04:14.590 --> 00:04:15.930
are using local storage,
89
00:04:15.930 --> 00:04:20.260
you're gonna see one here called localhost 8080.
90
00:04:20.260 --> 00:04:22.470
So this is what we're using.
91
00:04:22.470 --> 00:04:26.280
If this was deployed, and it was your name.com,
92
00:04:26.280 --> 00:04:28.260
then you would see local storage,
93
00:04:28.260 --> 00:04:30.570
and then your name.com.
94
00:04:30.570 --> 00:04:31.650
And so this is the way
95
00:04:31.650 --> 00:04:34.310
that all of that kind of gets wrapped together.
96
00:04:34.310 --> 00:04:37.230
So now that you have your local storage value,
97
00:04:37.230 --> 00:04:41.140
you can see all of the items that are being taken up.
98
00:04:41.140 --> 00:04:43.010
And you can see that that worked.
99
00:04:43.010 --> 00:04:45.710
There is a key here called devcamp_space_secure_token,
100
00:04:47.040 --> 00:04:48.730
which is exactly what we named it,
101
00:04:48.730 --> 00:04:51.440
and then here is that value.
102
00:04:51.440 --> 00:04:56.420
So what we've done is we've taken some data from the API,
103
00:04:56.420 --> 00:05:00.050
we found that we've now successfully stored it directly
104
00:05:00.050 --> 00:05:02.217
in the users browser.
105
00:05:02.217 --> 00:05:06.870
And this is a very common process for authentication.
106
00:05:06.870 --> 00:05:10.500
If you're logging into pretty much any application
107
00:05:10.500 --> 00:05:13.790
in the world, they're gonna follow a process
108
00:05:13.790 --> 00:05:17.880
like this for being able to verify
109
00:05:17.880 --> 00:05:20.440
that you are who you say you are.
110
00:05:20.440 --> 00:05:21.930
So this is pretty cool.
111
00:05:21.930 --> 00:05:25.810
This means that the browser now has a reference to us.
112
00:05:25.810 --> 00:05:27.400
If you wanna delete any of these,
113
00:05:27.400 --> 00:05:30.170
you can simply come up and click delete selected,
114
00:05:30.170 --> 00:05:33.170
and then you'll no longer be logged in.
115
00:05:33.170 --> 00:05:37.960
So I'm going to close this out that is working nicely.
116
00:05:37.960 --> 00:05:41.520
Now let's actually see how can we retrieve this value?
117
00:05:41.520 --> 00:05:45.450
Because say that we wanna go now to the homepage.
118
00:05:45.450 --> 00:05:46.640
And let's actually do that.
119
00:05:46.640 --> 00:05:49.980
Let's go to localhost 8080.
120
00:05:49.980 --> 00:05:52.730
So we're now on a different page here.
121
00:05:52.730 --> 00:05:56.790
What if we need to get that secure token on this page?
122
00:05:56.790 --> 00:05:59.430
What if we need it to make some kind of API query
123
00:05:59.430 --> 00:06:00.610
or something like that.
124
00:06:00.610 --> 00:06:02.983
Well, if we go to the home here,
125
00:06:03.910 --> 00:06:05.620
I'm going to come,
126
00:06:05.620 --> 00:06:08.680
and we can do this anywhere here,
127
00:06:08.680 --> 00:06:10.530
this is just for testing purposes,
128
00:06:10.530 --> 00:06:12.810
but right above the portfolio items,
129
00:06:12.810 --> 00:06:14.550
so I'm gonna add an h1.
130
00:06:14.550 --> 00:06:19.290
And I'll say this is our JWT, hit Save,
131
00:06:19.290 --> 00:06:21.000
and make sure you can see that there.
132
00:06:21.000 --> 00:06:25.330
And yes, so you can see we have our JWT token call here.
133
00:06:25.330 --> 00:06:27.550
And so how can we retrieve that?
134
00:06:27.550 --> 00:06:29.900
Well, inside of curly brackets,
135
00:06:29.900 --> 00:06:31.713
I'm gonna call local storage.
136
00:06:32.710 --> 00:06:36.000
And now I'm gonna call a function called getItem.
137
00:06:36.000 --> 00:06:39.280
Now getItem simply takes in one argument,
138
00:06:39.280 --> 00:06:42.720
which is the name of our token, which in this case,
139
00:06:42.720 --> 00:06:44.780
you can just go and copy that,
140
00:06:44.780 --> 00:06:49.060
it's devcamp_space_secure_token with underscores
141
00:06:49.060 --> 00:06:52.370
and paste that end and hit save.
142
00:06:52.370 --> 00:06:53.690
And now you're gonna see
143
00:06:53.690 --> 00:06:56.570
that we have successfully retrieved
144
00:06:56.570 --> 00:07:00.810
that entire token directly from local storage.
145
00:07:00.810 --> 00:07:01.950
So this is really cool.
146
00:07:01.950 --> 00:07:06.950
This is a way that we can now set some data on one screen,
147
00:07:07.100 --> 00:07:11.070
and then access that data on some other screens.
148
00:07:11.070 --> 00:07:14.040
And what this is going to do just to kind of give you a hint
149
00:07:14.040 --> 00:07:17.280
of why we're doing this is because later on
150
00:07:17.280 --> 00:07:21.140
when you wanna have some type of admin behavior,
151
00:07:21.140 --> 00:07:21.973
like we talked about,
152
00:07:21.973 --> 00:07:24.370
like creating a blog post or something like that,
153
00:07:24.370 --> 00:07:26.540
and only you as an admin
154
00:07:26.540 --> 00:07:28.430
should be able to perform that task.
155
00:07:28.430 --> 00:07:31.470
What we're gonna do is we're gonna perform a check.
156
00:07:31.470 --> 00:07:32.303
And we're gonna say,
157
00:07:32.303 --> 00:07:37.303
"Okay, do we have this secure token in our browser?"
158
00:07:37.990 --> 00:07:40.200
If so, we're gonna make an API call
159
00:07:40.200 --> 00:07:42.850
and we're gonna pass this token,
160
00:07:42.850 --> 00:07:44.810
we're gonna pass this token that was stored
161
00:07:44.810 --> 00:07:47.170
in the browser up to the API.
162
00:07:47.170 --> 00:07:49.570
The API then is gonna compare it
163
00:07:49.570 --> 00:07:52.150
with what it has on its system.
164
00:07:52.150 --> 00:07:55.540
And it's gonna say yes or no.
165
00:07:55.540 --> 00:07:56.373
And it's gonna say,
166
00:07:56.373 --> 00:07:57.700
"Yes this user's authenticated"
167
00:07:57.700 --> 00:07:58.533
or it's gonna say,
168
00:07:58.533 --> 00:08:03.137
"No, this this JWT token does not match what we have
169
00:08:03.137 --> 00:08:05.440
"in the system" and so therefore,
170
00:08:05.440 --> 00:08:06.860
they can't perform that task.
171
00:08:06.860 --> 00:08:09.060
So this is related to security
172
00:08:09.060 --> 00:08:13.340
and ease of use and how you can build out your applications.
173
00:08:13.340 --> 00:08:15.230
So great job if you went through that.
174
00:08:15.230 --> 00:08:17.180
You should now have a better idea
175
00:08:17.180 --> 00:08:20.470
on how you can use local storage to set
176
00:08:20.470 --> 00:08:23.263
and to retrieve data from the browser.