WEBVTT 00:01.560 --> 00:04.770 Okay, we have our login already. 00:04.770 --> 00:06.810 We haven't done much with it yet. 00:06.840 --> 00:09.840 We haven't connected yet to our API. 00:09.870 --> 00:12.190 So we'll do that in this video. 00:12.210 --> 00:18.720 So what we have here is the username and password input and whatever I will type in here you can see 00:18.720 --> 00:22.130 one strange things like this is auto capitalize. 00:22.140 --> 00:26.580 So whenever we start a new sentence here, it will be capital. 00:26.760 --> 00:33.000 We don't want to have that for a user interface, so we would like to keep it a lowercase. 00:33.000 --> 00:34.380 Maybe you would like to have it. 00:34.380 --> 00:39.780 So whatever you will, maybe you will register your users with capital and it will also would like to 00:39.780 --> 00:41.370 have a login with capital. 00:41.400 --> 00:48.810 But if you don't like to have it like this, then we can go to the text input here and in the text input 00:48.840 --> 00:56.970 we can do auto capitalize here and then we can do it as none. 00:56.970 --> 01:02.050 So we have a few options and I can also do that for a password here. 01:02.200 --> 01:03.910 Also the password. 01:03.910 --> 01:10.210 If we go here and we start doing password, you can see the password is visible. 01:10.210 --> 01:18.640 Usually we would like to hide the password not to be seen so we can do a secure text entry. 01:20.020 --> 01:22.870 And then we can say it's true. 01:23.050 --> 01:31.410 So once this is refreshed, you can see I'm start typing and it's a small letter at the beginning. 01:31.420 --> 01:36.190 And also whatever I type in here, this is hidden by the these dots. 01:36.190 --> 01:38.410 So we have that sorted. 01:38.410 --> 01:41.680 So the next thing, what we need to do is we need to authenticate. 01:41.680 --> 01:47.140 So I copy the fetch method from the previous component. 01:47.140 --> 01:52.030 So we'll need to uncomment it now and then we need to change it a little bit. 01:52.030 --> 01:57.250 So first the URL needs to be out like this. 01:57.250 --> 02:02.020 We don't need to provide any ID here, so that's our URL. 02:02.320 --> 02:05.890 The method for authentication will be post. 02:06.760 --> 02:12.040 We don't need to provide authentication here because at this point we don't have the token. 02:12.040 --> 02:15.310 So we can leave the content type only. 02:15.310 --> 02:22.220 And what we need to do here is need instead of providing title and description to our authentication, 02:22.220 --> 02:30.350 we need to have username and username, which is using this state. 02:30.350 --> 02:35.960 And then we'll have also password like this and password. 02:35.960 --> 02:37.550 So we will have that. 02:37.550 --> 02:42.590 But I can show you the quick way with the newest addition of JavaScript. 02:42.590 --> 02:45.650 If you have username and then username here. 02:45.650 --> 02:52.280 In fact, what you can do is you can provide it like this and maybe it's not that readable for you, 02:52.280 --> 02:55.760 but it is kind of shortcut in JavaScript you can do now. 02:55.760 --> 03:02.000 So instead of repeating username is username and password is password, you just provide like this and 03:02.000 --> 03:03.380 it will work in the same way. 03:03.380 --> 03:07.430 So if you prefer this style you can keep it like this. 03:07.670 --> 03:15.170 And whenever we actually authenticate what we will have here with we will have a response here. 03:15.170 --> 03:22.190 And what instead of going to details like we did with this fetch before, what we can do is for now 03:22.190 --> 03:27.290 we can do console log and see what's actually inside. 03:27.290 --> 03:30.590 So we'll do response and we'll console log it. 03:30.770 --> 03:32.480 So we have that. 03:32.480 --> 03:34.790 I will try to authenticate with my credentials. 03:34.790 --> 03:41.720 So Christian and then Christian and then I click log in and here it's a response here. 03:41.720 --> 03:45.350 So we have our object and inside we have token. 03:45.350 --> 03:49.880 So basically response token is what we are interested in. 03:49.880 --> 03:55.760 So how we can actually save it to be reusable in other components. 03:55.760 --> 04:01.460 For that we can use async storage and we need to import that. 04:02.540 --> 04:04.220 I think storage like this. 04:04.710 --> 04:08.390 Then once it is imported, we can actually do that here. 04:08.390 --> 04:12.770 But there is important thing to know about async storage. 04:12.770 --> 04:16.160 Well, as the name it's telling us this is async. 04:16.160 --> 04:18.980 So what we need to do is we need to await for it. 04:18.980 --> 04:23.570 So what we can have is we can have another function here. 04:23.570 --> 04:31.700 So I will do save data, We can have a save token or whatever, and that's going to be an arrow function 04:32.060 --> 04:33.020 here. 04:34.100 --> 04:43.510 And the save data, we can pass the token to that data and then we can use the async storage queue. 04:43.520 --> 04:50.360 So I will have a value that's going to be our token and then I will have async storage and then I will 04:50.360 --> 04:55.190 have I have a few options and we can see a list of them here. 04:55.190 --> 05:01.370 What we are interested in is asset item here and then we need to provide a few things. 05:01.370 --> 05:03.890 So first thing will be a key and key. 05:03.890 --> 05:04.700 It's up to us. 05:04.700 --> 05:05.930 How are we going to name it? 05:05.960 --> 05:13.040 I will do movie rater underscore token like this and the second one will be a value. 05:13.040 --> 05:16.010 And a value is something that will pass to this function. 05:16.010 --> 05:19.670 Actually, I mistype it here so constant like this. 05:20.090 --> 05:22.520 So we have our option here. 05:22.520 --> 05:28.100 But I said that async storage is asynchronous, so that means we need to wait for it. 05:28.100 --> 05:34.910 If I would like to have here a save data like that. 05:34.910 --> 05:39.440 And then after that, I would like to navigate to a new component. 05:39.470 --> 05:43.850 It's not going to wait for me to save this as this. 05:43.850 --> 05:52.910 So what we need to do is we need to do a mark this function as async, and then we will do await here. 05:54.050 --> 06:01.280 So once I have this, that means it will await for this function to finish and then it will go and do 06:01.280 --> 06:02.570 the second line. 06:02.570 --> 06:09.200 So actually, we don't need to do anything here and we will just put it this in the storage, so I'm 06:09.200 --> 06:12.020 not going to put it in the variable. 06:12.020 --> 06:13.880 So we will save the data. 06:13.880 --> 06:19.340 That's a thing that will await until it will finish and then the next line will be executed. 06:19.340 --> 06:19.460 And. 06:19.520 --> 06:20.660 In the next time. 06:20.660 --> 06:31.370 What we can do is we can do props, navigation, navigate, and then we can navigate to our movie list 06:31.880 --> 06:32.780 like this. 06:32.780 --> 06:34.970 So we have that. 06:34.970 --> 06:40.190 And once we get this here, we'll save it. 06:40.190 --> 06:46.820 This will wait until this will be saved in the async storage and then this one will be executed. 06:46.820 --> 06:48.320 So let's give it a try. 06:49.580 --> 06:54.230 So this is saved and I can do 06:57.250 --> 07:06.920 grace and Christian and we have some problems and it cannot actually, what we have here is we have 07:07.190 --> 07:09.260 this null. 07:09.260 --> 07:15.140 And the problem is I forgot actually to pass this rest token there into our function. 07:15.140 --> 07:18.160 So we save the data and we pass the token here. 07:18.170 --> 07:23.780 So I don't have this anymore and we need to do it like this. 07:24.170 --> 07:25.850 So that was my mistake. 07:25.850 --> 07:33.110 I'll do Christian and then Christian and then log in and you can see here, I'm here. 07:33.110 --> 07:40.070 So we have at this point we have stored Mr. Token and whatever we will access the this application. 07:40.070 --> 07:44.300 Again the Mr. Token will be available there in this in the storage. 07:44.300 --> 07:46.340 So how can we actually check it. 07:46.820 --> 07:54.900 We can do at the moment we don't use use effect here in this component so we can implement use effect 07:54.900 --> 07:59.910 and I will do use effect and that's going to be an arrow function. 08:01.770 --> 08:02.460 Here. 08:02.460 --> 08:07.110 So use effect will be triggered whenever we render something. 08:07.140 --> 08:10.410 So we can actually limit that to render only once. 08:10.410 --> 08:16.320 So I will provide an empty array and it will be done only once, Once for the first time we run the 08:16.320 --> 08:17.220 application. 08:17.220 --> 08:24.930 And what we can have is in the similar way as we had the uh, this uh, function we can have actually. 08:28.220 --> 08:29.120 Get data. 08:29.420 --> 08:34.400 So save data will save it and get the data will actually retrieve the data. 08:34.400 --> 08:35.930 We don't need to provide anything. 08:35.930 --> 08:37.720 It's still going to be async. 08:37.730 --> 08:42.920 So this time we can actually have a constant some value. 08:43.130 --> 08:53.120 Let's say it will be token and then we can get an item, uh, like that and then we don't need to provide 08:53.120 --> 08:54.950 any value here. 08:54.950 --> 08:58.580 So we will get an item and it will be here in the token. 08:58.580 --> 09:02.450 It is also a way, so it will wait until this will be executed. 09:02.480 --> 09:08.960 When it will be executed, We can say if we have a token. 09:10.640 --> 09:16.670 Then what we can do is we can navigate to the movie list like this. 09:17.030 --> 09:19.220 So we have that option. 09:19.220 --> 09:25.480 And whenever we run the application, we don't want to user to login every time we do that. 09:25.490 --> 09:29.120 So we can actually ask for for that data. 09:29.120 --> 09:36.110 If we have that data, then we will automatically redirect to our movie list. 09:36.110 --> 09:43.400 So if I will save it now you can see we are in the movie list, despite the fact that login is the first 09:43.400 --> 09:47.660 component that we load, so we can pre check it for the token. 09:47.660 --> 09:51.950 And then once we have that token, then we can redirect to movie list. 09:51.950 --> 09:59.810 Okay, so that's login done, but we haven't yet used the token that we have storage in the, in the 09:59.810 --> 10:03.080 async storage in the real fetch. 10:03.080 --> 10:04.850 So we'll do that in the next video.