MERN Stack Full Tutorial | User authentication, JWT, Node.js, MongoDB, React and more

hey everyone welcome back my name is mehul and in this video we'll be doing a complete month stack application development using all the four later technologies mongodb express react and node.js so this is what monstaq is these are four technologies which you can use to develop a full application it's a convention people say moan stack but pretty much you would use a lot of other technologies as well so in this video i want to just go ahead and show you how you can develop a full complete application only using monstack let's go if you're new here consider subscribing because i'll be adding more such interactive content and things which you can do here so make sure you like and subscribe to this video and let's just go ahead and see how we can build ammon stack application okay so right now you can see on my screen that we have a simple text editor and that's it i have just this folder we have index.js and that's it that's there's nothing else so we're going to be starting from the very scratch in this video and taking a look at every single part of the application so the first things first we know that mon stack is plus express plus react plus node now to be honest express plus node thing is fine because if you're using express it doesn't make a lot of sense because if you're using express you're automatically using node.js it's kind of redundant but it's okay we'll start with setting up a simple react app because that can also run standalone but what you have to remember is when development inside development you would have a node.js server plus a react server running right but when you are running this in production you will have a node.js server but you will have static react files that is the difference between development and the production thing and we'll see how we can combine them in the production video and in when we are deploying this on the cloud but for the development part let's just stick with this setup right here this means clearly we need two things the first thing is node.js server and the second thing is react server or the react project so what i'm gonna do is i'm gonna go ahead and create a directory here called server and this will just contain our server stuff and i'm also gonna move this index to server right i'm gonna create another directory called app or client or whatever you want to name but we want this to be a react project so i'm going to initialize this with npx create the act app and this would be just client right so this just initializes it with the default react bundle and installing packages and stuff all right so you can see now inside our client folder we have package.jsonyarn.log file which means we are running yarn as the package manager if you see a package dash locked or json file it's completely fine that means you're using npm if you write npm like this in your terminal and do an npm version if this happens this appears a six or seven or whatever version you have at the moment that's fine if you are using yarn that is also fine these are both package managers and at least yarn version one is basically the similar thing as npm version whatever you are running six seven eight so we have this client set up now what i want to do is split my terminal here real quick and i want to go ahead and start this project by saying yarn start because this is going to start our client project on port number 3000 by default right so it opens it up in the browser it will just compile the stuff like you know like i said this is the react server which i was talking about when you're doing this on production when you're deploying this on a real website you will obviously not have a react server running because react is just html css and javascript right at the end of the day react is just javascript and the reason you need this server is because the app needs a transpilation step the jsx which you write the modern javascript syntax which you write that needs a transpilation step so babel webpack all this stuff is sitting in the server and doing that as you type like the hot reloading stuff and without actually refreshing anything all that stuff happens but the moment that happens you can see that on the screen and it refreshes and all that things but you don't necessarily need that on a production server so anyway let's just keep going so we have our react app up and ready what we want to do next is also have our server some sort of you know in place so of the month stack we have already covered the r part so it's the main type and so let's just go ahead and start with our main time which is basically going to be very simple first of all we need to initialize the project because this is a node project so we can just say yarn in it if you're using npm you can say npm in it i'm just going to keep the default options you can also specify a dash y here but anyway now you can see we also have a package.json file here and let me just actually copy this whole thing and save it inside here all right so you can see we basically have node installed on our system right i did not talk about that because i was assuming that everyone has not installed but if you don't have it i have a bunch of videos probably i will link it somewhere here in the cards at the top right or left showing you how you can install node.js but once you have done that you will be able to see that it's very easy to set up a project now the next thing you need to do is install express now express is a framework e stands for express and express is just a node.js framework which allows your application the server application to have easier looking syntax i mean you can technically still do all of the stuff we do in express in node but it's just easy on ice right it's easy to do so let's just start with yarn again yarn out express and what this will do is this will install the express.js package inside of our server folder okay so the moment we do that you're going to be seeing that inside package.json we have this but we're going to be adding another server called yarn add node mod so just like you can see that we have react server running which will reflect let's say if i go to this app.jsx and say go down right here and take a look you can see it updates automatically right similarly we can do a similar thing with servers using node mono where nodemon would just restart the node.js process if there is any change okay so now you can see we also have node mod installed and what i'm going to do more is i'm going to add a script here called dev so this script just means that whenever i write yarn dev or npx dev or npm run dev this should happen what is that that is nodemon index.js right right yarn dev and you can see it runs nodemod index.js clean exit waiting for changes before restart because obviously there is no change yet let's just go ahead now and take a look at how we can write our express server real quick i'm going to go ahead and say const app or const express is a require express and once you have express you need to call this as a function to actually initialize a new application then you can specify some routes like hello for example and this accepts a request on a response object which can be used to determine what headers the client has passed or what you want to say to client in this case i'm just going to say hello world like this right and the final thing you need to do is also start a server because right now you can see nodemon just runs your node file and exits because there is no long running process and servers are long running process so what you want to do is say app dot listen and let's say i want to listen to port number 1337 right and we can also say something like console.log server started on one right just just a quick notice which you can see in the console now what you can see is if you go to localhost1337 slash let's say hello which which is our defined route you can see we get hello world now remember we have two servers running at the moment the first one is the react server which is a fake server because we don't need this in production and the second one is the node server which we will need in the production right but for now we will develop it as if we are having two different servers right in production probably this page would be served right here automatically right you can do that still even in this phase but it will require a lot of patching and you will lose a bunch of features like auto reloading and stuff like that all right let's just go ahead and create a very simple app which handles login registration and setting up a favorite quote inside the dashboard right that's all that will be so what we want to do first things first is we want to go ahead and clean up this mess right here and let's say this is just registration area for us right so i'm going to say h1 register and i'm not going to focus at all on the layout or the css part because the monster actually we just want to cover how the core functionality works and you know github co-pilot will be really really helpful here let's see if it can help first name nope i don't want a lot of stuff so we can just stick to maybe name email and password right and what we want to do is really create them as state variables all right so now you can see i imported use state from here and set up the basic boilerplate template which is just having these variables as the state variables and having name email and password as a theme as these things and you can see now this works absolutely fine right we have a pretty much working form and you can just inject a bunch of html here if you would like and a final button so you can say input type summit and then value register and that's it now you can see that we have let's just go ahead and also give this a vr but you can see that we have this other form so whenever i submit this i mean after having the right data you can see it redirects me to a page so in order to change that behavior we'll have a method of we don't exactly need a method we can just say on summit and we can specify a register user now right here this is the very first point when our front end is going to communicate with the back end right and we can make this an asynchronous function and what we want to do is we want to say that hey go ahead and fetch something like this which called your copilot is helping me already with so this is localhost one three three seven remember because we are running this on port number one from three seven and we're gonna have an api slash register route let's see where what we're gonna do is pass the body as the following object json.string name email and password right so once we do that you're gonna be seeing that we just send this to the backend but we also need to tell the backend that hey we are gonna send this as a content type of application json and why that is necessary that is necessary because there are a lot of content types you can send this in a bunch of ways you can send this as a binary data you can send this as url encoded and stuff like this but the simplest is for text-based data at least is json so i'm going to go ahead and wait for the response and then we are also going to try to convert it into json like this and i'm just going to console log this data right here right so this actually ends our first part in which we just have to go ahead and create a link between the front end and the back end so now if i have something like this register and of course we need to do one more thing is the event which we get here we need to set event dot prevent default why do we need to do this because right here you can see forms have a default behavior of refreshing or redirecting to that particular page which you have specified as an action let's say this is our email register and you can see that we get failed to fetch because again we are missing one thing that we need a method here of post register again and you can see now we get standard errors which is fine we'll fix this in server now all right so the first thing we need to do here is gonna be actually setting up our course policy for the local development part i mean you can do it for local itself it's fine but what you want to do is first of all terminate your server and install a package known as yarn add course and the reason you want to add course package is because you see this error access to fetch at this from origin this has been blocked by course policy right so you're gonna you're gonna have this error anyway even if you create your server if you don't have the correct course configuration now remember that this page ideally this react page ideally would be served by the node.js same port itself right the same server the same port itself so you probably don't need course on production but that is required when you're developing at least because browsers are weird and they require all sorts of security measures and causes one of the security measures right so you need to do that so once you have that you just have to import it via required course and just say that this course is a middleware now middleware is just a function which manipulates the response and in most of the cases just passes it to the next function right so it just says that hey this course what this does internally is this it just sets correct headers on the response so that chrome allows you to communicate with a cross origin and why this is a cross origin because of the different ports right if they were all the same ports localhost 1337 then it will not be a cross solution so that is fine let's just start our server again by let's say you don't want nope beyond diff right so once we do that and refresh or maybe even not even refresh you can see right here we no longer get the course error but actually uh unexpected greater than symbol or less than in json that is because we are receiving just the wrong response at the moment so if you go right here you can see that we get the response all right so now it's time to set up handler called app.post api register now the first thing we want to do is of course we can just say rest.json status okay but how do we get the body here which the user is passing because if you do something like console.org request.body you're going to see that when i click on register we pretty much get undefined here in the console right so that means we are not receiving the body yet we are but that is not available at least on the request or body syntax right here so the reason for this is because this route does not know that you are passing in json right and in order to let express know that hey we're gonna be using json a lot to pass you know to pass the body what you also want to do is you want to use an express.json as the middleware so what this does is that it says to express that hey we're going to be going ahead and you should be going ahead and pass anything which comes as body into json right that's that's all it does and also like you know populate the body in the first place because if it does not it's just undefined anyway so once we do that hit on register now you can see we get status okay as the response as well as this data which we got from the front end right so that is cool okay so we are basically done with express and node here and the only thing we need to do is link now right so the way we're going to be doing that is by actually installing another package called mongoose and mongoose allows us to define models and work with mongodb as well through it right so mongoose can be as a you know it's an orm which allows you to connect to mongodb but it can be a bit useful for data validation and just schema validation as well i'm going to be creating a folder here called models i'm going to be starting with user.model.js or you know user.js whatever you want to do so what you want to do is you want to get mongoose first by saying require mongoose like this and you want to define a model so you want to say my user model is something like new mongoose dot schema and it should be having a property called name which is of type string and this is required property as well require true you can say email type string required to and password require you know github co-pilot just taking over the world we don't want to create an ad we just want a port let's say this is of type string and it's probably not required right and all we need to do is we want to say that the collection of this model is user data for example this is the name of the collection in the mongodb database which you're creating next we create a model by saying mongoose.model give it a name like user data or something and which is the schema associated with it that is the user and then finally you just say export not export default but module dot exports because we are in still in common js world i should have probably done this in es6 modules but anyway we'll probably do it sometime later on who's this model right here so this model just allows us to directly access and interact with mongoose the next thing which you want to do is also import mongoose right here with us and the reason for this is because we want to connect to mongoose before anything happens right and the good thing with mongoose is although this mongoose.connect returns as a promise but mongoose internally cues that is it puts it in a queue of things to do if the connection is not ready yet so you can technically just connect it in a synchronous way and just you know start using it anywhere you like so what you want to do is specify a function specify a string here connection string in my case i'm just running a localhost mongodb let me just see if my mongodb is running not really so i'm just going to start my docker for you you would have to install mongodb on your system again it is pretty straightforward just go to google write mongodb go to this mongodb website download the start do or start free or download the community server edition and just start it by yourself i think if you do go to get started here now you don't need to probably create an account let's see mongodb download yeah you want the community download version and once you download it it'll install it open it it'll automatically be started on port 27017 okay so once that is done you should be able to write something like mongodb 27017 and the name of the database and the good thing about mongodb is or bad thing depending on how you see it that you can pretty much specify the database name and collections right away inside the code and automatically create it if not present i can just say this as full non-stack video for example and that's it it'll automatically create this database and then when we use this user model it will automatically create this user data collection all right so once we have this all we need to do is actually we can actually go ahead in the model and do one more thing we can say the email address is also unique so what this would do is this will create an index in mongodb which will be on unique in a status there would not be a duplicate value for email or it will just throw us an error right so what we want to do is we want to convert this into an async function and throw it inside a try catch so we want to say okay rest.json error is fine but we also want to say let's see what codepilot has to offer yep that is pretty much it that is pretty much it that's what we want to do but it's always a good practice to not just arbitrary use user data but instead do something like this right because now i know that hey i'm in control right what goes into the database and yep i think that's all we are getting from the user side right uh name email password yep that is true and then we finally say rest.json status okay right otherwise inside catch if we are arriving we know that the record is already found it is duplicate so we can just say status error and then error is duplicate email right something like this you can perform more validation here depending on maybe like your name should be certain characters your email should be certain characters and so on but this is like the bare minimum version you should do in order to handle the errors as well okay so once that is done with us let's just quickly go ahead and create a login route as well and maybe actually let's just say yeah i think we can just go ahead and create a login route right here what we'll say is instead of user.create we want user.find1 with an email of request.body.email and password of request.body.password and this is actually a bad practice to store passwords in plain text which will shortly cover how we should fix this but we can just say that if we have a user right here and we can just remove try catch from here because it will not fail if we have a user until unless your mongodb connection itself fails but yeah then we just say return rest.json data's okay and then user true for example we'll return some sort of authentication information here ideally else what you want to do is just return restore json error and user false that's it all right i think we have the bare bones code ready with us we can start it with nodemon no yarn def and once we do that you can see we get some mongodb warnings it needs some new flags here which is fine i mean they're just warnings at the moment but what you can do now is go back right here and you can start with let's say a at the rate b dot c right and maybe let's say it's the name and the password so when i register now you can see that we get a duplicate email which is probably not we were expecting so let's just debug what is going wrong by also console logging the error right so now if we register go to the console you can see that we have an error saying user is not defined very well because we probably did not import this model so what we want to do is also import it from models user.model right and of course this would be screaming loud if you were using typescript that is one of the reasons i like typescript of one of the many reasons i should rather say yeah you can see now we get status okay and here also we get the console.log if i try to create this user again then we will actually get a status error right which is now correct in this case in this case you can see the error which we get from mongodb is right here you can you cannot actually see it very well because the error dot message is kind of hidden here which is like this is the error message right but yeah i mean you can technically just take out this error message and detect if this is truly an error of duplicate key or not because just use just like you saw in any other case it will return you this error so it's not very tight but anyway that's fine that's fine to start okay so we are very close to creating our basic full stack application here we have a registered user let's just go ahead and create a simple login page as well i'm going to say login.js and it's not going to contain name but pretty much everything else it will be login it will be login user and the only change which we need right here is saying that this is api login we don't have the name we only have email and password and we also don't have this thing right here right so you can see rest of the stuff is pretty much the same all right so the next step is once we have this login page actually let's just go ahead and organize this in a better way so we're going to be saying this as pages and let's say i move this inside as um register let's do a little bit of next share style things login not exactly but you know and we can do create root but i think we have not installed react 18 yet here so it's fine we can just keep it at render we can remove this and i have just removed some unnecessary files it looks a bit cleaner now you can see we have an app which is being imported from the wrong place so what i'm gonna do is create an app component and we're gonna also be using react router now right so in order to provide routing on the front end we'll be doing what i'm gonna say as a react router dom so this package right here allows us to perform react routing that means different different pages with the help of client-side routing and finally when we deploy it inside node.js project as a static files we will still be doing client-side routing but that will be also be supported via server side we'll see when that happens but anyway for now let's just import react from react and i'm just going to say app is a function which returns us this whole thing right so this thing right here is going to be imported from the app router dom which co-pilot was already able to guess and this would be browser router right so this browser router just provides us with that functionality we should also import something known as route which is going to be something like path this component this should be actually passed login component login and this should be an exact match and similar thing for register and finally we will also import these two components from pages and login and register okay i think it makes sense so far so now if i go ahead and export this export default app you're gonna be able to see that let's see we need to remove the css file imports i think and once you do that it should work fine so now if i go ahead and take a look right here if i refresh nothing happens because we don't have any route but if i go to login we get the login route and if i go to register we get the register output awesome so now once again now let me just refresh this once what i want to do is inside of login part we already have done most of the work which needs to be done in order to send the data on the backend inside our index.js file inside backend we will also create a login endpoint which will do the similar thing but it pretty much does nothing at the point so let's just go ahead and create a new user called admin administrator admin.com and the same password so once i register this i get a status of okay if i go to login now if i try this register this you can see we get status okay and use it true because my password was fine if i write triple f5 here you see we get user faults because my password was wrong so that is fine but how do we add authentication to this now in order to add authentication what i'm going to do is i'm going to add another package called json web token and what this package would allow us to do is it will allow us to sign jwd tokens and retrieve them and basically work with them and i have installed this on the client side but actually it makes more sense to install it on the server side so i'm going to say yarn json web token on the server directory as well so what this means is that we're going to be importing this first of all jwt is required json with token this jwt right here can allow us to create a special token which only we can create and can allow us to determine that hey this user is legit right so we know that if the user account exists we can send the user a jw token so we can say token is jwt dot sign and what this is as far as i remember the yeah secret of the private key is the second thing so we our secret is secret one two three but ideally your secret should be way way way secure and the sign thing right here is just the payload which you want to sign right in this case i just want to have an email request.body dot email right here and probably their name as well if you would want uh user dot name for example and for the sake of consistency you can also stick with user dot email and what you finally do is you just send this token down the wire now what will happen is that when you log in if you go ahead and actually remove the fives if you go ahead you will see that you receive a token like this now what this token is pretty much it's nothing it's just a base64 encoded variant of your payload with certain security embedded and the way you know it is that you see these two full stops right here and i'm just telling you about jwt right now this is a standard example of jw token this jwt token has this payload which is in between of these two dots and this thing right here is base64 encoding and if i try to decode this with a to b what you will see is that this is a json payload right with the fields which we passed name admin email this and also uh you know a creation time of the token uh specified by the jwt library itself right if you just go ahead and try to do it you will see that this is actually the time of creation of this token okay anyway once we have this pretty much no one can modify this information because if they do that token gets distorted you know it will not pass the server side check so it's fine i mean we can just go ahead and use it right right there so what we can do once we have done that is we can go ahead and inside of our login app we can say if data dot user exists then we can say alert login successful else alert please check your username and password right once the login is successful you may very well just send them at a code page right window.location.org so what this will do is it will allow us to create another route here code.js where we can just show the code of the user which they have right i'm going to have a code page here saying something like hello world for example and what we want to do is we want to have the user code being shown here right or let's just name this dashboard instead of code and this should also be this should also be dashboard and one more thing which is we can just name this as login okay also let's just go ahead and define the route for this real quick so dashboard dashboard and import dashboard like this and one more thing which you can do is inside dashboard we need to verify the user is logged in right so we're going to be writing a use effect hook and we're going to be saying that hey if we are not able to find that jwd token with us so i'm just going to say jwt from json token because we also installed it here i can say uh my token is first of all we get it from local storage which again something we have to see if we have token then user is jw decode token which is like copilot is doing all this stuff and we can say if user does not exist that means something went wrong uh yeah i mean this kind of works right which co-pilot is writing instead what we can do is make use of use history hook from react router use this tree and once we do that you will be able to see that we can just say history dot replace and login right here so this performs a check and another check which we need to do in fact is that if user does not exist if user does exist what we want to do is perform this request to the backend and see if we can populate the code so we can just say populate code right here and what this will do is that this will be a function like this which could be async and what we can do is just say await fetch api slash code cons data is equal to api slash code and we can just say headers we are just including this in the headers x axis token instead of cookies and we can just say you know what we did here local storage dot get item of token now quick recap of what we are doing here is that before after just after this component mounts we run this use effect only once if we found the token that's well and good you know that's well and good we just populate the code by giving an http request to slash api slash code which should be actually localhost1337 slash api code if not then we redirect the user to the history dot replace thing off login right okay so once we have the code with us what we can say this could be just request and data is request.json we can just say console.log of data right now um just to see what we are getting right so the next thing which you want to do is the right inside of our register page we also want to say if data.status is okay then i just navigate it to the login page right so i can just say history.push login not push state but actually push and this history right here is again a hook which is provided by use react router. library right all right so so far what we have is if i go ahead and create another account let's say mabel payment the same password we get redirected to the login page and if i have this as the login thing you can see i get login successful click on ok and i get redirected to slash dashboard which just says me hello world at the moment right and inside of console we see nothing happening instead of networks also nothing happening so that is that is probably not good because yeah that nothing happens because we don't have the token store so what we want to do at login is the moment we get this token we also want to store it so i want to say local storage or set item token is data.user right because this will now allow us to send this token over and over again so let's just perform the login one more time click login and now you would be able to see that our local storage includes not this one actually this is from some other project but if i do a locals let's just go ahead and do it one more time and let's say login number successful and you can see right here we have our token in place right and you can also see we get an error that 404 not found so let's just go ahead and create this api now at the back end so what i'm going to do is go to my index.js again create a new endpoint and remember this endpoint was get it was not post so we will just keep it get like this but what i'll do is i'll say my token first of all is request.header x-axis token right because we want to perform authentication first so i'm going to say const decoded is jwt.verify and then token and then secret123 which was the actual secret which i wrote right this just verifies synchronously you can also pass this as a call back if you would like uh synchronously this verifies if your token is correct or not right and i think this throws you an error i'm not sure if this throws an error or just returns or you know returns undefined so it just it says that it returns you jwt or string so it does not return you a null value yeah so i'm hoping that this throws you an error anyway so if this does throw you an error what you want to do is try catch this block and if we have a decoded token what i want to do is the email should be decoded dot email right and what i want to do inside catch i want to say that you know console.log error first and then rest.json status invalid token or you know status basically error let's keep the format same error is invalid token right but right here okay yeah but right here inside api code once we have the email we can get the user and once we have the user we can get the code so i can say return status okay user not user but code could be user dot code right here which is inside our model right so that's fine that will work but you will see that we also need to create the code right or add the code so what we can do is also create a post route which pretty much again is authenticated we verify the token we get the email but the only thing which we say here is update one email this and set the code to be whatever we passed right so request.body.code which will destruct from here um status say okay and data is invalid in other case awesome so i think that is pretty much all we need from the back end part yeah it should be probably working just fine let's see it how we can implement this on front end okay so the first thing we want to do is you want to say this is your code and let's say this is code or no code found something like this right and what i can do is make this code as a state variable which will help us set this dynamically so once we have the data i can save data dot status is okay then i just want to set the code to data dot data i guess i think that's what we return right and go to index we can see slash api slash code hit ok and then the code okay so data dot code not data dot data else i just want to say alert data dot error right all right so here we have the basic setup for at least displaying the code and right here you can see the moment i refresh it we get no code found because fair enough um okay actually we are not returning anything and the reason for that is probably we missed rest.json okay now if i refresh this you're gonna see that again we get no code found because okay it saves me undefined as the alert alert you can say see we just get status okay the reason for that is because user.code is undefined and undefined is not json serializable so json just removes this so what we want to do is actually provide the user an interface to set the code as well the way we can do that is we can wrap this whole thing inside of a div and create an input field or rather a form let's say input type text place on the code value is empty port set value is you know e set m code v v.target.value basic state management stuff and you can just go ahead and create this like this i also added a summit button and i also am adding a handler to this which is update code what this function will do is it will just send the same update call but this time you update the backend right so i'm just going to say the same thing right here as populate but instead of the get request we're going to be performing post request and headers would be same there would be one more body thing right here and there would be a content type header here as well application json and the body would be json.stringify the following thing which is quote as m code right there and the final thing which we can do is i mean we already have the set code thing we can also say set temp code as empty and that will be it i guess because we already have the back end ready on the server side all right so if everything is fine i do believe this application should just work out of the box now so or maybe not because we are missing our input button i guess or was it just a refresh away yeah we have an alert of some sorts not sure why it's off populate code for some reason yeah and that is because we are not using a weight on request.json so we just have a promise here and that should not be here as well there we go all right so now it should work fine if i go ahead and write a code something like work today or yeah okay so our code is not even working temp code and set encode e dot target dot value not sure if it was not working or oh this is not set value on change i think i should really go to bed but anyway let's complete this video work today party later i don't know like i just randomly created this and if i click on update code nothing happens because we need another final thing which is to prevent this event from refreshing the page all right let's hope this works now work today party later update we send a code request and we have another problem on backend like yes because i think we are still yeah i mean i'm always in the graphql based mode right where you just return the response and it sends us json anyway so refresh now you can see our code is updated i mean we know that it works but if i try to add new code here updated code okay we get no code found that is because of why is that that is because of let's see inside of date code we set the temp code as that and set code as no this could be just temp code right because we just sent the temp code so we know that this will be the updated code so refresh hey there update code and you see that we get hey there as the code so i mean i think this will work fine now if i go ahead and create a new account if i go to register may hold two enable to add the rate code down dot com and use the same password register and log in again login successful okay i am able to update the code and we get hey i'm able to that's awesome now if i go ahead and log in again but with my original username and password hit login login successful we still have hey there code right and inside of the database when we see and the database you can see that we have a full more stack database and inside that we have a user data collection where we have all these records which we have created right with the code values one final thing i want to just tell you before going from here is how you should store passwords because that is i think super important thing and usually people miss out on videos like these so i don't want to do that you should absolutely not store passwords in plain text like this the way to store passwords is the following go to your server folder and install a package called yarn add bcrypt js it could be bcrypt as well i'm just using bcrypt.js because it is it does not install binary binaries of bcrypt which are native binaries and although it's a little slower it just works like that but if you're writing it for the product it's probably better to also consider pcrypt as the package so bcrypt is a hashing algorithm a hashing mechanism which can secure your passwords by making a one-way hash of them so what do you want to do when somebody's trying to register is you try to create a new password by saying await vcrypt.hash request.body. password and give it some cycles and usually 10 cycles are enough and you store the hashed password instead of the regular logged in password right so this is the first step now the second step is how do you verify this because the moment somebody now tries to register on your app let's say if i try to create a maple maple three at the rate codedown.com and do the same thing what you're going to see inside of database is that mayhew3 right here has a weird password right and this is a hashed version of that password nobody can know what the original value was this is basically garbage at this point but you also want to verify it right how do you verify it so instead of performing a request like this you find the user you know without the password and then you say something like is password valid again get a pilot to the rescue bcrypt.com pair and you can see it accepts two argument the first one is the string and the second one is the hash so the string is what we are getting from the user so i'm going to say request.password and the second is the hash which is our user.password right here so now the equation becomes if the password is valid because user is always going to be valid more or less right assuming that you know you can even add a check like here return status error error invalid login you know something like that if you want but yeah i mean once you do this it will pretty much work like the same thing so maybe at the rate codedown.com you can see i get a login successful one two three four five update but in this case what we are doing is now we are hashing this password in the database so it's much more secure why this is secure because in case your database gets compromised then nobody can really crack this password and know the real password of the user until they haven't like really put a single digit password which you also allow but anyway the point is it makes it harder for hackers and crackers to reverse this password so always make sure that whenever you're using any application in production encrypt it with decrypt or any good encryption library but yeah that's pretty much it that is all it takes to create your standalone mod stack application with authentication and that is all for this video probably in some part two we'll be taking a look at deployment of this application where you actually deploy it on an ec2 or a digital ocean so that is all for this video i'm gonna see you in the next one really soon [Music]

Channel: codedamn

Views: 139,888

Keywords: web development, codedamn, mehul mohan, full stack development, full stack web development, Login Authenticator with MERN Stack, Build a MERN Stack Application, Full MERN Stack Tutorial, mern, mern stack, react, express, node.js, mongodb, mern tutorial, react full stack, full stack, mern stack tutorial, react tutorial, mongodb tutorial, Learn the MERN Stack, Full Tutorial, MERN Stack Course

Id: Ejg7es3ba2k

Length: 49min 56sec (2996 seconds)

Published: Thu Aug 26 2021