- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.450 --> 00:00:02.240
In this guide, we are gonna see
2
00:00:02.240 --> 00:00:04.990
how we can walk through connecting
3
00:00:04.990 --> 00:00:09.990
our new AdminProvider with our AdminLogin workflow.
4
00:00:10.920 --> 00:00:13.270
And so what we're essentially gonna do
5
00:00:13.270 --> 00:00:16.940
is we are going to enable the ability
6
00:00:16.940 --> 00:00:21.940
to call our checkLogin feature, redirect the user,
7
00:00:22.370 --> 00:00:26.280
and then to also update the state
8
00:00:26.280 --> 00:00:29.340
so that the entire app knows if the user
9
00:00:29.340 --> 00:00:31.040
is logged in or not.
10
00:00:31.040 --> 00:00:34.790
So let's get started with that in this guide.
11
00:00:34.790 --> 00:00:39.790
I'm gonna navigate up here to /admin-login,
12
00:00:40.480 --> 00:00:43.740
and we have our screen or our forum up here.
13
00:00:43.740 --> 00:00:47.740
Now, what I wanna be able to do is to successfully type out
14
00:00:47.740 --> 00:00:50.100
my email address and my password,
15
00:00:50.100 --> 00:00:52.420
and if it matches, I want the user
16
00:00:52.420 --> 00:00:54.600
to be redirected to the home page.
17
00:00:54.600 --> 00:00:59.240
So let's open up the AdminLogin component here,
18
00:00:59.240 --> 00:01:02.010
and you can see right now all we're doing
19
00:01:02.010 --> 00:01:06.610
is if the JWT token is received,
20
00:01:06.610 --> 00:01:09.610
we are setting that in local storage.
21
00:01:09.610 --> 00:01:10.960
We're still gonna keep that code
22
00:01:10.960 --> 00:01:14.010
because we do need to be able to set
23
00:01:14.010 --> 00:01:17.160
that JWT inside of local storage,
24
00:01:17.160 --> 00:01:19.730
but now we're gonna extend the functionality,
25
00:01:19.730 --> 00:01:23.300
and we're going to call our checkLogin feature,
26
00:01:23.300 --> 00:01:26.860
and then we are also going to redirect the user.
27
00:01:26.860 --> 00:01:29.300
So let's walk through how we can do that.
28
00:01:29.300 --> 00:01:32.300
I'm gonna get rid of our console.log statement here.
29
00:01:32.300 --> 00:01:35.360
And let's take this one step at a time.
30
00:01:35.360 --> 00:01:38.440
How can we call checkLogin
31
00:01:38.440 --> 00:01:42.720
from inside of this AdminLogin component?
32
00:01:42.720 --> 00:01:45.670
Well, we can use the hooks again,
33
00:01:45.670 --> 00:01:48.490
we can use our useContext hook.
34
00:01:48.490 --> 00:01:50.460
So up at the top of the file
35
00:01:50.460 --> 00:01:53.910
in additional to useState, import useContext,
36
00:01:55.090 --> 00:01:58.290
and then we simply need to import that context.
37
00:01:58.290 --> 00:02:03.250
So here I'm gonna say import AdminContext from,
38
00:02:03.250 --> 00:02:08.250
dot, dot /context/AdminContext,
39
00:02:09.400 --> 00:02:12.800
and then we need to define it from within the component.
40
00:02:12.800 --> 00:02:15.010
So here I'll say const,
41
00:02:15.010 --> 00:02:17.730
and then I'm gonna perform destructuring once again.
42
00:02:17.730 --> 00:02:22.430
And I'm gonna pull out that checkLogin functionality
43
00:02:22.430 --> 00:02:27.053
from the useContext for AdminContext.
44
00:02:27.980 --> 00:02:32.230
So this is gonna give us access to this checkLogin function.
45
00:02:32.230 --> 00:02:34.590
Now, one thing we do have to do is make sure
46
00:02:34.590 --> 00:02:37.370
that we are exporting that from our provider.
47
00:02:37.370 --> 00:02:39.350
So I'm gonna go to the provider here
48
00:02:39.350 --> 00:02:41.180
and go to our list of exports,
49
00:02:41.180 --> 00:02:44.290
and you can see that right now all we're exporting
50
00:02:44.290 --> 00:02:48.810
is isLoggedIn, that's what this stateValue represents.
51
00:02:48.810 --> 00:02:53.170
So this value prop that we pass into the context,
52
00:02:53.170 --> 00:02:57.950
this represents all of the data, the functionality,
53
00:02:57.950 --> 00:03:01.220
the functions, everything like that that we want
54
00:03:01.220 --> 00:03:04.160
the other components to be able to have access to,
55
00:03:04.160 --> 00:03:08.270
we need to pass it here inside of this variable.
56
00:03:08.270 --> 00:03:10.660
So what we can do is simply add
57
00:03:10.660 --> 00:03:14.080
to this list and say checkLogin.
58
00:03:14.080 --> 00:03:18.220
So we are passing in this function
59
00:03:18.220 --> 00:03:20.870
directly into this list here,
60
00:03:20.870 --> 00:03:23.570
and now because of that, what we're gonna be able to do
61
00:03:23.570 --> 00:03:25.960
is we're gonna be able to call this
62
00:03:25.960 --> 00:03:28.750
from within other components
63
00:03:28.750 --> 00:03:31.960
like we're about to do with this AdminLogin.
64
00:03:31.960 --> 00:03:36.660
So let's come down here and say that inside,
65
00:03:36.660 --> 00:03:40.530
if we receive the response data JWT token,
66
00:03:40.530 --> 00:03:43.370
we're also gonna call checkLogin
67
00:03:43.370 --> 00:03:48.370
and we're gonna pass in response.data.jwt.
68
00:03:48.480 --> 00:03:52.360
So that is gonna call our checkLogin feature.
69
00:03:52.360 --> 00:03:53.940
The last thing we need to do
70
00:03:53.940 --> 00:03:56.700
is to be able to redirect the user.
71
00:03:56.700 --> 00:04:00.820
So how can we redirect the user using React Router?
72
00:04:00.820 --> 00:04:05.820
Well, it uses a very helpful tool inside of the props.
73
00:04:05.910 --> 00:04:09.340
So inside of any page component,
74
00:04:09.340 --> 00:04:11.680
and this will only work for pages,
75
00:04:11.680 --> 00:04:14.060
this is something that is very important to keep in mind.
76
00:04:14.060 --> 00:04:17.490
Later on we'll how we can do it with standalone components,
77
00:04:17.490 --> 00:04:20.620
but with a page component what we can do
78
00:04:20.620 --> 00:04:23.790
is say that it is gonna accept props.
79
00:04:23.790 --> 00:04:28.493
And then down here we're gonna access a prop
80
00:04:28.493 --> 00:04:31.520
that's given to us from React Router.
81
00:04:31.520 --> 00:04:33.670
Now, your first question might be
82
00:04:33.670 --> 00:04:37.600
if I was not telling you this, how would you know about it?
83
00:04:37.600 --> 00:04:42.300
And the answer lies in the documentation for React Router.
84
00:04:42.300 --> 00:04:45.550
That's why it's so important as a developer
85
00:04:45.550 --> 00:04:48.830
whenever you're using tools, go through the documentation
86
00:04:48.830 --> 00:04:50.190
because that is how you're gonna
87
00:04:50.190 --> 00:04:53.810
find out how to use the tool properly.
88
00:04:53.810 --> 00:04:57.630
So inside of here right under checkLogin,
89
00:04:57.630 --> 00:05:00.460
I can say props dot,
90
00:05:00.460 --> 00:05:04.500
and then we have access to a piece history,
91
00:05:04.500 --> 00:05:09.300
this is an object, so history.push.
92
00:05:09.300 --> 00:05:14.300
This is how you can redirect the user using React Router,
93
00:05:14.320 --> 00:05:16.730
and then we wanna redirect to the home page.
94
00:05:16.730 --> 00:05:20.460
So I'm gonna say as a string just this slash.
95
00:05:20.460 --> 00:05:22.930
If we wanted to redirect to a different page,
96
00:05:22.930 --> 00:05:27.500
then we could say slash and then another page,
97
00:05:27.500 --> 00:05:30.250
something like that, wherever you wanna redirect the user.
98
00:05:30.250 --> 00:05:33.210
But for our case, I wanna redirect to the home page.
99
00:05:33.210 --> 00:05:37.360
So let me hit Save here, and let's test this out.
100
00:05:37.360 --> 00:05:40.800
So if everything works, I should be able to login,
101
00:05:40.800 --> 00:05:44.440
type out my full email address and my password,
102
00:05:44.440 --> 00:05:47.710
and I should be redirected to the home screen,
103
00:05:47.710 --> 00:05:51.570
and we should also have it logged
104
00:05:51.570 --> 00:05:53.990
that we are logged in, we're authenticated.
105
00:05:53.990 --> 00:05:56.540
So let's test this out.
106
00:05:56.540 --> 00:05:59.963
Gonna type in my email address.
107
00:06:01.410 --> 00:06:04.860
A password and type Login.
108
00:06:04.860 --> 00:06:07.200
And there we go, we've been redirected,
109
00:06:07.200 --> 00:06:11.720
and it has our state here, is logged in? is true.
110
00:06:11.720 --> 00:06:16.210
So now every page that we go to is gonna have access
111
00:06:16.210 --> 00:06:19.710
to the logged in state automatically,
112
00:06:19.710 --> 00:06:22.100
and now it's also being triggered
113
00:06:22.100 --> 00:06:25.800
from our auth login page component.
114
00:06:25.800 --> 00:06:27.750
So nice job if you went through that.
115
00:06:27.750 --> 00:06:31.600
We now have a full authentication system built into our app.
116
00:06:31.600 --> 00:06:33.820
In the next guide, we're gonna see
117
00:06:33.820 --> 00:06:37.083
how we can log a user out of the application.