- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.740 --> 00:00:04.400
In this guide, we're gonna wire up our form here
2
00:00:04.400 --> 00:00:09.400
directly to the API, so we can if a user is authenticated
3
00:00:10.060 --> 00:00:10.990
or if not.
4
00:00:10.990 --> 00:00:13.030
Now in this case,
5
00:00:13.030 --> 00:00:16.310
the only user we're actually gonna be working with is you.
6
00:00:16.310 --> 00:00:18.250
So it's essentially making sure
7
00:00:18.250 --> 00:00:23.090
that no other user is trying to log in to your own site.
8
00:00:23.090 --> 00:00:25.830
So let's get started with that.
9
00:00:25.830 --> 00:00:28.860
Because we know we're gonna be making an API call,
10
00:00:28.860 --> 00:00:32.500
we first have to make sure that we import axios.
11
00:00:32.500 --> 00:00:33.987
So at the very top here, I'm gonna say,
12
00:00:33.987 --> 00:00:37.470
"Import axios from axios."
13
00:00:37.470 --> 00:00:39.560
That'll let us make our API call.
14
00:00:39.560 --> 00:00:42.210
The next thing that we're gonna do is
15
00:00:42.210 --> 00:00:46.770
I wanna add a variable here that gives the ability
16
00:00:46.770 --> 00:00:51.530
to store and then call our API endpoint.
17
00:00:51.530 --> 00:00:53.580
So I'm gonna say, "Const,"
18
00:00:53.580 --> 00:00:57.407
and then I'll just call API_URL equals,
19
00:00:58.920 --> 00:01:00.800
and then as a string,
20
00:01:00.800 --> 00:01:05.523
https://api.devcamp.space.com/client_token.
21
00:01:15.740 --> 00:01:20.740
Now this a endpoint that I created just for you as an admin.
22
00:01:22.040 --> 00:01:26.120
So this is gonna be checking for your DevCamp Space login.
23
00:01:26.120 --> 00:01:28.640
So just to verify what this is,
24
00:01:28.640 --> 00:01:31.750
just so you can see, if you go to the browser
25
00:01:31.750 --> 00:01:36.250
and go to DevCamp Space, I'll log out here.
26
00:01:36.250 --> 00:01:38.720
It is whatever you would type
27
00:01:38.720 --> 00:01:42.670
to log into the DevCamp Space site.
28
00:01:42.670 --> 00:01:45.320
That is gonna be what you're looking for.
29
00:01:45.320 --> 00:01:49.270
So that is the username and the password combination
30
00:01:49.270 --> 00:01:51.280
that you're gonna have to type in here,
31
00:01:51.280 --> 00:01:54.030
in order to be authenticated.
32
00:01:54.030 --> 00:01:56.120
So let's keep going.
33
00:01:56.120 --> 00:01:59.080
And so now, we have our inside of
34
00:01:59.080 --> 00:02:00.820
our inside of handle submit function,
35
00:02:00.820 --> 00:02:04.360
this is where we're going to wrap up our data.
36
00:02:04.360 --> 00:02:07.420
So I'm gonna get rid of console log statements here.
37
00:02:07.420 --> 00:02:10.690
And now, let's call axios.post.
38
00:02:13.600 --> 00:02:16.010
So this is a post request.
39
00:02:16.010 --> 00:02:21.010
Post API_URL and then we need to send some data.
40
00:02:22.800 --> 00:02:26.170
So, up until this point, when we made our API calls,
41
00:02:26.170 --> 00:02:28.330
we're simply to trying retrieve data.
42
00:02:28.330 --> 00:02:29.480
Now what we're trying do,
43
00:02:29.480 --> 00:02:32.030
is we're actually going to send data.
44
00:02:32.030 --> 00:02:34.000
That is what the post request is,
45
00:02:34.000 --> 00:02:35.540
but how can we send it?
46
00:02:35.540 --> 00:02:38.200
How do we wrap our data up in a way
47
00:02:38.200 --> 00:02:40.210
that the API can understand?
48
00:02:40.210 --> 00:02:43.410
Well, we're gonna create a params object.
49
00:02:43.410 --> 00:02:46.470
So right above that post call,
50
00:02:46.470 --> 00:02:51.200
here, I'm going to create an API object called auth,
51
00:02:51.200 --> 00:02:54.360
short for authentication, and I'm gonna set it equal
52
00:02:54.360 --> 00:02:55.880
to an object.
53
00:02:55.880 --> 00:02:59.550
And we can also, if you want, you could this params.
54
00:02:59.550 --> 00:03:01.410
Just to make it really nice and clear
55
00:03:01.410 --> 00:03:05.150
that these are the parameters for our API call.
56
00:03:05.150 --> 00:03:06.600
And then inside of here,
57
00:03:06.600 --> 00:03:09.500
I'm gonna create an object called auth.
58
00:03:10.620 --> 00:03:13.610
And then inside of that, we're gonna have our email,
59
00:03:13.610 --> 00:03:18.380
which is going to have the connection to our email state.
60
00:03:18.380 --> 00:03:22.840
And then our password, which is gonna have a connection
61
00:03:22.840 --> 00:03:24.530
to our password state.
62
00:03:24.530 --> 00:03:29.410
So now, inside of this axios.post call,
63
00:03:29.410 --> 00:03:32.780
what we can do is add a second argument here.
64
00:03:32.780 --> 00:03:37.780
So what we can do now, is pass in our params.
65
00:03:38.190 --> 00:03:43.190
So this params object is going to sent directly to the API.
66
00:03:43.841 --> 00:03:46.380
It's gonna send this auth object,
67
00:03:46.380 --> 00:03:49.080
with an email and password, and then the API,
68
00:03:49.080 --> 00:03:53.120
What it's going do is it's going to look at the auth object,
69
00:03:53.120 --> 00:03:56.680
it's gonna verify that it has all of the details
70
00:03:56.680 --> 00:03:58.860
that are needed, and then from there,
71
00:03:58.860 --> 00:04:01.560
it's going to tell us if we're logged in or not.
72
00:04:01.560 --> 00:04:04.110
So after this, what we're going to do
73
00:04:04.110 --> 00:04:07.730
is we're going to add a .then
74
00:04:07.730 --> 00:04:10.060
and we're gonna listen for the response.
75
00:04:10.060 --> 00:04:11.920
So I'll create a fat arrow function
76
00:04:11.920 --> 00:04:14.820
and then, I'll just say, "Console log."
77
00:04:14.820 --> 00:04:16.750
Let's just see what we have.
78
00:04:16.750 --> 00:04:21.750
Response, and then, response.data.
79
00:04:22.170 --> 00:04:24.370
Now I'll also catch any server errors,
80
00:04:24.370 --> 00:04:29.370
so I'll say, at the very end of this, .catch and then error.
81
00:04:30.380 --> 00:04:35.380
And then let's just console log any errors and hit save.
82
00:04:38.610 --> 00:04:41.060
Okay, let's see if this is working.
83
00:04:41.060 --> 00:04:44.300
So if you come up here to the form,
84
00:04:44.300 --> 00:04:48.660
just type in whatever email address you used to sign in
85
00:04:48.660 --> 00:04:50.333
with DevCamp Space.
86
00:04:51.840 --> 00:04:53.740
I'm using an older one for me.
87
00:04:53.740 --> 00:04:57.910
And then, type in whatever your password is
88
00:04:57.910 --> 00:05:00.430
and then press login.
89
00:05:00.430 --> 00:05:04.220
Now when you send this, you can see down in the console,
90
00:05:04.220 --> 00:05:06.330
and that's why I have it open right here,
91
00:05:06.330 --> 00:05:10.080
if you sent it and what you sent was accurate.
92
00:05:10.080 --> 00:05:13.930
So it was the matching email address and password,
93
00:05:13.930 --> 00:05:18.880
than you'll see that we received what is called a JWT token.
94
00:05:18.880 --> 00:05:23.550
Also called a, the way you pronounce it, is a JWT token.
95
00:05:23.550 --> 00:05:28.110
And so what this, I'll stretch out of browser here,
96
00:05:28.110 --> 00:05:33.110
This is a very long, secure, encrypted token
97
00:05:34.150 --> 00:05:39.030
that our system is gonna use to be able to authenticate you.
98
00:05:39.030 --> 00:05:42.510
So this token right here is gonna be a value
99
00:05:42.510 --> 00:05:43.743
that we're going to,
100
00:05:43.743 --> 00:05:46.410
and you're gonna learn about this in the next guide,
101
00:05:46.410 --> 00:05:49.820
we're actually gonna store this directly in the browser.
102
00:05:49.820 --> 00:05:53.010
And then, whenever you go to your site,
103
00:05:53.010 --> 00:05:55.720
we're gonna make a call up to the API
104
00:05:55.720 --> 00:05:57.780
and we're gonna retrieve this value,
105
00:05:57.780 --> 00:05:59.380
and then we're gonna store it,
106
00:05:59.380 --> 00:06:03.077
and then send it up to the API and the API's gonna say,
107
00:06:03.077 --> 00:06:05.200
"Yes, this user is already logged in,"
108
00:06:05.200 --> 00:06:07.630
or, "No, this user is not."
109
00:06:07.630 --> 00:06:11.400
And so that is the encryption token
110
00:06:11.400 --> 00:06:13.140
that we're gonna be using
111
00:06:13.140 --> 00:06:15.440
in order to authenticate ourselves.
112
00:06:15.440 --> 00:06:19.610
So if you receive that, that means you have everything
113
00:06:19.610 --> 00:06:23.800
that you need from a data perspective, to log in.
114
00:06:23.800 --> 00:06:27.390
Now watch what happens if I were type something in here
115
00:06:27.390 --> 00:06:28.223
that was wrong.
116
00:06:28.223 --> 00:06:30.350
So I'm gonna clear this out.
117
00:06:30.350 --> 00:06:34.320
And I come up here and I type some other password.
118
00:06:34.320 --> 00:06:35.560
One that doesn't match.
119
00:06:35.560 --> 00:06:39.240
If I hit login now, you can see that we get an error
120
00:06:39.240 --> 00:06:41.380
and it's a 404 error.
121
00:06:41.380 --> 00:06:46.180
So what that tells me, is that what we can do is listen
122
00:06:46.180 --> 00:06:48.350
for the correct response.
123
00:06:48.350 --> 00:06:52.160
We want to listen, and we'll do a little test here.
124
00:06:52.160 --> 00:06:54.200
I'm gonna create a conditional and I'm gonna say,
125
00:06:54.200 --> 00:06:59.200
if response.data.jwt because if you scroll up
126
00:07:00.440 --> 00:07:02.780
or if you didn't clear it and you go and look at
127
00:07:02.780 --> 00:07:07.030
what that response was, response data sent an object
128
00:07:07.030 --> 00:07:09.430
which was JWT token.
129
00:07:09.430 --> 00:07:14.050
So you can parse that by saying, "response.data.jwt."
130
00:07:15.260 --> 00:07:17.410
So we're gonna say if that's the case,
131
00:07:17.410 --> 00:07:21.520
then I want to, for right now, let's just print it out.
132
00:07:21.520 --> 00:07:25.723
So I'm gonna say, "JWT," for the console log.
133
00:07:26.960 --> 00:07:28.780
And that's what we're gonna print out.
134
00:07:28.780 --> 00:07:31.520
And then, if there's an error,
135
00:07:31.520 --> 00:07:34.570
then you could do something like show an alert.
136
00:07:34.570 --> 00:07:37.270
What we're gonna do is we're gonna actually show something
137
00:07:37.270 --> 00:07:38.400
on the screen.
138
00:07:38.400 --> 00:07:40.010
So let's test that out.
139
00:07:40.010 --> 00:07:41.480
Let's see how you can build that out.
140
00:07:41.480 --> 00:07:44.120
I'm gonna create some error text here
141
00:07:44.120 --> 00:07:46.160
as a new piece of state.
142
00:07:46.160 --> 00:07:50.587
So I'll say, "errortext," and then, "setErrorText."
143
00:07:53.480 --> 00:07:57.240
And then we'll start it off with it being null
144
00:07:57.240 --> 00:07:58.740
as the default value.
145
00:07:58.740 --> 00:08:03.080
And then, here on the screen, right below Admin login,
146
00:08:03.080 --> 00:08:05.640
let's create a quick little div here
147
00:08:05.640 --> 00:08:08.840
and we'll say, "errorText."
148
00:08:08.840 --> 00:08:10.780
Now this is only gonna show up,
149
00:08:10.780 --> 00:08:13.600
if we actually set any value here.
150
00:08:13.600 --> 00:08:16.860
So let's go and let's actually set it.
151
00:08:16.860 --> 00:08:19.797
So if there is an error, we're gonna say, "setErrorText."
152
00:08:21.560 --> 00:08:25.397
And then we can just say something like,
153
00:08:25.397 --> 00:08:30.397
"There was an error logging you in, please try again."
154
00:08:33.780 --> 00:08:36.170
And then, I'm also gonna copy this
155
00:08:36.170 --> 00:08:38.660
and I'm gonna put it in an else condition.
156
00:08:38.660 --> 00:08:42.550
So what this means, and we'll walk through why we're needing
157
00:08:42.550 --> 00:08:45.320
to call this twice, but what this means is
158
00:08:45.320 --> 00:08:48.450
that if we're responding properly,
159
00:08:48.450 --> 00:08:52.450
so if we get the correct JWT token back, in this case,
160
00:08:52.450 --> 00:08:56.340
then we are eventually we're just gonna redirect the user,
161
00:08:56.340 --> 00:08:58.800
which is you, to the correct page.
162
00:08:58.800 --> 00:09:02.300
Now, if we do not get this for any reason,
163
00:09:02.300 --> 00:09:05.490
then we're going to show an error message.
164
00:09:05.490 --> 00:09:07.130
If there's a server error,
165
00:09:07.130 --> 00:09:09.920
which is what the catch clause here has,
166
00:09:09.920 --> 00:09:13.400
then we are gonna also show that error message.
167
00:09:13.400 --> 00:09:15.310
So those are the two conditions.
168
00:09:15.310 --> 00:09:17.250
One would be if there is simply,
169
00:09:17.250 --> 00:09:20.400
If we didn't get the JWT token for any reason,
170
00:09:20.400 --> 00:09:21.430
we're gonna show an error.
171
00:09:21.430 --> 00:09:24.500
If there's a server error, we're also going to show that.
172
00:09:24.500 --> 00:09:27.650
So this is is just gonna catch kind of the edge cases
173
00:09:27.650 --> 00:09:30.000
along with any other errors you run into.
174
00:09:30.000 --> 00:09:32.930
So let's see if this actually working now.
175
00:09:32.930 --> 00:09:36.970
Because if everything's working, what should happen
176
00:09:36.970 --> 00:09:40.080
is this admin login right below it,
177
00:09:40.080 --> 00:09:42.190
should have some error content
178
00:09:42.190 --> 00:09:43.970
if we type in something wrong.
179
00:09:43.970 --> 00:09:47.620
So I'm gonna create or type in something
180
00:09:48.810 --> 00:09:50.830
that isn't a valid account.
181
00:09:50.830 --> 00:09:54.000
And if I hit login here, you can see that it pops up
182
00:09:54.000 --> 00:09:56.670
and it says not only do we get something in the console,
183
00:09:56.670 --> 00:09:59.337
now it says, "There was an error logging you in.
184
00:09:59.337 --> 00:10:01.090
"Please try again."
185
00:10:01.090 --> 00:10:02.180
So that's perfect.
186
00:10:02.180 --> 00:10:05.580
That means that we're actually giving the user some feedback
187
00:10:05.580 --> 00:10:07.630
if they haven't logged in properly.
188
00:10:07.630 --> 00:10:09.690
So I'm happy with this.
189
00:10:09.690 --> 00:10:12.280
Now, right now, nothing's happening.
190
00:10:12.280 --> 00:10:15.890
So when we log in, we're not actually redirecting the user
191
00:10:15.890 --> 00:10:20.890
and we also don't have a record of this JWT token
192
00:10:20.900 --> 00:10:22.290
we received back.
193
00:10:22.290 --> 00:10:24.880
So in the next guide, we are going
194
00:10:24.880 --> 00:10:29.370
to walk through a very helpful tool called local storage.
195
00:10:29.370 --> 00:10:32.520
And we're gonna see how we can take this JWT token,
196
00:10:32.520 --> 00:10:35.500
store it in the browser, and then use it
197
00:10:35.500 --> 00:10:39.533
for the rest of the time that the user is on the site.