WEBVTT 00:03.200 --> 00:04.010 Hey there, everyone. 00:04.100 --> 00:04.580 They share. 00:04.580 --> 00:06.020 And welcome to another video. 00:06.050 --> 00:08.900 In this video, we're going to design our own custom middleware. 00:08.900 --> 00:14.270 And this only video will have will give you so much of clarity about middleware, how to use them, 00:14.270 --> 00:17.240 what role they do play, a whole bunch of other things as well. 00:17.240 --> 00:19.190 It's going to be super, super easy. 00:19.190 --> 00:22.640 So let's go ahead and see that how we can actually go ahead and work on with that. 00:22.640 --> 00:25.160 So here's our route, really simple dashboard. 00:25.160 --> 00:26.420 We send a request to that. 00:26.420 --> 00:28.550 We are able to get the secret information. 00:28.670 --> 00:32.660 Now, a couple of things that you should really know about how the data actually travels. 00:32.660 --> 00:35.510 There are a lot of places, how it travels in the headers. 00:35.660 --> 00:39.470 There is now an authorization section which you don't really need that much. 00:39.470 --> 00:44.120 You can just get away with just the headers, but it can also travel via cookies and a whole bunch of 00:44.120 --> 00:45.530 bodies, a whole bunch of other things. 00:45.530 --> 00:49.640 So we need to take care of all of them in case this is our application design. 00:49.640 --> 00:54.470 In case your application design, expect the data just from the headers or maybe just from the body 00:54.470 --> 00:55.340 or just from the cookie. 00:55.340 --> 00:57.260 You can just remove the code at that time. 00:57.260 --> 00:57.860 So pretty good. 00:58.520 --> 00:59.780 So let's go ahead and write that. 00:59.780 --> 01:02.990 Now, writing a simple middleware is not that tough. 01:02.990 --> 01:04.310 It's actually super easy. 01:04.310 --> 01:07.580 It just like defining a method itself, nothing more than that. 01:07.580 --> 01:10.700 So I'm going to go into JS and there we go. 01:10.730 --> 01:14.690 Now if you notice closely in the strategy, it says Verify the token. 01:14.690 --> 01:17.630 Verification of the token can only be done by the JSON. 01:17.630 --> 01:22.460 We saw that in the documentation part as well, that there are a lot of methods given to us. 01:22.460 --> 01:27.470 So if I go back up here a little bit, I can go ahead and definitely sign the token, but I can also 01:27.470 --> 01:28.910 go ahead and verify my token. 01:28.910 --> 01:32.540 If I scroll a little bit more, you can see that there is a verification. 01:32.570 --> 01:36.140 Of course I have to pass in the token and my secret information. 01:36.380 --> 01:38.630 And further down you can also go ahead and use a callback. 01:38.630 --> 01:42.200 We won't be doing that much, so let's go back up here first. 01:42.320 --> 01:47.360 Let's go ahead and say that I want to have a JWT, which obviously is going to be coming up from the 01:47.360 --> 01:50.930 package that we have installed, which is JSON Web token. 01:50.960 --> 01:51.500 Okay. 01:51.560 --> 01:56.600 Now, optionally, you can go ahead and bring in the model as well. 01:56.600 --> 01:57.950 Why you might ask? 01:57.950 --> 02:01.910 I'll explain that that model is optional here. 02:03.260 --> 02:03.740 Okay. 02:04.100 --> 02:05.090 Optional. 02:05.120 --> 02:05.870 There we go. 02:05.870 --> 02:10.160 And I'll tell you a couple of strategies that a lot of people follow so that it gives you a more clear 02:10.160 --> 02:11.720 and open minded idea about that. 02:11.720 --> 02:13.010 So don't you worry on that part. 02:13.160 --> 02:18.590 So let's go ahead and call this one as simply auth, feel free to call it as a result is logged in whatever 02:18.590 --> 02:19.160 makes sense. 02:19.460 --> 02:21.260 Whatever gives you more clarity on that. 02:21.260 --> 02:24.560 I think auth is pretty good or is ought is also a great name. 02:24.560 --> 02:26.210 So this is how it's going to work. 02:26.210 --> 02:27.500 We are going to have a request. 02:27.500 --> 02:28.760 We are going to have a response. 02:28.760 --> 02:33.050 And most importantly, don't forget that next is the most important thing. 02:33.050 --> 02:35.930 Without the next, this application is not going to work. 02:36.140 --> 02:39.530 Now, another most important thing is how we are going to grab that token. 02:39.530 --> 02:42.140 This is the most important information. 02:42.140 --> 02:44.510 Let me first tell you how the token actually traveled. 02:44.510 --> 02:47.000 That will give us more information of how to do that. 02:47.150 --> 02:52.760 Now, the most common way of traveling the token itself is first, let's grab the token. 02:52.760 --> 02:58.370 And by the way, I can go ahead and click on this login route and you can use the save as in fact just 02:58.370 --> 03:04.460 open up a new tag and write the dashboard in it, send a get request and then click on the save as the 03:04.460 --> 03:06.260 dropdown button, save as. 03:06.260 --> 03:08.270 And now you can go ahead and save this one. 03:08.270 --> 03:15.320 So what you're going to name, you can just replace that to dash board and then select you won't be 03:15.320 --> 03:19.700 having a workspaces and much of the application being designed if there is you can just click on that 03:19.700 --> 03:20.960 and then you can save this. 03:20.960 --> 03:21.980 Now it will give you here. 03:21.980 --> 03:24.230 So a quick access you can get registered and all of that. 03:24.230 --> 03:25.640 So this is always a good idea. 03:25.700 --> 03:27.290 So let's go ahead and send that. 03:27.740 --> 03:31.640 So how these tokens actually travel, they travel usually via the headers. 03:31.640 --> 03:35.630 You come up here and you write simply authorization. 03:35.630 --> 03:38.720 So this is exact word that is being placed inside the header. 03:38.750 --> 03:42.680 Now, the token that you are getting here, you need to actually copy that. 03:42.680 --> 03:47.960 Without the codes I won't repeat, I will repeat without the codes. 03:47.960 --> 03:54.890 So copy this and I'll go back to the dashboard and then you write a very special key keyword which is 03:54.890 --> 03:58.010 be browser and again really important. 03:58.010 --> 04:02.540 You need to write that if you'll go on to the website of JWT, they will also mention that. 04:02.540 --> 04:04.370 So let me go ahead and bring back. 04:04.820 --> 04:13.070 So let me open up Google JWT, please open the main website JWT IO and you're going to see this exact 04:13.070 --> 04:15.770 same information that how to pass on this. 04:16.340 --> 04:18.800 So I think inside the introduction. 04:19.980 --> 04:22.380 So that you never actually forget that part. 04:23.710 --> 04:26.110 So this is the information and how it works. 04:26.120 --> 04:28.540 So notice here it says this is the authorization. 04:28.540 --> 04:32.050 Then you have to write the keyword bearer and then you have to pass on the token. 04:32.050 --> 04:36.850 This is how exactly the format works and even in case you use any old service or anything, this is 04:36.850 --> 04:40.330 how exactly you have to use all that time in case this is passing. 04:40.510 --> 04:45.220 So notice here we have written the beta, put up a space and then pays the token as it is. 04:45.220 --> 04:48.250 I know this sounds weird, but this is how mostly it travels now. 04:48.250 --> 04:53.290 This is even so much of a common syntax that they have even done the abstraction on here in the Postman. 04:53.290 --> 04:58.450 If you'll go to the authorization section and click on dropdown now even you can select the beta token 04:58.450 --> 05:01.480 and directly just paste the token here. 05:01.660 --> 05:07.450 Now this actually is a little bit bad for the developers that hiding this much information, but it's 05:07.450 --> 05:08.380 good for testers. 05:08.380 --> 05:09.610 So that is why it is there. 05:09.610 --> 05:14.440 I'm going to go ahead and remove this now and I'll also remove it from here as well that we don't want 05:14.440 --> 05:17.470 to have it as of now and I'll even check mark that. 05:17.620 --> 05:18.580 Let's even close that. 05:18.580 --> 05:19.330 Yeah, that's good. 05:19.660 --> 05:19.960 Okay. 05:19.990 --> 05:24.550 Now that you have this much information, what we are going to do with this information, now we know 05:24.550 --> 05:28.870 exactly where to look for the token, the most common place, which is the header itself. 05:28.870 --> 05:31.150 So we're going to say, hey, I want to access the request. 05:31.150 --> 05:34.420 And inside that I want to go ahead and get the access of header. 05:34.450 --> 05:36.550 Which header specifically you might ask? 05:36.550 --> 05:43.000 I want to go ahead and access the header which says authorization and this needs to be spelled up very 05:43.000 --> 05:49.030 carefully and I need to do pay special attention there because I make a lot of typo now in this authorization. 05:49.030 --> 05:53.680 As soon as you're going to get you will get bearer space and the token you don't need all of that, 05:53.680 --> 05:54.940 you just need the token part. 05:54.940 --> 06:00.070 So you have to use a little bit of the JavaScript and you will say, I want to replace it with something. 06:00.070 --> 06:01.690 Now what do you want to replace it? 06:01.690 --> 06:08.290 I want to replace the only part which says, let's just say be aware because I know this is how it always 06:08.290 --> 06:10.630 comes in and there is a space after that as well. 06:10.630 --> 06:14.200 And I want to replace that part only with nothing. 06:14.200 --> 06:15.520 So that's how you do it. 06:16.630 --> 06:22.600 Now, in the ideal case, or hopefully you have actually grabbed the axis of the authorization token, 06:22.600 --> 06:25.600 but this is the one place only we have to take care of other places. 06:25.600 --> 06:30.880 So we're going to use an R syntax and now let's go ahead and see that the token actually come up into 06:30.880 --> 06:34.000 the cookies as well, and we're going to name that as token. 06:34.000 --> 06:35.530 Again, it's your application. 06:35.530 --> 06:39.820 You need to make a flow of that and it can come up into a couple of other places. 06:39.820 --> 06:41.380 Let me go ahead and move that. 06:41.410 --> 06:46.450 It can also come up into a couple of other places apart from token, maybe it's coming up into the body 06:46.450 --> 06:47.170 itself. 06:47.350 --> 06:50.710 Really weird, but I have seen it coming up into the body as well. 06:50.710 --> 06:55.990 So request body token again, if you don't support that, just go ahead and remove this code. 06:55.990 --> 07:02.080 And similarly you get the idea it might come up into token cookie header a bunch of other places as 07:02.080 --> 07:02.290 well. 07:02.290 --> 07:07.750 Maybe it's coming up into URL, maybe that's a password reset you are bringing in, so that's up to 07:07.750 --> 07:08.080 you. 07:08.350 --> 07:13.060 Anyways, once we have grabbed the token, we are pretty sure that the token is there. 07:13.060 --> 07:18.790 We can also make a couple of more code here that if the token is undefined or the authorization is undefined, 07:18.790 --> 07:20.320 we can pass on different errors. 07:20.320 --> 07:22.090 Anyways, it's your application. 07:22.210 --> 07:22.720 Okay. 07:22.840 --> 07:28.210 We're going to worry just about one case that if the token is not present, if the token is not present, 07:28.210 --> 07:32.230 I'm going to go ahead and simply return that resource status. 07:32.230 --> 07:39.820 I'm going to go ahead and return with 403 and we'll simply go ahead and send I can send a JSON response, 07:39.820 --> 07:44.170 but I'm going to say in this case token is missing. 07:44.410 --> 07:46.210 That makes sense in this case. 07:46.480 --> 07:51.670 Now, most importantly, notice here, I'm not using the next this next should be used in this case. 07:51.670 --> 07:56.050 I don't need to because I'm just returning the application and it's not working further down the road. 07:56.080 --> 08:02.050 Otherwise, if this would be case, I would be actually going ahead and giving message to the user to 08:02.050 --> 08:03.010 block it or something. 08:03.010 --> 08:06.490 But in this case, I'm going to just go ahead and exit the application just right here. 08:07.210 --> 08:10.840 Once this is there, I'm pretty sure that the token is here by now. 08:10.840 --> 08:15.280 So I'm going to go ahead and use the tri catch block and in the catch block, I'm going to go ahead 08:15.280 --> 08:18.820 and say I'm going to simply go ahead in the try block. 08:18.820 --> 08:22.690 I will verify the token in case the token is not verified. 08:22.690 --> 08:24.640 That case I'll handle in the catch. 08:24.640 --> 08:26.530 So let's first handle the catch port. 08:26.530 --> 08:31.780 So in this case, let's go ahead and simply return address dot status. 08:32.080 --> 08:36.790 And this time the status is going to be 4 to 1 because a bad thing is being passed on to us in the back 08:36.790 --> 08:36.910 end. 08:36.910 --> 08:42.850 So we're going to simply say send and we're going to simply say invalid token. 08:42.850 --> 08:43.660 Okay, nice. 08:43.660 --> 08:45.280 Now let's handle the tripod. 08:45.640 --> 08:48.700 So we have a token, but we don't know whether this token is verified or not. 08:48.700 --> 08:50.050 So we need to verify that. 08:50.050 --> 08:51.040 How we can do that. 08:51.040 --> 08:56.500 Of course, with the JWT, JWT simply gives us that, hey, you can use a verify method to verify the 08:56.500 --> 08:56.920 token. 08:56.920 --> 09:00.550 Just give me the token directly to token. 09:00.550 --> 09:01.030 Okay. 09:01.060 --> 09:02.020 What else do you need? 09:02.020 --> 09:03.310 I need your secrets. 09:03.310 --> 09:08.920 So I'm going to say process dot, envy dot, whatever we call our secret. 09:09.490 --> 09:10.240 Secret key. 09:10.240 --> 09:10.690 Yeah. 09:12.410 --> 09:13.340 There we go. 09:13.340 --> 09:14.930 And Dot. 09:15.780 --> 09:18.050 OC what this is going to return us. 09:18.060 --> 09:19.740 I have no idea what it will return me. 09:19.740 --> 09:22.860 So I'm going to go ahead and call this one as decode. 09:22.860 --> 09:25.320 But I have at this point, I have no idea what this is. 09:25.320 --> 09:29.790 So I'm going to go ahead and simply go ahead and console.log this that hey, just print this information, 09:29.790 --> 09:32.040 whatever this is, and I'll figure it out later on. 09:32.040 --> 09:34.560 What is going to happen with this information? 09:34.560 --> 09:35.030 Okay. 09:35.400 --> 09:37.980 After that, I'm going to go ahead and simply return next. 09:37.980 --> 09:43.410 This is the most important part and this usually goes at the end of your project or your line that, 09:43.410 --> 09:47.370 hey, no matter what happens, I need to pass on this thing into the next one. 09:47.370 --> 09:50.850 Remember, the video of the middleware we talked about is logged in next? 09:50.850 --> 09:51.960 Yeah, exactly that. 09:52.560 --> 09:52.700 Okay. 09:52.830 --> 09:56.070 So this is all done now how you're going to work with that. 09:56.430 --> 10:00.000 This method needs to be imported wherever you want to use it. 10:00.000 --> 10:01.950 So first, obviously we need to export that. 10:02.190 --> 10:08.850 So we're going to go ahead and say module dot exports and let's go ahead and simply export this auth. 10:08.880 --> 10:09.630 Nice. 10:10.080 --> 10:11.730 We will come back onto this method. 10:11.730 --> 10:13.680 But again, let me quickly summarize that. 10:13.680 --> 10:16.260 We first are hunting for token at multiple places. 10:16.260 --> 10:21.060 You might head for one place and then we are saying if the token is not present, we will not allow 10:21.060 --> 10:21.750 you to go further. 10:21.750 --> 10:24.420 We'll just end it here by returning a response here. 10:24.690 --> 10:29.640 Now, in case the token is there, then we are simply going ahead and use JWT to decode the information 10:29.640 --> 10:31.020 whatever is present in the token. 10:31.020 --> 10:32.580 I have no idea what that is. 10:32.700 --> 10:36.210 And in that, in the other case, the token is not a valid token. 10:36.210 --> 10:37.200 Okay, good. 10:37.500 --> 10:39.250 Now moving on to the app dogs. 10:39.270 --> 10:41.820 Let's import this just like we have imported other stuff. 10:41.820 --> 10:48.030 So let's go ahead and say, hey, I want to import this auth method which is going to come up from require 10:48.360 --> 10:51.330 and this time this is going to come up from the same directory. 10:51.330 --> 10:53.910 We have middleware and inside that we have. 10:53.910 --> 10:55.740 AUTH How do we use this? 10:55.740 --> 10:57.660 Auth This really, really simple. 10:57.660 --> 11:02.790 You go ahead wherever you are defining your route, you go ahead and add this as a middleware and that's 11:02.790 --> 11:03.120 it. 11:03.120 --> 11:04.680 I told you it happens in between. 11:04.680 --> 11:08.160 So if you want to check up for admin as well, you can go ahead and say is admin. 11:08.160 --> 11:11.280 So you can define more middleware like this as many as you wish. 11:11.280 --> 11:15.270 In this case, this is the auth that we want to have and a comma, don't forget that. 11:15.390 --> 11:17.970 So this is all what we have done so far. 11:18.000 --> 11:20.730 Let's go ahead and check that whether it is working or not. 11:20.910 --> 11:26.400 If I go ahead and send this information right now, now notice we are not able to get the secret information, 11:26.400 --> 11:29.490 but we are seeing an error which says cannot read the property. 11:29.520 --> 11:32.160 Of course these errors should be handled more better way. 11:32.160 --> 11:35.040 Right now, throwing up just an error like this is not a good. 11:35.040 --> 11:40.170 But still we are actually stopping the user there and we are throwing up an error there and all the 11:40.170 --> 11:44.430 response code and everything, we can actually make it a little bit more polished, which surely we 11:44.430 --> 11:45.420 will do in the next section. 11:45.420 --> 11:46.320 But this is good. 11:46.650 --> 11:49.050 Now let's go ahead and see if we are able to log in. 11:49.050 --> 11:53.070 Now first, I'm going to go ahead and grab this token which is still valid. 11:53.070 --> 11:54.360 It's not 2 hours yet. 11:54.570 --> 11:59.340 Make sure you carefully copy this because the codes are not allowed. 11:59.700 --> 12:05.040 Let's go into the headers of dashboard, make sure you are the dashboard and here we are going to go 12:05.040 --> 12:07.530 ahead and say, hey, I want to use authorization. 12:07.830 --> 12:14.400 And for that I'm going to go ahead and pass on beta and then whatever the token is there, if the token 12:14.400 --> 12:17.670 is also there in the header, let's go ahead and send this. 12:17.670 --> 12:20.400 Now I'm able to get the secret information. 12:20.400 --> 12:21.930 This is so common of a thing. 12:21.930 --> 12:24.600 Let me show you a couple of more stuff in the cookies. 12:24.600 --> 12:27.120 I go ahead and send this up and there we go again. 12:27.120 --> 12:27.990 We get a problem. 12:27.990 --> 12:34.080 Now this authorization and beta so common that if I go into authorization and select my beta token, 12:34.080 --> 12:39.690 which is not digest token, beta token, I go ahead and paste this token as it is without even saying 12:39.690 --> 12:45.060 beta, it will still just do exactly same thing because the information that is traveling is exactly 12:45.060 --> 12:45.690 the same. 12:46.020 --> 12:47.790 Moving on to the code part. 12:47.790 --> 12:52.320 Okay, so now we know how the middleware works, but I have still no information about what this decode 12:52.320 --> 12:52.740 is. 12:52.740 --> 12:58.290 If I go ahead and look into the console, apart from a whole lot of errors, now we are seeing that 12:58.290 --> 13:00.540 this is all the information that is coming up. 13:00.960 --> 13:05.790 We are not going to discuss too much about the i ate and the expiration date because that is already 13:05.790 --> 13:07.380 mentioned in the documentation. 13:07.470 --> 13:12.120 If you remember when we were creating the token, we did send a payload. 13:12.120 --> 13:14.190 This is exactly what is getting as decoded. 13:14.190 --> 13:19.020 So the user ID is coming up to me nicely and also the email is coming in now. 13:19.020 --> 13:20.670 What do you want to do with this? 13:20.700 --> 13:22.320 It's totally up to you. 13:22.320 --> 13:26.430 I'll tell you most common way how it is being done now sometimes. 13:26.430 --> 13:29.400 In fact, most of the time you're going to create that in the request. 13:29.400 --> 13:33.510 Whatever the request is going on further down the road, I'll add a property to this. 13:33.510 --> 13:37.320 Remember, we have requested headers, cookies you can add in your properties as well. 13:37.320 --> 13:39.570 No issue in that in the request of the user. 13:39.570 --> 13:44.370 I want to just go ahead and add this information with whatever the information is there in the decode. 13:44.370 --> 13:46.020 So that is one way of doing that. 13:46.380 --> 13:55.320 Another thing that you can go ahead and do here is you can actually bring in info from DB. 13:55.320 --> 14:00.600 Also, maybe you are just passing on a user ID and later on you decided that, hey, we want to bring 14:00.600 --> 14:06.330 in more information into the request dot user, maybe email ID, maybe his username also and maybe more. 14:06.330 --> 14:13.020 So in that case, you can just quickly bring up your DB up here and can can find the username with the 14:13.020 --> 14:14.490 email and then add mode in. 14:14.540 --> 14:16.340 Information to this request or user. 14:16.370 --> 14:17.060 Pretty easy. 14:17.060 --> 14:19.130 Pretty easy work to go ahead and do that. 14:19.430 --> 14:19.970 Okay. 14:20.630 --> 14:25.490 So this is all now you understand quite in depth about what our middleware they are just something that 14:25.490 --> 14:26.540 happens in between. 14:26.540 --> 14:31.940 You can stop the entire execution flow of the application based on if that thing is not present or you 14:31.940 --> 14:33.590 can just do something different. 14:33.680 --> 14:34.460 What is there? 14:35.070 --> 14:36.230 Okay, quite a lot. 14:36.260 --> 14:38.270 Let's go ahead and catch up in the next video.