1 00:00:01,270 --> 00:00:05,260 In the last video we tried to assign this current user property to the request object and typescript 2 00:00:05,320 --> 00:00:11,290 is unhappy about that because typescript has a type definition file for express that defines exactly 3 00:00:11,290 --> 00:00:16,870 what a request is and that type definition file says that request does not have a property of current 4 00:00:16,870 --> 00:00:17,700 user. 5 00:00:17,770 --> 00:00:21,940 So we need to somehow augment the definition of what a request is. 6 00:00:21,940 --> 00:00:23,200 That's exactly what we're going to do. 7 00:00:23,260 --> 00:00:29,190 We're going to add in an additional property to the type definition of what a request is. 8 00:00:29,200 --> 00:00:32,410 So let me show you how we're going to do that to get started. 9 00:00:32,410 --> 00:00:34,690 We're not gonna worry about the current user stuff just yet. 10 00:00:34,690 --> 00:00:40,810 Instead I want to go back up to a line right above it whenever we call verify we are going to get back. 11 00:00:40,870 --> 00:00:47,260 If we mouse over payload either a string or an object that's going to be whatever information is stored 12 00:00:47,290 --> 00:00:48,980 inside the on web token. 13 00:00:49,150 --> 00:00:53,950 The first thing we're going to do is apply a more precise definition of exactly what we are getting 14 00:00:53,950 --> 00:00:55,690 back from this verify call. 15 00:00:56,620 --> 00:01:01,060 So remember we are going to get back the payload we had stored inside of our Jason Webb token and as 16 00:01:01,060 --> 00:01:07,680 we recall inside that payload we have an I.D. property that has a string and an email that has a string. 17 00:01:07,870 --> 00:01:13,210 So we're gonna first create an interface that precisely describes exactly what payload is. 18 00:01:13,240 --> 00:01:16,780 So let's do that backup here at the very top of the file. 19 00:01:16,780 --> 00:01:23,070 I'm going to add in a new interface of user payload I'm going to say that this has an I.D. that is a 20 00:01:23,070 --> 00:01:30,670 string and an email that has a string and then going to use this interface and tell typescript that 21 00:01:30,670 --> 00:01:35,230 what we get back out of this verify call is going to be equal to this interface or it's gonna have the 22 00:01:35,230 --> 00:01:37,510 same structure as that interface. 23 00:01:37,630 --> 00:01:44,080 So to do so at the very end of the JWT dot verify line I can write out as user payload 24 00:01:47,460 --> 00:01:50,740 now if I'm also a payload typescript understands Oh okay. 25 00:01:50,850 --> 00:01:55,860 Coming out of that verify call we get back an object that will have an idea that has a string and an 26 00:01:55,920 --> 00:02:03,020 email that is a string so now if we go down to where we have a recurrent user we still have that same 27 00:02:03,020 --> 00:02:07,370 error that says Property current user doesn't exist on there but now we have clarified or at least added 28 00:02:07,370 --> 00:02:11,120 in a little bit more information about what we are trying to assign to that property. 29 00:02:11,120 --> 00:02:15,830 If we mouse over payload we have added in enough information for typescript to understand that we are 30 00:02:15,830 --> 00:02:23,340 trying to assign something of type user payload to recurrent user so now we're going to add in or augment 31 00:02:23,340 --> 00:02:28,800 the definition of what a request object is we're going to tell typescript that it should have a current 32 00:02:28,800 --> 00:02:36,270 user property that can optionally be defined and if we define it it will be of type user payload because 33 00:02:36,270 --> 00:02:38,760 that's what we are trying to assign to it. 34 00:02:38,820 --> 00:02:41,020 Let me show you how we're going to do that. 35 00:02:41,130 --> 00:02:45,330 Once again back up at the top we're going to write out a little bit of mystery code up here. 36 00:02:45,750 --> 00:02:48,490 I say mystery because it's gonna be a little bit strange. 37 00:02:48,730 --> 00:02:59,940 We'll say declare global namespace express interface request and then we will say current user with 38 00:02:59,940 --> 00:03:05,190 the question mark is of type user payload like some. 39 00:03:05,230 --> 00:03:10,360 So this is how we can reach into an existing type definition and make a modification to it. 40 00:03:10,390 --> 00:03:16,620 Notice that we did not have to extend an existing interface or anything like that we did not have to 41 00:03:16,620 --> 00:03:21,230 do that if we ever want to modify an existing interface or add in some new properties to it. 42 00:03:21,360 --> 00:03:27,090 We just write out the same interface same exact name and then we add in whatever properties we want 43 00:03:27,090 --> 00:03:29,550 to augment the existing interface with. 44 00:03:29,550 --> 00:03:35,250 So in this case we are telling typescript that inside of the Express project find the interface of request 45 00:03:35,280 --> 00:03:37,310 that was already defined inside there. 46 00:03:37,350 --> 00:03:41,640 Take that interface that was already created and we want to add in this additional property to it. 47 00:03:42,300 --> 00:03:46,730 So we want to have a property called current user that might be defined. 48 00:03:46,830 --> 00:03:51,510 So it may or may not be defined in the reason it may or may not is because the user might not be logged 49 00:03:51,510 --> 00:03:56,460 in of course but if we do define the current user property on the request object we are going to set 50 00:03:56,460 --> 00:03:59,100 it to type user payload. 51 00:03:59,270 --> 00:04:02,780 Now if we go back down to the bottom we'll see that the air has gone away. 52 00:04:02,780 --> 00:04:08,240 If I mouse over recurrent user we see OK whenever we tried to access current user we're going to get 53 00:04:08,240 --> 00:04:15,220 back either user payload or undefined and that's it OK. 54 00:04:15,250 --> 00:04:21,190 So we've now got this middleware but together anytime a user comes into a route with this current user 55 00:04:21,190 --> 00:04:26,050 middleware being applied to it this thing is going to attempt to find whether or not the user is logged 56 00:04:26,050 --> 00:04:30,730 in if they're not we're just going to continue on in which case current user will be undefined but if 57 00:04:30,730 --> 00:04:36,090 they have a data on a Web token we will try to extract the payload and then set it on current user so 58 00:04:36,100 --> 00:04:41,850 it can be used by our other middle wears or the actual request handler now to actually test this out 59 00:04:41,910 --> 00:04:45,940 going to save the file and go back over to our current user root handler. 60 00:04:45,990 --> 00:04:48,420 Remember we have two different files called current user. 61 00:04:48,420 --> 00:04:54,300 I'm now inside of the root handler called current user so we've essentially moved a lot of the logic 62 00:04:54,330 --> 00:04:56,770 that was inside of here over to that middleware. 63 00:04:56,940 --> 00:04:58,290 Let's import the middleware. 64 00:04:58,290 --> 00:05:03,210 We're going to wired up to this root handler and then we should be able to remove a lot of the logic 65 00:05:03,210 --> 00:05:12,190 inside of here and just rely upon the middleware instead so the very top I'm going to import user from 66 00:05:13,870 --> 00:05:14,750 up one directory. 67 00:05:14,750 --> 00:05:19,370 Middleware is very user than inside of my rep handler. 68 00:05:19,370 --> 00:05:22,130 Right after that you are l I'll put in current user. 69 00:05:22,130 --> 00:05:27,640 So that's my middleware it's now inside the request handler itself. 70 00:05:27,650 --> 00:05:32,570 Well we are doing the check to see whether or not the user is logged in inside the middleware. 71 00:05:32,600 --> 00:05:34,010 So we don't need that. 72 00:05:34,010 --> 00:05:37,350 We are doing the GOP to decode inside the middleware. 73 00:05:37,370 --> 00:05:38,700 So we don't really need that. 74 00:05:38,840 --> 00:05:41,180 We don't need pretty much any of that stuff that's inside there. 75 00:05:41,180 --> 00:05:47,150 All we really need is to take the information off that current user property on request object so we 76 00:05:47,150 --> 00:05:55,120 will just do a resort sense of rec dot current user remember current user is going to be the actual 77 00:05:55,120 --> 00:06:01,180 Jason payload in our previous implementation we had just a moment ago we actually in the response had 78 00:06:01,180 --> 00:06:05,950 a nested objects we sent back an object that said current user id it had a value of whatever the payload 79 00:06:05,950 --> 00:06:06,360 was. 80 00:06:06,700 --> 00:06:10,930 So we should probably just make sure that we keep that same kind of structure right there. 81 00:06:10,960 --> 00:06:20,320 So in other words we're going to end up with an object in here of current user and we'll say recurrent 82 00:06:20,330 --> 00:06:21,380 user. 83 00:06:21,380 --> 00:06:26,210 The other thing that we might want to be concerned about in the version we had just a moment ago the 84 00:06:26,210 --> 00:06:27,250 user was not logged in. 85 00:06:27,260 --> 00:06:29,520 We sent back a current user of No. 86 00:06:29,540 --> 00:06:32,960 Whereas right now if the user is not logged in this is going to be undefined. 87 00:06:33,050 --> 00:06:36,050 So we might want to put in recurrent user or null. 88 00:06:36,080 --> 00:06:37,400 So we don't send back undefined. 89 00:06:37,400 --> 00:06:40,540 Instead we will send back all OK. 90 00:06:40,560 --> 00:06:46,250 So long story short let's say that as is we'll go back over to postman and do a quick test tobacco over 91 00:06:46,250 --> 00:06:46,690 here. 92 00:06:46,700 --> 00:06:49,010 I don't recall whether or not I'm logged in right now. 93 00:06:49,010 --> 00:06:50,240 I think I'm not logged in. 94 00:06:50,300 --> 00:06:57,340 So let's go ahead and send this off my get request to current user looks I'm like I'm not logged in 95 00:06:58,140 --> 00:07:03,820 I'm going to go back over to my tab that allows me to sign into the application I'll send that off. 96 00:07:04,000 --> 00:07:09,050 Now in theory I am logged in if I go back over to their get request tab I'll send that again. 97 00:07:09,160 --> 00:07:09,900 And there we go. 98 00:07:09,910 --> 00:07:12,180 Exact same thing we had previously. 99 00:07:12,220 --> 00:07:13,010 Awesome. 100 00:07:13,270 --> 00:07:18,130 Now the benefit to this Middleware is of course anytime that we have a root handler that needs to know 101 00:07:18,130 --> 00:07:19,150 who the current user is. 102 00:07:19,360 --> 00:07:21,880 Well we'll just make use of this middleware. 103 00:07:21,970 --> 00:07:27,460 Now of course we did define this as a middleware inside of our project but I had said previously that 104 00:07:27,460 --> 00:07:31,120 we are probably going to want to use this for other services inside of our project. 105 00:07:31,120 --> 00:07:35,350 So we probably are going to want to extract this middleware at some point time early somehow figure 106 00:07:35,350 --> 00:07:41,020 out how to reuse it among other services that we create but we will handle that and just a little bit. 107 00:07:41,050 --> 00:07:42,700 So right now let's take a quick break. 108 00:07:42,700 --> 00:07:45,610 We're going to come back the next video and put together our other middleware.