Authentication in MERN stack using bcryptjs and JWT.

hello welcome to the channel this video will be about authentication using two packages with cube.js and Json web token a couple of months ago I made a video on a note taking app in the monster that app was only about doing the Cloud positions there were no features 14 tickets on a privacy so what we are going to do is that we will take the same app and add authentication to it but before we start coding I will first show the fundamental idea behind the code so here this is basically the blueprint of the web application that we made initially we just had the create enter node functionality will be created the node and we display the node and it is edit and delete operations the backend only consisted of the and there is code on node open crowd persons so now what we are going to do we are going to add two more components one is a sign up another video sign in the sign up will contain a form which will post the username email and password to the server in the server there will be two new routes for sign in and sign up the sign up out will has the password using big clip so what is B Cube it is a JavaScript library used for hashing passwords and comparing them and by pressing it is it is a enhancing is a process used in cryptography and computer science to transform data or arbitrary operating sizes in the fixed size sequence of characters typically called a hash value or has code this is a s password if you store the password as pinstring in in case in database is set the password will be exposed so Wiki provides a layer of security by pressing the password dot hash is because APK function quest.body is sent by the user and then is a number of seconds the signing component will send the email and password to the server in the backhand we keep the comparable for us has the incoming password and compare it with the best password stored in the database if the validation is successful it will send the Json web token as a response Json web token is an open standard for securely transmitting information between the server and the client in the Compact and save content format the token will contain two parameters the first will be payload and that will include user ID and the second is a security key it is stored in the server the frontal will receive the token and store it in the local storage and this is it our access to the secured parts of the website depends on the presence or options or token in the local server when we want to login we will store up token and when we want to look out we will simply queue the local storage to set up the project I will clone and install the react node app from GitHub I have provided a link in the description now change directory to react node it is the front end now run npm npm install to install the packages then open another instance of the terminal then now since it's directly to the back end you can run npm install now start the you know you might need to run npm or delete fixed minus one is force duplicated run in PM Brown installed and open the power cell and run mongod and I hope you have got installing the computers while the application starts let's create a separate file for download routes by using the Express Auto so that the main server file does not become messy create a folder called reports in the backend directory containing a file called node.js now internode.js file import Express then router consort is equal to Play Store author and also import a node model foreign export this file module.export is equal to router now go to server.js file and copied up in points already created here this endpoints are important notes okay not the user and paste it interrupt note search File and change the app dot to router Dot now go to server.js file and import the routes cons notes is going to require that in the routes is less notes we get dot use notes now go to the front-end terminal and running application by npm start to the URL now let's see if it is if the inputs are working properly let us create a new folder actually we also have to add notes we will name this endpoint as gate nodes so make this changes in the backend point also at the delete okay probably now go to the backend terminal and install bit keep JS and the Json web token APM install with Clips yes and now okay npm install Json web token now go to the components folder in react node and create two new files one for the sign in and the other one will be first sign up let's input react cost sign in and Export the com export default sign in to export the component now go to the sign up file just type in our AFC now let's go to the booster pipe website to grab a form I will paste this form first in the signing component and again the same form in the sign up component also in this let's change the class keywords to game class name and make the input field self closing so the input texture closing I don't need this container now let's copy this whole thing again and again paste it in the sign up component in addition to the email address I will also create a new field for the name for the username now let's go to home home file and I will import a sign in and the signup components let's display them now let's take a look at our browser okay put the sign in to sign up for Visible but I want only one of the companies to be visible at a time good so let's first create a state called visibility which will keep by default have a Boolean is false and I will be using the tinary operator here the visibility is false it will by default display the signing component and this is the sign up is displayed and if the user already has already is registered then he will click on this link to display the sign up form so it assign in form click here to sign in and just click here to sign up now I'm going to create a function that will toggle the visibility after signing under sign up serviceability visibility and click it to sense the visibility menu Falls to true and vice versa is called the function toggle visibility on click and again the same thing here sorry I forgot to import a new state book okay and click this is sign up here this is sign in okay it's working now now let's go to the sign in file and change the submit to sign in and do the same in the signup file also now I am going to import xeos and also the use that hook from react and create some states and the first one will be for name and the second one will be for email the last one will be for password now let's say let's hit the consensus event listener to the input fields set name event or Target or below [Music] copy definition paste it in the email input and this will be set email the last one will be set password now I'm going to add a functional submit this function will collect all the internet password and create the object and send the object and by posting it to the servers so cons user object name email and password for the time for now let's see if it's the continue working properly so I will console [Music] the user object now let's go to the browser inspection events name email and a password to sign up sensor settings and let's try it again okay the front end is working now I will set up a high case block s result post it to the backend position user sign in sign up I went it created the routes for it foreign now I am going to import another hook called use navigate hook um and I will use this hook to navigate back to the index space after the recession is completed now let's create a new file for our user routes first I will import Express then router from Express router and then I will export it module.expose is equal to router now let's go to the server.js file and import the user out require routes user and F dot user app.use user now before I proceed any further I will first have to create the model for the schema for the user so let's import mongoose and declare the new user schema store schema and DC Contender values order name and this should be required to means it is meant to you to give the name let's just copy this and paste it two more times and you next one will be the email and the last one will be password and the email will be unique means it should be unique for every user ask I want to create and add that data in which the user restart itself under six exporter model first I will import victory.js and transition web token then I will import the model [Music] now let's first create a signed up route router does post sign up synced response first I will say if the user exists or not let user okay user to find one this is a mongoose function it is second email already exists in the database in the user records if the user exists then it will send back a error with code 400 response status 400 and Json status error and the Euro misses will be sorry your user with this email already exists now after this if the user is unique and it does not and Google does not find any user with this name we will first hash the password using Big Crypt has password now with big crypto yes this should be key function it will take the password under request and don't go to your password and 10 is the number of seconds then I will declare a new instance of the user model user.create and this will contain the name on the request body and email restore send funder funding an email but the password is a is the has password provided by Big Crypt no no I have to set up the catch block get your State 500 in this one [Music] status error and then your images foreign [Music] let's see if it's working or not email.com and password sign up um I don't think it's working let's check it I will use a extension called ThunderClan it is similar to post pin and this will be helpful can you see okay if the package is I will just paste in the routes post S I will send the name and the email and the password the password so it will be same instantly let's send it okay it is giving a error so there is something wrong in the backend if there's password let's try it again okay the status is okay this time and uh record is created in a database type under front end now we said we get our user brego sign up okay okay the sign up is working now let's create a JW token JWT DOT sign in it will contain a payload the payload will contain the name of the new user in the email and ID the ID is the ID given by the mongodb monitor database to the user and it will also container jw2 Secret actually this shouldn't be saved in the server.js file and different files be created for it it is more secure that way [Music] and I will also send the token here along with just some responsation now let's go to assigner now I will change the error message if the response status is 400 the error then the user we call it this email is already displayed but if the response status is 500 then it will display it is the internet server error I list the hero misses I will try to create another user as the same user again already like this is working now let's go to the sign in oil and similarly similar to the sign up input X use first and you stay and I will create the stage for the email and the password and I will add the one click if any centers on change event listeners to the input fields question value is set email and the next one will be set password foreign [Music] function here this will send the email under password please post the email the password using excuse to the backend accounts visual equal to a weight excuse dot post and then point okay loss four thousand route user and signing which is yet to be created and the email in the password and cones this data will be sent from the front end I'm sorry for the back end along with the response so look at the error selected now let's go to that again and create the endpoint for sign in post seeing request response I will the email to find the user first check if the user exists or not if there is no user then I will send return a response to the hero status um changing a user with this thing are you sorry your user does not like this now if the user exists Crypt will validate passwords the comparing them so what we keep will do because of build function called compare what it does is it will first take the password that is in now at this moment and com first has it and that has password will be compared to the has process stored in the database so first it will paste the password on request or whatever password and then it will compare the user password for another device and if the validation is successful to send the jwd token [Music] then oh wait jwd sign and this time it will only create the ID of the user axis payload and JW to secure face return response Json the user and the token yes to Center here or login on successful status score 500 now let's go get underclined and it should be signed in I will remove the name and just send okay it's sensor token enter user details let us get on the mobile database but there is a problem which also sends the password that is stored in the database so I don't want to send a password so now what we are going to do we are going to take the token now let's see get from the front end if everything is working or not um let's try it again to see if the mechanisms so I need okay we are getting the token so it is the signing is working let's see how to control the data contains two part one is the token another one is the user information and we are going to save both of them to the Locust office sorry there is data dot token and look hello okay storage set attempt again similarly set item is user and at this time I will have to press converter stringify position in alert signing successful else I will send please check email and password now let's try it again okay signing successful go to the application step to the local stories here is that token and here's the user no I don't want to send the password as I already said so this time I will concern the user but I use I will declare another vehicle user info for this one container password dot select function I will just enter user info [Music] here also I will send it to user info and paste it here does not exist signing field now of course I will clear the location storage and go to console okay installed okay storage dot cleared okay now let's check it again application again the location is clear now now let's sign in again okay signing successful and this time it doesn't contain the password now I am going to make certain changes to the neighbor in the neighbor I do not want the links for the create and notes to appear when we are not logged in and this would appear when we are only locked in so what I'm going to do first I'm going to donate component then I am going to check if the token is available in the local storage if the token is available then it will display it up links for the create and nodes if not it won't be displayed so I will retract token on the location is also the user information then I am going to use to use navigate also I will create the sign out button the sign up button will simply create a local storage and it will be locked out after looking out I will navigate back to the index space I will do certainly operator here first I will select if the out is there Minister token is present I will create another Network here put this number will be different one will contain only the logo and the other will contain other neighbor will contain the links in the locker button in it will also display the name of the user who will log in in case I don't get this here okay this will be displayed by default if when we are not logged in the first one I am going to display the name of the user along nearby near the sign up button [Music] this is this one dot parse the user dot name just keep some space at the top okay I also need some space near the sign up button from margin so in the next three okay which will better now now let's sign out okay successfully if you go to address part of the browser you can type in notes you can see that notes are still available and also the create form even though the links are not available in the neighbor so in order to work around this problem we have to set up conditional routing e number so to go to app.js file and similarly here also you're going to first second storage container token or not if the token is not present tender routes will take us back to the intake space [Music] so first let's check we will get detected again now go to the element in or again we are going to use the alternative operator here if out is present then in this way directly open to the node space notes if download is not present it will take us back to the home base and same thing for the create also now let's check it again okay it's working now let's log into our application now okay sign out and login using another username you can see the same notes are available for both the users but I want to display the user notes created by a specific user in order to maintain the privacy the notes for that I am going to use a middleware let's go to the back end and create a folder called config inside it I will create a file called headshot.js this feature is a middleware that you just do this on web token the relay that is that is used for deleting and recording digestion Vector can that will be included in the request header sent by the same color content so first let's import this one with token and then I will assign a secret jwd secret now the pressure function is is the video function that takes three parameters request response index it is intended to be used for middleware inside the function function the our token header below is extracted on the incoming request using request.header or token and if no token is provided immediately response with 4 0 1 0 3s status quo and in your message indicating that a token is required will be sent to the 14. response block if the token is present in the digitality digestion wait okay will verify authenticity and the code is content and is content being the user ID if the prediction successful the user ID will be stored in a label call data in the request user property is 10x sign 2 Data token let's export middleware let's go to the nose model and I'm going to create a new field here called user this field will store the user ID after user that has created the node among Crystal schema.type dot object ID foreign this is the ID I'm going to store in the node and I'm going to send the status 200 mm Mrs node saved initial the gate notes endpoint displayed hold on was stored in the database but this time I am going to display only the nodes that will have the user ID that is provided that will provided by the fetcher retract from the token so I am going to set everything inside her try cash block and remove all of this and commands note red should be asynchronous fine but we shall find the doors by the user IDs specific to the user and as a response I will send the nodes yesterday soon and if there's any error that is postal status only 500 and I will save the neuromuses cannot face notes and the create should also be a synchronous solution now let's go to the create component in the front end and in this extrusource dot pose along with the note on Z I am also I will also have to send the header that will contain the or stroke in order token stored in the local storage the content type is Json and the header you know what token is will be tap on the local storage location storage to get item token now let's delete all the previous nodes that are stored in the database reload this sign out then I will log in again now I will create a new node submit I don't know it is saved in the back endless okay it contains our user ID now similarly in the notes folder I mean so notes component I'm going to send the header again I will just paste copied from the create component I paste it here okay the node has been displayed now let's sign out and login using the auto user name okay let's create a note again take it okay foreign ER before that let's hit the euro markets and paste it in edit component save here [Music] okay in the edit component to set up the field OS node in the text area okay it is everything displayed here now make some edit here a new node updated and submit it check with the note okay sign up my everything seems working okay I hope you like this video and I will see you in the next one

Channel: Dhriti

Views: 171

Keywords: MERN, Auth, JWT, bcrypt, React, Mongodb

Id: WBB2_CZjY_M

Length: 61min 9sec (3669 seconds)

Published: Sat May 27 2023