JWT, EXPRESS and COOKIES

[Music] hello students this is reading we're going to cover our JSON web tokens within secure cookies the reason we want to use secure cookies there's a lot of tutorials online will teach you that you can use you know local storage or session storage but the idea behind putting in a secure cookies your browser doesn't give your JavaScript any access to that cookie so it means your JSON web token can be sent from your front end back to the back end for verification but your client side your front side doesn't have access to that web token so it keeps it all skewer from scripting it's not the end-all and Beall of security but it's just one extra layer of security that gives us an advantage against any malicious code we're gonna do that using Express so let's get into it you need Express so that we can serve up some jason through an API so we're gonna need an Express so long so do that we're gonna make sure we get a right version of nerdly current version I'm using is ten point six so you need to have something around that version or higher of course in time this may change and so therefore this video be out of date okay so to start with we want to make a directory somewhere I'm going to go to my desktop and then I'm going to create a folder and then father is going to be my project my API so I'm going to make an API that connects to a list of people so we're gonna have an accounts API city into accounts API and here we want to create a few things so to start with I'm gonna just start off with the default index dot JSP a mishel javascript file I always gonna load that air going to MPN in it and hit the wire so that we can skip all the standard options okay so once we've done that we're going to clean it out so now that we have if you have a look here in the index and a package.json we can start adding some essential required things to our node project so if we want to we can go npm add and now we're gonna add Express this is gonna go fetch that and now we should have Express so let's open that up in vs Kurt's gonna have enough the whole directory using the dot and the shortcut code you can see here you know package Jason you should have dependency Express you know to get this running every single time over and over again whenever we make a change to this next up J is going to use nine months or MPN add and use the D for development only because we don't want to push this up as a production thing so no Vaughn run that so if you look here now in a package of Jason on the dev dependencies you've got node mods so now over here in our scripts we can create a start script that is going to run node 1 over index DOJ's so any changes we make to index dot J yes we're now gonna have that update they've reload it all so let's get that started so basically we're going to come back to this save this close it in here we're gonna say we now need to use Express to create a service so let's use the standard way of doing that so we're going to play a Express import that from our node modules which should be installed when you did the NPM add so require priority Express we're going to make an app so it Const equals Express so now we need to set her up and we have an app don't listen I'm gonna say which port I'm going to make a variable up here which is called port 3000 report here and have a callback function that is going to run after that is running another line there and so inside that callback I'm going to console the info with some backticks and say listening on port Street a plate that variable so if I ever change that poured variables to say three thousand one over four thousand then this is going to update straightaway as well so let's get that running NPM start you can see here two listening on port 3000 so so we have a bunch of users and just present it as some Jason so I'm going to create a instead of a creating a model I'm just going to create some temporary data here code user stop Jason so gonna have a rate I'll put objects in here which are going to be chooser so I'm going to create an ID for each user its use a one two and three - placate that and change it to three users also on each one of these probably going to create a first name just going to put in Sally so got three people there we've got an ID for each of them which is a unique identification and then they first name for each other that's about as far as I want to go for this so I'm just going to say the missing Jason and then we can import that to our applications so using node this is a secret section so going with users equals requiring something that's local which is users Jason and I'm also gonna just move that to the top there okay so when somebody goes to my router slash users I'm going to have a request and response whoops and in there I'm going to take a response and say I'm going to send back some Jason with all the users inside of that so let's test that out so if we now open up our browser and hit the route localhost 3000 users you can see here we get our Jason which is working as we expect them to now part of what we're doing here is we want to say all right the only way you can see this rap is if you had a favela Jo of T and we wasn't sent through as a cookie and etc etc etc so let's let's do it instead of using our browsers were actually going to use something which is an extension which is going to allow us to do HTTP requests this is it this is the one you want to install this well you could have restclient here so gonna take what the browser's going to do and this way we can do posts as well as gets so once you've installed it reload and should have this tool available as an extension so going back to our folder directory I'm going to create a new file there and I'm gonna call it users a CSP and we can do a now we can talk get an ACP localhost three thousands slash users and if we click this here this set request we should receive our Jason plus all the headers that come with it and a nice two hundred okay so everything's working as it should however before we hit this route we should be checking whether they have a valid JWT and we should receive their token and so on so how do we go about that okay so what we need to have is middleware that's obviously going to check whether this token is here and also whether or not we're creating a cookie so how that process we're going to create a login if you've want to create a register you can do the same thing we're just going to create a login here and we're going to assume that we have in the database already a valid login so I'm going to use now might change this to be slash login and before I do that I'm gonna actually have off it's gonna be slash auth slash login you now also have a request and response and we're going to take information from the front end and the front end meaning the browser and then we're going to check that information and if the information we received is valid like it's valid user then we're going to give back a response and a cookie so to do that we're going to need to do a few things we're going to need to use a parser cotton expressed now has a built in buddy pass out so we're going to use the top here before everything you store Express dot JSON and that's going to take any Jason that's posted to us and put that into a record our body so to have a look at that we're gonna go and say we want an email from the rector buddy yeah we want password from the rec club buddy let's not mind I'll make sense at the moment but we're gonna explain it a minute so when somebody wants to log in they're gonna have to send me their email and their password and they're gonna have to send it as Jason and I'm gonna receive that inside the body because I've done this bit a lot occurred here so now that I'm going to get that I have to imitate that I'm setting that and we're just we'll just send back a response with what we've actually sent so what I'm gonna send back is what they've said to me this is what we wouldn't do normally but we're just gonna show you as an example so now I go back to this and we make a another one here which is I'm gonna create a new file called auth dot HTTP then we're gonna say this is going to be a post HTTP localhost 3,000 or and okay so what are we gonna do we're actually gonna send some Jason now on your browser you do some JavaScript to do this but for this we actually just get to type it in straightaway nerds it's going to work we do need to specify the content type it's gonna be application in there Jason and leave space here and here's where you can actually write in some Jason so I'm gonna put in here female and we're gonna add example comp and then we're gonna go through and add a password green eggs as a terrible password but that's the one I'm gonna go with for now okay so just to test this out remember everything should be updating because of node one so once we've added all the code to this it should have restarted you should've seen in the background happening and so this should work so the only thing we're missing here is because we're trying to do a post we need to receive this as a post so we're going to say instead of app don't you just gonna say Apple post so let's try this out actually have to put in these stats as well so I'm going to status is gonna be 200 also gonna add that straight to here it just says that we actually specify what status it's going to be before we see the other Jason so if we try that one more time okay so one of the things we're going to have to do here is add that as an object and that should fix that straight away let's try that out one last time there we go okay so not the result I kind of wanted it okay so why is that happening so we actually have to specify what we want to get out of that and that's the password over here and the password at the email here so let's make sure we've got that now if we try that one more time yeah you would get it the way we want so that's the email here and the password so that's what we were sent here and that's what we received that's actually what we sent back but we don't wanna send back this we want to just send back a 200 so let's change this to the end let's try that out in the auth so we go to 200 okay but we didn't receive a cookie okay so first things first we're gonna pretend that we actually have a verification system so if email is not equal to or password is not equal to green eggs and ham and just so that we can see this I'm going to do this over two lines we're going to through a new arrow simply say password account information incorrect okay so if any point time the password and the email doesn't verify we're just going to throw this now obviously we'd have a problem model which would check the password in the database it would hatch the password and it would check the hashed password with what's in the hash password in the database and then we would get this verification but we're just going to imitate that using this simple if statement so I'm just gonna hide most of this code if okay now let's just test this we're still getting a 200k that's great obviously if we throw an error that's not gonna be that so we're actually gonna change the response to be a status so that'll mean that when they betray the error to the Express Ariella it'll say he says is 409 lat her to it otherwise we're gonna keep moving along and we presumed that this is all worked fine and so we're gonna say all right now we're going to create a cookie it's going to be access token we're gonna have some sort of token here I'm just going to put in token as 1 2 3 4 sin will replace this token with a JWT letter R and we're going to just check whether this works so I'm gonna go over here and do this again and you can see here we've got a set cookie with the access token and I'll actually took in here so this is exactly the kind of thing we want to have we want to show that we've got a cookie that's being set and our browser will pick up this instruction here and go okay I'm gonna make a cookie with a and then set that in the browser so that we can use that cookie let's use Jakob tease so you want to do that we're gonna need to install Jade of T so I'm gonna open up a another tab and we don't you tab I'm going to MPN at jason web token so at the very top I'm going to import JSON web token as Jason web Jacon Jacon tea party in jason second and now over here I'm going to create a token so to create a token a sign and you took in and so this takes a few options so if you look at sign takes a payload and then it takes a secret now the secret you need to keep secret so you probably use it as an environment variable although I'm not going to do environment variables in this demo so you're going to have to look up how to do that but in this one I'm just going to create up the top here they can't that is the secret and this should be secret that should never be sent to the client or anybody using your website it's friendly for the backend which is the API server so I'm just going to put in a simple secret which is just obviously when I have a better secret than that so we're going to put that secret is here now the payload and have to create a payload here now Paylor general you don't want to put sensitive information in there so you may want to put the ID in there if it's not sensitive to for your front-end to know about your ID from your database you could also put in the email person so that way that's something that you could put in there so I'm just going to pop in the payload the actual email it was given to us by the user so the payload is gonna have an email which is gonna be email it's gonna be made into the token and then we're actually gonna say okay this is now going to be leaked okay okay so once we've done that if we test this out again you can see here now we have AJ bwt as the excess token now it's a few other things we can add to this so we can simply go in here and a options so these are the cookie options so you use an object here and inside we need a key which is going to be the max age property and here you can put in seconds how long this cookie is going to last so obviously if we want to have an hour so you can go do something like at all hours its seconds and dr. Kerr has something like this so you can say if I want it to be one hour its 3600 seconds so max age is carries in seconds so we just placed in that like so now there are some security measures you can do which we are going to use HTTP only we're gonna set that to true and if you're using in production you probably want to have skew up as true but since we're using HTTP we're just going to comment that out for now so you would comment that in production as long as you've got all the HTTP stuff set up a tip here in the moon means that when we set the cookie on the browser side the JavaScript doesn't have access to your cookie so that means that your cookie is nice and safe you can't have a script that steals the cookie and then use it for malicious reasons so once you have that we can go and check this again and you can see here we're still setting the cookie but this time we've got an expiry date this is the date that I'm recording this plus an hour and we've also got HTTP only to tell the browser that when it creates the cookie don't make it available to the user so basically no one can write a script they can still look so that's the auth login sort of side of things that's allowing us to verify the user we're using a very poorly written script here let me see what I use something better like a model that would check in a database the password and I'll be hashed and so forth and then we're taking a payload from that email that we received once that that's been verified and okay and we're gonna make a token and then set that to a cookie and then send back an okay response of 200 and we don't need to send anything back we just have all the information we need in the cookie so when the browser holds on to the cookie we can send that cookie back to the backend and we can use we can actually go in and have a look at that cookie when we need it so to get the cookie we're going to need to parse a cookie once we receive it read the token and in verify the token if the verify token is that we're going to say yep you can look at users actually might change this to API slash users because we want to say this is part of API that way we can stop a person from visiting our website if they don't have a valid cookie and that means they won't have valid lucky neither a nor do any of that we're going to need to have a cookie parser so we're going to need to add that so NPM and cookie parser and I'm gonna bring in cookie parser so I now have cookie puss R so now I can do app dot use much like I did Express stop Jason I'm going to say cookie pasta run that so let's get that cookies so once we have a cookie right dog cookie racked up cookies and then we're gonna get access token out of those cookies that's the particular cookie that we created you have a look here we had access token that was the key or the name of the cookie then we had the actual information that the cookie which is stored as the value which is token so let's just hide that for now so we're gonna do say we're going to access that and save that to a variable called token and we're going to test this so we're gonna basically say we're gonna use JWT to verify the value so the genome team will be in this token so we're gonna do post decoded equals GWT dot verify and passing the token plus we're also going to pass in the secret so that's going to verify the token with a secret and if it occurs without throwing an error we'll get back date decoded thing there and that's gonna be the payload inside there and we can even pass back that payload if we want but we just want to check whether that happens and if this breaks he'll throw an error in which case we can set the status and so on let's try this out so if we go to users and we try and get our information we get back some no it's not gonna work that's not quite what we want we actually want to get that sort of stuff so if we go back to this and we log in correctly we get this access token and so on and so on so we can copy and paste that there come back to this and I'm just going to put a comment above this I'm gonna say this is without a valid cookie so I'm gonna say as a comment without cookie and then I'm gonna say read the ballot cookies and I'm going to say get me the users and also are we gonna have to change this to API so that wouldn't work anyway so because we didn't have that we'll just don't check that that's still yep Jason web token must be provided we haven't received that so that's correct that's actually what we wanted to have and we're gonna have this here so with a valid cookie there localhost 3000 API uses but this time I'm gonna say we've got a cookie and we're gonna paste that right there so that hole on cookie that we copy from that before response I'm gonna do that now we're gonna try it out distinct I wanted to be a CPS man just wouldn't be a CDP because we know only HTTP so they send requests and now we get all information so you can see here that everything is the way we want it and we're receiving all the information as we want now thing we have to note about this is that none of this deals with cause and because a friend might be in view Jay is a browser is gonna throw a cause error so we actually need to add cause to this and say what our front end is so you don't do this correctly we're gonna need cores added to our app and also set some settings and then everything should work as it should so to get that happening we're gonna go jump back to us thing and we're gonna use a tool called core so really rather do this manually another package called pause let that install and come back here and add cos and over here we're going to app dot pause whoops app dot use cause and we're going to pass in a few options so the first one is to say is to send the origin which is going to be a stick the local post and it's gonna be a different one so if you want 3,000 and you're back in your front end should be a different one so you're gonna say 3,000 and one that's gonna be the difference don't add this final slash here for some reason that didn't work for me when I did that so just make sure you do that if you're running on HCPs of course then you would say that there too as well and then also another thing we're going to say is credentials true so that's going to be for our cookie and so on so now just one more time we'll just test that out and say with the Belen cookie without a valid cookie we get a JSON web token of course you don't want to get this HTML you would rather get something more Jason like you can go down and create an error handler which would be the one down here so we're gonna get after use I just want to the next now we're going to use the next order crops pods but I'm just putting it there anyway so you can see this is a catch-all era Hiedler so now that we've got an error in an error we're going to send a response some Jason and it's going to be the error so we can set up a status but generally you want to probably set that up yourself if this doesn't doesn't work for example I put a try block around that try and decode this if it does throw an error then we'll catch that error so I'm gonna say try this catch the error or the error but before we do that set the status to say something like a sorry to say that's probably not the best current to use for this but I'm just using it as an example and sorry go just correct that it's a response not status and therefore I don't have to put it in the catch-all now you could put in the catch all the 500 if there is no static let's try it out so to get the T&A name in the message Jason we're token and it's as Jason so our error has been handled there as Jason there we go one we'll try to try that but we can see there that's working fine as well so that's the first half I am gonna do a tutorial on the front end of how to handle using Axios the cookie sending it back so that your response but this is the back end so this is just getting this to work it's probably where you want to happen and you can turn this into middleware very easily I did that in the next video so that you can use on any route not just this route but rather than typing this over and over again you just make it some Express middleware and then use it there and then that way you don't have to do this every single time

Channel: ruegen

Views: 13,214

Rating: 4.9044371 out of 5

Keywords: JWT, Express, JSON, Cookie, JavaScript

Id: USNwvB5o63U

Length: 29min 51sec (1791 seconds)

Published: Wed Jul 18 2018