- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.640 --> 00:00:02.170
In this guide, we're gonna see
2
00:00:02.170 --> 00:00:04.910
how we can extend our navigation bar
3
00:00:04.910 --> 00:00:07.800
so that we can log a user out
4
00:00:07.800 --> 00:00:09.300
when they're logged in.
5
00:00:09.300 --> 00:00:11.400
So let's get started with that.
6
00:00:11.400 --> 00:00:16.300
I am going to open up our NavBar component here.
7
00:00:16.300 --> 00:00:20.140
And right now, we have these three links
8
00:00:20.140 --> 00:00:24.320
to the Home page, the About page and the Blog.
9
00:00:24.320 --> 00:00:26.560
Right now we're using the Link component
10
00:00:26.560 --> 00:00:28.320
but for our Logout button,
11
00:00:28.320 --> 00:00:32.460
we actually just wanna use a standard HTML link.
12
00:00:32.460 --> 00:00:35.810
So that's what we're going to add here at the bottom.
13
00:00:35.810 --> 00:00:37.660
So I'm gonna add a a tag
14
00:00:37.660 --> 00:00:41.460
and for right now, I'm not gonna put anything inside of it.
15
00:00:41.460 --> 00:00:44.680
I'm just gonna say Logout, hit Save
16
00:00:44.680 --> 00:00:46.840
and then here on the right-hand side,
17
00:00:46.840 --> 00:00:48.860
we can see that that's there.
18
00:00:48.860 --> 00:00:53.860
Now, we need to connect our Logout link here
19
00:00:54.300 --> 00:00:58.050
with a piece of Logout functionality.
20
00:00:58.050 --> 00:00:59.710
So what so we need to do
21
00:00:59.710 --> 00:01:01.820
when a user logs out?
22
00:01:01.820 --> 00:01:06.820
Well, we first need to be able to remove the JWT token
23
00:01:07.280 --> 00:01:09.080
from the browser here.
24
00:01:09.080 --> 00:01:11.370
So we need to go into local storage
25
00:01:11.370 --> 00:01:14.050
and we need to delete that token.
26
00:01:14.050 --> 00:01:17.080
The other thing that we need to do is we need
27
00:01:17.080 --> 00:01:21.220
to update the state for our AdminProvider
28
00:01:21.220 --> 00:01:23.780
and say that the user's no longer logged in.
29
00:01:23.780 --> 00:01:25.680
Once we do those two things,
30
00:01:25.680 --> 00:01:28.230
everything else will be taken care of.
31
00:01:28.230 --> 00:01:31.353
So I'm gonna open up the AdminProvider here
32
00:01:31.353 --> 00:01:35.170
and I wanna create a function
33
00:01:35.170 --> 00:01:37.490
that's gonna accomplish both of those tasks.
34
00:01:37.490 --> 00:01:42.010
It's gonna update our setIsLoggedIn piece of state
35
00:01:42.010 --> 00:01:43.770
and it's gonna set it to false.
36
00:01:43.770 --> 00:01:47.720
And then it's also going to remove that piece
37
00:01:47.720 --> 00:01:52.360
of local storage data that is storing our token.
38
00:01:52.360 --> 00:01:56.330
So lemme create that component here or that function here.
39
00:01:56.330 --> 00:01:58.113
I'm gonna say const logout
40
00:02:00.310 --> 00:02:03.810
and then this is not gonna take in any arguments
41
00:02:03.810 --> 00:02:05.430
and now inside of here,
42
00:02:05.430 --> 00:02:09.860
I'm gonna setIsLoggedIn to false
43
00:02:09.860 --> 00:02:13.330
and now the other thing we need to do is we need
44
00:02:13.330 --> 00:02:16.200
to remove the item.
45
00:02:16.200 --> 00:02:19.960
So I'm going to call localStorage dot
46
00:02:19.960 --> 00:02:22.950
and you can see right here the functions we have access to.
47
00:02:22.950 --> 00:02:27.810
We have getItem, key, length, removeItem, setItem.
48
00:02:27.810 --> 00:02:30.380
So far we've used the getItem function
49
00:02:30.380 --> 00:02:32.020
and we've used setItem.
50
00:02:32.020 --> 00:02:35.260
In this guide, we're gonna use removeItem
51
00:02:35.260 --> 00:02:37.890
and it's only gonna take in one argument,
52
00:02:37.890 --> 00:02:39.250
which is gonna be a string,
53
00:02:39.250 --> 00:02:42.780
which is gonna be the name of our token here.
54
00:02:42.780 --> 00:02:45.880
So I'm going to copy that name here.
55
00:02:45.880 --> 00:02:48.480
Paste it in and hit Save.
56
00:02:48.480 --> 00:02:51.410
Now with that in place, all we have to do
57
00:02:51.410 --> 00:02:54.270
is pass this logout function
58
00:02:54.270 --> 00:02:56.800
and export it in our state.
59
00:02:56.800 --> 00:03:00.440
So I'm gonna add to our list of stateValues here
60
00:03:00.440 --> 00:03:02.090
the logout function
61
00:03:02.090 --> 00:03:07.010
and now, because the NavBar is inside of our application,
62
00:03:07.010 --> 00:03:11.140
that means it's wrapped inside of our AdminProvider,
63
00:03:11.140 --> 00:03:14.610
it means that we can now get access to this function.
64
00:03:14.610 --> 00:03:16.420
So I'm gonna go into the NavBar,
65
00:03:16.420 --> 00:03:20.913
I'm going to add a hook of useContext.
66
00:03:22.160 --> 00:03:25.993
Then I'm going to import that AdminContext
67
00:03:27.869 --> 00:03:32.869
from ../../contexts/AdminContext
68
00:03:34.940 --> 00:03:36.860
and that's all we need to do
69
00:03:36.860 --> 00:03:39.740
and now inside of the component itself,
70
00:03:39.740 --> 00:03:43.020
I'm going to pull out that logout functionality.
71
00:03:43.020 --> 00:03:46.710
So I'm gonna say const and we're gonna use destructuring,
72
00:03:46.710 --> 00:03:51.710
so I'll say const logout and then we'll say useContext
73
00:03:52.740 --> 00:03:55.533
and pass in the AdminContext
74
00:03:56.800 --> 00:03:59.460
and now we have access to this function.
75
00:03:59.460 --> 00:04:03.670
So what we can do is inside of this a tag,
76
00:04:03.670 --> 00:04:07.340
we are gonna use what is called a onClick handler.
77
00:04:07.340 --> 00:04:10.600
So I'm going to say in the a tag,
78
00:04:10.600 --> 00:04:14.160
onClick, spelled out just like this,
79
00:04:14.160 --> 00:04:16.680
equals curly brackets
80
00:04:16.680 --> 00:04:20.320
and then I'm gonna pass in this logout function.
81
00:04:20.320 --> 00:04:23.650
So if I hit Save here,
82
00:04:23.650 --> 00:04:25.650
now you're gonna see that we have this link here.
83
00:04:25.650 --> 00:04:26.580
It doesn't look like a link
84
00:04:26.580 --> 00:04:28.580
because we haven't added any styles
85
00:04:28.580 --> 00:04:30.060
but that's perfectly fine.
86
00:04:30.060 --> 00:04:32.090
What I hope is gonna happen
87
00:04:32.090 --> 00:04:34.720
is when I click the Logout button,
88
00:04:34.720 --> 00:04:38.490
it is going to remove that item
89
00:04:38.490 --> 00:04:39.610
from local storage,
90
00:04:39.610 --> 00:04:42.650
so the JWT token's no longer gonna be in the browser,
91
00:04:42.650 --> 00:04:44.640
and it should also update our state.
92
00:04:44.640 --> 00:04:47.860
So it should say isLoggedIn is set to false.
93
00:04:47.860 --> 00:04:49.470
So if I click Logout,
94
00:04:49.470 --> 00:04:51.290
you can see that's working.
95
00:04:51.290 --> 00:04:52.970
Now, we can also test this out
96
00:04:52.970 --> 00:04:55.350
by hitting Refresh because remember,
97
00:04:55.350 --> 00:04:58.710
because we have that checkLogin function running
98
00:04:58.710 --> 00:05:00.690
any time the application loads,
99
00:05:00.690 --> 00:05:01.960
this should be false
100
00:05:01.960 --> 00:05:05.510
because it shouldn't find the JWT token anymore.
101
00:05:05.510 --> 00:05:07.480
So I'm gonna hit Refresh
102
00:05:07.480 --> 00:05:10.530
and you'll see that that is now false.
103
00:05:10.530 --> 00:05:12.690
So that is working perfectly.
104
00:05:12.690 --> 00:05:15.970
We now have a logout function,
105
00:05:15.970 --> 00:05:17.720
we have it in our provider,
106
00:05:17.720 --> 00:05:19.720
which means that any of the components
107
00:05:19.720 --> 00:05:22.000
in our applications are able to use it
108
00:05:22.000 --> 00:05:26.120
and we've now called it from our navigation component.
109
00:05:26.120 --> 00:05:30.180
Now, one thing that we may or may not wanna do
110
00:05:30.180 --> 00:05:33.950
is notice how we still have this logout link here
111
00:05:33.950 --> 00:05:37.030
even when the user is logged out.
112
00:05:37.030 --> 00:05:40.000
That's not really the ideal behavior.
113
00:05:40.000 --> 00:05:41.310
So what I'd like to do
114
00:05:41.310 --> 00:05:44.780
is I'd like to only show the logout function
115
00:05:44.780 --> 00:05:47.810
if the user is already logged in.
116
00:05:47.810 --> 00:05:49.460
So how can we do that?
117
00:05:49.460 --> 00:05:51.040
Well, look at this.
118
00:05:51.040 --> 00:05:53.580
We're gonna learn about something really cool here
119
00:05:53.580 --> 00:05:58.340
on how we can start to add some basic conditional logic
120
00:05:58.340 --> 00:06:00.940
directly into the code.
121
00:06:00.940 --> 00:06:03.423
So inside of AdminProvider,
122
00:06:03.423 --> 00:06:06.790
I'm gonna grab this isLoggedIn piece of state
123
00:06:06.790 --> 00:06:09.570
and in the NavBar, we are going to add that
124
00:06:09.570 --> 00:06:13.150
to the list of items we're bringing from the provider
125
00:06:13.150 --> 00:06:15.620
and now in the JSX code,
126
00:06:15.620 --> 00:06:20.620
I'm going to wrap up this entire piece of functionality
127
00:06:20.790 --> 00:06:22.390
in curly brackets.
128
00:06:22.390 --> 00:06:26.360
So I'm gonna say curly brackets isLoggedIn
129
00:06:26.360 --> 00:06:29.150
and now I'm gonna use a turnary operator.
130
00:06:29.150 --> 00:06:30.330
So this is a conditional.
131
00:06:30.330 --> 00:06:33.840
This is just like saying if something is true,
132
00:06:33.840 --> 00:06:36.250
perform one action, if not,
133
00:06:36.250 --> 00:06:37.750
then perform this other action.
134
00:06:37.750 --> 00:06:39.610
It's just a standard conditional
135
00:06:39.610 --> 00:06:42.930
but it's written with a slightly different syntax.
136
00:06:42.930 --> 00:06:44.680
And it can look really weird at first
137
00:06:44.680 --> 00:06:46.070
but the more times you do it,
138
00:06:46.070 --> 00:06:49.350
it's gonna start to become pretty much second nature.
139
00:06:49.350 --> 00:06:52.720
So I'm gonna say if the user is logged in,
140
00:06:52.720 --> 00:06:55.940
so then I add a question mark.
141
00:06:55.940 --> 00:06:58.650
Then I'm gonna add some parens,
142
00:06:58.650 --> 00:07:00.600
so if the user is logged in,
143
00:07:00.600 --> 00:07:05.280
that's the only time I wanna show this Logout button.
144
00:07:05.280 --> 00:07:08.090
So I'm gonna paste that code in there.
145
00:07:08.090 --> 00:07:10.096
Then after the parens,
146
00:07:10.096 --> 00:07:11.160
I'm gonna add a colon
147
00:07:11.160 --> 00:07:13.530
and then I'll just say null.
148
00:07:13.530 --> 00:07:14.950
So what does this mean?
149
00:07:14.950 --> 00:07:17.300
Well, this is exactly the same thing
150
00:07:17.300 --> 00:07:19.440
as writing JavaScript code
151
00:07:19.440 --> 00:07:20.860
that says something like this.
152
00:07:20.860 --> 00:07:25.860
If isLoggedIn, then I want you to return something.
153
00:07:29.420 --> 00:07:32.760
If not, I want you to return,
154
00:07:32.760 --> 00:07:34.490
in this case, we're saying null.
155
00:07:34.490 --> 00:07:36.690
So what we're saying is if you're logged in,
156
00:07:36.690 --> 00:07:38.870
I want you to show that link
157
00:07:38.870 --> 00:07:41.250
but if not, I don't want you to show anything.
158
00:07:41.250 --> 00:07:46.100
That is all that this turnary operator is doing.
159
00:07:46.100 --> 00:07:48.370
So now, let me hit Save
160
00:07:48.370 --> 00:07:52.150
and you can see that that link is no longer showing up,
161
00:07:52.150 --> 00:07:54.870
so that's exactly the behavior that we're wanting.
162
00:07:54.870 --> 00:07:56.090
Let's test this out.
163
00:07:56.090 --> 00:08:00.600
If you go to the admin-login screen,
164
00:08:00.600 --> 00:08:05.600
and type out whatever your username or your email address
165
00:08:06.900 --> 00:08:08.403
and your password are,
166
00:08:09.520 --> 00:08:13.670
and now you can see that because we're logged in,
167
00:08:13.670 --> 00:08:16.130
now it is showing that Logout button,
168
00:08:16.130 --> 00:08:19.090
which is exactly what we are looking for.
169
00:08:19.090 --> 00:08:20.360
So really nice job.
170
00:08:20.360 --> 00:08:23.200
We covered two items in this guide.
171
00:08:23.200 --> 00:08:26.480
We saw how we were able to log a user out
172
00:08:26.480 --> 00:08:30.650
by being able to remove a piece of data
173
00:08:30.650 --> 00:08:33.360
from the browser as well as updating state
174
00:08:33.360 --> 00:08:36.441
in our provider and then we were also
175
00:08:36.441 --> 00:08:37.890
were able to learn on how we can add
176
00:08:37.890 --> 00:08:42.890
some conditional behavior directly into our JSX code.
177
00:08:42.940 --> 00:08:45.080
So with all of this in place,
178
00:08:45.080 --> 00:08:47.150
in the next guide, we are gonna see
179
00:08:47.150 --> 00:08:50.180
how we can start building out a route guard
180
00:08:50.180 --> 00:08:52.730
so that we can protect certain pages
181
00:08:52.730 --> 00:08:56.703
so that only authorized users are able to access them.