- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.610 --> 00:00:03.610
In this guide, we're gonna finish out this section
2
00:00:03.610 --> 00:00:06.090
on React fundamentals by learning
3
00:00:06.090 --> 00:00:08.490
how to build a route guard.
4
00:00:08.490 --> 00:00:10.510
Now, what a route guard is gonna do
5
00:00:10.510 --> 00:00:14.020
is it's going to give us the ability to show
6
00:00:14.020 --> 00:00:17.900
or hide routes from a user based on if they're
7
00:00:17.900 --> 00:00:19.170
logged in or not.
8
00:00:19.170 --> 00:00:21.590
Now, a very important concept to understand
9
00:00:21.590 --> 00:00:25.750
is what we're building right now is all client-side code
10
00:00:25.750 --> 00:00:28.260
which means it's all just in the browser.
11
00:00:28.260 --> 00:00:31.350
When you're building out full-step applications,
12
00:00:31.350 --> 00:00:33.900
you have to have client-side validations
13
00:00:33.900 --> 00:00:35.760
which is like what we're doing right now.
14
00:00:35.760 --> 00:00:39.810
That's where we are hiding routes, pages, links.
15
00:00:39.810 --> 00:00:42.440
Kind of like we hide the logout link
16
00:00:42.440 --> 00:00:44.440
to users that are not logged in.
17
00:00:44.440 --> 00:00:48.050
That is all actions and sets of actions
18
00:00:48.050 --> 00:00:49.680
that are happening in the browser.
19
00:00:49.680 --> 00:00:52.810
You also need to guard against that type
20
00:00:52.810 --> 00:00:54.300
of behavior on the server.
21
00:00:54.300 --> 00:00:56.710
Now, we don't have to worry about that in this course
22
00:00:56.710 --> 00:00:59.260
because I built out those kinds of things
23
00:00:59.260 --> 00:01:02.500
when I built out the DevCamp Space server.
24
00:01:02.500 --> 00:01:05.670
But just kind of keep that in the back of your mind
25
00:01:05.670 --> 00:01:07.120
as you're building this out
26
00:01:07.120 --> 00:01:09.910
because remember you're writing JavaScript code,
27
00:01:09.910 --> 00:01:12.530
which means that your entire application
28
00:01:12.530 --> 00:01:14.770
is being sent to the browser,
29
00:01:14.770 --> 00:01:18.420
which means hackers are able to look at all of the code,
30
00:01:18.420 --> 00:01:23.420
so the server always has to maintain a level of security.
31
00:01:24.230 --> 00:01:26.220
And so we have that in this place,
32
00:01:26.220 --> 00:01:28.390
I just want you to realize that when you're
33
00:01:28.390 --> 00:01:31.360
building out say, for example, a route guard,
34
00:01:31.360 --> 00:01:33.370
even though the average user
35
00:01:33.370 --> 00:01:36.250
won't ever be able to see these pages,
36
00:01:36.250 --> 00:01:38.980
a user technically could dig through the code
37
00:01:38.980 --> 00:01:41.810
that's being sent to the browser, see those pages,
38
00:01:41.810 --> 00:01:44.100
turn them on, do those kinds of things.
39
00:01:44.100 --> 00:01:46.550
So I just want you to realize that when
40
00:01:46.550 --> 00:01:49.070
we talk about security for web applications,
41
00:01:49.070 --> 00:01:50.370
there are two different types.
42
00:01:50.370 --> 00:01:53.750
So there is the security that happens on the client side,
43
00:01:53.750 --> 00:01:55.270
so that's like what we're doing now,
44
00:01:55.270 --> 00:01:56.830
and then on the server side,
45
00:01:56.830 --> 00:02:00.800
and both have to be maintained to have a secure application.
46
00:02:00.800 --> 00:02:02.870
So let's get started here.
47
00:02:02.870 --> 00:02:06.070
I'm going to create a new page,
48
00:02:06.070 --> 00:02:09.720
so I'm gonna open up the file system here, go to Pages,
49
00:02:09.720 --> 00:02:13.450
and I'm just gonna create a very basic page here.
50
00:02:13.450 --> 00:02:14.890
And this is gonna be called
51
00:02:14.890 --> 00:02:19.830
our BlogForm page, so BlogForm.js.
52
00:02:19.830 --> 00:02:22.660
And this is kind of like you might assume,
53
00:02:22.660 --> 00:02:26.240
this is where we're gonna place the code for our blog form.
54
00:02:26.240 --> 00:02:29.070
We're not gonna worry about building out the form now,
55
00:02:29.070 --> 00:02:31.550
we're gonna save that for one of the next sections,
56
00:02:31.550 --> 00:02:32.990
but for right now we're
57
00:02:32.990 --> 00:02:35.310
simply gonna put some placeholder text.
58
00:02:35.310 --> 00:02:39.170
So I'm gonna say import React from react,
59
00:02:39.170 --> 00:02:43.190
and then I'm just gonna say export to default.
60
00:02:43.190 --> 00:02:45.240
We won't take in any props right now,
61
00:02:45.240 --> 00:02:50.240
and then I'm just gonna return a h1 tag that says Blog form.
62
00:02:50.520 --> 00:02:53.880
We're not even gonna worry about using our container layout
63
00:02:53.880 --> 00:02:56.130
or anything like that right now.
64
00:02:56.130 --> 00:02:59.270
I just wanna make sure that we have a blog form here.
65
00:02:59.270 --> 00:03:01.300
Now up until this point,
66
00:03:01.300 --> 00:03:03.970
what we would've done is we would've gone to the router
67
00:03:03.970 --> 00:03:07.800
and added a new item to that list.
68
00:03:07.800 --> 00:03:10.930
But I'm not going to keep it like this anymore.
69
00:03:10.930 --> 00:03:12.727
This is a very basic set up,
70
00:03:12.727 --> 00:03:15.820
and this works perfectly if we wanted
71
00:03:15.820 --> 00:03:19.970
to only have one set of authorization rules.
72
00:03:19.970 --> 00:03:22.670
But in our case, we want certain routes
73
00:03:22.670 --> 00:03:25.320
to be seen by users who are logged in
74
00:03:25.320 --> 00:03:29.640
and certain routes to be seen by users who are guests,
75
00:03:29.640 --> 00:03:30.850
who are not logged in.
76
00:03:30.850 --> 00:03:33.450
And so what I'm going to do is I'm actually gonna
77
00:03:33.450 --> 00:03:38.320
split this out into two different exports.
78
00:03:38.320 --> 00:03:42.140
I'm gonna have a set of array items
79
00:03:42.140 --> 00:03:43.990
which are gonna be all of our routes
80
00:03:43.990 --> 00:03:46.370
for the logged in user.
81
00:03:46.370 --> 00:03:48.310
So let's just call this,
82
00:03:48.310 --> 00:03:50.280
I'm gonna get rid of export default,
83
00:03:50.280 --> 00:03:53.240
and instead I'm gonna say export const,
84
00:03:53.240 --> 00:03:56.010
and then I'm just gonna say routes.
85
00:03:56.010 --> 00:03:59.170
You could say something like allRoutes,
86
00:03:59.170 --> 00:04:00.290
you could call it whatever you want.
87
00:04:00.290 --> 00:04:02.410
I'm just gonna call it routes,
88
00:04:02.410 --> 00:04:04.740
and I'm gonna set that equal to that array.
89
00:04:04.740 --> 00:04:06.970
So nothing's actually gonna change there
90
00:04:06.970 --> 00:04:08.620
except us saying that we're
91
00:04:08.620 --> 00:04:11.400
no longer exporting this as the default.
92
00:04:11.400 --> 00:04:14.070
Which as you may be guessing what that means,
93
00:04:14.070 --> 00:04:15.240
we're gonna have to change
94
00:04:15.240 --> 00:04:18.920
and actually import the route's name
95
00:04:18.920 --> 00:04:21.440
into our application file.
96
00:04:21.440 --> 00:04:25.610
Now, after that, I'm gonna add a new set of routes here.
97
00:04:25.610 --> 00:04:27.560
For right now, it's just gonna have one route,
98
00:04:27.560 --> 00:04:30.663
and I'm gonna say export const adminRoutes,
99
00:04:32.420 --> 00:04:35.270
and this is gonna be an array with just one item,
100
00:04:35.270 --> 00:04:38.300
and I'll just copy and paste one of these items here.
101
00:04:38.300 --> 00:04:42.993
Route exact and this one's going to be our blog form.
102
00:04:44.700 --> 00:04:47.983
And the path to it is going to be blog-form.
103
00:04:50.040 --> 00:04:53.173
And then the component is gonna be BlogForm,
104
00:04:54.620 --> 00:04:56.490
and if you have auto-import installed,
105
00:04:56.490 --> 00:04:59.130
then you can just type it out there, hit Tab,
106
00:04:59.130 --> 00:05:01.810
and it will import it just like it did up here.
107
00:05:01.810 --> 00:05:06.163
If not, just type out that import and hit Save.
108
00:05:07.240 --> 00:05:10.900
And nothing works, and it's because we have now split
109
00:05:10.900 --> 00:05:13.030
this into two variables,
110
00:05:13.030 --> 00:05:15.390
we're not longer doing the export default.
111
00:05:15.390 --> 00:05:19.650
So let's see what we need to change in that app file.
112
00:05:19.650 --> 00:05:24.200
So I'm gonna open the src/components app.JS file,
113
00:05:24.200 --> 00:05:27.430
and we no longer can call this router.
114
00:05:27.430 --> 00:05:29.080
What we're gonna have to do now
115
00:05:29.080 --> 00:05:31.900
is we're actually going to have to import
116
00:05:31.900 --> 00:05:35.030
what we exported in the Routes file.
117
00:05:35.030 --> 00:05:40.030
So we have a Routes and an adminRoutes set of routes here.
118
00:05:40.960 --> 00:05:44.550
So I'm going to say instead of saying import router,
119
00:05:44.550 --> 00:05:46.240
I'm gonna say import,
120
00:05:46.240 --> 00:05:51.230
and then in curly brackets routes and then adminRoutes,
121
00:05:51.230 --> 00:05:55.010
and so now we have pulled out the items
122
00:05:55.010 --> 00:05:57.530
that we exported from that router.
123
00:05:57.530 --> 00:06:01.910
And now what we can do is inside of this Switch statement,
124
00:06:01.910 --> 00:06:04.550
I'm gonna add to this,
125
00:06:04.550 --> 00:06:08.060
and let's first get it back to where we had it before,
126
00:06:08.060 --> 00:06:09.630
where at least it's working.
127
00:06:09.630 --> 00:06:13.940
So instead of saying router, I'm gonna say routes.
128
00:06:13.940 --> 00:06:16.730
Hit Save here, and let's see if it's working.
129
00:06:16.730 --> 00:06:20.070
And it is, so we now are back to where we were before,
130
00:06:20.070 --> 00:06:22.680
we can navigate to each of our pages.
131
00:06:22.680 --> 00:06:24.410
Everything there is working,
132
00:06:24.410 --> 00:06:26.510
and as you can see I'm still logged in.
133
00:06:26.510 --> 00:06:31.510
Now, what I wanna add in now is I'm gonna add a conditional
134
00:06:31.550 --> 00:06:34.530
that says if the user is logged in,
135
00:06:34.530 --> 00:06:38.740
I also want you to add in these adminRoutes.
136
00:06:38.740 --> 00:06:43.010
So we've seen how to do this in the last guide,
137
00:06:43.010 --> 00:06:46.510
and so we're gonna use another ternary operator.
138
00:06:46.510 --> 00:06:49.060
So I'm gonna import, at the very top,
139
00:06:49.060 --> 00:06:52.110
I'm gonna import useContext
140
00:06:52.110 --> 00:06:55.920
because now our app needs to be able to use that context,
141
00:06:55.920 --> 00:07:00.580
and I'm going to import the AdminContext
142
00:07:00.580 --> 00:07:05.580
from dot dot /context and AdminContext,
143
00:07:07.000 --> 00:07:10.630
and then I'm going to call it from within the app component.
144
00:07:10.630 --> 00:07:13.913
So I'll say const isLoggedIn,
145
00:07:15.810 --> 00:07:17.790
and then I'm gonna set that
146
00:07:17.790 --> 00:07:21.780
equal to useContext, pass in AdminContext,
147
00:07:21.780 --> 00:07:25.110
and now we have the ability to see if the user
148
00:07:25.110 --> 00:07:27.910
is logged in directly in the app component.
149
00:07:27.910 --> 00:07:31.180
And now we can use a ternary operator here.
150
00:07:31.180 --> 00:07:35.020
So under where I said routes, I can say isLoggedIn,
151
00:07:36.090 --> 00:07:38.600
and I'm gonna say if the user is logged in,
152
00:07:38.600 --> 00:07:41.220
then I want you to show
153
00:07:41.220 --> 00:07:44.640
or make available the list of adminRoutes,
154
00:07:44.640 --> 00:07:48.680
and if not, I want to just show null.
155
00:07:48.680 --> 00:07:52.220
So let's hit Save here, and let's see if this is working.
156
00:07:52.220 --> 00:07:57.200
So now I should be able to go up top here in the browser
157
00:07:57.200 --> 00:08:01.890
and go to Local Host 8080/log-form,
158
00:08:03.260 --> 00:08:05.480
and there you go, that is working
159
00:08:05.480 --> 00:08:09.000
because we did have access, we are logged in.
160
00:08:09.000 --> 00:08:14.000
Now, if I go back here and I click on Logout
161
00:08:14.610 --> 00:08:17.040
so we're no longer logged in,
162
00:08:17.040 --> 00:08:21.500
now if I try to go to blog-form,
163
00:08:21.500 --> 00:08:23.640
now I don't have access to that page
164
00:08:23.640 --> 00:08:25.360
and it's now hidden from me.
165
00:08:25.360 --> 00:08:28.570
Now, we could also do something like add some behavior
166
00:08:28.570 --> 00:08:30.340
and say okay, if they're not logged in
167
00:08:30.340 --> 00:08:33.880
then we wanna show like an error page
168
00:08:33.880 --> 00:08:35.160
or you're not allowed page.
169
00:08:35.160 --> 00:08:36.970
For right now that's not really needed
170
00:08:36.970 --> 00:08:38.360
because at the end of the day,
171
00:08:38.360 --> 00:08:39.800
you as the admin are gonna be
172
00:08:39.800 --> 00:08:42.260
the only user accessing these page,
173
00:08:42.260 --> 00:08:44.100
so it's fine to just not show anything.
174
00:08:44.100 --> 00:08:47.260
And so that is working perfectly.
175
00:08:47.260 --> 00:08:52.260
So we now have the ability to protect our pages
176
00:08:52.510 --> 00:08:55.420
so that you as an admin have the ability
177
00:08:55.420 --> 00:08:57.530
to see what you need to see,
178
00:08:57.530 --> 00:09:01.750
but you're blocking other users from performing that task.
179
00:09:01.750 --> 00:09:02.720
And just to kind of give you
180
00:09:02.720 --> 00:09:06.200
a little bit of an idea of how the authorization
181
00:09:06.200 --> 00:09:09.080
and how these guard rules are gonna work
182
00:09:09.080 --> 00:09:12.190
for you on the server side is
183
00:09:12.190 --> 00:09:15.100
what I've built in is that the system
184
00:09:15.100 --> 00:09:19.270
is gonna be listening for that JWT token.
185
00:09:19.270 --> 00:09:21.330
So when we setup our blog form,
186
00:09:21.330 --> 00:09:22.590
and that's gonna be one of the things
187
00:09:22.590 --> 00:09:24.050
we do in the next section,
188
00:09:24.050 --> 00:09:25.410
when we set up the blog form,
189
00:09:25.410 --> 00:09:27.140
we're not just gonna send data
190
00:09:27.140 --> 00:09:30.240
up to the API without authorization.
191
00:09:30.240 --> 00:09:33.600
What we're going to do is we're gonna send the data up
192
00:09:33.600 --> 00:09:38.290
and then we're also going to pass along the JWT token.
193
00:09:38.290 --> 00:09:43.290
The JWT token on the server is gonna be what gets used
194
00:09:44.080 --> 00:09:47.410
to say yes, this user is authorized or no, they're no.
195
00:09:47.410 --> 00:09:49.340
So say that you have a hacker,
196
00:09:49.340 --> 00:09:52.140
and for some reason they know that in...
197
00:09:52.140 --> 00:09:54.670
They've dug through your job descript code
198
00:09:54.670 --> 00:09:58.420
and they see, oh, there's this hidden BlogForm page.
199
00:09:58.420 --> 00:10:00.950
And they scramble up the code
200
00:10:00.950 --> 00:10:02.880
so that they can navigate to it,
201
00:10:02.880 --> 00:10:04.740
and then they think they're gonna be able
202
00:10:04.740 --> 00:10:07.180
to create a blog post for you.
203
00:10:07.180 --> 00:10:11.520
But what's gonna happen is even if they do all of that
204
00:10:11.520 --> 00:10:16.048
and they send up a new blog post to the API,
205
00:10:16.048 --> 00:10:18.530
the API is gonna be expecting
206
00:10:18.530 --> 00:10:21.520
a JWT token, a valid JWT token.
207
00:10:21.520 --> 00:10:24.360
And once it sees that that's not there
208
00:10:24.360 --> 00:10:26.040
and there's nothing to check against,
209
00:10:26.040 --> 00:10:29.610
or if say they sent up a token that's not the right one
210
00:10:29.610 --> 00:10:31.290
which they wouldn't have that
211
00:10:31.290 --> 00:10:32.740
because only you're gonna have it,
212
00:10:32.740 --> 00:10:34.850
then the system's gonna send back an error,
213
00:10:34.850 --> 00:10:36.027
and it's gonna say, "I'm sorry,
214
00:10:36.027 --> 00:10:38.630
"but you're not authorized to perform this action."
215
00:10:38.630 --> 00:10:40.130
And so that's just to kind of give you
216
00:10:40.130 --> 00:10:42.800
a little bit of a high-level viewpoint
217
00:10:42.800 --> 00:10:45.640
on how the security works, both on the client side
218
00:10:45.640 --> 00:10:49.980
and then also on the server side with applications
219
00:10:49.980 --> 00:10:52.360
that are like this that are built in React.
220
00:10:52.360 --> 00:10:54.930
So very nice job in going through that section.
221
00:10:54.930 --> 00:10:57.550
In this section, we covered a number
222
00:10:57.550 --> 00:11:00.000
of key React fundamentals.
223
00:11:00.000 --> 00:11:02.470
Everything from how to use State
224
00:11:02.470 --> 00:11:04.570
and how to use hooks with State.
225
00:11:04.570 --> 00:11:08.220
How to use all kinds of different forms of JSX
226
00:11:08.220 --> 00:11:12.740
include conditionals, how to make API calls,
227
00:11:12.740 --> 00:11:15.050
how to build in authentication,
228
00:11:15.050 --> 00:11:16.720
how to use the routing system,
229
00:11:16.720 --> 00:11:18.540
how to use security elements
230
00:11:18.540 --> 00:11:20.540
directly built into your application,
231
00:11:20.540 --> 00:11:22.270
how to work with forms.
232
00:11:22.270 --> 00:11:24.220
There's a lot that we covered,
233
00:11:24.220 --> 00:11:26.680
and we even got into some pretty advanced concepts
234
00:11:26.680 --> 00:11:28.690
like how to work with the context
235
00:11:28.690 --> 00:11:32.090
in provider API to wrap up and make data
236
00:11:32.090 --> 00:11:35.250
available to the entire application that can be shared.
237
00:11:35.250 --> 00:11:38.680
So really nice job in going through all of that.
238
00:11:38.680 --> 00:11:40.730
If anything did not make sense
239
00:11:40.730 --> 00:11:43.580
or you're really still kind of fuzzy on the topic,
240
00:11:43.580 --> 00:11:46.750
please get with you mentor, discuss the topic,
241
00:11:46.750 --> 00:11:48.610
walk through some of the examples,
242
00:11:48.610 --> 00:11:50.760
and the more times that you go through it,
243
00:11:50.760 --> 00:11:54.100
it's gonna start to make more and more sense.
244
00:11:54.100 --> 00:11:56.250
In the next guide, or in the next section,
245
00:11:56.250 --> 00:12:00.370
we are gonna start building out some of the design elements
246
00:12:00.370 --> 00:12:03.140
and we're gonna start making our application
247
00:12:03.140 --> 00:12:05.823
look really nice and professional.