WEBVTT 00:02.510 --> 00:02.810 Okay. 00:02.810 --> 00:07.490 So what do we have in our application is we have that authentication component here. 00:07.490 --> 00:11.990 But what we will do in this video is we'll allow users to log in. 00:12.020 --> 00:15.020 So basically what we want to do is enable a form. 00:15.020 --> 00:20.360 And that form will take a username and password will send over to our API. 00:20.360 --> 00:23.330 And we are hoping to get back a token. 00:23.360 --> 00:25.400 So let's do that in this video. 00:25.850 --> 00:27.350 And we can come back here. 00:27.350 --> 00:33.140 And to speed things up, we already had a form movie form here and it will be very similar to what we've 00:33.140 --> 00:33.650 done here. 00:33.650 --> 00:36.050 So I will copy that diff here. 00:37.040 --> 00:41.780 And you can copy that from here and I will place it in here. 00:41.780 --> 00:46.430 So basically we have two things that we will capture for the movies. 00:46.430 --> 00:49.280 It was title and description. 00:49.280 --> 00:53.180 What we want to do is we want to have instead of a title. 00:53.180 --> 00:55.310 We want to have user name. 00:55.670 --> 00:58.430 So we can replace all of those. 01:02.120 --> 01:05.450 And we'll need to also import usestate. 01:10.520 --> 01:13.880 And we need to create a state for the username. 01:13.910 --> 01:23.270 So we'll do constant square brackets and then username and set username like that. 01:23.270 --> 01:25.550 And that's going to be you state. 01:25.580 --> 01:29.030 And we can actually provide a default value of empty string. 01:29.060 --> 01:30.440 So we have that method. 01:30.440 --> 01:32.720 And then we will say save it here. 01:32.720 --> 01:37.340 So we can actually make it a capital letter for the label and placeholder as well. 01:37.370 --> 01:40.490 So we have one for the username. 01:40.490 --> 01:44.780 And we don't need to have um two buttons. 01:44.780 --> 01:47.150 We'll just have one. 01:48.860 --> 01:54.740 And this here we can actually it's not going to be text area. 01:54.740 --> 01:56.660 It will be a normal input. 01:56.660 --> 02:00.100 But what we want to have for the normal input. 02:00.100 --> 02:01.330 It's a different type. 02:01.330 --> 02:03.280 So it's not going to be type text. 02:03.310 --> 02:06.880 And so we could actually do something like that. 02:06.880 --> 02:10.060 So if we'll have let me create the state first. 02:10.060 --> 02:24.460 So if we'll create one for password and set password we will have that password here, here and here 02:24.460 --> 02:25.660 and here. 02:25.660 --> 02:27.160 And set. 02:29.950 --> 02:31.360 Password here. 02:31.360 --> 02:37.210 So basically I can make it capital letters here and also here. 02:37.210 --> 02:40.630 So if I will go here and at the two hour. 02:42.700 --> 02:48.430 And I guess we still have some references to have that create movie that it's not there. 02:48.430 --> 02:50.830 So for the moment I will just comment it out. 02:51.640 --> 02:54.640 And if I will go back here we have a title. 02:54.670 --> 02:55.930 It's not defined. 02:57.430 --> 02:59.080 Also, we have a value here. 02:59.260 --> 03:00.310 I forgot to change them. 03:00.310 --> 03:05.080 So one is username and another one is password. 03:05.230 --> 03:10.120 So if I will save it now and go back here and I will refresh it. 03:10.120 --> 03:11.860 And we have that username and password. 03:11.860 --> 03:13.390 And I have here. 03:13.390 --> 03:15.130 So input for for that. 03:16.570 --> 03:21.220 So but if I will start typing here you can see the password is visible. 03:21.220 --> 03:26.320 So what we need to do is we need to change the type from text to password. 03:26.350 --> 03:29.560 So in that case if I will save it and go back here. 03:29.560 --> 03:31.960 You see this is not visible anymore. 03:31.960 --> 03:32.590 It is. 03:32.620 --> 03:35.320 So whatever you start typing it will be hidden. 03:35.350 --> 03:36.880 So that's what we want. 03:36.910 --> 03:41.230 Also we will come back here and uncomment that again. 03:41.230 --> 03:46.240 And then what we will have is we will have a label login. 03:46.930 --> 03:52.270 And then we can have login user method. 03:52.780 --> 03:54.700 We need to create that method here. 03:55.720 --> 03:58.000 So constant login user. 03:58.000 --> 03:59.350 It will be an arrow function. 03:59.350 --> 04:03.610 We don't need to pass anything from there and then we will do something here. 04:03.610 --> 04:08.230 So if I will save it, you can see I have that button here. 04:08.230 --> 04:09.370 It's actually very long. 04:09.370 --> 04:10.450 It's half of the page. 04:10.450 --> 04:13.510 But we can think about styling a little bit later on. 04:13.540 --> 04:13.990 Okay. 04:13.990 --> 04:21.160 So what we want to do is wherever we click on this button, we will want to send a request to our API 04:21.160 --> 04:24.490 and ask with a username and password for that token. 04:24.490 --> 04:27.100 And to do that we can go to services. 04:27.100 --> 04:33.400 We have API services and we can basically duplicate one of the one once we had it. 04:33.400 --> 04:38.350 And let's say we will have login user method here on API. 04:38.380 --> 04:41.590 What we want to do is we don't want to go to movies here. 04:41.590 --> 04:46.090 What we want to do is if we go here and if I will open URLs. 04:46.120 --> 04:48.310 As you remember this is the path to authenticate. 04:48.310 --> 04:50.140 So out slash. 04:50.140 --> 04:52.150 So we all we need to do that. 04:52.150 --> 04:59.430 So I will instead of movies I will have out like authentication and then we'll need to use method post 04:59.790 --> 05:02.130 and post. 05:02.460 --> 05:07.710 Here we are not going to provide any token because we don't have that token at this point. 05:07.740 --> 05:12.060 I will remove this and we will need to have a body. 05:12.060 --> 05:16.230 So we will do something similar as we had it from here. 05:16.260 --> 05:20.970 So I will copy that and I will put it in our login user. 05:20.970 --> 05:22.470 We'll need to provide a body. 05:22.470 --> 05:24.240 This body will be used in my password. 05:24.240 --> 05:28.170 So we need to also pass it to this function. 05:28.170 --> 05:35.670 And it will return null or response JSON null if there is nothing there okay so this is already done 05:35.700 --> 05:36.060 API. 05:36.060 --> 05:36.930 We have a new method. 05:36.930 --> 05:39.720 So what we need to do is we need to import API. 05:39.750 --> 05:43.890 So import api I will click enter. 05:43.890 --> 05:45.480 It will be imported from there. 05:45.480 --> 05:52.110 And from here we can say API login user. 05:52.140 --> 05:52.860 That's the method. 05:52.860 --> 06:01.080 What we need to do is provide body our body in our case will be username and password. 06:01.080 --> 06:04.740 So basically you don't need to say username username password password. 06:04.740 --> 06:07.230 You can just pass it like this and it will be okay. 06:07.260 --> 06:11.820 What we can do is we can start a result from here in response. 06:13.440 --> 06:15.360 And it will be like that. 06:15.390 --> 06:18.330 Also, we are expecting to have like a JSON. 06:18.330 --> 06:25.290 So we could say that we will have a function get token for example. 06:26.010 --> 06:27.990 And that's going to be our function. 06:32.370 --> 06:35.550 And we will trigger that from here. 06:35.580 --> 06:37.920 So basically I will have it like that. 06:37.920 --> 06:40.530 I can say that function is async. 06:42.030 --> 06:45.060 And in that case I can await. 06:49.260 --> 06:51.540 This result here and that will be our JSON. 06:51.540 --> 06:54.660 So what we can do is we can do console log. 06:57.830 --> 06:58.880 Response. 06:59.360 --> 07:02.030 So let's see if that actually works. 07:02.840 --> 07:03.800 So I will save it. 07:03.830 --> 07:10.160 Let's go to our application and we need to provide a username Christian and password. 07:10.160 --> 07:11.300 Password was Christian. 07:11.300 --> 07:16.400 But first thing first I will right click I will inspect and we'll go to networks. 07:16.400 --> 07:18.710 And I will provide any password. 07:18.710 --> 07:20.330 So that's a random password. 07:20.360 --> 07:21.530 And I will click login. 07:21.530 --> 07:25.970 What I have here is I have to authentication a 404. 07:25.970 --> 07:33.470 So that means if I will go to a response and actually I have page not found okay. 07:33.500 --> 07:42.530 So the problem is what I have here is that if I will go to API service and this is my API URL that I 07:42.530 --> 07:43.010 have changed. 07:43.010 --> 07:51.440 So you see I have already API here embedded in the api URL, but I don't need to have that API. 07:51.470 --> 07:59.180 So what I will do is I will take this API from here and I will include it everywhere here in the places 07:59.180 --> 08:00.860 where I need that API. 08:01.580 --> 08:05.270 And we could have like two different APIs. 08:05.330 --> 08:08.540 And so that's how it is. 08:08.540 --> 08:12.230 So I will have just a basic domain name here. 08:12.230 --> 08:15.710 And then I will have the base depend on what I need. 08:15.740 --> 08:16.430 I will have that. 08:16.430 --> 08:22.190 So if I will come back here and let's clean it again, if I will log in with the same wrong password, 08:22.190 --> 08:23.510 if I will do that. 08:23.510 --> 08:25.340 You see I have now. 08:25.550 --> 08:29.000 And if I'll go headers, I still have that API out. 08:29.000 --> 08:35.810 So I don't know from where API is coming from in that case. 08:35.810 --> 08:39.890 So I will save it here and let's say I will refresh it. 08:41.060 --> 08:44.570 So wrong password here. 08:45.740 --> 08:48.770 And if I will go here and I have a bad request okay. 08:48.890 --> 08:50.570 So this this one I have okay. 08:50.570 --> 08:58.550 So I sent this to out and I have post I got like 400 and if I go preview, I see unable to log in with 08:58.550 --> 08:59.570 provided credentials. 08:59.570 --> 09:02.930 This is basically what you can capture and display that in here. 09:02.960 --> 09:10.130 You don't have to tell if the username and password is wrong or the password or username, because that's 09:10.130 --> 09:16.940 not really a very secure way to tell end users if you have that username in the database, or maybe 09:16.970 --> 09:22.670 like the lease details you will provide to end user, the more secure that will be. 09:22.670 --> 09:27.050 But something generally like you can't log it with provided credentials. 09:27.050 --> 09:27.800 It's all right. 09:27.800 --> 09:29.990 So we can't log in with this. 09:29.990 --> 09:36.770 So if I will go here and provide a question which is a proper password, not very secure but the correct 09:36.770 --> 09:37.010 one. 09:37.010 --> 09:43.640 So if I were to log in now and you can see here I have 200. 09:43.640 --> 09:44.870 So it is okay. 09:44.870 --> 09:47.720 And in the payload you can see what I've sent. 09:47.750 --> 09:48.830 So Christian Christian. 09:48.830 --> 09:51.830 And in the preview I see I have that token. 09:51.830 --> 10:00.940 So basically I have the JSON with a token inside, so if I can go here once again and in the place where 10:00.940 --> 10:02.080 we actually use it. 10:02.080 --> 10:06.670 So console.log here, this is the response if I will do response dot token. 10:09.340 --> 10:11.650 And actually I need to check it if I have it. 10:11.650 --> 10:18.040 So if response because I might not have the response here. 10:20.740 --> 10:24.070 Then we will console log console.log this. 10:24.070 --> 10:30.340 So if I will go here and if I will go console, I can actually see clean it. 10:30.340 --> 10:33.520 And if I will log in here I have the token here. 10:33.520 --> 10:37.000 So this is a way to capture that token. 10:37.000 --> 10:40.540 What we will need to do is we need to get the token. 10:40.540 --> 10:45.760 And we need to save it somewhere for a session to have it for the next time you will log in. 10:45.760 --> 10:53.050 And we also will need to start replacing this hardcoded token with the one that we got it from our API.