1 00:00:00,620 --> 00:00:07,879 Well, in this video we are going to continue working on how to get the cookies. In the previous video 2 00:00:07,879 --> 00:00:20,219 we saw why we cannot use the context variables to be able to make the protected routes. 3 00:00:20,219 --> 00:00:28,699 We saw that every time we load one of the pages associated with a route, 4 00:00:30,620 --> 00:00:40,759 everything is updated, then useEffect we could not use it, okay, then, well, 5 00:00:41,920 --> 00:01:04,359 we saw that if we logged in, if it created the context for us, 6 00:01:04,359 --> 00:01:14,519 ok if it put us the true state variable yes it returns the data it does not do everything 7 00:01:14,519 --> 00:01:20,239 well but with this is with what we cannot work we need to work with the 8 00:01:20,239 --> 00:01:29,680 cookie ok that generates us with the cookie called touch then here we are going to work with two 9 00:01:29,680 --> 00:01:43,540 following two steps first as we take from here from the front that cookie is worth that we need to use 10 00:01:43,540 --> 00:01:55,819 a library because this js which is the js medium cookie to be able to take it is worth here I have the 11 00:01:55,819 --> 00:02:04,459 official page of js cookie of npm ok and here you have all the set the get to 12 00:02:04,459 --> 00:02:08,900 take any or all the cookies that there are or only one that we can take it by 13 00:02:08,900 --> 00:02:15,080 the name is worth taking its value that in the end is what we are going to do and then 14 00:02:15,080 --> 00:02:21,360 once we have that cookie we are going to send it back to the backend the backend 15 00:02:21,360 --> 00:02:30,539 will have to play again with the json web token with the jwt and we will compare those cookies to 16 00:02:30,539 --> 00:02:36,659 see that that user who says that it is authenticated is authenticated, it is true, then we have 17 00:02:36,659 --> 00:02:48,370 to do those two steps, we go with the first one, then in the first one we had created a juice effect 18 00:02:53,370 --> 00:03:28,689 We had created the useEffect. Where are you? 19 00:03:28,689 --> 00:03:38,539 Here you are logged, log in. This was to clean up the whole thing. 20 00:03:38,539 --> 00:03:46,110 We had the app.js, we had done, ah, protected routes. 21 00:03:46,110 --> 00:03:52,110 We had protected routes in JSX, which we have as such, 22 00:03:52,110 --> 00:03:57,349 hanging directly from here 23 00:03:57,349 --> 00:04:04,050 and what we had done was this if it was authenticated then we used this 24 00:04:04,050 --> 00:04:08,909 we tried that if it was not authenticated to send it again to login 25 00:04:08,909 --> 00:04:13,650 ok what didn't work for us was this ok 26 00:04:13,650 --> 00:04:18,930 this is what we had done at the end of the previous video ok then now in 27 00:04:18,930 --> 00:04:26,470 the out context what I want to do is a use effect that controls those cookies 28 00:04:26,470 --> 00:04:32,930 then the first thing I'm going to do is load the js library 29 00:04:32,930 --> 00:04:42,850 ok then we are going to stop this from the 30 00:04:42,850 --> 00:04:47,910 client folder where we have all the part of the client we are going to put the 31 00:04:47,910 --> 00:05:04,120 npm and js ok we are going to put this and we install it ok it is already once installed in the file 32 00:05:04,120 --> 00:05:14,790 well we start our part of the client obviously ok we already have it ok ok then 33 00:05:14,790 --> 00:05:28,230 what I am going to do now is in the file outcontext.jsx we are going to use that js that we finished 34 00:05:28,230 --> 00:05:40,290 js-media cookie that we have just installed we are going to put the import we are going to call it 35 00:05:47,319 --> 00:06:06,050 ok ok and well we are going to use it in a you set effect then here we had the to control 36 00:06:06,050 --> 00:06:24,149 the errors ok we are going to and we are going to do another one here that 37 00:06:24,149 --> 00:06:35,649 is going to control only when that page is loaded, okay, then I'm going to tell you that I'm not going to 38 00:06:35,649 --> 00:06:39,910 pass any parameter in particular, I want it to be when the page is loaded, so 39 00:06:39,910 --> 00:06:44,370 at the time when it detects that there is some type of change, okay, which is what I get when I 40 00:06:44,370 --> 00:06:49,529 pass this list in empty then it is when you go to 41 00:06:53,870 --> 00:07:03,069 to do everything that we put in here in this case we are going to put a cons here we are going to call it 42 00:07:04,810 --> 00:07:14,100 cookies for example to take them all then with this cookie that we have imported from 43 00:07:14,100 --> 00:07:21,980 js cookie what I can do is take all the cookies that we have received from the 44 00:07:21,980 --> 00:07:25,699 bucket ok then here I can take it and tell it 45 00:07:28,439 --> 00:07:46,620 cookies this we are going to put the best in because in the end if I am going to take all the points that are worth there I take them all ok 46 00:07:46,620 --> 00:07:56,879 what I do now is to ask you if there is a cookie point called the touch 47 00:07:58,459 --> 00:08:03,120 is worth if there is one called touch which is the one that we have generated then 48 00:08:03,120 --> 00:08:08,740 for now to see if it does everything for us well we are going to put it we are going to say that it 49 00:08:08,740 --> 00:08:20,910 visualize it, it is worth cookies by console dot log ok and this would visualize us that that is that 50 00:08:20,910 --> 00:08:31,170 and if everything is fine we are going to see what happens we are going to take we are going to tell him mario.santos 51 00:08:31,170 --> 00:08:49,299 1 2 3 4 5 and 6 ok and we log in here in data it is giving us all the data 52 00:09:04,980 --> 00:09:11,220 ok it is not giving me that cookie we are going to see it anyway for example from the network if I 53 00:09:11,220 --> 00:09:21,919 pongo aquí aquí sí que la tengo y en aplicaciones no me la está generando no vale no me lo está 54 00:09:21,919 --> 00:09:33,840 generando vale entonces vamos a porque eso puede ser un problema de axios vale por el tema de las 55 00:09:33,840 --> 00:09:43,500 credentials then what I am going to do is we are going to modify a little this way of working with 56 00:09:43,500 --> 00:09:53,500 axios to create a new file I am going to do how to overwrite the action the axios is worth then 57 00:09:53,500 --> 00:09:59,559 I am going to create a new file that I am going to call axios.js 58 00:10:02,500 --> 00:10:19,289 and here we are going to import and import axios from axios ok then what I want to do is 59 00:10:19,289 --> 00:10:28,409 initializar yo darle unas unos valores iniciales a axios y luego con esos valores iniciales ya 60 00:10:30,169 --> 00:10:41,590 configurar el out js a ver si con eso si nos deja vale entonces tenemos el axios vamos a crearnos 61 00:10:41,590 --> 00:10:53,830 a constant that we are going to call distance, for example, which is going to be equal to axios.create, 62 00:10:53,830 --> 00:11:02,350 okay, to initialize it, and here we are going to put it in three keys and here we are going to pass those 63 00:11:02,350 --> 00:11:09,870 values ​​that we want to initialize, for example, the url base, which is where we used to call it api, 64 00:11:09,870 --> 00:11:14,990 because we can only pass it from here so here I am going to put the http 65 00:11:17,110 --> 00:11:29,789 is the slash localhost two points the 4000 which is where we have our server this was 66 00:11:29,789 --> 00:11:47,639 villa blanca no lo voy a ver es villa blanca y dan 2 vale pues villa blanca y dan 2 vale y además 67 00:11:47,639 --> 00:11:55,759 del beige url lo que le voy a pasar es el con credenciales with credencial vamos a pasar este 68 00:11:55,759 --> 00:12:03,320 true ok and this because obviously we export it it is by 69 00:12:09,860 --> 00:12:20,720 ok then good because it is a way to initialize axes it is worth not using it as it is and that's it 70 00:12:20,720 --> 00:12:26,840 we can pass a series of attributes in this case the one of credentials and the url base 71 00:12:26,840 --> 00:12:34,100 then if we come now to the out js well this one is no longer going to be 72 00:12:34,100 --> 00:12:43,830 need axios I'm not going to import it from axios what I'm going to import is 73 00:12:43,830 --> 00:12:49,309 axios from my js 74 00:12:49,309 --> 00:13:01,379 ok then we import axios from 75 00:13:01,379 --> 00:13:07,059 .js by this 76 00:13:10,360 --> 00:13:22,009 this will be more imported the instance 77 00:13:22,809 --> 00:13:25,690 this is fine 78 00:13:25,690 --> 00:13:41,960 the one I have put wrong, what I am going to import is Instance, okay, and here what we are going to put is 79 00:13:41,960 --> 00:13:55,940 Axios, Instance, API, we don't want it anymore, because it no longer exists, okay, here I am going to do the same, 80 00:13:55,940 --> 00:14:12,009 instance ok then we have post instance post instance and this now we are going to see if it would work for us 81 00:14:12,009 --> 00:14:18,769 or not in principle I think that's it ok it's a credential problem this is mario.santos 82 00:14:18,769 --> 00:14:32,659 arroba educa punto madrid punto rg 5 y 6 lograrse vale y aquí 83 00:14:40,480 --> 00:14:51,059 vale me da un error de course me da un error de de course este error es 84 00:14:51,059 --> 00:15:07,850 is for the back-end, okay? So, let's go to the back-end, and in the back-end, 85 00:15:10,129 --> 00:15:20,809 let's see, we're going to go to SRC, in SRC we're going to go to the appjs, you're seeing the code, 86 00:15:20,809 --> 00:15:29,629 not all the time if it is worth ppjs and then here we had where you are the yus course it is worth remembering 87 00:15:29,629 --> 00:15:36,289 that we had also put the origin parameter then in addition to that origin parameter 88 00:15:36,289 --> 00:15:42,070 we are going to put another one that is the one of the credentials so that it sends it with the credentials 89 00:15:42,070 --> 00:15:48,950 is worth the same as we had said in the front that with the wii credential because here I pass 90 00:15:48,950 --> 00:15:57,570 credentials, okay, let's see if that's the case, if he takes it from us, then we try it again 91 00:15:59,529 --> 00:16:13,539 two to roma educa.madrid.org password points 3 4 5 and 6 I see it 92 00:16:13,539 --> 00:16:24,159 well now it is already taking it, you see the touch is here, here it has our touch, 93 00:16:24,159 --> 00:16:31,519 that is, it does not have the director, okay, this is the same, the same problem that was giving me before, 94 00:16:31,519 --> 00:16:40,720 but hey, at least I do have access to that touch, okay, I keep having access to all the 95 00:16:40,720 --> 00:16:52,340 to all my context ok and now it is with that touch is to send it to the back end and there we have to 96 00:16:52,340 --> 00:16:57,480 make several changes ok then what interests me in this video is first to remind you 97 00:16:57,480 --> 00:17:04,599 of when we are taking that touch that we have generated as a cookie first we have to install 98 00:17:04,599 --> 00:17:10,359 the js cookie but then also for security reasons as it cannot be otherwise 99 00:17:10,359 --> 00:17:18,420 hay que ir pasando esas credenciales vale y entonces con las credenciales bueno fijaros 100 00:17:18,420 --> 00:17:26,839 que es solo jugar con axios es meterle esos valores iniciales ese with credencial con a 101 00:17:26,839 --> 00:17:33,319 true variante con esta línea me valdría vale y luego llamar desde aquí en vez de axios punto 102 00:17:33,319 --> 00:17:41,640 post or this one, as we have created it, we have overwritten it, we call it with an instance or as 103 00:17:41,640 --> 00:17:49,220 you have already called it, it is worth and within the outcontext the use effect that in the end what you do is 104 00:17:49,220 --> 00:17:58,940 declare a variable with cookie js medium cookie dot get that what you do is take all those 105 00:17:58,940 --> 00:18:05,299 variables and then questions for with the point and the name of that cookie for which you want to 106 00:18:05,299 --> 00:18:13,640 take information that in this case is touch ok here we have taken it and we have 107 00:18:13,640 --> 00:18:21,970 printed it directly well here I should be showing 108 00:18:21,970 --> 00:18:49,079 and it is that I do not know how it shows me well the case is that I have it here and if not you already know it is worth 109 00:18:49,079 --> 00:18:55,359 in the part of the network that you have that token should appear and if not in the application it should also 110 00:18:55,359 --> 00:19:01,559 appear here directly if it does not appear it is because of the theme of course it is good because this video I 111 00:19:01,559 --> 00:19:06,319 leave it here now the next one that is already the last one that I do with this theme of the 112 00:19:06,319 --> 00:19:08,920 privates 113 00:19:11,960 --> 00:19:16,079 well, we have already finished and so we make all the changes that are made in the back-end 114 00:19:18,759 --> 00:19:26,200 and we already leave everything done, it is worth practically exterminating the development, I do it in two 115 00:19:26,200 --> 00:19:31,539 videos because if there are several changes then I think that if I do not think that it is better in two and so 116 00:19:31,539 --> 00:19:37,539 no volveros la cabeza demasiado loca vale hasta aquí es fácil porque escoger la cookie ya está 117 00:19:37,539 --> 00:19:47,059 y el yusef efe vale pero ahora bueno el volver a el jw t volver a ese token que le estamos 118 00:19:47,059 --> 00:19:54,420 enviando desde el cliente desde el front al back end y ahora una vez que lo hemos verificado volver 119 00:19:54,420 --> 00:19:59,559 a enviárselo al back end os podéis volver un poco más locos vale entonces el siguiente vídeo 120 00:19:59,559 --> 00:20:01,599 I'll do that. A greeting guys, see you later.