Implementing JSON Web Token (JWT) for User Authentication | MERN Stack E-Commerce From Scratch

all right guys so in this video we'll be implementing the Json web token which is a token which whenever we are in we are signing in or registering a user so uh it is always good practice to use Json web tokens just for the sake of authentication by the actual user all right so this is a sample token which we get from JWT okay so this basically has three components one is the header one is the payload and the signature all right so the header contains the algorithm which is used to Hash the particular data all right and also the type which is JWT and payload is the main thing which contains the uh encoded data all right so uh that is um whatever the information you pass in okay that will be um uh sending in the user ID as far as our application is concerned all right and also a verification signature okay so whatever the uh signature just for extra layer of security okay that also will be configuring Okay so so this is about JWT and uh this is basically used to you know um prevent any kind of um access to any protected routes or anything so if the user does not have a token okay so he he or she is not allowed to access that particular route so we are going to implement that based on JWT so now let's go ahead and install the JWT in our application okay so now let's uh open our terminal and uh make sure are in the server directory all right and U let's install the package called Json web token all in one word all right so let's hit enter now let's go to the login user controller and create a token based on the um user ID that is stored in the database all right so let's uh uh create a variable okay so right below this okay so let let's call it token and set that equal to uh JWT first of all we need to import that okay so let's import JWT okay so it's a default export which is coming from Json web token okay okay so web token okay so now let's um bring in the JWT okay and this has a method called sign which will sign in the token based on the particular value that you send in okay so this is the payload that you will be sending it you can just send whatever you want which needs to be hashed all right so we need to Hash the user based on its ID so user ID I can just call it like that and set that equal to user doore ID okay so that's the ID which is stored in mongodb okay and now we need to provide a secret key okay so that secret key could be anything of your choice so you can just go ahead go ahead and create one of them okay so I'll be creating that now so in your EnV file you can just call this um JW tore secret okay and you can just set this to any value okay so this will actually match the one which uh which is you know which is decoding it okay so based on this value it will create a layer of security and if this doesn't match that means that we are trying to you know access it without any you know authentication like that so uh we can just set this to any value let's say a b c 1 2 3 uh d e f 4 5 6 something like that all right so let's save that and uh now let's bring that value from ourv file so process env. JWT secret like that and also we need to provide a an object such that we can uh when do we want this token to expire okay so we can set the property called expires in okay so you can just set this to one or two days okay so that um we can have some kind of security but just for development purposes I'm going to set this to 30 days okay so whenever we are like in production we can just change this value to um a decent you know time so now let's go ahead and uh uh like actually we won't be sending this token with the response okay so that's a actually that's the bad way of doing that because when we before we used to do that we used to uh store this in local storage and that used to be a security issue when you're you know building such large scale apps okay so it is always uh secure when you store it in a HTTP only cookie okay so that we will be doing it right now so we are going to set this um inside a cookie so we can do that by rest. cookie all right and then we are going to give the name of let's say JWT all right and uh we are going to then pass in this particular token all right so token and uh now we need to pass in some options all right so we we need to set this to http only okay and set the value to True okay and next we want to make this secure okay secure and actually I only want to uh make this secure in production okay and not in development because we do not have the https okay in development so when we are pushing it for production when we have a a real website like which is secure then we want to make that to True okay so I can just say process Dov do node uh nodecore EnV that we actually set in the uh earlier videos all right if that is not equal to development all right so that's done so process. EnV okay and and the next value which is we are going to provide is to provide uh to prevent any kind of cross site scripting attacks so we are going to mention a property called same site and set this to strict okay in order to prevent any cross-side scripting attacks and uh we want to um expire this token within a particular value okay so that is that also I'm going to set for 30 days okay so this take so this Valu is in milliseconds okay so I'm going to convert that to um you know 30 days so we can do that by 30 into 24 hours into 60 minutes into 60 seconds into 1,000 milliseconds okay so this value is in milliseconds so I can just say 30 days okay so that's done and uh yeah we are already set for now and let's go ahead and test it out so now if I log in through John's email ID and his password so if I hit send okay so we get all of the we get the response okay and also if you have a look here you see we have one cookie that is by the name JWT that we actually set and you see this particular value that it actually has okay so this is the uh encoded value that is um basically hashed okay based on John's user ID okay so if I just copy this and go to the website of JWT and just paste this in okay so if I paste this you see it has a user ID okay so this is the user ID of John okay so if I just copy and uh if I just go to mongodb and uh you can see that it ends with these letters c e a a b okay so that's what we are actually getting over here as well c e a a b okay so that means that our particular user ID has been hashed and also you can just see when it is actually expiring okay so that uh 30 days from the day I'm recording this video all right so uh so that's done that's all we have actually said right and also so this is HTTP only true which we also set and also this is secure to false okay that's why that's because we are in development all right so now uh let's uh put this in a separate function okay or in a separate file so that we do not have to write this everywhere whenever we are logging in or registering a user okay so we can just create a function over there so let's go to our um uh server directory and create a folder called utils short for utilities and uh let's create uh file for uh let's call it generate token okay JS and uh let's uh first of all bring uh those things okay so that is this token and uh this thing okay so I'm just going to cut that and uh yeah let's go here and let's paste that in so I'll uh just put this in a function called generate token const generate okay and uh and I'm going to pass in the uh response object okay along with the user ID okay so rest and the user ID okay and uh this is a function and let's uh put this entire thing inside the function okay so that's done and uh now uh I just need the user ID okay so instead of this I can just write it uh just like this okay and just passing in the user ID that we are actually getting from uh from the you know parameters and let's finally export this export default generate token okay so that's done and now let's go to user controller okay first of all we need to import uh JWT okay so import JWT from uh Json web token all right so since we need this function over here here we have to import that and also the response okay since we are setting the C cookie over here okay so now let's uh import over here we don't need this anymore so import generate token all right so that's done and uh now let's finally call it over here okay and just uh send in the response and the user ID okay user doore ID okay so let's uh test it if it's all working the same okay so let's send this again okay yeah it works the same okay still the same okay so if I just test that out uh once again okay so still we are getting the same value all right so that's done so in the next video we will be uh preparing an O middleware such that we are restricted only to the routes we are actually um used for not even though we are not logged in and we want to protect such routes like let's say payment route so we are not supposed to go to/ payments unless we are logged in and we have some uh products in our cart okay so we will be handling all of that in the next video

Channel: Tanuj Malode

Views: 221

Keywords:

Id: 7cAobCxbkbA

Length: 11min 16sec (676 seconds)

Published: Mon Dec 18 2023