Learn JWT in 10 Minutes with Express, Node, and Cookie Parser

hey everyone i hope you guys are having a great day welcome back to another webdav junkie video and so in this video i want to give you a five minute overview of how you can use jwt with an example of using a node in express but you can take these ideas and apply to whatever language you want like python and django php and laravel but let's just dive into it to save some time right here i have a server.js file which is hosting in express application and the main thing i want to talk about in this app is we have a url called slash login and we also have a url called slash add but these are the main things we're going to focus on but just to kind of make sure you're not in the dark we do have two static files that are hosted we have an index file that is located here that has a form and a login button and then we have a welcome page which also has a button that just makes a really basic request to the ad page and then finally we have a cookie parser set up so that we can take the jwt and put it in the user's cookie so we have a login form here and we are going to hit that login endpoint so i do have a test username typed in and a password typed in and so when i click on login i want to show you what kind of happens so it's going to hit this express service and it's going to go to this login route okay so inside of my routes folder i have a login file and let me just walk you through this code real quick we are basically including a json web token package or library which allows us to sign and verify jwt tokens and this is the end point that we're hitting and to kind of walk you through this really quick we grab the username and password that came over the payload we checked in the database for that user based on the email they provided or username they provided and then we verify is the password that's stored in the database matching the one that the user sent in in the login page if it's not we just go ahead and throw an error back but the important part of this whole endpoint is the signing process so we have a jwp.sine function call here and we are taking that user object that we got back from the database and we are just signing it okay so what that means is it takes an object and it basically will look at the payload and it'll create a hash and put it as a signature at the end of the jwt and we'll we'll talk about this at near the end of the video of how a jwp is composed but a second important part to point out is that we have to provide a secret here so you notice here we have processing be my secret so when i host my server this is actually set to i think hello so let me refresh this yeah so this is an environment variable that i set to hello here and that is what we're using to sign our jwt this is important because this prevents anyone else out there from just creating jwts and hitting your server to try to access it right they have to know the exact same password that your server used in order to create a jwt token to uh hit your endpoint and then the third thing that's really important to talk about is the expires in property here so usually jwt tokens have an expiration date and the shorter they are the more secure the safer i'm just going to do one hour here to kind of show you but typically you want to do like 15 minutes 10 minutes 30 minutes um and so we create this token and that is what we can use as kind of like the key that the user can use to hit our endpoints and we can verify that hey is this user actually the correct user uh so after we have the token we are going to set a cookie on the response header so that the browser can actually say hey i have a cookie i need to set in my browser and keep track of it and then later on the browser will send that cookie when it does for future requests uh some things i want to point out here is it's usually most safe to use an http only cookie there's also some other flags that you can look into if you want to make this more secure but i'm not going to do that in this example and then we redirect them to a welcome page so let's just go back here and click that login button the first thing i want to show you is we hit that login endpoint here and we are doing a post request to that endpoint but the important part is that the response comes back with a set cookie in the header right so this is that token that we're talking about and the server told our browser that we need to set that cookie so to further exemplify that let's click on this application tab and let's go down here to storage where it says cookies and click on our url so you'll notice that the cookie is actually set with this token keyword and we have the cookie or we have the jwt token here right we're going to talk about the token uh in just a bit like what this actually is because it looks like a random jumble of characters but just know that whenever we make a future request that token is going to be put onto a header so let's further check this out we have a button here on the welcome page which just does a post request to that slash add in point okay so before i click it let's go back to our server notice that we have an ad in point but the main difference with this route is that we do have some middleware set up to make sure that the cookie is provided so this is like a secured route we don't want anyone just hitting this endpoint we want someone who is authenticated and we want to maybe check their user id to do some logic so before we do the logic we're going to use this middleware function to basically take the token out of the cookie and verify it all right so here we are saying get the token based on that token key that we talked about here get the token out of the cookie and then we verify it okay so this is a library function call we can do basically passes a token then we also pass it that secret key that we talked about earlier that we used for signing the token and if the token that came in has the exact same key in the signature as the one that is set here then this will just work it'll return the decoded token to us which happens to be that user that we sign here and then we can access things that we put on that right so for example the user id but in this middleware i'm just going to set it on my request and call next which will allow us to go to the next step in the route endpoint which happens to be this ad route which will just basically redirect us to a welcome page so let me just go ahead and click that and show you so notice here it did a request to the add page again that that cookie was set in the header here we have that cookie here and the server basically took that cookie verified it and called the next um step in the process which is redirect to welcome and notice that we also got a request to welcome because our browser was redirected to it let's talk about the other scenario where the token is invalid or the token was expired okay so let's go back to our login and let's make this expire after one second so now if i were to go back and kind of clear out my cookie here and go back to the login page if i were to type in that same stuff so notice that when i log in we still get that cookie but now since it expires after one second if i make this request here it's actually going to take this else path which is going to clear the cookie for us automatically and redirect us back to the login page let's just go ahead and click that and you'll notice that the cookie is removed from the cookie section here we don't know we don't ever have a token and we are back at the login page so that is my like um invalidation logic setup uh and i think that's about it so let's change the the expires back to an hour the last thing i want to show you all though which is kind of important is like what is a jwt token like what is it made up of so what i'm going to do here is i'm going to make another token let's just go ahead and grab that jwt token and i want to paste it into a website called jwt dot io alright so if you go to jwt io and go to this debugger section you can actually paste in your token and what this does is it's going to split apart your token into the various parts and kind of show you what it's made up of so every token usually has a header section which is this red section it has your payload or your body which is the purple section and then it has a signature okay so this signature is created using that secret key that we set in our server and then also with the header and the payload so basically takes the header and the payload and the secret creates a hash and it puts that at the end of your jwt token again this allows us to basically verify that any token that comes to our server has the exact same hash that we expect because we are the ones who know how to sign and verify tokens with that secret key what you can do here is if you were to paste in some random stuff like i'll just type in some random characters and paste our existing token notice down here it says invalid signature but if i were to put hello and replace our signature notice that it says signature verified so this is basically the same steps our server server's taking it's just using this secret string of hello and making sure that this is token was actually issued by myself by my own processes and if it wasn't we can just throw an exception you can also do some different stuff here like i could change the user id to one and notice that the key will change a little bit let's say you were to change the user id to one but you didn't have the correct secret like this if i were to take this token and just go to my application and paste it in notice that when i click on my make a request button it's actually going to log me out and redirect me to the login page because again that token was bad right someone just tried to hack or spoof a token to our system and basically our application logged you out now the very last tidbit of information i want to talk about with the token is that the body and the header are basically just base 64 encoded strings okay so if you go to a base 64 decoder and paste it in and click decode you'll notice that you just get back a json object here okay so there's nothing really like confusing or special about these two and you can see that they kind of decoded them for us over here it's mainly the signature over here which is just a hash um which that's for another lesson but go read up on what hashes is um just so we can use that to verify our token on the server all right so that basically wraps up my quick overview of jwt with node in express if you have any questions be sure to leave a comment below maybe i can come back and answer them give me a thumbs up if you enjoyed watching this video and like always if you're new to this channel be sure to click the subscribe button because i'm gonna have videos like this in the future that should hopefully help you become a better web developer all right thank you so much for watching have a good day

Channel: Web Dev Cody

Views: 92,377

Keywords: web development, programming, coding, code, learn to code, tutorial, software engineering, node, express, nodejs, node.js, express.js, expressjs, jwt, jwt authentication, sign a jwt, jsonwebtoken, json web token, cookies, express cookies, cookie parser, authorization, what is a jwt, how to use jwt

Id: dX_LteE0NFM

Length: 10min 19sec (619 seconds)

Published: Wed Mar 31 2021