WEBVTT 00:01.190 --> 00:08.210 Okay, so we have our token in our context and it is shared in our application, but it doesn't really 00:08.210 --> 00:13.670 give us a way to handle this information or hold that information between different sessions. 00:13.670 --> 00:19.970 So what we are trying to do is wherever we are logging, we want to save it somewhere and then get it 00:20.000 --> 00:22.580 wherever we open our application next time. 00:22.580 --> 00:29.210 So we will use a for this, we will use cookies and there is a plugin React Cookie and I will install 00:29.210 --> 00:29.450 that. 00:29.450 --> 00:30.650 So I will copy that. 00:30.650 --> 00:34.340 And so we are here on npm for react cookie. 00:34.400 --> 00:42.500 And so basically we go here I will stop my server and I will paste it npm I install react cookie. 00:48.170 --> 00:50.840 That's done and it will start that again. 00:50.840 --> 00:59.630 So basically what we have here in the token or in that context here it's not needed anymore because 00:59.660 --> 01:06.650 instead of this I think that was very beneficial to have that knowledge, to see how we can share the 01:06.650 --> 01:09.650 information between my servers starting now. 01:09.650 --> 01:11.270 So it kicks me out from here. 01:11.510 --> 01:16.730 So basically, this is the way that you could communicate in between different components. 01:16.730 --> 01:21.200 But if we want to preserve that data, we don't need to use actually a token. 01:21.200 --> 01:25.850 What we can do is from that library import. 01:28.970 --> 01:31.550 Cookie provider from react cookie. 01:31.550 --> 01:35.930 And that's very similar to what we've done with our context. 01:35.960 --> 01:37.430 So I will show you that in a second. 01:37.460 --> 01:42.170 So cookie provider I can actually commented this here. 01:42.170 --> 01:50.450 And instead of that token provider here, what we can do is we can replace all of it with my cookie 01:50.450 --> 01:51.350 provider. 01:52.370 --> 01:54.020 So that will also wrap it. 01:54.020 --> 01:57.860 My entire application and my cookies will be available here. 01:57.860 --> 02:00.200 So I don't need to create that context. 02:00.230 --> 02:06.140 So I don't need to also use that function here, but you can leave it there for your reference if you 02:06.140 --> 02:06.710 like. 02:06.740 --> 02:12.020 So instead of having that token, then I have the cookies provider. 02:12.020 --> 02:14.780 So that means it is not available. 02:14.780 --> 02:17.000 This token is not available anymore from here. 02:17.000 --> 02:20.360 So I also need to comment it out because it is not there. 02:20.360 --> 02:24.710 And what we've done is we've used a context from here. 02:24.710 --> 02:26.870 We also have another option. 02:26.870 --> 02:28.160 So import. 02:31.100 --> 02:35.360 Use cookies from react cookie. 02:35.360 --> 02:41.660 So that's a hook that will be using for instead of use context we will use that cookies. 02:41.660 --> 02:45.110 But this context doesn't exist so we don't use it anymore. 02:45.230 --> 02:51.980 And basically what use cookies is allow us to do is to name the name of the cookie. 02:51.980 --> 02:55.610 So I can say Mr., which is a movie writer. 02:55.610 --> 02:58.310 And then I can say token, this is arbitrary name. 02:58.310 --> 02:59.960 You can put anything you like. 02:59.960 --> 03:02.330 And this is not an object anymore. 03:02.360 --> 03:04.460 This will be an re array. 03:04.490 --> 03:05.660 Something like a new state. 03:05.690 --> 03:06.560 We have it here. 03:06.560 --> 03:09.860 So we have a token and set token to different things. 03:09.860 --> 03:12.410 And we have that in use cookies. 03:12.410 --> 03:18.710 So now what we have is have similar setup as we had before. 03:18.710 --> 03:23.390 But instead of context we have that on our cookies. 03:23.390 --> 03:25.640 So we have that in the in the cookies. 03:25.640 --> 03:29.720 And then we have token and set token and then we can console.log it here. 03:29.720 --> 03:34.280 So basically this set token we need to provide or provide more information. 03:34.280 --> 03:41.030 So first thing first when we set something into cookies we need to tell where we are sending or what 03:41.030 --> 03:42.170 we are actually saving. 03:42.170 --> 03:46.460 So basically this is the name a unique name for that cookie. 03:46.460 --> 03:48.830 And I can put it that as a first argument here. 03:48.830 --> 03:50.480 So so I will do that. 03:50.480 --> 03:52.940 And the second argument will be the value. 03:52.940 --> 03:55.520 So the first is the name, the second is the value. 03:55.520 --> 03:57.440 So we will set token. 03:57.440 --> 03:58.820 Basically this is our cookie. 03:58.850 --> 04:00.920 We could call it whatever we like. 04:00.950 --> 04:05.600 It could be a cookie set cookie but it can be our names as well. 04:05.600 --> 04:06.500 So to talk. 04:06.530 --> 04:09.860 And Mr. Token and then we will put it this as a value. 04:09.860 --> 04:14.240 And then we will take that from the token from here. 04:14.240 --> 04:18.710 And if I will save it now and let's go back and see how it works. 04:18.710 --> 04:27.650 So I will, I see that I don't have anything in the token here in the whenever I'm trying to do a console 04:27.680 --> 04:27.980 log it. 04:27.980 --> 04:30.770 So token is basically empty here. 04:30.770 --> 04:40.190 So if I will go here and clean this and I will also go to from here, I will go to application and we 04:40.190 --> 04:42.710 can actually select the cookies here. 04:42.710 --> 04:44.810 And we can select our local host here. 04:44.810 --> 04:49.070 So I have some cookies set up by the IDs that I was using. 04:49.100 --> 04:53.600 So I can clean this right click and I can say clear. 04:53.600 --> 04:55.040 So all of it is gone. 04:55.070 --> 04:58.430 So I don't have any cookies for the local local host here. 04:58.580 --> 05:01.700 And you see this is local host 3000. 05:01.700 --> 05:03.560 So if I will log in now. 05:05.340 --> 05:06.780 And login here. 05:06.780 --> 05:11.130 What I have here is I have Mr. Token is set up here. 05:11.130 --> 05:17.760 So you can see here the value from my token has been set at in the cookies here if I will go to console. 05:18.060 --> 05:19.890 And actually it's not printed here. 05:19.890 --> 05:23.130 The application has that saved here. 05:23.130 --> 05:26.160 So what will happen if I will refresh the entire page. 05:26.160 --> 05:27.540 Now I will refresh it. 05:27.540 --> 05:30.060 You see I still have that cookie. 05:30.060 --> 05:32.880 So cookie basically preserves in between loaded. 05:32.880 --> 05:34.800 So I can close this open again. 05:34.800 --> 05:36.150 And that will be available. 05:36.150 --> 05:40.170 So that means if I have that cookie here I can do something about it. 05:40.170 --> 05:41.490 So I can go here. 05:41.490 --> 05:45.300 You can see here when I refresh it it's basically automatically loaded. 05:45.300 --> 05:46.560 It was empty before. 05:46.560 --> 05:50.130 But whenever I refresh the page I had that cookie set up. 05:50.130 --> 05:51.870 This is the name of my cookie. 05:51.870 --> 05:58.380 So what I could do is I can go here and say console, log that token. 05:58.380 --> 06:03.780 And that will be I want to have like Mr. A token from there. 06:03.780 --> 06:05.340 So if I will save it here. 06:05.340 --> 06:05.790 You see? 06:06.120 --> 06:07.260 This is my token. 06:07.290 --> 06:11.070 So basically, this is how the cookie comes as an object. 06:11.070 --> 06:15.210 I can select the name of that, the parameter of that object. 06:15.210 --> 06:18.360 And then the value value will be available for for here. 06:18.360 --> 06:27.840 So what I can do is in the out JS I can say if I have the token and actually I can say if. 06:30.030 --> 06:32.460 I have this token Mr. Token. 06:32.490 --> 06:38.730 So it's not empty, then I can do something so I can consider myself as a login because I have that 06:38.730 --> 06:40.650 token and I can go to movie. 06:40.650 --> 06:42.630 So how can I go to movies? 06:42.630 --> 06:45.750 I will need to use a router for this. 06:45.750 --> 06:48.840 So we've done react router Dom. 06:48.840 --> 06:57.150 Here we create a router, but we can also use that react router Dom to navigate in between our component. 06:57.180 --> 07:01.320 So or our site we have that path and that path. 07:01.320 --> 07:10.710 So I will go here and I will use import And I will import, use navigate. 07:11.700 --> 07:14.610 And that's a hook that we can actually use it here. 07:14.610 --> 07:17.490 So I will do constant navigate. 07:17.490 --> 07:19.110 That will be my variable. 07:19.110 --> 07:21.000 And I will do use navigate. 07:21.000 --> 07:26.010 So basically this is an object that we can use or rather a method that we can use. 07:26.010 --> 07:28.140 And it's coming from React Router Dom. 07:28.140 --> 07:34.170 So this navigate if I have that token here what I can do is I can do navigate. 07:34.170 --> 07:36.180 And where do I want to navigate. 07:36.180 --> 07:38.400 So basically here I provide the URL. 07:38.400 --> 07:42.150 And what I'm interested is to go to slash movies. 07:42.150 --> 07:46.890 So if I will go here slash movies I can save it now. 07:46.890 --> 07:50.160 So I don't need to console log it any anything here. 07:50.160 --> 07:51.660 So what I'm checking here. 07:51.660 --> 07:52.650 If I have a token. 07:52.680 --> 07:55.320 This is inside of my out. 07:55.320 --> 08:01.800 So whenever I start my application I check if I have a token or whatever the token change, I check 08:01.830 --> 08:01.950 it. 08:01.950 --> 08:07.320 If I have Mr. Token in my cookies because this is coming from the cookies turkey's cookies, then I 08:07.320 --> 08:08.610 will navigate to movie. 08:08.610 --> 08:12.510 So I will go back to my application and you see, I am already in the movies. 08:12.510 --> 08:19.920 If even if I go back to out, you see, I'm strictly and go back to there because I already have that 08:19.920 --> 08:22.350 cookie setup and I'm redirected to movie. 08:22.350 --> 08:30.390 So if I will go here and I will remove this, so remove the mustard token and if I will go back here 08:30.450 --> 08:35.250 now I'm not redirected here because I don't have the Mr. Token anymore. 08:35.250 --> 08:41.340 So if I will log in again and log in I have that token. 08:42.960 --> 08:44.880 It's still not been triggered. 08:44.880 --> 08:49.500 But if I will refresh it now, you see, I'm going to movies straight away. 08:49.500 --> 08:56.790 So this is how we use a cookie to store something in between different components as well, but also 08:56.790 --> 08:59.880 in different in in sessions as well. 08:59.880 --> 09:01.770 So it is stored in a browser. 09:01.770 --> 09:07.170 We can store it there and we can read it from different components and have some logic based on that.