WEBVTT 00:02.000 --> 00:08.720 Okay, so we have a way to check if we have a mr. token or a mr. token inside our cookies. 00:08.720 --> 00:16.490 And we can based on that, we can redirect to movies, but we will also need to do it inside our component 00:16.490 --> 00:18.140 in inside our movies. 00:18.740 --> 00:20.870 What we need to do is we need to check the same. 00:20.870 --> 00:28.370 So I will copy whatever we have here and go to app.js here and we can actually check it. 00:28.700 --> 00:31.430 And so we will use Usestate here. 00:31.430 --> 00:32.480 Useeffect sorry. 00:32.510 --> 00:38.090 We will check it from here if we have that token from our cookie. 00:38.090 --> 00:41.690 So we'll need to also do this thing here. 00:41.690 --> 00:47.210 So basically I will revert it to the way we have it there. 00:47.210 --> 00:52.130 So if I will import this so I will have import token. 00:52.130 --> 00:54.200 I don't need to set a token from here. 00:54.200 --> 00:57.230 I will have this and navigate as well. 00:57.230 --> 00:59.390 And that hasn't been imported. 00:59.390 --> 01:00.380 So I will just. 01:01.860 --> 01:06.060 Copy import from here because we'll need it in this component here. 01:06.060 --> 01:11.670 So use effect basically inside our app.js which is list of movies. 01:11.670 --> 01:15.900 We will use it and check if we don't have the token here. 01:15.900 --> 01:18.720 And then we will navigate back to out. 01:18.720 --> 01:20.460 So this is our here. 01:20.460 --> 01:23.130 So we basically have done the same thing that we reverted. 01:23.130 --> 01:25.860 So if we don't have a token we navigate it back here. 01:25.860 --> 01:29.970 So if we have a token here we'll navigate it to to movie. 01:29.970 --> 01:33.930 So basically that will give us a kind of a use effect is not defined. 01:33.930 --> 01:41.340 Sorry I have to also import use effect in here we have used state but we don't have a use effect. 01:41.340 --> 01:42.660 So it's fine. 01:42.660 --> 01:44.850 Now I can refresh it now. 01:44.850 --> 01:48.960 And since we have that token then we are here in the movies. 01:48.960 --> 01:56.190 But if I will remove that and I'm here in the movies here, if I refresh it, you see, I'm back in 01:56.190 --> 01:59.670 the out because I don't have that Mr.. 01:59.700 --> 02:00.180 Mr.. 02:00.210 --> 02:01.550 Token here. 02:06.860 --> 02:13.280 I have that it's still not not acting like it if changed now, but if I will refresh it. 02:13.280 --> 02:19.220 You see, I'm in the movie so I can actually go from movies to to authentication there. 02:19.220 --> 02:23.630 But since we have that token, it doesn't mean that we actually use it. 02:23.630 --> 02:26.240 So it is available here in our cookies. 02:26.240 --> 02:30.320 But if you go to our API service, we still have it hardcoded. 02:30.320 --> 02:36.950 So what we will do is we'll replace the hardcoded token from here, from the one that we have in the 02:36.950 --> 02:37.520 cookies. 02:37.610 --> 02:46.160 The way we design our class API with a static methods is we can't really use our cookies here because 02:46.160 --> 02:47.000 this is not allowed. 02:47.000 --> 02:50.150 So it has to be a functional component to use it like that. 02:50.150 --> 02:56.810 So what we will do is we will basically if we want to use that token, we will provide it in as an extra 02:56.810 --> 02:57.320 argument. 02:57.320 --> 02:59.660 So we use the token here. 02:59.660 --> 03:04.830 So what we need to do is we need to pass that token into that method. 03:04.830 --> 03:07.740 So I will change it for lowercase here. 03:07.740 --> 03:09.660 And then we use token here. 03:09.660 --> 03:14.010 So also I will need to provide it like this. 03:14.010 --> 03:15.270 And then I will do that. 03:15.270 --> 03:21.660 Basically for every single function I will ask for extra parameter there just to be provided. 03:21.660 --> 03:26.820 So that means we can have that tokens in different components wherever we use that. 03:26.820 --> 03:29.010 And we'll need to pass that token here. 03:29.010 --> 03:33.720 And that token will be passed to our authorization in there. 03:33.720 --> 03:38.820 So we'll do that for every single method we have in our application. 03:38.820 --> 03:43.440 So this is done I don't use this anymore so I can remove it completely. 03:43.470 --> 03:47.610 Now it required for me to send that token. 03:47.610 --> 03:51.780 I don't need to do send one for login because login doesn't have a token yet. 03:51.780 --> 03:55.680 But for all the rest of this like fetch movies, I will need to do that. 03:55.680 --> 03:57.450 So let's go back here. 03:57.450 --> 03:59.670 We don't use any methods there. 03:59.700 --> 04:03.500 I will close it for now and I can close the rest of the things for. 04:03.530 --> 04:04.340 For now. 04:04.610 --> 04:10.070 What we have is we need to go to our movie list. 04:10.100 --> 04:12.290 This is where we actually. 04:14.870 --> 04:16.130 Use our API. 04:16.160 --> 04:17.930 So we have that API. 04:22.010 --> 04:24.530 And this is where we fetch our movie. 04:24.530 --> 04:28.280 So fetch movies now require a token. 04:28.280 --> 04:31.160 So how can we get that token. 04:31.250 --> 04:33.890 Here basically we are inside a component. 04:33.890 --> 04:40.130 So the same way as we've done it here in the app.js you see we have that token here. 04:40.130 --> 04:40.910 Use cookie. 04:40.910 --> 04:45.350 So we'll need to import cookies inside our movie list. 04:46.850 --> 04:47.990 I can close that. 04:47.990 --> 04:52.730 And also I will need to have that token like this. 04:54.680 --> 04:56.870 And I will put it here. 04:56.900 --> 05:03.960 So basically my token is here and I will need to use a fetch movies. 05:03.960 --> 05:10.290 I will need to do token, and then I will also need to know which one I'm using. 05:10.290 --> 05:14.700 So Mr. Token, basically that's the name of my token. 05:14.700 --> 05:16.200 Basically this is a cookie. 05:16.230 --> 05:17.790 We we name it token. 05:17.790 --> 05:19.620 But this is a basically a cookie. 05:19.620 --> 05:21.540 And I could say this is a cookie. 05:21.540 --> 05:25.440 And then I will pass the cookie Mr. token in there. 05:25.440 --> 05:26.970 So this is one method. 05:26.970 --> 05:28.590 We have another method here. 05:28.590 --> 05:30.780 So I will do exactly the same there. 05:30.780 --> 05:32.400 So we'll put it here. 05:32.850 --> 05:35.970 And I will have remove movie like that. 05:35.970 --> 05:38.310 So we have two methods here from the API. 05:38.310 --> 05:41.490 And for both of them I pass Mr. Token. 05:41.520 --> 05:45.930 So if I will go here and if I will refresh this. 05:45.930 --> 05:48.270 So this is the list of the movies. 05:48.270 --> 05:56.580 And you can see here it has been fetched with my token, despite the fact I don't use the hard coded 05:56.580 --> 05:59.850 one because it is coming now from this. 05:59.850 --> 06:03.710 So we can keep on going and we can replace the rest of them. 06:03.710 --> 06:05.180 So movie list is one. 06:05.180 --> 06:07.340 Then we need to have movie details. 06:07.640 --> 06:09.770 In the movie details we use it here. 06:09.770 --> 06:13.340 So as a last argument we need to also provide that token. 06:13.340 --> 06:16.790 So what we will do is we will repeat the same thing. 06:16.790 --> 06:18.650 So we'll use cookies. 06:20.690 --> 06:24.680 Import that here I will also need to. 06:27.350 --> 06:28.340 Have this. 06:33.350 --> 06:38.240 And once I have this I can provide it as a last argument token. 06:38.240 --> 06:43.430 And this is Mr. Token like that. 06:43.640 --> 06:49.640 And once I have it here I can also include that in the get movies here. 06:50.990 --> 06:54.830 And the last place where we need to do it is in our movie form. 06:54.830 --> 07:00.560 So if we go here we have two different methods, and we also need to provide the token here. 07:00.570 --> 07:07.770 So if I will go back here, I will copy that into movie form. 07:07.860 --> 07:11.280 So we have used cookies and I can also copy that. 07:14.040 --> 07:15.480 In the movie form. 07:15.510 --> 07:21.900 And once I have that token I can pass it as a last argument here. 07:21.900 --> 07:22.680 Token. 07:25.020 --> 07:25.530 Mr.. 07:25.560 --> 07:26.340 Token. 07:31.230 --> 07:37.290 So copy that and also put it here as the last argument in that function on our API. 07:37.320 --> 07:43.920 So basically we have a way to get the cookies, that token from the cookies in any component. 07:43.920 --> 07:47.040 And we can pass to this to to the methods there. 07:47.070 --> 07:49.440 So we can see here all of them. 07:49.470 --> 07:56.280 And sorry if you go here all of the the methods that require a token, you need to pass it here as an 07:56.280 --> 07:58.140 argument and then it will be used. 07:58.140 --> 08:02.540 So let's go back to our application and see if everything is working fine as it was. 08:02.540 --> 08:04.550 So I have a list of movie which is good. 08:04.580 --> 08:10.460 I can click on this one and I can change this so if I will update it, it is working fine. 08:10.460 --> 08:14.060 I can also go to the network and see them. 08:14.060 --> 08:16.640 Here is how I can create new movie. 08:19.610 --> 08:20.330 Create movie. 08:20.330 --> 08:22.610 I have a new movie and I can remove it. 08:22.610 --> 08:25.580 And also I can do that. 08:25.580 --> 08:27.140 So everything is working fine. 08:27.140 --> 08:30.530 And now the token is dynamic and it's coming from the cookie. 08:30.530 --> 08:37.610 So if I will have this removed application and if I will remove all cookies, clear cookies from here. 08:37.610 --> 08:39.680 And if I will refresh the page here. 08:39.770 --> 08:45.740 You see, I'm back here and I won't be able to even go back to movies, but I'm not going to be able 08:45.740 --> 08:51.860 to fetch anything from there, because every time I will go to App Root, which is slash movies, then 08:51.980 --> 08:56.330 it will be checked for for that token and it will be kicked out in here. 08:56.330 --> 09:00.350 So at the moment token is dynamic used from our cookies.