WEBVTT 00:03.820 --> 00:05.290 Hey, did I run that this year? 00:05.290 --> 00:06.790 And welcome to another video. 00:06.970 --> 00:09.270 Now, so far, we are doing absolutely fine. 00:09.280 --> 00:11.050 We are able to send the tokens even. 00:11.050 --> 00:14.770 We are able to intercept the token in the order itself and it's going good. 00:14.770 --> 00:16.930 We have protected our routes as well. 00:16.930 --> 00:21.040 But now I want to discuss a little bit more and would like to introduce you some of the errors that 00:21.040 --> 00:23.020 we have already introduced in the code. 00:23.020 --> 00:25.120 Yes, some of you might have figured it out. 00:25.120 --> 00:27.010 Some of you might even have a thought about it. 00:27.010 --> 00:30.910 But yes, there are some of the issues in the code that I will walk you through. 00:30.940 --> 00:34.660 Even in the auth file, there is a slight issue which you won't be able to see. 00:34.660 --> 00:38.860 Even you will not get that bug right now, but it's important. 00:38.860 --> 00:45.460 So what we want to do next, so far I've taught you that you can send that token using the beta open, 00:45.460 --> 00:46.090 all of that. 00:46.090 --> 00:50.230 But now I want to introduce you that how you can send the token in the cookies itself. 00:50.230 --> 00:52.630 We haven't discussed that and that's an important aspect. 00:52.630 --> 00:58.390 But remember, just please remember or take down the note of this one that this cookie is only valid 00:58.390 --> 01:02.950 for anybody who is consuming our application on the web itself, which is the browser. 01:03.010 --> 01:07.990 If you are going to send these cookies in something like React Native Application or Flutter, it is 01:07.990 --> 01:10.450 another of the nightmare in those applications. 01:10.450 --> 01:15.700 It's better to send those token itself and whenever the request is being made, it's it comes up as 01:15.700 --> 01:18.040 an header in the authorization beta set. 01:18.040 --> 01:20.500 So that is what we are going to be doing in this video. 01:20.560 --> 01:23.290 So let me first introduce you to the postman so far. 01:23.290 --> 01:26.800 If I just go ahead and send the login request, it gives me a token back. 01:26.800 --> 01:27.760 That is fine. 01:27.760 --> 01:32.260 But if you check out the body just near the body, there is a cookie section where all the cookies, 01:32.260 --> 01:35.740 if something is being set, they can actually come in up here. 01:35.740 --> 01:37.480 So let's go ahead and work out with that. 01:37.480 --> 01:43.510 So first, I'm going to go ahead and work on with the app and I will go up into this login route. 01:43.510 --> 01:46.090 And we have seen that this is how we can send this one. 01:46.270 --> 01:50.770 Now, let's just say that I don't want to use this JSON sending format. 01:50.770 --> 01:52.840 I would like to rather set up the cookie. 01:52.840 --> 01:59.530 So I'm going to go ahead and write a comment for you if you want to use cookies. 02:00.140 --> 02:00.490 Okay. 02:01.060 --> 02:02.650 So how do we use cookies? 02:02.650 --> 02:05.890 And actually that's fairly easy, not that much stuff. 02:05.890 --> 02:07.900 First, what it requires is the option. 02:07.900 --> 02:09.970 So let's go ahead and create the options. 02:09.970 --> 02:13.480 And options can be as complex as you want for the cookies. 02:14.260 --> 02:16.600 We are not going to go that much of the complexity. 02:16.990 --> 02:20.200 We would rather like to keep it absolutely easy. 02:21.060 --> 02:26.610 The two major thing that you're going to see in the cookies itself is first, when the cookies are expiring 02:26.610 --> 02:29.880 and are the cookies only readable by the back end only. 02:29.880 --> 02:30.810 So let's go ahead and do that. 02:30.810 --> 02:31.720 It's really easy. 02:31.740 --> 02:38.010 So in this one first we are going to go ahead and say expires, expires. 02:39.490 --> 02:40.120 There we go. 02:40.120 --> 02:40.870 So. 02:41.100 --> 02:41.700 Expires. 02:41.710 --> 02:42.120 Come on. 02:42.130 --> 02:43.210 I can write that. 02:43.810 --> 02:44.450 There we go. 02:44.470 --> 02:45.580 So what, this expired. 02:45.610 --> 02:49.380 Does it actually ask you to give us a date when the cookies are going to expire? 02:49.390 --> 02:50.500 So there are a lot of formats. 02:50.500 --> 02:51.680 You can check them online. 02:51.700 --> 02:56.770 I'm going to go ahead and use a simple format of providing a date when this cookie actually expires. 02:56.890 --> 03:00.310 So I'm going to go ahead and say that, hey, first use date. 03:00.580 --> 03:03.130 Now, this is going to give us the exact current date. 03:03.130 --> 03:08.170 And then on top of that, I want to add, let's just say three days or two days, whatever you like 03:08.170 --> 03:08.710 to go. 03:08.860 --> 03:09.970 I'll go for three days. 03:09.970 --> 03:20.560 So all I have to do is three and then multiply it by day and then multiply it by a minute and then seconds 03:21.400 --> 03:24.300 and then finally thousand. 03:24.310 --> 03:25.780 So this is the syntax. 03:25.780 --> 03:27.370 And no, I'm not making this up. 03:27.370 --> 03:31.360 This is really weird, but that's how the cookie expires. 03:31.390 --> 03:32.450 Option works on. 03:32.470 --> 03:35.380 I would also like to add another of the property up here. 03:35.380 --> 03:41.320 So I'll come up here and I will also say that HTTP only is going to be true. 03:41.350 --> 03:46.480 Now, as soon as you mark this flag up, what this will do, it will allow the cookies to be read only 03:46.480 --> 03:50.590 by the back end server, not anybody or any script in the front end itself. 03:50.590 --> 03:54.880 But we will be able to see that in The Postman, because that's how it is designed for the postman. 03:55.380 --> 03:58.750 Okay, now it's time to just go ahead and send this up here. 03:58.750 --> 04:04.530 So notice we are not sending the status just like that, we will be sending a cookie in this case. 04:04.540 --> 04:05.590 So how do we do that? 04:05.590 --> 04:06.670 It's actually super easy. 04:06.670 --> 04:09.300 We go ahead and say rez dot status. 04:09.310 --> 04:10.720 So first raise the status. 04:10.720 --> 04:13.240 I'm going to go ahead and say it is 200 all good. 04:13.240 --> 04:16.450 And then I can go ahead and say cookie, not cookies. 04:16.450 --> 04:17.530 It is cookie. 04:17.530 --> 04:21.820 So the cookie that I'm sending up is going to be token y token, you might ask. 04:21.820 --> 04:23.320 We can can we name it anything. 04:23.320 --> 04:25.630 Yes, you can name it anything as you like. 04:25.630 --> 04:31.390 But in the middle, where I'm expecting that the cookies is coming up in the name of the token, that's 04:31.390 --> 04:33.610 why I'm calling it as token itself. 04:34.490 --> 04:34.900 Okay. 04:34.930 --> 04:36.940 What are the other parameters I have to pass on? 04:36.940 --> 04:38.410 What is the value of this cookie? 04:38.410 --> 04:39.610 So the name is token. 04:39.610 --> 04:43.900 The value is token itself, of course, and then you pass on these options. 04:43.900 --> 04:45.280 So there we go, nice and easy. 04:45.310 --> 04:50.440 Now, further down the road, if you want that, probably some application might not be handled, be 04:50.470 --> 04:51.790 able to handle this cookie. 04:51.790 --> 04:55.000 So in top of that, I'll add a JSON response. 04:55.000 --> 05:01.300 And in the JSON response, I'm going to go ahead and give it simply a success of true, because that's 05:01.300 --> 05:04.870 how maybe we are designing the application like that. 05:05.050 --> 05:07.990 If I can get that properly, that would be awesome. 05:07.990 --> 05:14.260 So success is true and maybe we also want to send the token as well and maybe for some reason we want 05:14.260 --> 05:16.120 to send the user itself again. 05:16.120 --> 05:18.070 It's up to you how you want to send that. 05:18.100 --> 05:19.510 Now, this is not going to work. 05:19.510 --> 05:23.080 Let me save that and show you a couple of reasons why this is not going to work. 05:23.080 --> 05:25.390 So we have changed the route, the log in this time. 05:25.390 --> 05:31.660 If I go ahead and hit the send here, notice it says, hey, there is a token being given to us and 05:31.660 --> 05:34.720 we are going to get all these information. 05:34.720 --> 05:37.450 And in the body itself we are receiving all the data. 05:37.450 --> 05:38.590 So this is nice. 05:38.590 --> 05:45.070 So we were able to send the cookie from the backend to the front end and this cookie is getting stored 05:45.070 --> 05:45.880 in the browser. 05:45.880 --> 05:50.050 We can see the notice here, the token we calling it as token, the value is there. 05:50.050 --> 05:54.160 You cannot actually go ahead and use the backspace or change this token because this is not accessible 05:54.160 --> 05:55.060 by the front end. 05:55.180 --> 05:58.990 And we we are telling that when it expires and this is http only. 05:58.990 --> 06:00.790 So this is all good, this is all nice. 06:00.910 --> 06:06.160 But the problem actually starts when you try to read the cookie itself and probably there is some header. 06:06.820 --> 06:10.900 Okay, so it looks like this is not much of a big issue of the headers. 06:10.900 --> 06:13.390 I'll set it up probably later on. 06:13.540 --> 06:14.980 Not much of a big issue right now. 06:15.310 --> 06:17.590 Moving on to the part where things go wrong. 06:18.130 --> 06:23.380 So how we're going to go wrong this time that obviously now we need to access the root, which is the 06:23.380 --> 06:24.070 dashboard. 06:24.070 --> 06:26.830 This is where the problem actually are going to kick in, hopefully. 06:26.860 --> 06:27.320 Okay. 06:27.340 --> 06:31.600 So let's go ahead and see that if now we have the cookie and we have written the auth that hey, look 06:31.600 --> 06:36.940 for the token in the cookie itself, we are not sending it in authorization, we are not sending it 06:36.940 --> 06:40.990 header, just collect it automatically from the cookie itself because you have set it up there. 06:40.990 --> 06:45.910 Now let's go ahead and send this one and we are not able to receive anything inside the body. 06:45.910 --> 06:46.570 It says error. 06:46.570 --> 06:47.050 So why? 06:47.050 --> 06:48.310 The error is coming in? 06:48.310 --> 06:52.000 The error is coming in because something is wrong, obviously. 06:52.000 --> 06:54.700 Now let's go ahead and try this out, that how this is going to work. 06:54.700 --> 07:00.310 So in the outset, I have actually tried it a little bit, but I'm going to go ahead and try this again 07:00.310 --> 07:00.940 for you. 07:00.940 --> 07:07.060 So what I did is if nothing is working, obviously the first step is actually to go ahead and log that. 07:07.060 --> 07:10.180 So we're going to go ahead and say, I want to request cookies. 07:10.180 --> 07:14.500 So all the cookies that are coming in, I want to see that what is coming in, because I'm trying to 07:14.500 --> 07:15.970 extract the token from here. 07:15.970 --> 07:20.350 I can see in the postman that the token was there, but I'm not able to see that. 07:20.350 --> 07:21.910 And the reason is really simple. 07:21.910 --> 07:27.610 If I go ahead and send this dashboard and I look for that, it says, Hey, this is undefined, so that 07:27.610 --> 07:29.320 means your cookies are not coming in. 07:29.320 --> 07:32.320 Y You might be guessing in such case. 07:32.320 --> 07:34.900 Go ahead and look for the middleware in this case. 07:34.900 --> 07:38.380 Again, just like we have expressed JSON which was given to. 07:38.520 --> 07:42.030 US by default, we were able to read any JSON data that was coming in. 07:42.060 --> 07:44.340 Without this, you wouldn't be able to read the JSON data. 07:44.370 --> 07:48.630 Similarly, for cookies, you cannot actually go ahead and read the cookies directly. 07:48.660 --> 07:51.640 Now you might be saying, hey, can we write express dot cookies like this? 07:51.660 --> 07:52.420 I wish. 07:52.440 --> 07:56.190 I think we should be able to write this, but that's not the case. 07:56.220 --> 08:00.480 I wish Express could give us, just like they have given us JSON, they should have given us the cookies 08:00.480 --> 08:01.230 directly. 08:01.530 --> 08:03.260 But sadly, that's not the case. 08:03.300 --> 08:06.990 In that case, you have to look for another package which is known as cookie parser. 08:06.990 --> 08:11.820 Again, by looking at the weekly downloads, you can see that how crazy, insane, popular this package 08:11.820 --> 08:12.200 is. 08:12.210 --> 08:16.320 I think express guys should design something of their own and should work like that. 08:16.320 --> 08:22.890 So let's go ahead and copy this and we will go back and we'll kill this up and we'll install this one 08:22.890 --> 08:25.770 up as cookie parser and there we go. 08:25.770 --> 08:29.460 Cookie parser is they're up and running and all we've got to do is really simple. 08:29.460 --> 08:30.750 Look into the documentation. 08:30.750 --> 08:35.990 It says, hey, just bring in the cookie parser like this and then use this as a middleware to say AB 08:36.000 --> 08:36.680 dot use. 08:36.690 --> 08:38.790 So pretty easy, very, very standard. 08:39.090 --> 08:42.780 I'm going to go ahead and say, hey, I'll introduce you here. 08:42.960 --> 08:49.140 And then once I have this one, I'm going to go ahead and say, hey, now I want to use this cookie 08:49.140 --> 08:49.980 parser. 08:49.980 --> 08:54.600 And just like we were able to use file, upload and all of that, it was giving us files. 08:54.600 --> 08:57.570 This time we will be able to get resident cookies. 08:57.570 --> 09:00.840 So once this is installed, let's go ahead and try to hit the route again. 09:00.840 --> 09:06.930 So I go ahead and say hit that we are still getting error, but that's not to worry because we are now 09:06.930 --> 09:09.210 we can see that we are able to grab the token. 09:09.720 --> 09:11.820 So see we are able to grab the token. 09:11.820 --> 09:16.230 But still we have got one error which I'm pretty sure most of you have ignored, but I have deliberately 09:16.230 --> 09:18.510 introduced this one and that's why this video is here. 09:18.510 --> 09:21.090 So this says cannot read the property replace. 09:21.090 --> 09:22.350 Why is that? 09:22.350 --> 09:27.300 Since you are getting the token, why are you having this replace of undefined? 09:27.300 --> 09:30.030 Now this comes where the classic JavaScript kicks in. 09:30.030 --> 09:35.880 So in the old section, if you notice we are saying, hey, just go ahead and first try to grab the 09:35.880 --> 09:37.200 token from the header. 09:37.200 --> 09:40.560 Whatever you grab, you just go ahead and run replace on that. 09:40.560 --> 09:42.720 So we are instructing that whatever you grab. 09:42.720 --> 09:46.770 I didn't say if you grab something or if you grab undefined on all of that. 09:46.770 --> 09:51.270 It is trying to just run this method which is replace the beer and that's why it is creating a problem. 09:51.270 --> 09:55.690 So in case you are chaining of these things, then obviously things should go bad. 09:55.710 --> 10:01.050 Now in the case that if you want to grab the token itself, just go ahead, we can move on and we can 10:01.050 --> 10:03.960 say that, hey, I want to grab the token just like this. 10:03.960 --> 10:07.740 So go ahead and cut this out and we're going to go ahead and place this first. 10:07.740 --> 10:09.630 And let's go ahead and use the pipe here. 10:09.960 --> 10:11.490 Remove the pipe from here. 10:11.550 --> 10:13.470 Now, what is happening in this case? 10:13.560 --> 10:18.870 In this case first is trying to grab the token and rest of the codes are again working after that. 10:18.870 --> 10:24.000 Now, since it's not any grabbing, any headers and all of that, it will still try to run this because 10:24.000 --> 10:28.710 it's an odd statement, but this will not give us a problem because the token is already being set and 10:28.710 --> 10:30.270 there is something inside the value. 10:30.390 --> 10:32.910 In fact, this request had a better setting. 10:33.150 --> 10:36.690 Usually in the production you are going to see that this is written at the very end of it. 10:36.690 --> 10:40.590 So let's go ahead and cut that and all of your packages that you are trying to write. 10:40.600 --> 10:43.800 Just make sure you go ahead and place them at the very end. 10:43.950 --> 10:45.180 Replace this one also. 10:45.180 --> 10:48.060 There we go and remove this one. 10:48.060 --> 10:48.720 There we go. 10:49.050 --> 10:53.760 So remember, it's not a problem, it's not an error, it's just how the JavaScript functions. 10:53.760 --> 10:57.960 So first we are trying to grab it from the cookie, then we are trying to grab it in the body. 10:57.960 --> 11:03.150 You can also grab it from the params or any place else that you want. 11:03.150 --> 11:06.450 And then after that we are trying to grab it from the header itself. 11:06.720 --> 11:09.780 Looks like I'm having a bit of an itchy throat anyways. 11:09.780 --> 11:12.750 Let's go ahead and see now if we are able to grab all these things. 11:12.750 --> 11:17.790 So let's go ahead and try it one more time and I go ahead and I'm able to extract the information this 11:17.790 --> 11:18.240 time. 11:18.510 --> 11:19.650 So this is quite a lot. 11:19.710 --> 11:24.750 But you know, you have understood quite a basics of it and by this point you also now know how to handle 11:24.750 --> 11:30.030 the cookies so you can send the token in multiple ways directly in the JSON and the cookies, and there 11:30.030 --> 11:30.570 is more. 11:30.600 --> 11:32.820 Now there is a small assignment for you as well. 11:32.850 --> 11:37.380 I've showed you that how you can set the cookies and we can see that the these cookies are going to 11:37.380 --> 11:41.820 expire on Wednesday 20th and today is 17 October. 11:41.820 --> 11:44.250 So it's going to take three days itself. 11:44.280 --> 11:49.890 Now, I want you to design a simple functionality in which we will again hit the same route, which 11:49.890 --> 11:51.570 is going to be the log in itself. 11:51.600 --> 11:56.460 I want to expire these cookies, so go ahead, read on the internet that how you can expire the cookies. 11:56.460 --> 12:00.300 You're going to find a variety of methods and I want you to implement at least one of them. 12:00.300 --> 12:05.460 Click a photo that how you applied expiration of the cookies or aka expiration of the token. 12:05.700 --> 12:10.260 Go ahead, click a photo tag on Instagram and I would love to see that how you have researched it on 12:10.260 --> 12:12.570 the Internet and how you came up with the solution. 12:12.570 --> 12:13.620 Let's go ahead and catch up. 12:13.620 --> 12:14.430 It makes video.