Complete MERN Stack Authentication and Authorization with Login and Registration Pages

hello everyone this video is about a complete authentication authorization system we implemented the role-based management in this video and also the registration and login pages okay we Implement all the Logics if that is password hashing if that is token generation if that is admin and visitor role based management okay we did all this thing let's first of all create a new record that is lucky for example and let's enter email gmail.com and let's enter the password and let's press the register button we came directly to the login so let's first of all log in as a visitor we have two roles visitor and admin and let's enter the password let's Press login button so we came to the home page it is visitor page with us if we log in as admin so then we will move to the dashboard so we have ID card for our admin okay this is the record in our database for the admin rule is admin we have created that in this video Let's enter as that you support gmail.com and also let's enter the password let's login see we came to the dashboard okay this is the dashboard it means we login as admin so we implemented all these logic Logics in this video so let's get get started before starting if you are new subscribe my YouTube channel and also like this video and comment down and support me let's get started so for this project let's first of all set up our environment so first of all you should further react up okay to install react app let's write first you should create a in empty folder like this okay login and register after that just run this command and be a minute to it so it will just ask you to enter project name after the select react then select JavaScript after that move to the that folder that you have created and then run in PM install and VM run due it will just run the server react app and lastly in that folder install access and bootstrap access is the library for uh HTTP request and response so in bootstrap is for Designing that we will use and also for the server side to create server side up just come again to the login and register this empty folder and then create a folder by the name of server and inside that just run npm init y iPhone y so it will create a package.json file inside that then install all these packages this is node.js package framework Express Mongoose is for the mongodepitably scores are used to access our API in front end nodemon is used to refresh our server side up whenever we make some changes cookie faster for the cookie and Bay crypto use for password hashing Json web token is used to generate a token then create a file inside this folder okay like this index.js okay after creating this file here you should write your code so it was all about the setup so now let's get started our coding and the first tip is that we will create a assign a form then we will just register a new user inside the database okay we will use mongodatabase for that so I have already installed mongodb Compass which is a GUI for the managing the databases using mongodb okay okay just let's connect with that press connect button so it will be connected yeah that has connected with that successfully so now let's move to our front end just come here to this RC folder here we have these components okay I have created this login sign up main home these are the components inside app not let's come to the sign up page first of all we will create the user interface for the sign up page that will be simple HTML in bootstrap core I think that is very easy I will pass video for that so this is the sign up code so let's explain let's first of all I should import the bootstrap import bootstrap save it okay so these are three state variable where we will store the values of our um this sign up registration Forum okay the name email and password and this is the HTML code okay just a name field this is the name field and email field and also the password field but this uh change event this will call whenever we want to store the value inside those name variables the state variables inside these name email and password so we use this unchange event and we call the sit name set email insert password and to assign values to that whenever we are writing a value inside this input field that will be stored inside those variables so it is a simple just sign up Forum so now let's run our server and let's import the signup page inside app.jsx okay oh let's just write sign up okay that has imported now let's just run our server it's more CD client to our client folder sorry client and let's run now npm run do so it will run our server react app let's move to this URL press Ctrl and left button this is the register and registration page see we have these three fields uh name email and password and also a login button so this was just as HTML code so now let's move to whenever we just enter a data we store this data for example I am writing a name so that will be stored inside that variable that we have created before three variables so now whenever we press this register button we should successfully register or insert this record to the database so for that let's move first of all to create our server side up and write the code for that by the fleet code for that just come here to the server side and move to index.js here I will just write the basic code that we need for every project so this is the code that I wrote okay these are the packages that I have imported Express Mongoose cars Bakery Json whips uh whip token and cookie parser all of these packages then we just create an app and then we use express charges and this will just pass the data to the Json format whenever we find uh pass data from front end and these are the codes to access API inside our front end and this is Cookie faster for cookies and also finally we run our server okay so now let's run our server up just come here to the terminal and create a new one and just move to CD server folder inside that's right npm start one thing I should show you that we have installed nerdman before at the start let's come to the package.json I will show you the not one the purpose of Norman just come here to the scripts yeah here this is start you should add then whenever you create your server up you just add this line okay start another one index.js index as you see this file okay it will automatically run this file refresh this file whenever you make any change in this file NVM start so let's press enter so it will learn our server see in our different server is running okay so now let's create connection with the database okay let's come here to the database and let's copy this connection string okay copy the connection string from this and just come here now just write mongoose that connect here we should write our connection string sometimes if your localhost didn't work so just write one two seven IP address okay local uh host IP address that one and finally we should write here the database name what database we want to write okay so the database name would be in like let's check it which database we should use yeah we will use this implied database yeah our this is the connection with the mongodb database and after that now we will just write apis for inserting a record to the database so before writing API code so now we will create a model for our collection for our table okay so let's come here to the model and we have um a model here let's delete it I will create a new one come here to the model folder and let's create a new create a new one users the j6 or just JS and here let's import let's write const on goals is equal to require Mongols and after that let's create the schema of that user schema is equal to new mongoose dot schema and after that let's define the fields which fields we want to have in our data table okay the first one is the name with us name is type string with us we can add here more properties like required and default values also and then we want to add the email which is string with us and also the age the password sorry password and that is also string type finally we should add a rule okay rule the default value of a rule would be type is equal to the type is string and default would be like user okay just a user the default value is user or we can add the visitor okay visitor whatever you want to add so you can add that here so the depart value is visitor this is the now let's create model and Export that const user model is equal to Mongols dot model here first of all we should Define our collection name our collection name is users okay if you have the collection just name it okay users if you don't have just write the name it will create automatically now let's define user schema after that let's export it module dot exports is equal to user model now let's import it inside our server file so to import it let's come here const user model is equal to require the model slash user so to import from that now we will use this user model to interact with the our table just come here now we will create API now to insert a record to the database let's write up that post that is post method is us and this route would be like register and after that we will just get request and response here a method and let's now we will get our data in this request okay and whenever we fast from our front end so now let's first of all distract the values const name email and password is equal to prom or request dot body okay the data that will be passed that is inside the key stat body now let's uh just we will use Big Cliff function to change our password from simple plain text to hashing okay we will hash our password using decrypt this Library okay let's write B Crypt and that hash we will use that hash method after that let's write our password and insult this sort mean that it will generate in unique character every time we would like to Hash our password okay this change means this is salt okay so after hashing the password now let's run that then promises okay and it will generate a hash password for us and now let's use our user model dot create method to create insert a new record so now let's insert the fields first of all name uh then we should insert the email and finally the password sorry email and password password is equal to with this hash one that we have generated okay I wrote this because these two fields are different okay here we have H but in the database we would like to store as a password but these two fields are name and name we can simply write like this so after that then it will give us the result the new user okay now if we succeeded so we will just return on reserve.json we will just return a message for example status status is equal to 200 and let's see return on an object okay status is equal to okay foreign [Music] so it was all about registration so we done our API so now let's move back to our front end come here to the sign up so whenever we press this submit button okay this submit my register button so we should successfully in insert a record okay so just come here we never press the submit button or submit we should call this event and create handle submit method and just come here to create this method const handle submit is equal to we will get an event and just come here default submission and after that we will use axis Library okay we will use access Library let's import access import access from axis now let's call that axis dot post we will use the route would be a URL the URL will be like http localhost then the port number four number was 3001 in our server side and after that we should just call this route which we have created right now register register now let's pass our data our data is name email and password these are the fields that we should pass that then we will get a result a response so now we can check it the status was okay so then we can handle that it means that we register successfully so now we will just return on a message alert okay created dot cage if there was any error so just cancel that log here so let's move and to create a new record okay let's move to create this record I think everything is okay just come here to the front end just let's enter a name Yusuf email.com in the first word one two three four five let's press the register button see created it means the record has created successfully now let's refresh our database table see that regard has catered successfully and the password is Hash now okay we enter just one two three four five but that has generated hash password to us so it was all about our registration so now let's move to our login page okay for the login we need a react auto Dom okay so let's what we should need okay whenever we press this login button we should remove the login page so for that we need a react router down for routing let's come here to the offer j6 let's import that browser a router and routes and also route from from reaction so now let's use that just come here instead of this browser router and just use here a route inside that route now it has two parameters first one is the path path register would be that is just home page would be a register would be for register and the element is is equal to Let's import the register or sign up okay we have already signed a page component now let's create one another out for login that would be login and now let's create a login component so we have already the login component let's write some code inside that and let's name it login and let's write some code here login and just come here now to the update j6 right here like yeah let's import it that has import it so let's now back to the sign up page and to the login we will change it to the link okay to move to that URL two is equal to we should move to the login route and let's change this to the link Also let's import link from react Auto down yeah let's import that import link from react router down yeah let's move now see it so we faced with an error so let's check where is the error I just come here um no routes message relocation slash okay yeah let's move to the register it means for slash we don't have any register yeah we are right now at the register let's press the login button so we came to the login see login component now so now let's create the design for the login page and just come here yeah so it is the code for the login page the same code as we wrote for the registration page okay we have two State variables email and password two fields for email and password and then these will just store the values inside that whenever we are writing so in login in register button so let's check it now just come and see this is the login page one thing else that I should mention that let's come to the sign if whenever we sign up successfully so we should move directly to the login page so for that let's import one another use navigate from react auto Dom use navigate okay from reactive to them now let's create an instance of that const navigate is equal to U navigate so now let's just come here to whenever we login successfully we should move to the [Music] um uh login page okay let's remove this and right navigate and just move to the login page so it will directly log into the move to the login page now so now we never replace this login button we should we should successfully log into the system okay so let's implement this login functionality yeah so let's move to the login page so whenever we press this login button so we should move back to the just come here here we should call on submit event on submit handle log in or handle submit let's create this function now const and I'll submit to name it it is the same process as we did in the sign up page okay so let's come here and just copy this code copy this code and just come here to the login do not take too much time the video okay we will move to the login now login route and we will pass email and password to that and also we should go back to the so now I will skip it okay let's come in this slide it's okay so it will just post and it will move to the login route and it will just pass email and password so now let's move to our server side and let's create that API post the route is login then you will get request and response so now let's distract our email and password is equal to request dot body after that let's just use our user model dot find one okay we will use this method and we will just run now our email through this okay if the user was existed so then we will go ahead email we will pass this email to that dot Dean it will give us a result so now let's write if user was existed so then we will implement this code else just return result.json return Json no record existed it means if the user was not existed it means it didn't find any user based on this email so then it will just print us there is no record based on this email it means the email is not registered with us if the user was existed so then we will just check our password okay because the password is Hash but the password which is coming from front end that is a plain text so now let's see run again the Big Crypt function B Crypt dot compare function now first of all we will pass our password in user.password okay take the password from the database user.f password and it will compare it whenever it Compares so then it will generate okay right either or response is this function now let's write Apple responsive it means if the response was okay it means the password was okay so then we will learn this code if the password was not okay so let's write a return result.json the password is incorrect incorrect okay but if um the password was okay so then we will generate a token now okay so to generate the token we will use Json web token okay this one GWT now we we use it to generate a token let's write GWT let's write first of all counts token is equal to JWT DOT sign and after that let's what we would like to um we should have in our payload so for the payload let's write first of all we will just store our email email a user dot email and also let's write our role always equal to row user Dot roll after these two let's now write our secret key okay this is the secret key uh this should be a unique and secret key that no one should know about this key and this should be at least 32 characters so let's write this key now um for the learning purpose I will just write GWT Secret in the third is an optional parameter which would be like expires in one day for example okay it will expire in one day so it will now generate a token to US based on the secret key in this payload that we have entered and now let's store our token inside the cookies in the front side front end side and the cookies okay so to store it on the cookie so for that we need first of all let's come here to the course in the course we should add some code in this course okay first of all origin we should access we would like to access it from localhost http 127 Dot 0.0.1 from this IP address and also the methods methods are you would like to use git in post methods and also credentials is equal to true we should write these okay we would like to access our front-end side through this URL okay and also from which component we would like to call this we should write some code there like we would like to call from login let's write here access we are using axis there are defaults dot with credentials is equal to true you should write like this otherwise it will not work and just come here now we will just store the cookies or is phones dot cookies cookie and this is the here we should have the name which is token and the value the value is [Music] token okay the name is token in the village this token that we have generated this token will be stored inside the cookies so now let's return response.json let's return an object that would be status or we can just simply return success okay one thing else here we should just simply return the sexes yeah everything is okay so now let's move to the login so whenever we um login successfully and that will return um to us and the status success okay let's cancel that result.data let's save it and now let's move to our login page let's just enter in email usup gmail.com and the password is one two three four five and let's move to the console what we get in the result and let's Press login button we got access error login so let's check where is the error yeah login just come here access dot post HTTP localhost login uh and we passed email in password to that just come here to the index slash login and request so let's check our server side where is the error server side is okay no error but here with the axis we have in our error X is from axis so that is black by cars so let's move to our server side and we should change this URL okay just come here yeah this URL we should change this URL let's come here and copy our URL just copy this URL and just come here and paste it here paste it here just remove this login you will access from this URL from our front end so let's come here again and let's press the login button no record existed okay it means that there is no record uh based on this email so let's check it why there is no record let's try the database oh in the database we don't have our email field so let's add our email where we missed our email let's compare it to the user model we have written email email it is like this spelling mistake okay let's save it and let's register a new record let's move to the sign up page and let's enter a name or rape dot com let's register so register successfully so now let's login a rape gmail.com successfully okay before in the previous record we didn't had with how the email here okay because the email field was run so now it is okay so we entered login successfully let's check the um uh cookie okay the cookie are generated or not let's come here to the application just come here to the cookie see we have this token okay this is the token and this is the cookie that we have stored inside our cookie so now whenever we log into the system so we should check if we logged in as a visitor we should move to the visitor page if we logged in as an admin so we should move to the admin okay for the admin I will just edit this record okay uh just come here and edit it I will add email also so I have updated I added email and also the rule is admin so now let's check it okay whenever we login so let's whenever we logged in successfully so we should move to that page okay just come here and we should do return in object which contains status which is success is and also on the role which is equal to with the user that's role okay let's come here to the user.com let's move to the login page now here we will check Apple my result.data DOT status was equal to equal to V with success so then what it should do it should again check Apple result.data Dot roll was equal to equal to with admin with admin so it should move to the dashboard okay to the dashboard component so let's create the dashboard component just come here and see how this is home page but let's create one another for the dashboard Dot ga6 let's write something inside this code okay and come here to the home page now again just come here to the index touches uh here we did our functionality let's come here if the rule was add me so it should navigate to the dashboard dashboard dashboard URL right now we don't have navigate in the spot route let's first of all import navigate use navigate from react Auto term that has imported so now let's create an instance of that maybe gate is equal to use navigate yeah so it will move to the dashboard route so let's create a score route dashboard and let's write dashboard okay dashboard about that dashboard let's save it and if there was no old dashboard so if the the rule was not admin so then it should else it should move to the um navigate slasher Hope just simply slash okay should move to the slash just come here and let's add that and here it should move to the just hope home page and let's import that let's save it come here now let's login okay for example our reap gmail.com let's write the password let's login see we came to the home page okay but if we login as in admin So within we should um move to the dashboard so let's first of all delete these cookies and now let's come back refresh the page and just let's enter admin use of this Gmail .com let's write five let's login see we came to the dashboard okay to the dashboard page so now whenever we come to the ship dashboard so we should ADD protected routes okay so to add the protected routes whenever we come to the dashboard let's come here to the dashboard here we will run just the protected routes to for the security purpose okay let's write use effect here easy picked hook and here I will just simply copy this code because it is taking time to write from scratch paste it here now it will change to that gate and let's remove this and also remove this and after that let's start in we will get a result now we will just check if result dot data was equal to equal to with success navigate to the and navigate to the Home dashboard so if we succeeded so let's create a variable here cast success okay success equal to I will just print a message is equal to use state that is empty by default and if we succeeded we will just sit okay and let's print it we just print that succeeded variable okay else if that was not success so then we should move back to the login page or we can navigate back to this Home Route so let's specify import navigate from reactive data after that let's create instance of that [Music] navigate and now let's make it navigate so it will go back to the home page and yeah now let's create this and let's make it exit.get dashboard let's create this API inside this index.s and just come here up dot edit slash dashboard and here I will call the middleware okay to verify the user so to verify the user let's say call the middleware what if I use I will create this middleware later okay request and response result.json success let's call this create this middleware const ify user is equal to request response and next this next is used if we succeeded then we will call this next it will come back to this route okay so firstly let's read the token token is equal to request dot cookies cookies data a token okay the token that we stored inside the cookies so it will now we will read that first of all now let's check Apple no token if the token was not available so then let's return response.json token is missing okay else if the token was available now we will verify the token over is the token validated okay or not let's use JWT again dot verify and now let's pass um in the token that we have and also we will just write our secret key our secret keywords WT Secret key okay this was our secret key let's make it like this so let's see our secret key it was our secret secret key and after a secret key we will get error or decoded value these decoded are the values that we have decoded before okay these videos let's stick it in this email end role now if there was error if there was error so again let's return response.json error okay with token else if there was no error so now let's check the role okay Apple decoded decoded dot role was equal to equal to with admin so then we will call next middleware else return s dot Json just simply this message it is what that we got okay yeah so now let's check it okay let's come here to the dashboard I think we didn't just commute to the dashboard we didn't import axis import access from axis and RC is imported Navigators imported let's save it now yeah it is home page right now we are at the home page so now let's move to the um let's delete the cookies go to the register page login page sorry yeah we came to the login page so now let's first of all and insert as the admin gmail.com and let's enter the password five let's press the login button so we came to the home page so we came to the home page but instead of this we should move to the dashboard so let's check it where is the problem let's move to the ones to the application and I think the error was in the cookies so first I will just delete this one okay so now let's move back and to the login page okay let's Now log me in laginas gmail.com and let's enter the password let's Press login button so we came again to the home page but let's check where is the error one thing else that we missed we should write here the axis dot defaults um dot with credentials is equal to true and one thing else whenever we log in so let's check it okay whenever we yeah the problem is that error with token okay we got the error here yeah we got here it means that um whenever we just compare our token so we got in here yeah the error was because our secret key was wrong okay it is key not kit okay let's make it key small and let's again move to the login page and it's now enter our record user at gmail.com one two three four five let's Press login button see we came to the dashboard and successfully okay it means that we successfully logged into the system but if we logged in as a visitor let's write re gmail.com and write the password Press login button see we came to the homepage directly so it was all about complete authentication with the role-based management I hope this video was helpful for you if you like this video don't forget to subscribe our YouTube channel and thanks for watching

Channel: Code With Yousaf

Views: 23,643

Keywords: mern stack authentication and authorization, react user login and authentication with axios, mern stack authentication, how to do login and register authentication in react node js, node js authentication and authorization, mern stack, react js login and registration form, react js login and registration, react registation and login in hindi, login and registration using mern stack, authentication in mern stack, react login and registration authentication

Id: ZLk7lQKGcug

Length: 45min 48sec (2748 seconds)

Published: Thu Jun 15 2023