NestJS: NestJS Docker Debugging & Nest Middleware for JWT verifying | Realtime Chat App | 06/17

so hi and welcome back to the next video this is video six nest js with jwt middleware and sks debugging so basically we will add like here in s3s middleware so that we can validate requests by jwt we apply this middleware to all routes except our login in our register route for users so every other route is protected and there we can also extract like the tray wt from the request we can validate with jwt with the jwt service and then we can also get a user from our database and look if this user is existing because for example it could be that um with wt was issued yesterday it's still valid but the user is deleted so he would buy the jwt would still be authenticated but he would not exist anymore so that we make sure to check this and we will also add then this user object that we get from the database address to the request so that we can later use this in guards or in functions itself we will also add like a debugger for s3s so for this we add like a launch json file for visual studio code and show how debugging here works very simply and use it directly to develop our middleware so here we come to our video structure this is always first we look at the video outcome then we read our user story for this and then we implement the story and close it and commit everything so let's have a quick look at what we are building in this video here so you see it here we started everything with docker compose and now we have like our debugger attached so this is simply with a launch adjacent file that we are using here and here we have like a breakpoint in our new nest middleware that we apply to all routes except our login and our register route so when we use postman to send a route against api users which is protected with valid trade wt that is well it so let's get a valid train value here and make the request and then we can see that we are running here through all the stuff so first we decode we get the authorization token when we decode the token and check it if it's valid then we get like the user from our user service and then we attach it to our request and you can also see our debugger here is working so if we now skip it or we call the next then everything here is returned like before so let's have a short look at our story for video number six and here we are doing estrella stuff so we make a middleware to verify like that every request has a valid trade wt and we also want to do some debugging with necess so for that we need to launch replacing so our story is as a developer i want to add a nest middleware that checks every request except that user and login for valid jwt so because for the at user where we register so we can probably rename this for register and the log in request we don't have awt because we log in and we register the user but for every else there is something attached and then we want to get the according user so from the jwt we can get the id and then we can search in our database if for the user and then we want to attach this user to the request so with this we can make sure because maybe the jwt can be valid like two days or something and maybe the user gets deleted in the meantime or whatever that when we search for this id in our database that the user actually exists at the moment and then we can attach it to the request and then we can also work with this later so that we make sure that none of the properties change because we got them directly from the database so that we have access to it later and can be sure that the user is not deleted or modified we can say because if he is having jwt that is from yesterday maybe he already changed his email that's also enjoyable t and so on and what we also want to do at some debugging so we need to launch the json file from sqs and then we can have like an example how this will work so we can do both of this in this video so we have our acceptance criteria we want to add a launch recreation for an sds debugging and we want to add nest middleware and apply to all routes except the post api users and post api users login so now we can start with this so first we can start our services up as you remember we just need to have a compose for this so we can say docker compose up and then everything should be here so just wait a bit and then we can go to postman and we have here our gwt you see for the user's request this is protected so we can go into our api folder to our user controller and you see getting all the users so here we get request find oil has our twt off guard and so if i remove this token and send it again i'm getting like unauthorized the advert token and modify it it's also unauthorized service works and here i can just log in with my credentials and get like a valid token if i need it so at the moment we are for this using like in our of module or basically wt guard and this is something that we now want to reflect in and before this we can probably go into debugging so that we can use the debugging for developing so debugging is pretty easy so first we have to open our api folder so i already have it here and we can just open google studio code here we can close we can let it run but and we are just here now in our api folder directly and close everything here so this is our node modules folder i guess and then we can just hit our so you see we know api folder i can hit my run and debug these are some breakpoints from one of the last times and i can just say run debug and now you have to select like an environment so i want to use sjs and i need a lounge location so this will generate one for me and you see it here in my api folder i have now new folder visual studio code that will power us code with a launch.json file and we actually have to yeah modify this a bit because we needed this to connect with our docker so the version is fine we have some configurations so our type is just node we have the request we want to attach our name could be i don't know debug nest tray s real time thread and now we have like a remote route because for our docker and here we have to specify the path from our docker compose fire so where we are working so as you remember in our docker fire so we can go to here our dockerfire we are in thomas source app so we have to add this here also thomas source app then we have like a local route which is just our workspace folder so we can just access it like this we can define a protocol which is inspector we have a port this is like the default port and this is also the port that in our docker compose file here you see it we allow this port for debugging and then we also have to change this command here from start dev to debugging or to debug then we want to restart automatically true and we bind it to our address of 0.0.0 because this is also what we have defined here in our package calculation you see it here zero zero zero zero we want to skip these node internals i don't know what this really means and i think this is something that we don't need so we can now just save it we have to stop our docker compose and now we want to run it in debug mode our api so we train over c so here you see to run debug mode we can just change the command and we can start it up again just wait a bit and you see we have here like our normal port and we have our debug port available so that we can connect to it now we have to wait for our api so you see we have a debugger listening our service is starting normally and now we can just [Music] go to our run and debug we have now here our debug sjs real-time chat we can say run and i think we are connected so we can have a look here so you see we have now a debugger attached and now we can simply set some breakpoints for example we go into our of controller user controller and we are making at the moment the request against this here so to find all users and now we can just run this again and now you see we are stopping this here saying there's a request and so we can now simply go here to the next to continue we can step over we can step into we can step out we can restart or we can disconnect you could also go like for example to find in find all we could make here another breakpoint we could step to this and so on you can let it run and then we get here the response so i think like the debugger is working so this is very yeah like some basic no trace debugger and now we want to add all our logic for our nest middleware so first we can have a quick look for the nest middleware so we can google for nest js middleware and here we can say that middleware is a function which is called before the route handler middleware functions have access to the request and response objects and the next middleware function in the applications request response cycle so here with our client side we get a request then we have first the middleware and then we have the all here our route handler so here we can execute any code we can change request and response objects we can end the request response cycle we can call the next middleware function in the stack and yeah we have to coin next um yeah here is like a basic example so we have like a logger middleware that implements venice middleware this is just the use function and this is just logging the request so this is like your request your response and next and then this goes on you can also extract services and so and controllers you can do you can inject services whatever you want and then you can apply this middleware for example to module so you can apply it for example to your app module and you can say for all routes with cats you can apply it also to some paths and just to a simple request method and i think you can also exclude some some routes and so if you like apply it to your ad module then this applies answer for all your feature modules for in our case that are let me have a look at the moment our just our often our user but later we will have like a module for the messages probably one for chat rooms and so on and so then we can apply this just in our app module and we have it for all so we can now just make like a new folder here we can name it middleware let's go into this here so we have here our middleware and then we can add like a new file that we can for example just call authentication middleware dot ts let's rename it up minus middle yeah or even better of middleware.ts so now we can say export class of middleware and now we want to implement the nest middleware and we make this as an injectable then we do have like a constructor and it's saying here we have to here um implement um or we have to use because this is required so we can say async use request from request here we use not importing it let's just have a quick look which request is it i think it's yeah like from express so we can just use this here yeah we have it that's fine so we have our request we have our response and we have our next function that we need to call if you want to go on so now this arrow here goes away and then we can inject to our constructor to services so first our authentication service because we want to verify like the jwt and the second one is we can get our user service where we want to get the user to verify that he's not deleted that everything is up to date and yeah so the first thing that we probably can try is we want to say we want to get like the bearer token so our authentication token so we can say we have like a token array that we get so this is a type string area and this is our request.headers and then we get like the authorization from it and then we can simply split it because then in the request we can make a debug here you see this there's always beer then you have a space and then um you have a token so we just split by space and then we have here an area with the first vera and then the second is the stuff so that we can um just use it like this and then we can access it with a token area in the first um so now we have here our very basic so we will expand this later but now we have to apply it to our module so for example we can apply this now to our app.module and we can also have a look here so we want to implement a nest module you can just copy and paste a bit so we implement nest module and then we have like our middleware consumer from s3s and here we can now apply our middleware so we just say our middleware and apply it and we can apply it here for routes or we can try what it is giving us so we can say we exclude routes from the currently processed middleware and this can be for example our for path and then we have to specify the full path so we have slash api slash user so where we register users and we give it a method or we can specify the method and this is our request method dot post let's make it a bit more readable so we have it here and then we have like another one which is our path slash api slash users slash login and here it's also our request method dot post and then we can apply this for all routes so excluding this to above and then this should be applied for example for our getting all our users so for our route and give it some time debuggers using some stuff so this was restarting here um so except for this route here so here we apply it for this and this and we exclude them so we could now make a breakpoint here i think we have to restart this give it some time so let's try again i think here's some error one second so let's close this on here let's run our application again what was it saying here ah the user service is not export my mistake so to use the user service there we have to export it here i think so we have to say exports user service and in our authentication module we are already exporting our authentication service and here we are already importing the user and the app module so that we should now have access to both so now everything started here correctly now we can try to attach the debugger again so this seems like running and now we can go into our middleware and we can see we have now here our breakpoints if we can get the request so we stopped here now you see here we have our request and we can have a look at it so now we are accessing like the headers you see here the authorization and then you have here the bearer and the token and so we split it and then if we make here the breakpoint you can see that our token array we have the beer and our token so we can simply use it and maybe we can have a quick look um before again that like a bigger picture of middleware in s3s so we have here our client request then we have like the middleware where the supplied first um so we can make multi mutate requests we can middleware labs from express use them and we could handle authentication here to token validation attaching props what do we actually do now and then we have like our guards what you can access when then we have like route handlers before we have pipes route handler after road handler exception filters and so on so this is like a little bit of the bigger picture with this you can find here and stick overflow if you just google for it here so now we want to actually validate this token and of course we also want to just so that we don't forget it we want to remove this guard here so the basic off guard so that make sure that everything that we do correctly here is coming from our so we now can detach for debugger and we can go into our authentication service and add like the validation for the jwt you can here simply add a function that we say called clear verified jwt we have like our way jwt has a string and we return a promise and so we can just say return this when we use rtwt service this is already since we are in our authentication module we have here our jwt secret we have the expire time and so on so we have access to everything so we can here use the verify and async and then we can give him here our jwt token so now we can go back to our middleware and now we have our first our token array so we can wrap this here and try catch and so if we catch something we can say throw new http exception let's say like before unauthorized and then we can add more stuff here so now we want to verify that wt is valid so we can say const decoded token is our this dot authentication service dot verify jwt and then we get the token area at position one and we can also use this here and then we can like debug again and we can see this will work so if we now make a request against our api see we have it here then we have our talking area at position one is our token when we go through it then we have like here our decoded token which is just my for example my user object my expired my at uh time and now we have here our id and with this we want to call our user service and find our user and if not we want to throw an error so if we step over this this breakpoint and we remove this and now for example you see this is working if i modify the jwt and remove just one letter from it you see we now get an unauthorized and you remember we have already removed our normal jwt guard so we just have omelet over here but which is not letting us through so now i make it back it's correctly and you see here there's no error thrown that we are not catching um so another thing that we could possibly try so we go to jwtio um here for example we have like a valid trade wt we can copy this and try to make a request with this token and this could also be unauthorized and we are capturing everything so this seems good and now we want to get our user so we can say we have an our const user and here we can say wait this dot user service and then we want to get a user or a thrown error so we can go into our user service and make like a new function here so we have our one find one but if this is not finding a user this is just returning undefined so we can here make like a get against it um a phone error so that we can then capture it so we can basically say get one we need like the id from the user so that we have in our token and then we can return like a promise and yeah i know we have now mixed a bit of observer and promise but here it's not that easy to catch these errors um here we don't return like the observable later um yeah so we have to live with this for this stuff but maybe i can refactor it later so we want here to use a repository find one or we want to fail so you want to throw them and we want to find by id and this is basically all so we want then to find to get one and we give him the id so we can say decoded token dot user dot id and then if the user is like defined we can make this for actually we wouldn't need this i think um we can say next and else we also throw an exception i'm always creating my keyboard yeah so now um [Music] important i think yes so then we can call next and we can just debug here and start with debugger and then we can send our request is it starting let's try it again so where are we going wrong so actually we are not going into it i think ah now we're into it so we have it here when we can go to the next and here like we throw the exception so this is not working so we have like here get one we have the id okay let's debug it so we can find out what's happening so let's send the request again now we have here our token or we can go we have our decoder token ah i remember this csv token from jwtio so we need a new token so if i'm sending a new login request against my backend i'm getting a new valid token and then i can use this here and then yeah you see we are getting one step further so then we have our decoded token and we can access our user and the user id and then we can look if we find a user and you see we are finding one so then we have my user from the database and then we can call next and everything works and we get it in return so now just to make sure that we catch like all the exceptions we could like for testing purpose enter here user id that is not in the database at the moment and then um our get one should fail and we should also get returned unauthorized yeah so this seems fine so we can revert this here and now what we also want to do is we want to attach the user object that we have here to our request so we basically want to say this.request.user so request.user is our user but he is not knowing this so yeah we have to like extend the request model so we can just say export interface let's say let's name it request model and then we extend our express request with the user and this is from user interface and then we can save this request here it's our request model and then this is accepted so we can probably make here some comments so we say make like sure that the user is not deleted or that props or writes changed compared to the time when the jwt was exclude so we basically if for example i log in yesterday with my and then i get my tradeable q which would be better like two days or something like this and then i make a request today and we would use directly all the stuff that is in the trade wt and i changed tomorrow morning my email then we would have like old data or my user has deleted but withdrawability is still worth it so we tried to get the user from the id from the database and so we can make sure that we have like the correct rights and everything and here we can also make a little comment so we say or we could say we like add the user to our regrest up tracked so that we can access it later when we need it and also if it would be here we would like simply would like override it so this should always be correct here um here so i think this should be like all for this and now we can for example try that we can still um send requests against our login and create so we can still send without authentication make a login request and we can i hope so also make it like a new user so we have to make a new email and password so this also works with offer without authentication and here if we don't have like a valid authentication we are not getting anything so if we have one we can send it and we now get all three users that we just created also and if i modify like the trade wt then i get also unauthorized and we capture all the arrows so when we now stop everything here so we can also close here like the second virtual studio code then we can now check that everything is working so here for example if you later then want access to our request so you could just add here like the add request from as a decorator and then you would have like your request here and then you could also access like the user from the request and so on or you could also do this in a guard and so on so then we have like all the possibilities that we need um and you can also here start like the api in normal so in death mode or in debug mode whatever you like so if you have the comments for this um yeah so basically we can now track against our user story and then we can close it so now we have our at launch jason so this is uh now and we get and we have like a new nest middleware that is applied to all routes except our um create user and our log in um so right there we check for trayvon jwt and it should attach it also to our request so we can now simply commit everything so we can say get at upper a we can commit like the changes so this is video six and here we just added like at middleware verify jwt and attach user also at launch.json for debugging you can just push it and this would be all

Channel: Thomas Oliver

Views: 601

Keywords: javascript, typescript, nest, nestjs, nest.js, typeorm, git, gitflow, node, development, api, observables, rxjs, nestjs7, bcrypt, jwt, authentication, git-flow, gitFlow, docker, docker-compose, pg-adminer, debugging, hot-reload, angular, angular material, angular lazy loading, material, realtime chat, real time chat, chat app, realtime chat app, live chat, live chat app, nestjs8, nest js 8, nestjs 8, NestJS8, NestJS, nestJS, postgres, angular 12, reactive forms, login form angular, register form angular

Id: BTLAcLSu1Rw

Length: 38min 28sec (2308 seconds)

Published: Tue Jul 06 2021