User Management in MERN: Create, Authenticate, and Administer Your MERN E-Commerce Store

Su and wer YouTube channel so in this video we are going to be learning crazy amount of stuff about users like how to create a user how to update a user how to delete a user how to make an admin user how the admin would be able to delete a user or update a user or create a user and how to get all of the users and what is JWT and how bpjs works and all of that both for the front end and also for the back end as well and we are going to be also testing all of our API by using our Postman right here okay so just wait for it baby now let's get into it so the first thing which I want to do is that I want to get to this index.js file right here and I wanted to create my own API endpoint okay so what I'm going to do is that I'm going to just remove there and I'm going to use ab. us word here in this case and I'm going to start my conversation from API and for/ users right here and here we are going to be passing a user routes right here so I'm going to create this user routes right in here let's just create a file give name of like user routes.js and I'm going to also create it for the model so user model. JS and I'm going to also create one for controller so user controller.js right here so I guess that'll be fine so now let's get into it so the first thing which I want to do is that I wanted to create the model for my user like how my user should look like what are the requirements which the user would have so for that I'm going to have to create a model so I'm going to just go ahead and create like uh import Mongoose from Mongoose and also user schema like how our user should look like so we are going to be passing Mongoose do schema okay and inside the schema we are going to be passing all of the properties which the user should have okay so I did a bit of mistake let's just remove that from here I'm going to first of all the user should first of all have the username name and it should look like this the type will be set to string and also it should be required like anytime you want to create a user or update a user or delete a user the name should be required and the next thing which you want to get from the user is the user email okay so we are going to be setting the type to string okay the user type will be set to string and it should be required like anytime you want to sign in or log out or anything like that your email will be required and also the email should be unique un i q because anytime you want to create a new user you can provide your email again and again your email should be unique and now let's just work with a password okay so the password type will be set to string and also it should be required so required will be set to true and now the final thing which I want to do is that the user is going to be admin or not so we are going to be just checking the type and it should be set to Boolean okay because here we are going to be either passing the true or the the false value and it should be required uh as well and also the default value for this is admin will be now set to false okay because by default the admin cannot be what do you call it um the person cannot be admin so now let's just provide our time stamps time stamps time stamps there we go and now let's just set that to three okay let's just go back and this is how our user should look like so this is the schema of our user so user will have a name the email the password and is the user admin or not and here we are also passing our uh Tim stamp right here so anytime we either create a user or delete a user or update a user so it will give us that specific time anyway so that's that now let's just create a model based on that schema so now let's just write a user and it should be equals to mongus do model and inside this model we are going to be passing our user right here and now let me just pass my user schema which we created a few seconds ago up above so now let's just export or model okay so now let's just provide come on I'm going to have to go back let's just provide our user and there we go baby that's it about for the user so the next thing which I want to do is that I want to create a user routes okay so once we create that routes then we would be able to do all of that stuff for the user like create a user delete a user and all of that kind of stuff so I'm going to first of all get my Express right here okay so once we get Express so now let's just create a router right here so I'm going to just write Express express. router and now let's just export that right away there we go not import but const router there we go so the first thing I want to do is that I want to create a route for creating the user so I'm going to write route do router. route and here uh it should be equals to 4 slash like just a homepage so what do you want to do first of all we want to provide and we want to set there to post and here we are going to be passing the create user first of all we want to create the user then we would be able to do all of that stuff with that user like updating the user credentials or deleting the user or doing anything we want so I'm going to copy that and now let's just create that right here inside our controller and now let's just create that controller right here inside this controller file or yeah file there we go so the first thing I want to do is that I wanted to get my user model from the models so got to go back two times I guess and let's just go to the models and user model. JS so that's the first thing so now let's just create our user so I'm going to just write create user and it should be uh what do we call it or you know what before we getting into creating the user first of all let's just create our sing Handler and then there will be so I'm going to go into their middle wees right here and now let's just create a file given name of like ASN handler. Js I'm going to hit enter right here and now let me just create a simple Asing Handler for myself like sing Handler and it should be equals to it will take a function by the way and we are going to be passing the parameter of request response and also next because this should be a middleware and here you can also see we are writing or we are creating this file inside this middle Wares right here okay so this should be a middleware that's why we are passing this next word so now let me just use a promise to resolve and here I'm going to just pass my function and this function will take the request the response and also the next okay so I'm going to just pass my catch right here so if you got some sort of error so what do you want to do with that error so now in this case we just want to write like rest. status and it will be now equals to 500 and now let's just send our message as or Json so I'm going to just write message and error. message right here okay so now we successfully create our ASN Handler now let's just export that right away so asnc Handler there we go so I'm going to save this file and that's it about SN Handler baby and now let's just use this SN Handler inside this controller so what I'm going to do is that I'm going to create the user and it will be now equals to that Asing Handler oh it is not autoc completing it for me so I'm going to have to import it manually uh import asnc Handler from uh from let's just go ahead two times to Middle words and go to sing leer and now let's use it async come on man async hander it's not g me any help or whatsoever oh that's because we using import instead of cost hosan what the hell is wrong with you today and here we have to specify Asing keyword request response and now let's work with it so the first thing which you want to do is that oh you know before we getting into the N of creating the user I'm going to just write res. send of hello I'm going to sell this file now let me just export default this create or you know not default but just export the create user I'm going to copy that create user from this user control file I'm going to go to the users routes file right here and now underneath that what I'm going to do is that I'm going to just import uh or you know not underneath that but underneath this Express I'm going to just import this create user from uh what do we call it this controllers right here and user control controller.js so I'm going to copy that I'm going to place it right here now let's just save our file and now let's just run it so I'm going to use npm run and backend I'm going to hit enter and now let's just test oh we are getting the user routes that's because we did not create a user routes or we did not import rather I'm going to have to import that right here so I'm going to use import user routes from let's just go ahead and go to the routes and then I'm going to go go to the user routes.js save my file and now let's just test it so I guess this time it would successfully work and everything is successfully working baby I'm going to go ahead and now let's just save this file right here close this one and change the name of that to like create user and I'm going to change the method to post let's just close that and inside um yeah or you know what let's just click on this send button and and it is giving us that cool little error uh that's because we are not going to the API for/ user was that users or user I'm not sure oh users plural click on S and hello everything is successfully working which means like the routes are attached the controllers are attached and also the user model is here right here so now if you want to create the user the first thing which we would need is the username the second thing we would need is the user email and also the user password anytime you want to create a new user and we are going to get that from the user so that's why we are passing that request. body right here so I'm going to just log that uh to the console real Qui so I'm going to use like usern name and then we would have our user email then we would have our user password okay so I'm going to sell that and let's just close that clear terminal and everything should look cool all right that's look cool so I'm going to go ahead and click on the body then click on the raw then select the Json right here and I'm going to just pass first of all the username let me just pass the username right here username should be equal not should be but username should equal to like not should username would be equal to Alex and also the user email uh will be equals to like I don't know Alex or Gmail gmail.com or something and then we have password and passord will be equals to like I don't know lx12 or something like that and now if you click on this send button right here it will just hang it right here because we are not sending anything and now here you can see the username is Alex the user email is Alex gmail.com and the user password is alex12 which means like everything is successfully working totally fine I'm going to remove that from here so I'm going to also cancel that right here so that's that so now we are successfully getting the user response from the user so next thing which you have to do is that we have to check or we have to provide a little bit of validation if the user did not provide either the name or the user did not provide the email or the user did not provide the password so what do you want to show to the user so we just want to throw a new error to the user like bro what the hell are you doing please fill all the inputs and period so now I'm going to sell that and let's just check it so so I'm not going to providing anything in this case and I'm going to just click on the send and here you can see we are now getting this message which is saying like please fill all the input fields or in this case let's suppose if I just provide one input field right here just Alex for the name and now if I click on the send button right here it will still say like bro what the hell please fill all of the inputs so I'm going to just place all of them right in here come on and it will say like yeah you are totally allowed to create a new new user but that's not it we are getting all of that data where are we getting all of that data I'm going to have to save that close it click on him oh we are getting the data but we are not logging that data or we are not doing anything with that data so that's why that was hang anyways so underneath this validation the next thing which you have to do is that we have to check for the existing user so if you already have a existing user based on their email which the user is providing so we would just want to throw a new error to a user like bro this email is already used and you cannot reuse this email once again okay so for that we have to first of all get the user like already created user so I'm going to use like const user existed exists would be fine and aent user. findind one because this is a mongoose method and it allows us to just go ahead and go to our database and check for the email okay so what I'm going to do is that if you get some sort of error like that or if you get this kind of validation so if user exists what do you want to do we just want to send this message to your user like first of all status of 400 already defined send and user already uh exist ex ISS there we go got to go back and now let me just use that and we cannot test that because currently inside our database we don't have any users like no users nothing so that's why we cannot test that okay so here here uh we are not even getting any oh come on I just created a test I didn't mean to create a test I got to go back to the uh EnV file and it should be hosan store I'm going to save that God damn it I literally forgot that I'm going to have to drop this database right here let me provide the name of test yep drop it okay so now I'm going to have to uh restart my server why is that because currently I change the EnV file so I have to restart my server once again okay so yeah everything is working totally not Dev man I didn't mean to Dev npm run backend just a backend not a Dev okay so it will start over back end server and now let's just refresh that and here you can see we are now getting this hosan store right here inside this hosan store we have a users and we don't have no documents right here why is that because currently we are just getting the user data right here we are providing a little bit of validation to it and also we are just checking for the existing user but we are not creating our user anywhere so now let's just do the final step how to create a user so what I'm going to do is that I'm going to just write like uh const and new user and it will be now equals to new and user what is that user this user is their model which we created right here like how the user should look like the user will required the name the email password and admin right here so this is how we are going to be creating a new user all right so that's the so the next thing which you have to do is that we have to provide the properties for that um model right here so we're going to be passing the username the user email and also the user password right here okay so which is coming from the user so the user will provide the name the email and also the password we're going to be providing all of that credentials right here and based on that credentials it will create a new user for us right here okay so that's that now let me just provide a try and catch block so I'm going to use try and catch block like so if you got some sort of error so we are going to be just writing rest. status of 400 and also throw new error of invalid uh user data and if you don't have any errors so we are going to be just writing like aare new user uh this is the variable which we are creating right here and it will be now equals to do sa okay and this do save is among method which allows us to store this new data to the database right here okay or that or that specific collection so that's that I'm going to also provide some sort of a message for the user so that user should see like something did happen Okay so we are going to be just writing to one created and here we are going to be just passing the ID first of all new user. ID which mongus will gives us by default and also the username will be equals to the new user Dot username and I'm going to also provide the email and this is just a result so that the user can see something right here okay so we are going to be just writing the email and it will be now equals to new user and then we have to specify the email okay and is the user admin no the user is not there in admin I said it like a horror movie no I'm going to have to save there and now the Moment of Truth okay so I'm going to click on this send right here and guess what the user is successfully created so we are now getting the user ID the unique ID which mongus gives us and we are also getting the user name the user email and the user is not an admin which means like our user is successfully created so I'm going to have to go back and now let's go into or mongodb right here let me just expand that and now let's just refresh that right here so here you can see we are now getting one document so if I click on this document we are getting the user new ID we are getting the user email we are also get I like we are getting the username we are getting the user email we are also getting the user password but that's not cool like anybody can have access to our database and anybody can see their password or someone else password and they can say like yeah this is the user email this is the user password and they could steal or password like I don't know if you can hear that so yeah they can easily hack someone else password it's not heck like they can literally just see the someone else password and they can log into that user like as that user the user email and the password this is not cool this is a big or a huge no no you're not going to be doing that ever okay so we are going to have to close there and now let's just provide our salts to it okay so salts uh by using a bcrypt so I'm going to first of all get my bcrypt right here so I'm going to use uh import bcrypt from the BCP JS right here okay so not like so but just a bpjs there we go I'm going to save there and now let's just use it right here whenever we are creating a new user so the first thing which we have to do is that we have to provide some sort of a salt or you can say a mixture into our password so you know what I'm going to go ahead and go to the mongodb once again and open that user once again so what is a Sal Assa is just a random like a random things like a random numbers and character which are going to be included in this password like here you can see can you recognize is that your password no because we provide a lot of Sal to it so I'm going to have to go back and now can you recognize the password yeah of course you do because this is just Alx n12 and the salt if you put a little bit of salt to it like a random numbers and gibberish right here can you recognize the password no you cannot so yeah now let's just provide that salt to it before we getting into providing the salt first of all we have to create that salt so I'm going to just write consult and it will be now equals to A and then BCP which we imported a few seconds ago and then we have a method inside there which is a gen salt okay and here what we have to do we have to specify the amount and rounds you have to provide the either number or undefined so we are going to be providing like 10 is recommended you can provide 100 if you want but it will slow down your application because a lot of ss are not that much cool thing to to provide so I'm going to just provide 10 in this case you can provide like more than that if you want to and now what I'm going to do is that I'm going to just hash that solt so I'm going to use cost HH and then password and it should be now equals to A and then we have to use our bcrypt and then we have to use that hash method right here so the first thing which you have to do is that we have to specify the string where you want to add that salt okay so in this case we are only interested in providing that salt to the password which the user is giving us okay so we are getting the user password we are taking that and we are putting it right here okay so once we put that right here then we would be able to provide that salt to it so what we have to do I'm going to have to copy this salt and we have to place it right in here okay so that's totally done like once we lck this so it will give us a random gibberish but the next thing which I want you to keep in mind is that once we are creating a user we are not going to be just providing the the user password instead we are going to be providing that hash password so I'm going to copy that and here as a password property we are going to be just passing the hash password because in this case we cannot just write a hash password like that we cannot provide we cannot write our code like this why is that because in this case it is requiring the password right here it is not requiring the hash password it is requiring the password so we have to specify that property right here the that password property and then we have to set that to the hash password right here okay so that's done too and now let's just try it so I'm going to save this file I'm going to also cut the space and save this file once again and now let's just try to create one more user but before we do that I'm going to have to restart this server once again and everything is successfully working totally okay and now let's just try to create one more user like myself like Huzan or you know I'm going to create myself later so I'm going to just create a John and yeah John John would be fine so I'm going to just change that to John yeah John is fine so I'm going to also change that to john12 right in here okay so I'm going to just click on the send button and guess what it is now giving us the ID unique ID the username is said to John the email is set to John gmail.com and bro is not an admin so I'm going to go ahead and let's just refresh that right here and now I'm going to go to the second person and what are you seeing jum John John gmail.com and what the hell is that I don't even know what the hell is that okay this is called This is called a HED password nobody can recognize this password even though if they can have access to our database they cannot figure out like what in the world is going to be the password on the other hand if I show you the Alex one let me just open the Alex here you can see like Alex is totally cool like you can get his email and also the password you can hack him in a second and not the what do we call it not the John because John hash their password so what I'm going to do is that I'm going to right click on the Alex and delete him okay so now let's just delete the Alex that was just for a demonstration purposes so now let's just close both of them out let's just refresh that and both of them is working totally fine so we are going to have to first of all get the user data and then we have to provide validation check for the existing user oh I forgot to show the existing user let's suppose we already have uh what do we call it this JN right here inside our database but let's suppose if you want to create this JN once again by using this same email right here so now let me just click on that and here you can see it will now gives us this message like user already existed you cannot um recreate this user once again by that uh email right here which we specified right in here okay so this is how we are going to be creating the user but there is one more thing which you have to keep keep in mind which is how to create a token and how to set that token to the cookie so let's just do that real quick so I can do that inside this file right here but you know what I'm going to create um that inside this U Tails right here so I'm going to just create a new file give a name of like uh I don't know create create token. JS okay inside this create token file I'm going to first of all get the JWT from Json web tokens and now let's just generate the token so I'm going to use like cons generate token and it should be now equals to uh response and also I'm going to provide the user ID right here and now let me just pass my arrow function and here what I'm going to do is that I'm going to first of all create a token so I'm going to just write con token const token and it will be now equals to JWT do sign and if you don't know what JWT is so you can go ahead and just quick Google search there and it will give you a lot of great resources right here so the first thing which you have to do is that we have to provide a payload either a string or object or buffer then it will take a secret private key and which is currently said to know you can also provide options and we will provide options right here okay so what I'm going to do is that I'm going to first of all provide the user ID which we're going to be getting from the user and now let's just provide some sort of a or you know what we're not going to be providing it right here I'm going to go ahead to this EnV file which we have right here and now let me just create it right here that I don't know JWT secret and it will be now equals to some sort of a secret I'm going to set that to a b CDE e f blah blah blah I guess this secret would be fine so I'm going to just close that and I'm going to use like process. EnV and then J JWT secret okay and here I'm going to just provide expiration date so when this token should be expired so I'm going to just proide like 30 days okay and that's it this is how we're going to be creating a token now the next thing which we have to do is that we have to set the JWT as an HTTP only cookie okay so anytime we create a user we want to pass that cookie to uh or headers okay so as a cookie so we are going to be just writing like r. cookie and if you guys don't know what a cookies are so you can just quick like watch a video and you can learn it I don't know 5 minutes or something like that then we have we have to specify the token and then we have to specify the HTTP only okay and it will be now set to true and also secure will be also set to process uh. EnV and I'm going to create there in a second node. environment variable if that's not the case so what you want to do we just want to change that to development and so you know what I'm going to go ahead to that EnV file once again and now let me just create this node EnV so node will be currently set to development so I'm going to just WR development right here so now let me just save that and also I'm going to have to provide come on man I'm going to have to provide the same side uh come on same side and it should be now set to strict okay and now let me just provide a comma and maximum age I'm going to provide of 30 days so I'm going to write 30 times uh I don't know 24 * 60 * 60 once again times 1,000 right here so it will gives us 30 days and just finally optionally we have to just return the token okay and then let's just export that token right here so export default of generate the token there we go so I'm going to have to go back and this is how first of all we are going to be creating the token and this is how we are going to be setting that token as HTTP only cookie right here okay so that's that and now let's just use the inside word controller so I'm going to get from create token from let's just go ahead and go to the U tails and then I'm going to go to create token. JS right here and the next thing which I'm going to do is that underneath once we save our data to our database so what I'm going to do is that I'm going to just write create token and it requires two parameters the first parameter it requires is the response and then the second one it requires is a user ID so I'm going to just specify the response and and the user ID will be now set to the new user and here we are going to be just getting the user ID right here okay so now we sell that and now let's just check this out but before I do that I change a lot of things in EnV file so I'm going to have to restart the server once again so there I we don't get any clashes okay so this is a John now let me just recreate this Alex once again and I'm going to just write Alex and alex12 there we go so I'm going to save that and click on the send and here you can see we are now getting this cookie this is our JWT we give a name of like JWT right in here let me just show you there we have our JWT cookie right here and we have our token the value will be now set to our token which is getting there and then we have our header files right here and then we have our headers and here you can see the set cookie is now set to this JWT and this cookie right in here okay and it is HTTP only same side will be streak and all of that which means like everything is working working totally a okay so now we successfully logged in as this person so that's why we are getting this cookie and all of that which means like not only Alex is successfully created but Alex is already logged in by using this cookie so I'm going to just close there and this is how we are going to be creating a new user in Express CHS and we are going to be validating the user and all of that all righty so that was it about how we are going to be creating a user and now let's learn about the logging in and the logging out of the user so what I'm going to do is that I'm going to just write router. poost and we are going to be just posting to the O Okay so like we are going to be authenticating our user and yep in this case what I'm going to do is I'm going to just provide a login user right here so I'm going to copy that and let's just grab it from the controller so I'm going to just create that controller right here so I'm going to write login user and I'm going to just write async Handler and I'm going to provide my async keyword request response and boom and now let me just register that right in here so the first thing which you want to do whenever the user want to log into our website so we just want to get the user email and the user password right here okay from the request. body okay so when we get that first of all you want to check for the existing user if you already have one so we just want to write con existing user and it will be come on existing user and it will be now equals to A and then user model and we are going to be using this point1 method of and here we are going to be just checking for the email if the email already existed so what do you want to do we just want to print your user if email existed or the existed user so first of all you want to use the BCP uh compare method right here so let's just use cost is password valid so we are going to be just checking for the valid password and we are going to be checking a word bcrypt come on BPT and then here we're going to be using a compare method and we are going to be first of all proving the user enter password then we are going to be going into the database and checking for the existing user. password right here okay so if that's valid like if you already get the user if the user provided a valid password like here the user is going to be providing the password then we going to be checking that password inside our database if that's true like if this is a valid password so what do you want to do we just want to check if valid password or password valid whatever you want to call that so we just want to create the token and we just want to provide the response and we also want to provide the uh existing user and we just want to provide the ID to it okay so it will just generate a token for us and it will set that token as a cookie into the header okay so that's then the next thing which you want to do is that we want to show some sort of a um message to the user so I'm going to just copy there and we are going to be pasing it right here but instead of a new user I'm going to just change that to existing user and that that's it I guess that would be it and now here we are going to be just writing a return statement right here and let's just write a comment for ourself like exit the function after sending the response or we don't have to write that let's just remove that from here we don't have to write that let's just remove it s our file and this is how we are going to be doing or logging in so the first thing that you want to do is that we want to get a user email and password then we want to check for the existing user if we already have the existing user so then we want to compare both of the passwords like the user enter password and or existing user password like the password which is already available inside our database so if that's true so what do you want to do we just want to create a token and we want to set that token as a cookie and finally we just want to show some sort of a response to the user okay so what I'm going to do is that I'm going to just create a new route for myself let's just close that and I'm going to just create one more request right here give a name of like uh login or something something like that and let's just change that to post and I'm going to also copy that and place it right here and what was the route I kind of forgot the rout uh the route was off okay so instead of writing uh yeah we have to just add the route right here so currently if I click on the cookies right here so here you can see we have that cookie when we were creating a user I already told you like we are not just creating a user but we are also logging in that user so I'm going to just remove this JWT from here and now let's just try to add or try to log in so I'm going to just go ahead and go to the body and then I'm going to click on the bind not a bind but on the raw then click on the Json and what is required the required statement was the username not the username email and password here you can see the email and the password so I'm going to just write email and the email was I don't know I'm going to just log in as a John and I'm going to just write John gmail.com and the password was was um john12 okay so now I'm going to just click on this send button and here you can see we now successfully log in as a John so here you can see we have our ID or username email and is a is now set to false okay so now if I click on the cookies and here you can see we have our JWT our value is now set to this token and we also can check our header right here and inside this header we have a set cookie and which is set to this JWT and this cookie right here which means like everything is successfully working so now I'm going to just click on that and let's just close that from here but it will show it right here because for that we have to just close this tab and we have to reopen that and now I'm going to just click on it one more time and now I'm going to log in as Alex right here so I'm going to write like Alex and alex12 now I'm going to click on this send button one more time and here you can see we now successfully log in as a Alex right here so we have ID the name the email and everything right in here okay so that's cool so I'm going to just save this file which means like this function is totally done so the next thing which you have to do is that we also have to write a code for logging out I'm going to write a post because we're going to be posting so I'm going to just write log out in this case and I'm going to just write like log out controller uh or not controller but log out uh current user would be fine so I'm going to copy that and I'm going to go ahead and and import it from our controllers let me just go into this controllers for folder I'm going to just place it right here export that and now let me just create that so I'm going to just first of all write sing Handler and let me just pass my sing request response and also uh rest. sent of hello would be fine in this case so I'm going to just save there and I am going to create one file not file but request let's just copy this one and let me just place it right here change that to post and this one should be log out there we go so now if I click on send button so it will now gives us that hello right here why is that because we just written that hello inside this controller so I'm going to just remove that and let's log out the user and it is quite simple and easy why is that because inside of response we are setting the cookie and we are just getting I mean like we are just searching for this JWT cookie which we are getting it right here so I'm going to just click on this cookie so here you can see the cookie name is JWT and the value is this um cookie or or whatever you want to call that okay so we are just searching for this JWT right here and the next thing which I'm going to do is that I'm going to just set that to empty string and now let me just provide the HTTP only it will be now set to true and I'm going to also provide the expires and it will be now set to new date and let me just provide a zero to it okay let me provide a comma and underneath that I'm going to just send some sort of a response to a user like status of 200 success status and Json would be now set to like some sort of a message um logged out successfully there we go okay so I'm going to just click on this log out click on him and here you can see that cookie is successfully gone from here let me just click on this cookie and here you can see we don't have any cookies right here which means like the user successfully logged out let me just log in as John once again John and we have to just write like John I'm going to click on him and here you can see let me just expand that here you can see we have this cookie right here and we have this cookie right here as well so I'm going to just click on him and I'm going to go into this log out right here let me just rename that to log out and here you can also notice that log out right here so I'm going to click on this send button right here it will remove that cookie from here but if I go to that login once again here you can see that is not removed because we didn't close that we have to close that once again and once we reopen there let me just reopen there like so and now if I click on the cookies and here you can see that cookie is gone so I spend a lot of time figuring out like what the hell is wrong I'm successfully logging out the user but what is going on like when I come to this link let me just do that once again uh I'm going to just log in here you can see we have our cookie right here and here you can also see we have our cookie right here but if I just uh log out so I'm going to just click on him and out successfully which means like this is working totally fine but if I come to this login once again and click on the cookies and cookie is totally gone but here you can see that cookie right here so what do you have to do you just have to close that and you have to reopen that and then you would be able to see that cookie is gone and the user successfully logged out okay so that was it about how we are going to be logging in and how we are going to be logging out the user all right so next thing which I want to do is that I want to work with authentication and authorization so what what I'm going to do is that I'm going to create one more middleware for myself I'm going to give my name of like Au middleware DJs and inside this file I'm going to just create authentication and authorize as an admin uh functions right here so I'm going to just import first of all JWT from Json web tokens and I'm going to also get my user model right here and I'm going to also got to get a JS right there there and I'm going to also import my sing Handler from the sing Handler so the first thing I want to do is that I want to authenticate the user so we want to check for the user credentials and also we want to check for the token so if the token is valid so the user will be able to log in and log out and if the token is not valed so what do you want to do we just want to throw some sort of error so now let me just create that function like authenticate and it will be now equals to sing Handler and I'm going to just pass my sing request response and there we go and I'm going to also provide a next word because this is a middleware so we have to provide our next word here so the first thing which I want to do is that I wanted to create a variable set that a token and totally undefined so then we have to read the JWT from the JWT cookie okay so now let's just do that we are already providing this JWT right here you already saw that so once we log in here you can see we have our cookie we have our JWT cookie and we have a value of that cookie right here okay so you already know that so now what I'm going to do is that I'm going to just set that token variable to request. cookie. JW T so what are we doing in this case we are going to the request and inside this request we have this JWT I mean like we have this cookies and inside these cookies we have this JWT specific cookie right so we are just getting that so the next thing which we are doing is that now we have to check if the token is valid so what do you want to do we just want to provide a try and catch blocks right here let's just go back so you guys can see everything a bit better and here for the catch block I'm going to just put like rest. status all 401 and then I'm going to just write like throw new error of not authorized uh a h r i z Ed and token failed there we go and what else do we have to do for the else Clause of this if statement so we just want to write like res. status of 401 and I'm going to also write like let's just copy that let me just past it right here and not authorize and in this case I'm going to provide no token like if the user didn't even specify the token so they are not authorized all right so for the tri block we just want to decode the JWT so I'm going to just write decoded JWT and we are going to be using and it will be now equals to JWT do verify method which we have from the JWT so we are going to be first of all specifying the token which we are getting from this request right here and the next thing which we have to do is that we have to use that process. EnV and we have to match that what do we call it JWT secret which we've created right here inside our EnV file here you can see that that JWT um secret there we go so we are going to have to pass that right here so the next thing which you have to do is that we have to get the user so request come on uh lower case request and user and it will be now equals to A and user and find by ID this is amongus Method and we are going to be just passing the decoded and then the you user ID right here and we are going to be just selecting the password uh so not provide the password and anything else should be there and here we just have to specify the next so that we can go to the other request or to the other middle we controller whatever you want to call that so this is the authenticated method not a method but a middleware right here which we are going to be passing into a request and now the next thing which you have to do is that we have to check for the admin okay so I don't know check for the admin if the user is admin so you know let's just remove these comments so I'm going to just write like cons authorize uh authorize I guess a t h o r i z e would be fine authoriz as an admin so we are going to be just specifying the request and response and also the next why is that because this is a middleware okay so now let's just check if request. user and request. user. is admin if you have the user and the user is admin so what do you want to do you just want to go next okay if not so what do you want to do we just want to write like rest. status and 4 one and then let's just send uh this message like not authorized uh as an admin there we go so now let me just export both of them out so export first of all we have to provide that authenticate and then we have to provide that authorized admin all righty so that's it about how we are going to be creating an authenticated mware and also authorized admin so now we are going to be creating routes based on that middleware so what I'm going to do I'm going to write like import authentic and also authorize authorize come on a t h o r i z e admin there we go from where from let's just go ahead to for middlewares and we have to get it from the off middleware dogs I want to make sure that the names are correct so I'm going to have to copy this name let's just place it right here and I'm going also copy this name and place it right here so which means like everything should work all righty so that's that now what do we have to do next the next thing which I want to do is that I wanted to get all of the users okay like all of the users from our database so we are going to be just writing like uh I don't know get all you come on not like that uh I'm going to have to provide the get method right here and here the user should be authenticated like the user have to provide their email address and also the password and also the user should be authorized as an admin okay so authorized as an admin if the user is not authenticated or the user is not admin so what do you want to do we just want to show the errors which we already created and if the user is authenticated and authorized as an admin so we just want to get all users there we go so I'm going to copy there let me just place it right here and go ahead and create it that controler I'm going to pass it right here and now I'm going to use uh sing Handler and created sing request response and bang so if you want to get all the user this is quite simple and easy so we just want to write like const users and it will be now equals to A and users model or user model and we just have to use that find method and just provide our empty object which means like give us everything that you got and let's just provide our users right here okay so I'm going to save that let me just create one more request right here for all of the users and but this should be a get request I'm going to have to copy this one let's just copy that and instead of providing the off we are going to be just providing API users click on him and we are getting cannot read a property of undefined reading JWT but why is that get all user oh I just forgot that s right here it's cookies and I was just writing cookie let's just sayell there God damn it man I'm going to have to click on this button and let's just see okay we are not authorized as an admin we we got to first of all authorize as an admin I'm going to have to log in and you know what before logging in I'm going to create admin user right here so U instead of writing Alex or something like that I am the owner of this project you already know that hosan is the owner of this project so he should be an admin so I'm going to WR hose one2 let's just create this new user right here so I'm going to create Huzan right here he is not currently an admin but he will be in a second so I'm going to go to the mongodb let's just refresh that where is hosan here you can see the King right here so now let's just make him admin right here so I'm going to save that and now we will be successfully able to do that but before I do I'm going to have to save this one log out just remove all of the cookies login as an Huzan I mean like as an admin so I'm going to just write Huzan here and I'm going to write Huzan 12 as my password very strong password by the way so I'm going to just click on this send button and here you can see we are getting Huzan and here you can see the admin is true which means that I am uh admin so now I'm going to go to get all the users or let me just rename that to get all or all users use users there we go and now let me just click on this send button and here you can see we are now getting all of the users which we currently have inside our database so we have our John we have our Alex and we have Huzan right here the king all righty so that's the all right so that's cool so next thing that you have to do is that we have to get a specific user data and we have to update the specific user data so I'm going to just write router. round and here I'm I'm going to just set that to Pro File there we go and I'm going to just write a get method and the user should be authenticated then they would be able to get the current user profile if not then we are going to be throwing that error like not authorized not to conf find or something like that okay so now I'm going to just place it right in here okay I'm going to save this file now let me just export that uh controller right here now let me just create that controller con and boom boom boing Handler Asing request response and what I'm going to do is that first of all I'm going to get the user so I'm going to write user aw and then I'm going to use the user model find by ID and this is amongus Method so we are going to be getting the user by request. user and here we are going to be just getting the user ID there we go okay so what I'm going to do is there I'm going to just write if user so what do you want to do like if this is valid uh if this is valid so what do you want to do just want to show this to a user like f. Json and here we are going to be just providing the ID come on the ID and ID will be equals to user and then this ID and we also want to show the username to the user like user. username and we also want to show the email to the user like user. email there we go so what if that's not the case so what do you want to do we just want to write rest stus and 404 and then throw new error and user uh not found there we go so I'm going to just say save this file and now I'm going to create one more request right here so I'm going to just write add request and get or current user profile would be fine so let's just close that I'm going to copy this off not o but this URL right here and let me just past it right here I'm going to provide a profile and this should be good but before I do that we are getting this data by using this ID so we have to specify the specific ID to it okay so we have to first of all log in as someone so let's just check the cookie remove that and I wanted to log in as Alex right here so first of all we have to log in like Alex I'm going to write alex12 and boom so now we successfully log in as Alex so now let me just save that and now we logged in as Alex so now let me just click on the send and here you can see we are getting the specific information so we are getting the all of the data which the Alex has like the Alex idid the Alex email and also the Alex uh name right here so this is cool now let's just update this data so we are now successfully getting this data like a specific user data so now let's just update the specific user data so what I'm going to do is that I'm going to go ahead or post method to be precise so I'm going to just write like or not post update because uh I mean like put because here we are updating our users so we're going to be just writing a put and the user should be authenticated then they would be able to update um current um come on update current user profile okay so if the user is not authenticated then they would get some sort of error okay so now let me just pass it right here import that and now let me just go ahead and provide it right here and let me just create it right here so const update user profile and it should be equals to sing a Handler and let me just provide sing keyword request response and now let's just update our current user so I'm going to write cons user and it will be now equals to uh aware and user uh let's just get what do we call it find by ID of request user and now let me just get that ID but user do ID there we go just like that so what I'm going to do is that now let me just check if you have the user so we are going to be checking the user uh username and it will be now equals to request. body. username and if that's not the case so we just want to stick to the old user name right here like username okay so let me just say that once again come on username there we go so usern name there we go username so first of all we are checking if the user provide a new username so we are going to be changing the existing username which we currently have inside our database which we are checking right here so we are going to be setting that newly edit username and we're going to be setting that to the old one and if the user did not provide the user username so we are going to be just sticking to the previous old one okay so this is what's going on behind the scene and the next thing which I'm going to do is that I'm going to just WR user. email and it will be now equals to request. body. email and it will be and if that's not the case so we just wanted to check the user. email or not check but we just want to strict to the old one okay so yeah that's cool now let's talk about the password so if you have request. body. password so what you want to do we just want to check the user password password and it will be now equals to request. body. pass word there we go so underneath that we are going to be updating or not updating but we are going to be saving that user that new data to the updated one so now underneath that what we are going to be doing is that we are going to be uh saving that data which the user provided or updated uh data so I'm going to just write cons updated user and it will be now equals to a user. method and now let's just execute that right here so what I'm going to do is that I'm going to just write like rest do Json and I'm going to specify the ID right here so updated uh user ID and I'm going to also put the username it will be now equals to updated user. username okay and also I'm going to write the email show so this is just to show to the user like yeah you did something okay so I'm going to just WR uh updated user email and I'm going to also write is admin no or yeah whatever so updated user do is admin right here okay so that's that so what if that's not the case now let me just save that we are checking this Fatman right here I mean like we are checking this F statement right here and we're writing all of that logic but what if the user is not provided so what do you want to do in that case so we just want to write SSE clause and write a rise. status of 404 and throw new error and user not found there we go so I'm going to just save that let me go back so you guys can see everything a bit better so first of all we are getting the user from the database and then what we are doing is that if we already have the user so then we are just changing the user data like if the user provide a new username so we just want to change this existing username to this newly added username but if the user did not provide this new username so we just want to stri to the old one and also same applies for the email and here we are checking if the user provide request. boo. password so we just want to change this existing password to this newly created or newly added password password and finally we are just saving that uh updated data to the database and then we are showing that data to the user right here and if the user is not defined so we just want to show this to user like user not found there was a lot of talking so I'm going to just create one more request right here and I'm going to just change that to post because we're going to be sending the data let's just copy that come on man what the hell did I do let's just copy that place it right here and this is um post so we have to post some sort of a data and now let me just click on ad Json and boom so what do you want to do we just want to change what we wanted to change the user email just or you know what we want to change the username and email just a username and email just like that so I'm going to just write like a username username and here I'm going to just write like John do and provide a comma and the email in this case I'm going to provide like I don't know JD gmail.com or something like that so this is going to be the updated data so I'm going to just click on the send button and uh we are getting some sort of error oh that's because we are logged in as someone else users start post why are we getting this error oh this should be P come on man this should be put now let me just click on that and here you can see we are now getting the username of John do and we are getting the email of J right here okay so now let me just show you there real quick I'm going to go ahead and go to my database let's just see and here you can see John do and JD rather than there John here we are getting the John do and JD right here which means like everything is working the we expect him to work all right so that's the and I guess I was about to do something else but I forgot what was the not quite sure about the or you know let me also show you how to change the password of the user uh so I'm going to just put a comma and password I'm going to change that to like uh I don't know some sort of like jd1 123 would be fine in this case I'm going to just write uh come on JD and 1 two three okay so now I'm going to just click on this send and it should be changed let's just save this file and I'm going to log in as a JD first of all so let's just log in and the password I'm going to provide is is there jd1 23 what come on man JD one two and three okay so now I'm going to click on the send button and it should authenticate oh I guess we are not logged out yes because we are getting this error so first of all let me just log out log out successfully now let me log in as a JD gmail.com why are we getting this sending request and why is this s set to pending let's just close that and see what's going on behind the scenes click on oh look at that we are not decrypting our password right here oh my God I was just thinking like what the hell I was doing wrong we are not decrypting our password let's just do that baby let's just decrypt our password then we will be able to sell there I'm going to just I guess copy all of that out or you know that to line would be fine and go ahead and I'm going to just press it right here yeah I'm going to cut that from here and let me just place it right here and here I'm going to just pass the hashed password there we go so now if I save that let me just restart there once again so npm run and back in now let me just restart there and I guess at this time it will work so first of all let's go ahead and log on everyone then I'm going to just log in as JD I guess I'm going to have to remove this user from scratch I'm going to have to remove this user because we already messed up with him let's just remove this user from or database say byebye to him and let's just create him from scratch John John and here I'm going to just write John and John one two three let's just click on send button so user already existed we remove their user we remove their user did we did we change someone else oh God damn it we already have John you know let me just create one more user like banana or something like that banana and banana there we go banana one two three okay so now I'm just create this banana all right so we are getting some serious error and I set a header let's just rerun that once again there was a lot of Errors so now let's just click on him and here you can see we now getting banana everything is working so what I'm going to do is that I'm going to just go ahead and change the user data so um let's just upgrate this from banana I'm going to just update that to like I don't know mango or something like that so we already logged in as banana and we already set the cookies and everything so I'm going to just write mango at gmail.com and mango 1 23 would be fine so now let me just update there and here you can see we are now getting mango mango and everything is working the work and now what I'm going to do is that let me just check are we even working with a mango yep we are working with a mango so I already forgot to show you uh I want to change the password to like um mango yeah I already changed the password to Mango but I forgot to show you that now let me just go ahead and go to the mongod DB let's just refresh that we have this mango right here we have this mango gmail.com and we already have this password right here decrypted password all right so that was a huge error to solve you know I'm saying so that's it about how we are going to be getting a specific user and how we are going going to be updating a specific user data now let's learn about how we are going to be updating a specific user from the admin side and we are going to be also deleting a specific user from the admin side and we are going to be also um getting a specific user from the admin side all right so I'm going to just write router. route and now I'm going to just specify the ID right here okay so first of all let's just talk about the deletion or you know getting the user or you know let's just talk about the deletion so I'm going to just uh Delete the specific user so the user should be authenticated and the user should be authorized as an admin then they would be able to delete a specific user if not then they cannot delete a specific user okay so delete user um by ID would be fine so I'm going to just write a message or comment uh admin routes boom boom boom let's just write it down bang that's cool so I'm going to copy that and go at the top and now let me just place it right right here go ahead and now let's just register that right here bang con get user by or not get but delete user by ID cons delete user by ID will be now equals to come on sing Handler I'm going to put Asing request respon response and it will be equals to um cons user first of all you got to get the user from the database find uh by ID provide a request do rams. ID in this case we are going to be providing the ID why is that because here we require the ID of the user so here we have to provide the user ID and we are going to be getting that user based on this request pram and ID you'll see that in a sec if you don't know that already so yeah that's that now the next thing which I'm going to do is that I'm going to just check if you already have the user so what do you want to do and if you don't have the user so what do you want to do okay so I'm going to just check once again so if you have the user and if the user is admin okay so just take care of that we don't want to delete the admin user the admin is a powerful person so yeah I'm going to just write res and 400 and throw new error and I'm going to write like um cannot delete admin user because admin is a top G and top G cannot be deleted so I'm going to write a and user. delete one and here we have to just specify the ID and user dot uh let's just get the ID okay so we are going to be deleting there and this is the method which allows us to delete a single person from the database so we just want to delete one single person so that's why I use a delete one method right here so if the user is deleted so we just want to show this message to a user like message and user remove from our database or something like that and what if that's not the case so we just want to write like f. status and I'm going to just write like four of four and also throw new error and user not found there we go so I'm going to just save this file and I'm going to create a lot of users first of all then I would be able to delete some of them okay so now let me just create some arbitrary users right here so this is a new user so I'm going to just change that to update user and I'm going to create one more right here and this one will say like delete user and you know what excuse me you know what I'm going to just create a new folder right here how to create a new folder oh there we go I'm going to have to click on the add folder I'm going to give a name of like admin because admin would be able to delete the user update the user and all of that so now let me just click on this route right here change that to delete not patch delete there we go and I'm going to also copy that let me just place it right here and I'm going to just specify the user ID but before I getting into the user ID first of all let me just create a lot of arbitrary users right here so that was banana let me just create an orange and the email will be orange and then password will be orange one two three okay so orange is successfully created and now let me just create one more uh I don't know Jordan come on Jordan Peterson or something like so JP uh or Jordan uh he would be fine and I'm going to just write J Jordan two3 let's just create there I'm going to create one for I don't know um post Malone and post Malone I would be fine and then post Malone one two three and I'm going to also create a 21 Savage one of my favorite one 21 Savage and let's just create 21 Savage gmail.com and 21 Savage um one to three okay so yeah we did create a lot of users right here so the next thing which I'm going to do is that I'm going to get their um ID right here so we have seven users right here so let's suppose if I want to remove this 21 Savage so I'm going to just copy that let's just close that from here let's just close this one from here and here you can see we have seven user inside our database right now so now let me just remove one I'm going to pass this 21 Savage ID right here and click on aend and here oh not authorized as an admin so first of all I have to log out and then I have to log in as an admin admin is hosan in your case it should be you if you wanted to but if you like me and you want to put my name that would be amazing okay so now let me just log in as admin what's going on I guess I changed the Airman credential um yeah I guess I did um let's see do you want have or yeah or adman we have hosan and excuse me I guess I change the password to something else so what I'm going to do is that I'm going to just delete this admin from scratch okay so I'm going to have to delete this admin and then we have to recreate that admin once again so what I'm going to do is there let's just go ahead and create the hosan web dev and boom let's just create him so this file and now let me just check it out refresh there and we have hen right here now let's just check or set that to True save there I logged in as an admin and now I will be able to delete this user so I'm going to just click on the send and user not found that's because do we delete that or something bad happened 21 Savage so I'm going to copy that now let me just place this ID right here so uh it should be delated user not pH what the hell is that supposed to mean user request are perams man perams what the hell these small silly mistakes just waste a lot of my time and I'm just wondering like where the hell did I make a mistake let's just remove that and user successfully removed right here okay so this was the first user which I have deled refresh there and here you can see it is now currently set to six we have hosan and now let's just remove this post Malone as well so now let's just remove him I really love this guy so I'm going to have to click on send user successfully removed and here you can see it is six but now if I refresh there it is set to five which means like yeah we are totally able to delete the user but we have to be authenticated and we have to be authorized as an admin okay so that's then uh what I'm going to do is that I'm going to get a specific user so I'm going to just write get and the user should be authenticated and authorize as an admin and then they would be able to get a user by ID okay so now let me just get a specific user by ID let me just place it right here at the top go ahead and create that controller right here okay so I'm going to just create it right here const and come on God damn it I even forgot the name what what was the name the name was get user by ID and it will be now equals to asking Handler Prov or asking request response and boom so the first thing which I want to do is that I'm going to just write like a user it will be now equals to A and user model and find by ID and so we are going to be specifying the ID like request or prams prams and here we just want to get all of the data but we don't want to get the user password because that's not appropriate so now let's just write user and rest. Json and we just want to show or see the user otherwise if we don't have any user so we just want to see uh or we just want to provide like 404 throw new error and user not found there we go so I'm going to just save that and now let's just create one more route for the user and inside this user folder I'm going to create the add request and let's just not login let's just copy that let me just place it right here and it was set to get but we just want to get a simple user uh I don't know orange would be fine so I wanted to get orange so I'm going to just place the orange ID right here let me just click on the send button and here you can see we now getting all of the data based on that orange so here you can see we are getting all of that orange data right here when that was created when it was updated in all of there so now let's just save it there and change that to like get or user bu ID will be fine I guess so let's just remove all of these routes like the other routes right here and yeah that's that now the next thing which I want to do is that I wanted to update the user by ID okay so we just wanted to get the user and we want to update the specific user okay so I'm going to just write put request right here and the user should be authenticated and authorize as an admin then would be able to update the user so I'm going to just write update uh update uh user by ID would be fine so I'm going to copy that and now let me just go ahead and place it right here okay now I'm going to go inside there go to the bottom export there like so and now let me just create the cons update user by ID s sync Handler for snc request response and Boom come on I'm going to first of all get the user so I'm going to write a and and it will be now equals to user model and we are going to be using the Mongoose find by ID method and here we are going to be passing this request our programs once again and also the ID so now let's just check if you have the user so what do you want to do you just want to change the username excuse me username and it will be now equals to request. body. username if the user already provide some and if not we just want to write like the previous old one like a usern name there we go okay so that's that now I'm going to write a user email and it will be now equals to request. body. email if not then we want to check the user email there we go I'm going to also search for the user is admin as well I want to make him admin so I can if I don't want to make him admin so I don't have to so now let me just write request. body. is admin okay so that's that um yep so let's just write con updated user and it will be now equals to aware and user. save right here okay so we just want to save this user and lastly let's just provide some sort of a message for the user like yeah you did something admin you did something I'm going to just write updated user uh there we go and we just wanted to get the user ID okay and also I wanted to get the username like which kind of uh user we updated so we are going to be just writing updated user and let me just get the username let me put a comma and I'm going to also get the email so updated user and I'm going to also provide the email right here and now let me just provide is admin and here updated user and then is admin there we go okay so yeah that's then now underneath this one if that's not the case like if we didn't found any user so we just want to copy this code and paste we just wanted to copy that code and let's just place it right here okay so user not found I'm going to sve this file and finally finally the M of Truth uh I'm going to write a add request right here and let's just copy this one bang and here this should be update user or specific user would be fine rather but now let's just update a specific user like I don't know and by the way here you would notice like we cannot change the user password that's because the you uh I mean that's because the admin is not supposed to change the user password so that's that uh what I was doing yeah I was going to go to the database and now let's just change the Jordan Peterson to John door something like that so I'm going to just copy that J not this one I'm going to copy this ID right here and let's just place it right here and change the usern name to something like uh I don't know instead of a Jordan Pon I'm going to just change that to John do John or I don't know what the hell should I give him you know what John do is fine John do and also the user email will be equals to um John do gmail.com and I'm going to also yeah we cannot p a password so we don't have to specify the passwords we can make this uh person as an admin if you wanted to but I'm going to just click on the send button and here you can see we are now getting the John oh yeah we are getting the jondo I just thought that I just logged in as a jondo and I'm changing myself so now let me just check the mango and here we are getting the John and we should be getting a John do yeah here you can see we are getting a John do we are getting the John do@ gmail.com and we are also getting the Bro password right here Al righty that was a lot of talking and that was it about for the backend of the users so what we learned in this section we learned about how how to create a user how to authenticate the user how to authorize as an admin how to get all of the users how to log in how to log out and how to uh get the user profile and how to update the specific user how to delete the user as an admin and and how to get a user as an admin and how to update the user data as an admin and we also learned or not learned but we also did a lot of stuff on Postman right here or you know let me just change that or rename that to I don't know who store or something like that I don't even know how to rename that yep there we go contr e to rename that in PC so I'm going to just rename that to hosan uh store and bang okay so yeah I guess that would be it for the back end and now let's begin our journey with the front end of these users see you in the next one all right so that was all about back and forth the users so now I'm going to just start work on the front end and I'm going to create a few folders first of all so I'm going to just write components then I'm going to create one for the pages so I'm going to just give a name of pages then one for the Redux toolkit so I'm going to give a name of like Redux and I guess that would be here so inside the pages I'm going to create one more folder for the admin and now let me create one more for the off so I'm going to give a name of like o and also one for the user so I'm going to create one for the user now inside the off folder first of all we are going to be creating a navigation and then we are going to be creating like login component and register and all of that so now let me just create the navigation so navigation. jsx right here and a g a there we go so I'm going to just write RFC and I'm going to sell this file and also I'm going to create one file for navigation. CSS and this is going to be the only time where we are going to be using CSS extension okay like uh like later we are not going to be using CSS anywhere so this is going to be the only place so I'm going to just hit enter right now and I just copy a few line of CSS so I'm going to just place it right here and you you can also get this CSS from my gab repository link will be in the description below or if you want to just pause the video and write it by yourself so that's cool too so the first thing which we are doing is that first of all we are providing a navigation container which we are going to be using in a few seconds so this is ID and first of all initially we are just setting the width to four 4% and then we are providing a little bit of transition to it and also where is the overflow will be set to headen okay then we are just uh selecting that navigation container one more time and when somebody have it so we just want to increase the width and here we are providing that transition specifically for the width and we're going to be also selecting the na item and first of all initially it will be set to none and we are just setting the display To None we are providing a little bit of transitions to it and when somebody have over it so we just setting the display to block and the vacity to one okay so that's that so I'm going to just close this file right here and now let's just start work on our navigation or you know first of all let's just go to our app. GSX right here yeah I know I just just change that a bit so I'm going to grab a few things from so now let me just grab a few things so I'm going to just import first of all the outlet from the react um router Dom there we go and I'm going to also get my navigation component which I just created right here and I'm going to also get my toast container from react toastify there we go this is going to be the main component and we are going to be wrapping all of our um what do you call it the app component from this toast uh toast container you can read the documentation of that if you wanted to so the next thing which I'm going to do is that I'm going to also import react toast defy and let's just go to the dis folder and now let me just get my react toast define. CSS file right here so I'm going to just save this file and now let me just come here and remove this H1 and let's just render our um toast container right here and I'm going to also uh just render my navigation right here and then I'm going to just write Men Let me just give a padding for the YX of three would be fine and inside that I'm going to just render my outlet right here and save my file okay so now here you can see we are now getting this navigation but there is one more thing which you got to do first of all then we will be able to go to navigation so I'm going to go into the main component first of all and yeah I did change a few things right here so I'm going to have to go back and now let's just import a few things so the first thing which I wanted to import is Route so I'm going to just get my route not router but route and now let me just get my router Provider from the react uh router right here so that's that and I'm going to also need the create routes from element okay elements there we go and we are going to also get the create routes from the element okay so that's that and we're going to also need what we call it the create browser router from the react router Dom and that's that okay so the next thing that you have to do is that we have to create a router so I'm going to just create a router it will be now equals to create come on create browser router and inside there we are going to be also writing a create routes from the element which we just import a few seconds ago and now let me just write my route and the path will be just go to home and I'm going to also specify the element and in this case we are going to be just passing our app right here and now let's just close that right here and I'm going to just remove this F from here and inside this render we are going to be providing uh what do we call it or route provider but before I do why am I getting this okay I guess yeah we didn't close that we got to close it right here and so that's that and I'm going to just specify my route provider and now let's just specify our router and it will be now equals to the router okay so now let's just close that I'm going to save this file and I guess that's it so that's it for the setup for now so let me just save this file and refresh everything is is working totally fine but why are we getting this cool error now let me just run npm uh run front end hit ENT and now let's just see what's going on and let's just refresh it and we have our navigation right here cool so everything is working the way exp work the next thing which I want to do is that I wanted to get a few things so I'm going to just get my uh let's just import the use stand and we're going to also need a lot of icons right here so I'm going to use AI outline home and I'm going to also use the AI um out come on outline shopping and I'm going to also get the AI outline login AI outline user ad and AI outline shopping art there we go from where from the react icons and let's just go to the AI right here underneath that we're going to also get our fa hard so fa hard from where so we want to get that from the react icons and let's just go to the fa right here underneath that what do you want to do we just want to get our link as well so now let me just get the link from the react router Dom and also I forgot to get my CSS as well so let's just go ahead and get the navigation. CSS right here so I'm going to just save this file and and these are the things which we need just for now and I guess we are going to also import what do we call it the use navigate as well so I'm going to just use like use navigate from the react router Dom all righty so that's that and now let's just start working on our main component right here okay so we are going to be creating our drop down and we are going to be also creating our uh what do we call it sidebar so first of all let's just create a hooks for that so I'm going to just write um what we call it drop down and open and let's just set that drop down uh open there we go it will now equals to the use St and currently it will be set to false and let's just duplicate that and change that to the show sidebar and let's just change that to set show sidebar there we go so underneath there we're going to be creating a few functions which will just allows us to toggle the drop down and also the sidebar so I'm going to just write one for the toggle dropdown and it will be now equals to this Arrow functions right here and set drop down open and now let's just provide the explanation mark and provide a drop down open right here okay so I'm assuming that you are probably aware of that let's just duplicate that right here and I'm going to also create one for the toggle sidebar as well and here instead of passing that uh drop down I'm going to just pass my set um show sidebar right here and let's just pass or show side barar right here let's just create one more for the what do you call it let's just create one for the close Side Bar there we go and here we're going to have to pass um uh what do we call it set show sidebar right here and change that to false right here when it is closing so C uh come on close Side Bar there we go I'm going to save this file for now and I guess this is the time to get into the jsx right here let's just write a lot of jsx we cannot see any results right now because currently we don't have anything right here to work with so inside this div I'm going to delete that first of all and I'm going to provide the style word here so I want this component to come at the top of everything so I'm going to provide a z index of 999 and now let me just provide a class name of uh what do we call it let's just C or show sidebar if we have our sidebar so we just want to provide the hidden cluster we just want to remove the if not then we have to just provide a flex Clause to it okay so that's there now let's just go out from there like so uh what the hell am I even doing let's just save this file and now here what do you have to do we have to ride the rest of the jsx or the classes so for the launch screen what you want to do we just want to provide a flex for the ex I mean like there was for the extra large and for the large screen we also want to set that to uh Flex for the medium screen we just want to set that to Hidden for the small screen we just want to set that to Hidden two and let's just provide the flex of column and justify between and also padding all around will be set to full and text will be set to totally wide and let's just put a background of totally black to it and the width will be initially 4% there we go okay so when somebody have order so what do you want to do we just want to provide the width of 15 to it so I'm going to write like 15% there we go so so I'm going to also provide the height of 100 VH and let's just fix that okay so I'm going to save this file and we cannot see anything because currently we are not Hing over anything so let's just provide some sort of a content right here or let's just save that and yeah we still can see that so let's just write a little bit of CSS or not CSS um let's just write a little bit of content right here but before I do that underneath that we are going to be also specifying the ID to it so the ID was now we ation container there we go n a i g a t i o n n container so I'm going to just write a flex and let me just give a class of flex column and the justify will be set to Center I'm going to also specify the space for the Y AIS of four okay so now inside there we're going to be creating a few links so let's just close that right away just like oh no not like that uh yeah just like that so it will go to the home okay and I'm going to also provide a classes of flex and items of Center transition and transform transform and let's just proide a transform transform there we go and I'm going to provide a how St to it so translate that to the x-axis of two okay so that's that now inside these classes or inside these links rather we are going to be rendering our AI outline uh outline AI outline home okay just like this and now let's just close there but I want to increase the size of this icon so I'll just write like I don't know size will be now set to 26 and I'm going to also provide a few classes right here so I'm going to just provide a class of margin for the right of two margin for the top of uh three rims would be fine and I guess that's it that's just for the icon and now let me just write a span with a class of hidden first of all and I'm going to also provide one for the na item name name and also one for the margin top and this is going to be arbitrary radio so we are going to be just passing three rims okay so that's there and inside this pan we're going to be just writing home and let's just close that like so I'm going to save this file and refresh and I don't know why this navigation is not showing on the screen let's just right click on him and see what's going on inside a console so what are we doing I request module no modules white and does not provide export name AI outline shopping cart AI come on o u t l i n e shopping cart so let's just save this one and what else AI out come on uh a i o u t l i NE e user add let's just save that and refresh so here you can can see we are now getting on navigation and initially uh its width is set to 4% right here so we just specify that 4% where where is the here you can see it is set to 4% when but when I H my mouse over to it it is setting to 15% so if I H my mouse over to it here you can see it is setting to 15% and when I H my mouse over to this icon here you can see we now getting this translate of x to two which we just specified right here okay so that's that so now I'm going to have to just uh duplicate that a few times one for the shop one for the card one for the favorite okay so let's just change this one to the shop okay so I'm going to go ahead and just provide a shop right here and here we have to render the AI and Shop shoping was fine yeah I guess yeah that's cool so instead of home I'm going to just change that to shop ping or shop would be fine rather so I'm going to just change that to shop and now let's just change this one to the card word here and AI um outline shopping cart this one right here and this one should be a card and here this one should be a favorite so f a o r i t e not favorites but favorite singular okay so here we just have to provide our fa heart which we just get separately and let's just put over f a v o r i t e yep I guess that would be so I'm going to just save this file and here you can see we are now getting all of that navigations right here so if I click on home it will just brings us to home if I click on a shop it will brings us to the shop let's just go ahead and click on the card it will now brings us to the card if we click on the favorite it will now brings us to the favorite right here so let's just go back and now what do you want to do we also want to provide what we call it over register and login so I'm going to just get my UL inside this UL I'm going to get my li right here inside this Li I'm going to get my link and let's just close that and it will go to uh the login screen which we're going to be creating in a few seconds and now let me just provide a classes or you know what instead of just writing that I'm going to duplicate one of them so I'm going to just copy I don't know whichever you want to copy and now let me just place it right here and it will go to the login and here let's just change that to what do we call it the AI outline login okay so log in there we go and let's just duplicate there one more time but not just a link we have to duplicate the lii entirely so now let's just change that to register and here let's just change this one to the a outline user add and now I'm going to just save that but before I do I'm going to just change that to registered there we go I'm going to save this file and here you can see we are now getting this card card we are getting the card we have to change that to the login so I'm going to save them and we are getting the login we are getting the register right here so everything is working totally awesomely all righty so that's just a Basics jsx and also the basics just a few things which we provided right here but next we're going to be creating a toggle drop down menu and also the close sidebar and all of them but before we getting into all of that first of all we have to make a set of four or backend API routes uh so which means like we got to go to the redex side and inside this redex we are going to have to create a few folders now let me just zoom in a bit and I'm going to just create one one folder for the API and inside this redex folder we are going to be creating one for the features and I'm going to create a few files inside this so one for the store.js and now let me just create one more for the uh what do you call it constants constant. JS okay so I'm going to explain every single thing which I'm doing right here so the first thing which I want to do is that inside this API folder I'm going to create one file I'm going to give a name of like api.js now let me just create one more for the user or users API slice. JS right here so let's just go ahead and go to the API slice this folder right here okay so I'm going to go ahead and go to there so what do you want to do first of all the first thing which you want to do is that you want to get the fetch B query so fetch B query from the redex toolkit and we also wanted to get the create API like so from the Redux uh GS toolkit and we got to go to the query and react and so we are going to be getting that from the rtk query so the next thing which we want to do is that we want to go ahead and go to the constants and now let me just Sate one constant for myself or not one but two okay so let's just cre for the what you call it the base one so I'm going to just write con B URL and it will be now currently equals to empty string why is that because we are going to be using the proxy so that's why we don't have to specify anything which I'm going to be explaining in a few seconds so now let me just export the cost of users URL and it will be now equals to first of all you got to go to the API then go then we have to go to the users right here I'm going to explain every single thing which I'm doing right now but in a few seconds so first of all uh we just import that from the rtk query and now the next thing which we have to do is that we have to get our B URL which we just provide inside this constant right here this one so now let me just get that I'm going to use import and then Bas URL from come on let's just for from got to go to the constant and now let's just get it from there so now the next thing which we have to do is that we have to provide our base query so I'm going to just write like con Bas query and it will be now equals to pitch Bas query okay and here inside this Bas query we are going to be passing our BAS URL and it will be now equals to our base URL right here which we are importing right here okay so the next thing which we have to do is that we also have to create our API slice so now I'm going to just export the con API slice and it will be now equals to create API and inside there we are going to be passing our base query which we are creating right here and we are providing the base URL of just an empty string for now like oh come on I just closed we are just providing the empty strings right here but we are going to be providing the actual back end URL in a few seconds so that's that and now let me just specify a comma and here we going to also have to provide the tag types and let's just put a few tags right here so I'm going to just provide one for the product because we will have our product we will also have our order and we will have our user just a singular user and we would also have our category okay so that's that now underneath this one what do you want to do we just want to provide our end points and it will be now equals to just an empty function word here just an empty error function right here so I'm going to just save this file so what are we doing first of all we are getting the fetch base query and create API from the Redux rtk query and then we are just specifying the base URL which is currently set to just empty strings like that but we will provide what do we call it a local host of 5,000 which is running as a backend right here we will provide that in a few seconds but I want you to just know that currently we are just specifying the empty strings right here but we will provide that Local Host in a few seconds then we are creating our API slice and we are passing our B query then we are passing our tags and finally we're just providing our uh what do we call it our empty end points right here which we're going to be fill that in a few seconds so I'm going to just remove this file remove this file as well and now let's just work on uh what do you call it or users slice right here so now let's just go ahead and go to the user slice and now let's just provide a few endpoints right here so the first thing which I want to do is that I wanted to get the API slice so I'm going to write import API slice from where from let's just go ahead one directory and we have our API slice right here the next thing which you want to do is that we also wanted to get our users uh URL from our constants which we created right here let me just go ahead which we created right here and which is set to the API and for/ users right here okay so that's that now let me just create a few end points right here so I'm going to just inject my previous one so I'm going to write like export and then con user API slice or user API come on API slice and it will be equals to API slice and here we just have to inject our end points from the previous uh method so I'm going to just specify my endpoints right in here previously it was just set to the empty function but in this case we are going to be passing our Builder function and here we just have to specify the actual endpoints right here okay so first of all I'm going to create an endpoint for I don't know for login would be fine so I'm going to just create endpoint for login let me just pass my Builder and mutation in this case we are going to be passing some sort of a data to this login right here so we are writing this mutation right here but if we weren't changing data or if we weren't providing any data so we won't be providing this mutation rather we are going to be providing this query so so in this case we are providing the data and we are changing the things so in this case we have to specify the mutation right here okay so we are mutating or St in this case so that's why we have to specify the mutation right here inside that what do we want to do first of all we have to specify the query and it will take a data and I'm going to just specify my function right here just a query right right here so what do you want to do we first of all want to provide the URL so where the URL should go the URL should go to the users URL which we are importing from up above and it should go to specifically to the off and now let me provide a comma and provide a method of post because in this case we are going to be posting our data so that's why we are setting the method to post now let me just proide a body and we are going to be specifying the data right here so now let me just save there and explain every single thing which I just set right here so what are we doing first of all let me just go ahead and go to my backend and I'm going to get my user controller not controller but I guess route will be fine so user routes come on man there we go routes we should have to change that to routes uh r o u t s r o u t s there we go I know it's going to break a lot of things got to go to this folder right here and let's just change it to routes uh you know I'm going to just copy that and let's just go ahead and search for this rout where in the word we use that just in this place so now let's just change that to routes now let me just click on that and everything is working totally fine so what in the world are we currently doing so now let me just go back and I'm going to just make that side by side so that you guys can see everything a bit better so what are we doing first of all first of all the local storage just like this I'm going to just write HTTP and then we are just writing our Lo Local Host and we are just setting that to 5,000 we are going to take care of that in a few seconds but for now I just want you to keep in mind like we have this URL for now and we are providing an endpoint for the users URL and then specifically for the off word here so what in the word is this users URL I'm going to go to this uh users URL right here and it is now set to the API and users right here so now let me just copy that from here let's just copy that from here and we are attaching that API users right here just like this so first of all we are making request to Local Host 5000 then specifically we want to go to the API then specifically we want to go to the user and for the user we specifically want to go to the off okay so we are going to be just copying that let me just copy that from here and now let me just place it right here okay so we want to make request to this URL so I'm going to copy that or even cut that and now let me just place it right in here okay currently we are working on a login so we have to make a request to this Au uh what do we call it this Au right here okay so we are first of all working with the API users and then we specifically we are making our request to this endpoint right here this O Okay so which means like we are logging in and inside this o we provided all of our logic right here so if I go to this controller okay I can't even go to this controller so I'm going to cut that here and I don't know why it's not working um user controller why in the world is not working so I'm going to just save this file got to go to that controller manually so let's just go to the routes and why it is not working now if I click on that and here you can see we are providing all of that logic right here inside this controller like we are getting the email and the password we are checking for the existing user if we have the existing user so we just want to compare the passwords if you have like if the password matches then we are just generating the token and we are just setting that to key and finally we are just setting this result to the user so that was the entire flow so which means like first of all for the backend it will look like this let me just show you all of that so I'm going to go ahead and go to the index file for the back end it should look like this first of all we are listening to the port of 5,000 you already know that right and the next thing which we are doing is that we are just making a request to the API and users okay so now we are going to be attaching this API users to that 5,000 route and then we also want to attach our off right here so if you make request to that which means like we are working with a login user which means like we can successfully log in okay so that was the entire flow I know that wasn't necessary if you don't get it that's completely okay but I just kind of want to show you every single thing right here okay so now we successfully create our login endpoint right here now the next thing which you have to do is that we have to create a hook based on this endpoint right here okay so what I have to do first of all I'm going to have to export a lot of things oh not a lot of things we are going to export a lot of things later but for now we just have to export one hook right here so we're going to just use export const and we just want to export the use login and mutation from where um from come on man from the user API slice right here so now I'm going to sell this file and now let me just check use login mutation now you might be thinking like hose where in the world is this use came from and where in the world is this mutation came from and what's up with that cases like look at that this is a camel case what's going on well the thing is Redux in my opinion work like this first of all we just you can just think about that this is my uh this is my analogy that I'm giving you okay so first of all we would have the use for all of the endpoints it doesn't matter if you are working with a query or the mutation so if you register your endpoint right here you will have that use right here like this use keyword will be here okay the next thing we have is that we are rendering dynamically our endpoint right here so in this case what's the name of our endpoint the name of our endpoint is this login right here okay so we're going to copy that and we're going to place it right here but we have to just make the uppercase you don't even have to worry about all of that things which I'm uh telling you right now but this is just my analogy right here okay then it will check like which kind of method or not method but which kind of request are you making are you mutating the state or you just uh getting a data from the back in or from some third party library or something like that in this case we are working with the mutation so here we have to copy that mutation and we have to just place it right here and we also have to make this as uppercase so here you can see we are now getting the use which you can see right here the use then or method name or or endpoint name so or Point name is login so here you can see we are specifying the login right here then we are providing the mutation so here you can see we are providing the mutation right here okay so that's that and this is how everything works but let's suppose if you are working with a query so we are going to have to specify the query there and in this case we are going to have to just use the query R okay so that's that and let's just remove that from here and let's just undo that to mutation okay so I'm going to save this file and this is how the entire flow look looks like and I hope that helps because I spend very much time right here okay so now let's go ahead to the store and configure over store right here okay so I'm going to first of all get my few things my tools so first of all I'm going to get my configur come on configure store uh from the Redix to right here so the next thing which I'm going to do is that I'm going to also get my setup listener from the uh Redix toolit uh query but we also want to provide the react at the end and we also want to get the API come on the API slice from where we want to get that from the API and got to go to the API slice right here U the next thing which I want to do is that I want to configure my store so I'm going to just write store con con store and it will be now equals to configure store and here we just want to specify the reducers right here so first of all I'm going to just specify the reducer off in this case we we are going to be just specifying our API slice right here and we just want to get our reducer path okay and it will equals to the API come on the API slice and here we just want to set that to reducer underneath that we're going to have to register our middleware as well so I'm going to write my middleware and it will be now equals to get default middleware right here okay so let's just remove that from here we don't want to import that let's just remove there and it will be now equals to the get default middleware and here we are going to be just concatenating let's just go back and now let me just concat uh what I'm going to concat my API slice right here and middleware there we go so now underneath that I'm going to just provide a comma and let's just use our Dev tools and set that to true true I'm going to save this file and here I'm going to just write a setup listener which we are importing right here so setup listener and here we are going to be just specifying the store and let's just provide our dispatch and finally let's just export default uh or store right here okay so now let me just save that and that's it for the configuration but I forgot one thing this API endpoint will work but I'm going to also have to create one file for the Au as well so I'm going to have to go to the features folder and inside this features folder I'm going to create one file or not file but folder for the off so now let me just create one folder for the off and inside this o I'm going to create one file and I'm going to give a name of like uh I don't know AU slice. JS would be fine okay so that's there now let me just Define my o first of all so this is going to before the authentication so I'm going to just write my import and let's just get our create slice okay from where from the redex toolkit right here and the next thing which I want to do is that I want to get my o uh slice let's just configure that so I'm going to use create slice and inside there we are going to be first of all providing the name so name in this case I'm going to just set that with off and then we have to specify the initial state for here so I can specify the initial State just like that but I'm going to just do it separately so now let me just copy that and here we have to just register our initial state so now I'm going to just write like con and initial State and it will be now equals to this uh what do we call this object right here I'm going to first of all check for the user info and now we are going to have to change that to local storage we got to go to the local storage because we're going to be setting our user info and also we are going to be setting uh we are going to be setting our user info in a local storage and we are going to be also checking for the uh cookie okay so I'm going to just write local storage and get item and in this case we're going to be specifying the user info right here and also let's just check if we have the user info from the local storage so we just want to parse that so I'm going to use like Jon Parts uh and I'm going to just specify my local storage and let's just specify my get item uh this user info and what if you don't have that so what do you want to do we just want to set that to no okay so now I'm going to just save this file and this is what's going on inside this initial State we are now providing our user info right here if we have a user info already available inside our local storage so what do you want to do we just want to PA that if we don't have that so we just want to set that to know okay so this is our initial State we are copying that and pasing it right here so now underneath that we have to register or reducers so I'm going to write a reducer and it will be equal to um this reducer object right here so first of all we are going to be setting the credentials so set credentials and we are going to be first of all specifying the state and also the action as well and arrow function just like that and here we are going to be just spacing the state. user info and it will be now equals to action. payload so I'm going to write a payload and also I'm going to write my local storage and it should be equals to set item and we are going to be specifying or we are going to be setting the user info okay to the local storage and here we are going to be just specifying the Json come on why the hell am I getting that popup box again and again and stringify right here and we just have to specify or action what the hell is wrong with this let's just go back here we have to specify the action and then payload and now underneath that we have to just write like cons expir time expire or expiration time rather and it will be now to new date and here we just have to write like get time and we have to just specify like 30 days right here so I'm going to write like 30 and then times 24 that same formula right here so 24 and also 4 60 61 more time and 1,000 so it will gives us 30 days and now let's just use that or set that as expiration time to the local storage so I'm going to use like local storage. set item and now here I'm going to just provide a property of like X duration time time like so and here we just have to specify the expiration time exp IR a TI o n and time and this is going to be it for the setting the credentials and now let me just create one more for the log out okay so like logging out the credentials so it will be now equals to State and let's just write a state here come onstead do user info and we are going to be just setting there to know from the local storage and we're going to be also clearing out the local storage so local storage. clear and now let's just execute that and that would do it for the log out right here so now let's just export what do we call it our actions and also the reducers so first of all let's just export our actions so I'm going to just export like set credentials and also log out log out from where from or come on man from our OD slice. action or actions rather it is a plural L roll there we go I can't even speak today and the next thing which you have to do is that we have to export default default and it will be now equals to all slice. reducer okay so that's then now we are totally done with the redex side so I'm going to just close this one let's just CL or you know I'm going to just leave that right here and oh I forgot to include it right here inside our store so what I'm going to do is that I'm going to get my let's just import the auth reducer from your let's just go ahead and go to the features and also go to the off and then off slice right here let's just copy that from here and I'm going to just place it uh right here let me give a name of like o and set that to the O reducer right here so now let's just save that and that's it for the store got to go to the navigation right here and now let's just register or do all of that magic right here so I'm going to go ahead and go to the bottom and underneath under this link and specifically um underneath this link right here the favorite links I'm going to or even in underneath this div uh I guess yeah underneath this div what I'm going to do is that I'm going to just create a div with the class of relative and let's just execute that and first of all we have to work on the button and for the button we are going to be using the on click and let's just toggle the drop down okay so toggle the drop down and let's just for the classes of flex and items will be tottally set to Center text will be totally set to Gray and 8 th 8,000 Focus will be set to outline and none and as a label we are going to be checking first of all the user info oh I forgot to include the user info and all of that now let's just import that right here okay so got to go to the top first of all and we have to use the use selector and all of that so underneath this CSS I'm going to have to get that first of all let me just get my use selector and and also not this one come on I'm not talking about that use selector and I'm going to also get my use dispatch ASP come on use D spch from where we want to get that from the react Redux right here so that's cool but we also want to get our endpoint which we just created right here so I'm going to give a name of like use log out l o u t come on use log l OG and out mutation there we go so we just want to get there and we also want to import our log out so log out from there we just want to go ahead and go to the redex first of all and we also want to get to the features and we also want to get to the off and then inside the off we wanted to get the all slice right here okay so I guess that would be it for the importing stuff and now underneath this navigation uh what I'm going to do is that I'm going to just change or I wanted to get the user info right here so user info will be equals to use selector and here we just have to specify the state and here we have to just get the st. off right here from our store so that's that now the next thing which I want to do is that I want to also get my uh dispatch and navig get first of all I'm going to get the dispatch and it will be now equals to the use dispatch and here we just have to specif oh we don't have to specify anything we just have to use the use dispatch and cost navigate will be now equals to the use navigate and let's just execute there and now underneath that what do you want to do we just want to get our login or log out log out API call and and it will be equals to the use log out mutation right here so that's that two and you know what I'm going to also create that logout Handler right away so we are going to have to use that later but I'm going to create it right now so I'm going to just use like log out and Handler and it will be equals to our Asing function because currently we are working with our database so that's why we have to use our Asing function so try catch for the catch block um we just want to use like console. error and now let me just pass the error right here in the tri block what you want to do we just want to use the A and log out API call and here what you want to do we just want to unwrap that so unwrap there first of all and then you have to just use the dispatch of log out and execute there and we also have to navigate through um the login screen which we are going to be creating in a few seconds so that's that now what I'm going to do inside this button is then I'm going to just check I'm going to first of all check for the user info if we have the user info so what do you want to do we just want to write a span and I'm I'm going to have WR it manually like span like so and let's just provide a class names of like text will be set to totally white and here we are going to be just rendering like a user info info and then we want to render the username okay and if that's not the case let's just go back if that's not the case so what do you want to do we just want to set that to the empty fragments so let's just save that right here and what are we getting and unexpected application error could not find the react Redux context value oh we didn't register the context value for the Redux uh we have to go to the main right here and now let's just register there first of all the first thing which I want to do is that I want to get the provider so I'm going to get my provider from where Provider from react and Redux right here h p r o v i d e r the next thing which I want to do is that I wanted to get the store from this store got to go to the Redux and let's just get our store right here and now we have to wrap our application from the provider and the store so now let's just use that I'm going to provide the provider right here let me just pass my store in it and here we have to just specify the store and now let's just wrap our entire application or the router inside the store and now let me just see here if I click on this login it is working if I click on the register it is totally working a okay so that's cool we are even checking everything which we need right now so we are going to be specifying the username if we already have the user information so currently we cannot do that because we have to go ahead and log in so now let's just start working on our login component and once we are done with the login component then we will be able to work with uh this navigation right here so I just want you to know that navigation isn't done yet baby we got to come back to this navigation once again so you know what we're going to take care of the rest of of this navigation a bit later like the drop down component at the end and all of that but first of all we got to take care of this login screen right here so if you successfully log in then we would be able to take care of the rest of this navigation right here okay so what I'm going to do is that inside this off folder I'm going to create one file for the login. jsx right here and rafc I'm going to just save this file and got to go to the main first of all and now let's just register that right here okay so now let me just import the off and I'm going to go ahead and import my login right here okay so go to the pages got to go to the all folder and now let me just get my login right here so now I'm going to save this file I'm going to copy that and inside this app I'm going to have to close that manually just like that okay so I'm going to have to close it like so so inside this route and this app so I'm going to just hit enter right here like so inside there what do you want to do we just want to create one more route like so separate route for or login so I'm going to just go ahead and go to the login screen and here we just want to pass the element off this component which we just created like login component okay so that's that I'm going to save this file and now I'm going to just click on this login screen and you cannot see that hello that's because it is hidden behind this uh what do we call this navigation word here let's just go ahead and go to the login component and now let's just create that the first thing I want to do is that I'm going to grab a few things like a use stand and I'm going to also get a user effect as well and let's just get our link and also the use location and also the use navigate from where from the react come on react router and Dom okay so now I'm going to get one more thing uh use selector and use dispatch not this use selector I'm talking about uh use selector and also the use dispatch from where you want to get that from the react redex right here so now to need there what do you want to do we also want to get uh something called the use login mutation and we also want to get the set credentials as well so set credentials which we created a few seconds ago and now I'm going to also get my toast right here so from the react note postify not notify okay so yeah I guess that's everything we need right now now the first thing I would do is that I'm going to get my email because if you want to log in so you got to get the email from the user so I'm going to just write like UST not selector but us and here we are going to be just specifying the empty string and I'm going to also get a password from the user so send password from the user and it will now equals to the use State and here what do you want to do we just want to pass an empty string for now okay so now let me just get my dispatch first of all and it will be now equals to the use dispatch and I'm going to also get my navigate as well so navigate and it will be equals to the use navigate for right here and execute them now the next thing which I want to do is that I want to get the login and I'm going to also provide the loading right here is loading which is a property inside this is loading mutation which we created a few seconds ago and I'm going to also get the user information as well so like a user info or the user data whatever you want to call that from the store so I'm going to use the use selector and I know you guys are probably aware of that because if you are taking this course so you already know all of that okay so now the next thing which I want to do is that I'm going to get a search and let's just use the use location which we import a few seconds ago and now let me just write the search uh pram so I'm going to write SPS for short and URL search prams and here we just have to specify the search which we are U getting from the user location and here in this case we just want to redirect so redirect let's just use the search prams and I'm going to just write a again and in this case I'm going to just P the redirect uh or let's just go to the home okay so that's that now the next thing which you want to do is that we also want to set up the use effect as well so I'm going to use the use effect right here in this case and what do you want to do inside the use effect inside a use effect we want to check if you have the user information so what do you want to do if we already have the user information we just want to navigate and redirect so I'm going to just SP my redirect right here and also as the dependency array what I'm going to do is that I'm going to just P my navigate to it and I'm going to also P the redirect to it so direct and I'm going to also proide the use info or not use info user info there we go okay so that's that so I guess we are almost ready to write all of our jsx which we need for this project d p TCH is okay because we not using it that's why we are getting that error right here righty so now inside this div I'm going to just create my section and I'm going to create a section but I'm going to have to put a little bit of classes to so let's just create a from scratch section give a class name class name of what first of all we're going to be providing the arbitrary value for the padding left and we are going to be just providing like 10 remote be fine and I'm going to also set that to flex and flex will be set to totally wrap okay and inside this section what do you want to do we just want to get or div and here I'm going to just provide the margin for the right and here we are going to be providing the arbitrary value once again so we have to close that manually so let's just put the for margin for the top I'm going to like five frames would be fine and now inside this St I'm going to write H1 of text will be set to like 2 XEL and I'm going to also write a font semi board and margin for the bottom will be set to four and I guess that's it here just write like a sign in and now let's just sell that okay and here you can see we are now getting this sign in inside this login route right here okay so that's cool now the next thing which I want to do is that I wanted to create a form so now let's just create a form inside there and this form will allows us to send our data to our database right here okay so what do you want to do let's just provide a class and I'm going to give a container class and let's just provide a width of like 40 rims okay and inside this form what do you want to do we just want to create a with a class of margin top uh margin not top but for the y axis we are going to be providing like uh I don't know two rims would be fine and inside there let let's just indent that a bit and inside there what do you want to do we just want to create a label and for the HTML for I'm going to put the email first of all because we required the email so we're going to have to provide that uh email address right here a d r e s there we go and I'm going to also specify a classes of like a Blog the text will be totally small and the font will be set to medium and I'm going to provide a text oft to White to it so now let's just sell that go ahead and check it out and here you can see see this is my label right here so underneath this label I'm going to create my input right here and the time will be set to email and also I'm going to give him ID of totally email uh and also let's just provide a class name of like margin top of one pading all around will be set to two and border and round come on rounded border and width will be set to totally full okay so let's just save there and it is looking awful but that's cool anyways that that's looking better okay uh yeah so that's it but the next thing which I want to do is that I wanted to make this component or this input as a control input so I'm going to have to provide the email word here and on change what do you want to provide we just want to provide our event object and set email which we are getting from the top and here we just have to specify e. target. value right in here okay so now underneath this Dev um I guess that's it for this email right here so let's just refresh that and we are not totally able to put our credentials in and everything like that so now let's just cut that from here and that's for the email but I guess I'm going to have to duplicate there and change a few things inside uh you know I'm going to just duplicate there let's just duplicate that div and let's just change things for the password as well so let's just change that like password remove that and this one should be a password as well and change this one um to the password as well and ID will be password and this one will also be in password the value will be password so now underneath this input not so underneath this div what do you want to do we just want to create one button so I'm going to just create this button right here let's just provide the disabled start on it so is loading uh will be the disabled start on there so if it's loading so it should be disabled if not then it should not be disabled so let's just Pro a type of submit to it and the class name come on class name will be now equals to like a background color will be set to totally pink of 500 and also text will be set to wide and pairing for the xaxis will be set to four and pairing for the y axis will be set to two it will be arounded two and also cursor uh will be set to pointer when we have our Mouse ordered and margin for the y-axis will be set to like one rim and as a text I'm going to provide conditionally if it is loading so what you want to do we just want to provide this label like signing in and dot dot dot and if it's not the case so what do you want to do come on man uh we just want to have so we just have to write like a sign in so if you just save our file uh and now if you click on that well we are not signing in so that's why we are not getting this signing in right here anyway so that's that but the next thing which I want to do is that um I want to also provide a loader right here so underneath that I'm going to just write like if it is loading so what do you want to do we just want to write like a loading dot dot dot right here um we will provide there but I guess I'm going to have to create a separate loader for that yeah I will create a separate loader for that so I'm going to just render loader which we are going to be creating in a few seconds right away let's just create it so loader. jsx so what I want to do is that I want to create RFC and I'm going to just pour a lot of GSX right here so I'm going to create a with the class of animate spin rounded four and the height will be set to 16 the width will be also set to 16 16 as well 16 as well it will be also um I'm going to also provide a border for the top of four and also border will be pink 500 and Border opacity will be set to 50 okay so I guess that would be it so I'm going to just save this file and now let's just use that loader right here I'm going to remove this R and yeah it is not giv me an auto complete so I'm going to have to import it manually let's just get or loader from where from let's just go ahead and go to the not navigation but go ahead twice ah like so go to components and go to the loader and now if you s that and everything should work and you know what I'm going to also create a label for like register components and so like if the user is not already logged in so I mean like if the user is not already register so then they can click on that level and they can go to the register screen okay so let's just do that bit quickly let's just go back like so and underneath this form let me just create underneath this form there be it and I'm going to create with the class of margin top for 4 and I'm going to create a paragraph of text toally one wi and let's just Pro Set that to like new customer and provide just an empty space right here and I'm going to just provide a link and let's just close this link right here and it will just redirect that uh let me just put come on redirect redirect and if it is redirecting so we just want to set that register question mark uh redirect uh let's just s redirect and it will be now equals to this dollar sign and I forgot to use this template literals rather and here we just have to close that right here and here we just have to provide the redirect right here okay so if that's not the case so what do you want to do we just want to go ahead and go to the register there we go and I'm going to also put a few classes to so like class name will be like I don't know text will be totally pink of 500 and I'm going to also put the how start of like underline and let's just proide the register label inside there s file and let's just see what are we getting are we even getting something okay there we go so we are now getting like new customer click on the register button and it will now register I mean like it will brings us to this register rout right here but we didn't set up that for now so now let's just get into it all right so now let's go ahead and check our database right here let me just connect that to my database go to husan store check out the users so I wanted to log in as not John but mango orange uh John do uh I want to log in as John do I'm going to just write like John j o n n d o e gmail.com and here I'm going to just write like john12 and I guess three let's just click on sign in and guess what we are not getting oh that's because we didn't create you we didn't even create uh what do we call it the login or the submit Handler and we have to specify it right here that's why it is not working let's just create this so I'm going to just write like onsubmit and once that's submitted so we just want to provide this control not controller why am I saying controller all the time so let's just put a submit Handler function let's just create the submit Handler function right in here so like so I'm going to write async async and provide our event object and inside that we are going to be preventing the default Behavior so let's just pre the default Behavior Prov a try catch blocks and inside the catch blocks so we just want to use like toast or error and here we just want to provide if we got some sort of error so what do you want to do we just want to get the data of that error and we also want to get the message if not so then we want to check for the error and we want to just get the message that's it so for the tri block we just want to get like a rest uh for the response from this login so we just want to put the email and also the password and we want to use the unrap right here okay so now let me just log this res right here so which kind of data are we getting and now let's just dispatch or set credentials which we are getting not section what Set uh credentials and here we just have to specify the response which we are getting right here okay so I'm going to just save this file uh right click on him let's just remove that question mark right click on him go to the console remove that and I'm going to proide my John do and John uh j o h n12 and three let's just click on the sign in and guess what we are getting an amazing error and do you know why we are getting this error that's because we did not set up our backend route proxy so let's just go ahead and go to um where is the we just have to go to this white. config file word here so inside this conf file we just have to register our proxy so the first thing which I want to do is that I'm going to just write a server and now inside This Server I just want to create a proxy so proxy and here let me just provide my API right here and now my API will be set to http come on HTTP Local Host and it should be equals to 5,000 right here let's just sell that and try it out okay so I'm going to just delete there from here let me just go ahead and log in as a John John 23 okay and click on this sign in and we are still getting that error right here I guess we have to restart the server for that let's just restart the server for that and check it out oh I was using an npm start rather than using an npn run Dev so I'm going to have to use the back end and also the front end then it would work my bad so now let's just refresh them and clear this out I'm going to use this John do j o n d OE and let's just provide j n and one two three okay and click on the sign in why in the world we are getting this error once again um API users so which kind of data are we providing we are providing this data and we not even getting the preview let's just check it out for the Post request API users off was there users or users singular let's just go ahead and check it out we got an error babies API users got to go ahead and check out the off yep that's cool this one is cool so let's just go ahead and go to the user API slce and go to the users API users so this one is working uh which kind of error are we internal server error 5,000 click on him we are providing the email we are also providing the password of JN 123 so why in the world we are not getting anything oh I forgot their two four slashes right here so let's just provide their two four slashes and S my file and come on hoseen that was stupid mistake that you made like a countless times let's just log in as husan what the hell let's just log in as hosan gmail.com and the password was hosan one2 and I guess three and so let's just click on this button sign in and here you go baby and here you go we logged in but we are not getting the toast so here you can see my name which means like we successfully log in but I'm going to have to make sure to check out the application first of all let's go ahead and check out the application and go to the local storage and there you go here you can see my user info right here and here you can also see the expiration time right here and I'm going to also check the cookie and we want to check our cookie and we have our JWT and here is my cookie there we go ladies and gentlemen there we go but let's just remove this hosan and let's just log in as someone else like orange or mango or something like that let's just remove uh this application let's just remove this JWT from the cookie and you know what I'm going to go ahead and go to the local storage and click on this clear icon and here you can see if I just refresh that here you can see my name is totally gone from this list right here okay so this is how we are going to be logging in I'm going to go ahead and click on the login once again and I wanted to log in as someone else in this case so let's just go ahead and go to my database that's hosan this is the John do I don't want to log in as John do let's just log in as orange maybe so I'm going to just log in like orange orange come on orang gmail.com let me zoom in a bit orange gmail.com and I'm going to provide the password of orange uh 1 2 3 click on the signing in and we successfully sign in sign in here you can see the orange and now let's just check it out inside our application tab here you can see the user credential or the user information right here so we logged in as orange he is not an admin and we are getting the username of Orange right here let's just check our cookie and here you can see we have our cookie all right so which means like our login functionality is totally working and we are done with the logging functionality and now the next thing which I want to do is that what else should I what else should I check it out uh I guess I'm going to have to work with the log out but I'm thinking about completing this navigation first and then we will complete that register functionality and then we we're going to have to jump into the shop and the rest of them that's other story but we are going to have to first of all um yeah I'm going to just go ahead and go to the navigation let's just go to the navigation first of all and now let's just complete the so now we are getting the user information successfully like we can see the username right here and that's cool so underneath this user info what I want to do is that I want to check for the user info once again user info if you have the user info so what do you want to do we just want to provide the SVG right here I just copy the SVG from my other project and now let me just place it right here and this is what you have to do first of all you have to write like this XML uh in and here you just have to specify this URL right here you can even remove that if you're want to okay and then here we are providing a class name we are providing the height to it we are providing the width the margin left and here we are checking if the drop down is open so what do you want to do we just want to provide a transform and we want to rotate that on the 180° if not then we just want to set that to empty string and we want to fill and the fill like the color will be set to none and we also want to provide the viewport of 0 0 and 24 like this one will be for the x-axis and this one will be for the y- axis and the stroke will be totally wide and by the way if you're not aware of like what in the world is SVG then you can use the icon if you wanted to but I just wanted to use the SVG and I wanted to make things lighter so that's why I choose SVG right here okay so then inside that SVG we are providing the path and the stroke line cap is set to rounded and also the line joint is also set to rounded and stroke width is set to two and for the dimension or the direction we are providing a drop down menu so if that's the case so just make it at the bottom and if that's not the case so just make it or at the top or yeah the other way around so I'm going to just save that and here if I just refresh that so here you can see we are now getting this drop down icon right here if I click on that drop down icon if you can see that here you can see we're now getting that drop down icon but if you click on it nothing is happening right now so now let's just take care of that so underneath this button what you want to do we just want to create or drop down list right here so I'm going to use like drop down open it should be open and we wanted to get the user info if both of the cases are false so we don't want to show anything okay so if that's true so we just want to like provide all of that GSX which we are writing right here so ul and let me just provide a class name class name and I'm going to provide a class name of like uh let me just use that back text right here it will be now set to Absolute and right will be set to zero the margin top will be set to two margin for the left will be set to 14 and space for the Y AIS will be set to two background will be set to totally white and I'm going to also provide a text of totally gray of 600 right here and now let's just check for the user admin and if not the user admin okay so now let me just check if not the user info do is admin come on is admin so what do you want to do in that case so we just want to change that to minus stop of 20% okay and what if the user is an admin so we just want to change that to the top of Ed right here so now let me just write are right here I'm going to save this and that's it for the UL styling okay so I'm going to go ahead and now let's just check for the what do we call the user info and admin so if you have um is admin what do you want to do in that case um let's just write an and right here and we just want to provide this GSX right here so now let me just put my fragments and inside this fragments I'm going to write my lii and inside this Li I'm going to write my link and it will go to it will go to the home first of all or not home but it will go to the admin and dashboard which we are going to be creating in the upcoming videos but not for this one because that's way way far okay so it should go to the dashboard and now let me just provide a class name off for the block and also pairing for the x-axis will be set to four pairing for the y axis will be set to two and when somebody have over it so we just want to provide a background color of totally gray of 100 right here okay and it should go to the dashboard so now I'm going to save this file and now if I click on this button and we can see that we cannot see that you know what what I'm going to do is that I'm going to just hide these and when I log in so these should be hid and when I not logged in so they should not be hiired like this one should be hiir so I'm going to just make that right here and then we will take care of all of that links so yeah we don't have to do much but I'm going to have to just wrap this UL uh and this is the UL this is the UL of that login and register so let's just wrap that in what if the not the user data so now let's just provide if not the user info so we just want to provide um this jsx right here let's just cut all of that UL right here let me just cut all of that and I'm going to just place it right here okay so I'm going to save this file and here you can see I'm getting my name right here I am get getting that thing but I can't see that right here okay so if I log down you know let's just take care of that uh I am getting their dashboard right here uh I'm going to just duplicate this lii for a few things like uh let's just duplicate this lii let me just select that this one will be for dashboard then we have a products then we have a category then we have a orders users profile and log out there we go so I know there a lot but now let's just take care that so this one will be for the dashboard and now let's just change this one to product come on product list right here and this one should be products plural okay and also this one should be a category list so category list which we going to be creating in the next video and this one should be category there we go and I'm going to also provide the order list right here like a order list in lower case and this one should be also in lower case and this this one should be also in lower case and here what you want to do we just want to provide the orders right here and also we just want to provide a user list in this case so user uh list and and the label I'm going to just change that to users there we go and also one for the profile so I'm going to write like a profile yeah I guess profile would be fine and this one should be profile okay and finally for the log out so log out and here do I yeah I'm going to have to just provide a log out right here but we are going to be also providing the on click Handler like on click and when somebody click on this log out so what you want to do we just want to find this log out uh Handler which we didn't create already I guess oh we already created that so now let's just save that and refresh and now if I click on it we are not seeing anything I don't know why but we are not seeing anything go ahead and go to everything is working totally fine but why we are not seeing that drop down component right here um let's just see we are now inside this user info right here if the user have the info so we just want to see the username and otherwise nothing okay then we are checking the user info and we are providing this drop down and everything should work drop down open and the user information as well oh you know what that is I just made a mistake right here so I'm going to have to cut out this Ali from here let's just place it right in here so I'm going to just remove that space and I'm going to just place this uh Alli word here okay so now let me just say that once again if the user is admin so what do you want to do we just want to show the dashboard the product list the category list the order list the user list but that's going to be it okay but if the user is not in admin so we just want want to show to the user that just a profile and the log out okay so now I'm going to save this file and now let's just check it out so here you can see we are now getting the profile and we are also getting the log out let's suppose if I just click on the log out but before I do that let me just check my application tab let me go ahead and go to the application Tab and here you can see we have our JWT right here and we also have our what do we call it our user info right here okay so what I'm going to do is that I'm going to just click on this log out and it is not doing anything let's just see why it's not doing anything got to go ahead and go to the network panel and we are getting the path of pending log out I guess I'm going to have to restart this server or what should I do let's just click on the log out why it's not working got to go to the inspect area let's just go ahead and go to network panel once again and let's just click on the log out right here why it is not working we have a local host API use off the preview response and it is taking a lot of time I guess there might be some sort of error right here not quite sure about that or you know what let's just restart the entire server and let's just check it out once again sometimes that's because of a Kay that's why it is not working the way exp for him to work all right so let's just refresh there and let's just go ahead and click on the log out and still not working oh we are not creating a log out mutation right here that's why we are creating a login mutation but we are not creating a log out mutation why the H did I say mutation I mean like endpoint we are creating a login endpoint but we forgot to create the log out endpoint let's just do that baby so what do you want to do underneath this log in we have to just write a log out and I'm going to just write Builder do mutation because in this case we are going to be mutating the state and here we just have to specify the query and let's just provide our aror function right here and the URL should be just this uh URL I mean like users URL right here which we are grabbing and we just want to go to the log out and what do you want to do we just wanted to provide the method of post right here and that's it okay why are we getting this error paring error expected let's just wrap it on quotes let's just wrap it on quotes and that's looking better so I'm going to save this file and now let me just use that use log out mutation yep use log out mutation and it should work this time now let me just go ahead and restart everything from scratch because we work with the front end and let's just restart that once again and I guess this should work this time like this should work this time okay so now I'm going to just click on the orange and click on log out and guess what it is also not working this time and I just realized that I made a terrible mistake we are um we are importing the login right here rather than the log out come on let's just remove that from here use log out mutation and I'm going to copy that and now let's just place it right in here okay and I'm going to sell my file and this should work in this case right here okay so now let's just refresh that click on the log out and here you can see we successfully log out okay so now let me just check what do we call it um the application tab so now I'm going to go ahead and go to the application tab check the local storage and it is totally empty and check out the cookies totally empty right here let me just confirm that once again and by the way let me just log in as an admin and I wanted to show you that what do we call that drop down menu so I'm going to just log in as an admin so 1 2 3 fre and I'm going to just click on that and now if I click on it and here you can see we are now getting the log out profile users order category products Dash and everything okay so now let me just confirm that one more time click on this application tab we are getting the JWT and we are also getting this local storage and all of that data like the user is admin and also the user credential okay so now I'm going to just click on there and click on the log out and we successfully log out and it will now redirect us to this login uh page right here okay so now let me just inspect there one one more time and now let's just close this one and now let me check out the application tab once again and here you can see that data is totally erased and we are not seeing anything not a JWT and also not the user info right here okay so that was it about the drop down component and also for the loging in and for the logging out I guess that would be it for the logging in and for the logging out now let's work with the register components or the register screen so I'm going to just remove that and I am going to go ahead inside this off folder and now let me just create one more file give a name of like regist r g. GSX right here and inside this register component I'm going to just write my RFC and now let's just go ahead to the main and import that right here so now I'm going to just import the register from come on register from let's just go ahead to the page or just one recory go to the pages then go to the off and also the register. GSX right here okay so I'm going to just duplicate that and change that to register there we go and I'm going to just place the register right in here so I'm going to save my file and now let's just go ahead and check it out so I'm going to just click on that and let's just go out and click on this register right here and here you can see we're now inside the register and we cannot see anything that's because it is hidden behind this navigation area anyways that's completely okay so what I'm going to do is that first of all I'm going to grab all of the things which I need for this component so I'm going to just get first of all the use stand and I'm going to also get the use effect right here and the next thing which I'm going to do is that I'm going to just grab the link the use location uh use location like so and I'm going to also get the use nav g n a i g a t e there we go n a i and we want to get there from the Rea router and Dom okay so now the next thing which I want to get is the used dispatch d PC and I also want to get the use selector l e c o r like so from the react Redux and I also want to get the loader which we've created U so I'm going to just get a loader from the components folder so got to go two times back and here we have our load right here okay and I also want to get um set credentials because we're going to be also setting the credentials so I'm going to just write a set credentials from let's just go ahead two times and go to the redex first of all then you want to go to the features and inside this feature we want to go to the alt folder and then the alt slide specifically and also let's just get or um toast so I'm going to write a toast from react and then toasttify toasttify there we go I'm going to save this file let's just go back and I also want to go to my API or user API slice right here and we also want to register the what do we call it we also want to register the register endpoint right here so what I'm going to do is that I'm going to just write register and it will be a builder mutation and here we just have to specify the query right here and I'm going to just pass the data because we will take some sort of data so that's why we are going to be passing there and the URL will be equals to first of all let's just provide our user URL right here and now I'm going to just um or you know we don't have to specify anything else but we just have to provide this uh user URL right here and the method will be equals to uh post and also I'm going to provide the body and body will be set to data right here so I'm going to just save this file and let's just create a hook for that so I'm going to just use like use register mutation right here let me just copy that save my file and now let's just use it right here inside the register component so I'm going to just try like import the use register um or you know let's just use it like there like use register mutation from let's just go ahead to Upper directories go to the redex then you want to go to the API or not yeah we want to go to the API and then we have to just select this user API right here so now the next thing which you have to do is that anytime you want to register the user so we're going to have to get a few things from the user like the user username and also a few other things so I'm going to just get like username and then set username like so and it will be now equals to the use St use come on State and I'm going to just specify the empty string right here and then we have to just write a user email so I'm going to just write set email and it will be now equals to us once again us come on if I can get them and let's just write a password so I'm going to write password and set password and it will be also equals to the use St and let's just provide empty strings right here and also for the confirmed password so confirm password andert confirm f irm p s w Rd and it will be equals to the used St and here we just have to specify empty strings right here okay so that's that now the next thing which you want to do is that we also want to get the dispatch so I'm going to write like dispatch d and it will be now equals to the use dispatch and execute that now I also want to get the navigate so I'm going to just write in a V at and use the use navigate right here and execute this one as well so now I wanted to use my use register mutation so I'm going to just write like const and let me just get the register from it come on register and I wanted to use like is loading and I'm going to just write like a use register mutation word here okay so let's just use that and we just want to extract this register from it so that's then now the next thing we want to do is that we also want to get the user info okay so then we would be able to work with that so I'm going to use like use selector and also I want to get the from the stairs so I'm going to go ahead and go to the store and get that from the O Okay so that's so that will gives us the what do we call it the user info and I also want to get the search so I'm going to just get the search from where from the used location and I also want to to create the search pram so I'm going to just write search pram of new URL um search prams right here and inside the search prams I'm going to just pass my search word here and now let's just redirect so redirect r e d i r e c and it will be now equals to search PRM and then get uh want redirect that right here or let's just go to the home okay so that's that now for the what do we call it for the use effect what do you want to do for the use effect let me just pass my uh dependency array right or you know we are going to take care of the dependency array in a few seconds but I want to check if user info so what do you want to do we just want to navigate to the redirect there we come on redirect and for the dependency array I'm going to just specify the navigate and I'm going to also specify the redirect and also the user info right here okay and I guess that would do it so I'm going to just write um a lot of uh GSX right here let's just remove that and change that to I don't know section would be fine so section for him and also section here as well okay so inside this section we want to create a div with the class of margin uh for the ride but this should be an arbitrary value so we just have to write it manually like four rims right here and also we just want to provide a margin for the top will be five rim and inside this div what do you want to do we just provide H1 with a class of text to Excel and I also want to provide the font of semi Bard also want to provide the margin bottom of four and register as a level so I'm going to save this file and why aren't we seeing anything inside the register so oh you know what I'm going to also provide the padding for the left so I'm going to write a padding left and this should be like uh 10 rim and I also want to provide the flex and Flex will be now in this case set to wrap so we just want to WRA every single thing right now so let's just refresh that what in the world is going on let's just go to the console and the requested module name set credal c r e d e n t i a l s let's just go ahead and go to the off and let me just copy the set credentials from there and let me pass it right here send my file and refresh and here you can see we're now getting that register right here all righty so now we can totally see our label right here the next thing which you want to do is that underneath this H1 we want to create our form so we are going to be attaching the event listener of on submit a bit later but I just kind of want to provide a bit of styling to it so I'm going to write like container and the width will be set to 40 or 40 I'm going to provide a 40 rim and let's just close that okay so inside this form what you want to do we just want to create a d with a class of margin for the y-axis and I'm going to just specify the Two Rim right here okay so inside that what do you want to do we just want to provide a lay come on l a b e l and I'm going to provide the HTML 4 as a I'm going to provide HTML 4 of name and I'm going to also give a class name of what the block first of all I'm going to provide a text of small and font will be medium m i m there we go and text will be totally white in this case I'm going to save this file but I also want to provide the level of name but underneath this level I'm going to also create an input with the type of text first of all I'm going to give idea of like um name and I'm going to also provide a class name of margin for the top of one padding all around two and border and totally rounded let's just go back totally rounded and I guess uh I'm going to also provide a full right here the width ofly four and the placeholder in this case I'm going to specify like enter um name or enter your name or something like that and the and now let's just make that as a control component so I'm going to or control input so I'm going to specify the username and I'm going to also provide the on change value of first of all the e object or not e object but the event object and then we have to specify set user name right here and in this case we just want to provide the e. target. value and now let's just save them okay so here you can see we are now getting our input right here and we are also getting that label right here so which means like thing is working the way we expect him to work so I guess I'm going to have to duplicate there a few times I'm going to duplicate there for like uh this one will be for name then we have a email address then we have password and then we have a confirmed password okay so I just duplicate that like four or five times so the first one we have is a name the second one we would have is for the email so I'm going to just specify the email right here em a i l there we go and email a d r e s and the type in this case will be also set to email the ID will be equals to email and enter your email like so and the value I'm going to specify like um email as well and now let's just change the set username to set email right here inside this case and let's just change the name to password so I'm going to write password and also change the label to password and also change the type to password in this case and also the ID will set to password and enter the name so I'm going to just change that to password to and the value will be set to password to and the set username I'm going to just write set password there we go and finally let's just write it for the confirm password right here as well so I'm going to write confirm to nfm and password like so let's just copy that and I guess I'm going to just write like confirm password right here as well and the type will be password just a singular password and ID will be confirm password as well and let's just write um confirm password there we go and I'm going to also write a confirm password right here and come on man set confirm password right here as well so now let's just sell that and here you can see we now getting the name email password and confirm password everything is looking okay but I also wanted to create one button so once we click on that button something should happen so underneath this div we just want to create a simple button so I'm going to write a button and I guess I'm going to give a class of like background totally pink 500 and text will be set to totally white and padding for the x-axis will be set to four and padding for the y axis will be set to two and totally rounded and we just want to provide a cursor of pointer and also the margin for the y axis will be set to the arbitrary value of one Rim okay so let's just close there and I also want to provide a disabled state right here so this come on di abl e so for the disabled St we just want to provide the is loading so if it's loading it should be disabled if it's not loading then it should not okay so let's just provide a submit type to it or a type of submit to it uh like so so I'm going to just save them and here in this case I'm going to specify if it's loading l D iing if it's loading so we just want to provide the level of registering dot dot dot and if it's not so then we want to provide just a registered there we go okay so let's just save there and underneath this button what do you want to do we just want to write or is loading and let's just provide our loader right here let's just call that loader okay so I'm going to save this file and here you can see we have this register button right here so that's look cool but I also want to redirect the user if the user already have a account so what I'm going to do is that underneath this form I'm going to just create a div with a class of margin for the top of four and inside that we are going to be creating one paragraph with a text of totally white and inside there we are going to be specifying like already have an account if you already have an account so what do you want to do in that situation well we just want to redirect them so we just want to write a link it will go to somewhere which we going to be taking care of in a few seconds but it will go to let's just remove that uh and place or redirect right here um first of all let's just put our login right here question mark redirect and equals to and this should be back Tex uh right here because here we're going to be rendering the dynamic redirect right here and also if if that's not the case so what do you want to do we just want to um redirect the user to the login screen so that's that and all Al I want to provide a class name so I'm going to write a class name of text of totally pink and also I guess text of ping 500 would be fine and I'm going to write a how St of underline like so and just provide a login word here so I'm going to save this file and boom here you can see we have our login right here if I click on it it will now brings us to this login screen if I click on the register it will now brings us to this register screen right here amazing the next thing which you want to do is the that we want to attach the on click event handler or onsubmit event handler on this form right here so anytime we submit this form so we just want to tag the data which the user should provide inside these input Fields right here and we just want to push that data to our backend database and do all of that Magics with it okay so now let's just do that so what I want to do is that here inside this form um I'm going to just write like on submit like so and on submit value I'm going to specify the the submit Handler I'm going to copy this name and now let's just create that onsubmit Handler right here so let's just write our const on submit Handler and it will be now equals to the async and let's just proide our event object and inside that um I'm going to just event I mean like I'm going to just prevent uh prevent the default behavior of it like the refresh and I also want to check uh check what I want to check if the password is not equal to conf firm password which we have so what do you want to do in that case we just want to provide a toast of error and we just want to say e r come on and we just want to say like passwords do not match do not match okay so otherwise in the else class what do you want to do we just want to provide a try and catch block and we just want to say uh cons. log of error and also we just want to say to. error we just want to provide a few or just a simple toast so error do m i mean data do message right here and inside a triy block what do you want to do we just want to specify the result and it will be now equals to A and let's just provide I guess I messed it up something um I guess I forgot okay we already have the register right here I thought I thought that I didn't grab the register so I'm going to just place this register right here and as a values I'm going to specify the username I'm going to specify the user email and I'm going to also provide the password right here and let's just provide the unwrap to it and let's just close that the next thing which I want to do is that I wanted to dispatch my set credentials set credentials and we want to provide all of our result right here okay like the username email and also the password right here excuse me and I also wanted to navigate when that submitted so we just want to navigate to like redirect redirect there we go and also a toast of success we'll say like um user successfully uh registered okay I guess that would be fine and now let's just sa our file and finger crossed we write a lot of things right here so I'm going to just create a user and name um Joe Joe would be fine and Joe gmail.com and here I'm going to just specify the password I'm going to provide the password of Joe uh joe1 23 Joe one 2 3 Let's just click on this register and boom here you can see we are now getting like user successfully register and here you can also see we are getting the username right here of Joe and we can log out and we can go to the profile if you wanted to so let's just right click on him and go to the inspect area and go ahead and go to the application area and here you can see our email is set to Joe the user is not admin so that's why we are getting the false the username is set to Joe and here is our unique ID right here let's just go to the cookie and check out the cookie and this is how our cookie looks like right here okay so which means like we are now successfully registering the user but now let's just see a few things if I didn't specify anything and click on this register button we are now getting like um please fill all the input fields and let's just provide like something else like I don't know someone and someone at gmail.com and I want to provide like a wrong password like someone one to and here inside the confirm password I don't want to provide anything so I'm going to just click on register and it is now giving us like password do not match and if I just write like I don't know Apple gmail.com or something like that and click on the registered so you're now getting like password do not match but if I provide uh you know I'm not going to provide actual password right here because it will just generate or it will create a new user for us and we don't want that so I'm going to just click on this login and this is how we are going to be creating that so I guess this placeholder isn't looking that much cool I'm going to just delete this placeholder I guess or maybe not just maybe I'm going to leave it there but I'm not quite positive about that so let's just select this placeholder right here and I'm going to hold control and hit D D D D D one more time let's just select that and hit control extra and sell my file and all of that input fields are now looking better I don't know man if you like them so let's just undo that if you like them so you can leave it there and if you don't like them so you can just remove that the next thing which I want to do is that I want to go to the login component or login screen right here and I want to provide an image right here so I'm going to give you a link in the description below which will bring you to my gab repository and you can get The Links of their images um from there or if you want to choose uh your own images so feel free to choose there okay so yeah now let me just grab their images I'm going to go ahead and go to the login screen and go to the bottom and underneath this div I'm going to just place this image right here with these classes right here let's just save that and wait for it so let's come on man render the image already we are now inside a login screen okay there we go so here you can see we are now getting this amazing screen or amazing image right here let's go ahead and provide one for the register as well I'm going to go ahead to the register and I'm going to go ahead and go to the bottom and underneath this div I'm going to place this image right here with these classes okay so I'm going to save this file and let's just wait for it to render and this is how it looks like right here so if you want to choose your own images so feel free to choose that but in my case that's cool now we successfully completed the login screen and also the registered screen and also the logging in and logging out and all of that and I guess next we are going to be working on a profile the user profile so now let's work with the profile screen but before we getting into the profile screen first of all we have to make a private route because we don't want anybody to have access to our profile okay so let's suppose if somebody have access to our profile so they can change like or name or email or password whatever they want on so we don't want that first of all let's just create our private uh route so I'm going to just write like a private route. jxx jsx right here so inside this private route I'm going to first of all write R FC let's just remove that and let's just get or navigate first of all so I'm going to use like navigate I'm going to also get Outlet right here come on outlet from where from the react router Dom come on react router Dom like so and we also want to get our use selector because we are oh not like this not this one so we just want to get a use selector from where from the react uh redex right here so now let's go ahead and go to our store and get all of the user information right here Ino there we go and it will be now equals to the use selector so we just want to use our use selector Pro our state right here instead. off so you are just interested in this off and now what I'm going to do is that I'm going to just remove this and I'm going to just write like user info if we have the user info so we just want to provide the outlet right here so if you don't have the user info so what do you want to do we just want to navigate to where login component or login screen rather let me just provide a replace right here and close that and there we go ladies and gentlemen that's our private route right here so I'm going to save this file and now let's just go ahead and go to or main screen right here and I'm going to go at the top right here and and I'll just write like a private route and let's just get our private route private route from where let's just go ahead and go to the not that much but we got to go to the components and then we have to select our private routes. jsx right here and now let's use that so inside this app right here what I want to do is I want to create a private route right here so the path we go to nowhere and we just want to provide the element e l m n t and here we just want to specify our private routes right here and now let's just close that uh like so and the next thing which you want to do is that inside this private route so what do you want to do let's just close this one as well oh not like that but like this okay so what do you want to do we just want to provide a path and the user should be able to go to the profile but they have to be authenticated then they would be able to go to the profile okay so that's then now let me just provide the element and let's just provide our profile right here the profile component which we we are going to be creating in a few seconds okay so now let me just create a profile component right in here inside the user right here okay so I'm going to just create a profile do come on profile. jsx and now I'm going to just write like RFC and let's just save that and here let's just get there okay so underneath there what I want to do is that um I want to get it right here so I'm going to write like import profile from there let's just go ahead and go to the pages and I want to go to um the user right here and inside there we're going to be just getting more profile. j6 right here let me just copy that and I'm going to oh we already placed that right here so now let's just save that and go ahead you know what first of all let me just log in as someone so I'm going to log in as I don't know orange I'm going to log in as orange so orange and 1 2 3 and go ahead and log in so here you can see let me just make that a bit smaller so here you can can see if I click on the profile and now we are not getting any error right here but instead we are getting something which is hidden underneath this uh what do we call the Side Bar right here so what I want to do for profile is I want to get a few things so I'm going to get like a use effect and I also want to get the use stand and now underneath that we are going to be getting our use dispatch and I also want to get my use selector as well and let's just grab our toasttify so let's just get our toast from where from the react toasty file there we go so next thing which I want to do is that I wanted to also get a loader from or loader component and I also want to get something called ass set credentials and I also want to get a link from where from the react router Dom and that's cool but I also want to go to my user API slice right here and I want to register one more endpoint which will be for the profile so let's just do that so underneath this register I'm I'm going to write my profile and it will be now equals to the Builder mutation and now let's just specify our query come on query and here we are going to be specifying some sort of a data in this case I'm going to specify the URL and the URL will be this um user URL right here and let's just go to the profile right here let me provide my comma in there and I'm going to also provide the method of put right because in this case we're going to be changing the data so that's why we set the method to put and I also want to provide the body and here in lower case come on in lower case Body and it will be equal to the data right here so now let's just save that and we are not okay we are not getting any errors so let's just copy them and pass it right here as a hook so like use profile mutation so let's just copy that from here from this use profile and let's just go ahead and use it right here so what I want to do is that I'm going to import this use um profile mutation from let's just go ahead two times and then go to the Redux then we want to go to the features and then we want not features man but API we want to go to the API and inside this API we want to get the user API slice right here so now what I want to do is that anytime you want to update the user profile we want to get the username set username and it will be equals to the use uh State we just want to pass the empty string and then now let's get the email set email will be equals to use St and let's just pass our empty string and then let's create one more for the password and set password and it will be equals to the use St not selector use stat uh St and let's just specify or empty string right here in this case and also for confirm password so confirm password and it will be equals to set um confirm password like so and it will be equals to the use select not selector use um come on man use St there we go I can't even type today I don't know what's happening to my fingers but they are hurting a lot so now let me just get my user info uh user info there we go and it will be equals to use selector and I'm getting a lot of these popup box I got to do something about these popup box right here anyway so now let's just get that from the stand and provide a stand do off now the next thing which I want to do is that I wanted to get the update profile from where uh we're going to take care of that a bit later but now let me just pass the loading is loading and now let's just change the name of that to loading update profile or something yeah loading uh update come on man up upd profile like so and it will be equal to it will be equal to the use profile mutation right here which we just squ a few seconds ago so now underneath that we are going to be using the use effect and here inside this use effect what do you want to do we just want to set the username to what the user info if you already have yeah we will have already the user info otherwise we won't be able to go to the profile screen so let's just pass our username right here and then use effect what are we getting um react hook use effect contains uh call to use without a list of dependen okay we will provide a list of dependencies let me just for use email and user info. email let's just proide there our dependency array so user info do email and also the user info do username as well so that's that now the next thing which you want to do is that we also wanted to create a dispatch so I'm going to write like dispatch and it will be equals to the use dispatch right here and now let's just execute there okay so I guess that would be it for grabbing the things Al righty so now let's get into the Js X right here so what I want to do is that I want to provide the class name of container first of all margin for the xaxis will be set to Auto and pairing for all around will be set to four and pairing for top not pairing but margin for top will be equals to 10 rim and inside this div what you want to do we just want to create one more div uh Flex justify Center and align Center and for medium screen we just want to change that to flex and for the medium screen as well we just want to provide a space of xais four there we go and I also want to provide the heading two of text to Excel and font come on font will be semi bold and margin for the bottom will be set to four update come on update profile right here s there and here you can see we are getting our profile right here underneath this H2 we just want to get our form and we will provide our Handler in a few seconds but first of all let me just provide oh you know we not going to providing anything to that let's just SC or D with a class of margin bottom of four and inside there we are going to be creating a label with a class of like I don't know block text will be set to wide and margin will be set to margin bottom will be set to two for the HTML 4 we are not going to be providing that and let's just provide some sort of a label like name and let's just provide our input and our input will be set to text provide our placeholder enter name and I'm going to also provide a class name of like um form input and also padding for all around will be set to four rounded and yeah rounded small and withth will be totally full okay so that's then now underneath that we are going to also specifying the value of username and also the on change will be equals to the uh event object and set user and name set username will be set to e. target. value right here so now let's just save that and we are getting there but that's looking amazingly awful oh you know what I'm going to have to copy that cut that from here and let's just write or um MD and withd will be arbitrary value so I'm going to have to write um one or three and inside this div we have to specify all of that uh content right here now let's just save there and this is how it looks like right here and we are getting our username right here cute little username orange okay so yeah it is working so next which you want to do is that we got to duplicate that so we want to duplicate that for email and also for password and confirm password as well so let's just check it out so we have our name name right here let's just change that to email in this case so write an email and change also change this one this one to email and enter your email or enter email uh here we have to specify the email and here instead of writing a set username we we going to be using the set email rather and now let's just work for the password and also this one will be equals to password and password like so and let's just pass our password right here and the next thing is that let's just write our set password right here and now let's just write for the confirm password confirm password okay and let's change that to password password type the password and uh confirm conf come on confirm password and let's just change the value to um confirm password and change this value to set confirm password bang I'm going to save this file and here you can see we are now getting the orange we are getting the email and we did not provide a password and confirm password so that's why we cannot see that anyways that's looking amazing let's just provide order button right here at the end so underneath this div what I want to do is I want to create a div with the class of flex and justify between okay so now inside there we are going to be creating two buttons the first one will be type submit and also the class name will be background totally pink 500 and also the text will be totally white the padding for the y axis will be set to two pading for the xaxis will be set to four and poly rounded and once we have over it so what do you want to do we just want to change the background to pink 600 in this case so 600 background uh totally Pink So now let's just change that to update so that and now let me just D or yeah I'm going to duplicate that or you know we're not going to be duplicating that instead we are going to be using the link uh link like so and let's just close that and this link will go to first of all the user orders and I'm going to also specify the class name of background totally pink 600 come on pink pink 600 and also the text will be totally white and piring for the XX y AIS will be two pairing for the xais will be set to four and totally rounded and I'm going to also provide the how start to it so like when somebody how over it the background will be pink um 700 in this case okay and my order my orders we're not going to be taking care of the orders right now but we will just provide it right here so if I click on the update oh we cannot update there because we didn't specify anything right here and if I click on the my order so it will just bring us to my orders which we are going to be creating very very later not right now Al righty so that's that now underneath this div what do you want to do you just want to write or loader right here loading update profile if the profile updating is uh loading so we just want the password loader right here s my file and let's just attemp or event listener right here on this Palm so what I want to do is that I'm going to write onsubmit and onsubmit will be equal to the submit Handler and now let's just create that submit Handler right in here okay so const on submit Handler ASN our event object inside there we are going to be first of all preventing the default Behavior and the next thing which we want to do is that we want to check if the password is not matched to confirm password is what you want to do in that case we just want to toast or error error so toast error and we just want to provide password uh passwords do not match uh what if that's not the case so what you want to do you just want to ride our else clause and provide our try and catch blocks right here and for the catch block we are going to be using toast. error and let me just provide the error if we have one and error. data if you have that then message or we got to use the error. message come on man message there we go so for the tri block what you want to do we just want to get the result first of all and we are going to be just setting that to aw update profile which we are getting I guess yep we are getting the update profile right here and now let me just place it uh right here so I'm going to just specify this data like first of all we got to provide the ID to it okay user info come on user in user info and we just want to get the user ID from it and we want to provide and the next thing which you want to do is there provide a user email uh username and email and also the password of the user okay so that's looking cool and we just finally we have to unwrap that and that's done okay so now let's just dispatch that so I'm going to use dispatch and I'm going to specify the set credential come on man credentials and for the set credentials we are going to be specifying the entire result right here dot dot dot and result and underneath that if everything went successful so we just want want to provide a toast of success and we just want to see profile updated successfully there we go I'm going to save this file and let's just try it so instead of writing a main or I mean like orange orange R okay so I want you to just uh look at this area if I click on update and Banger here you can see we now getting that update uh I mean like profile updated successfully and we are also getting this orange fruit right here let's suppose if you want to change the I don't know email so I'm going to just change that to like orangr gmail.com so if I click on update and here you can see profile successfully updated so let's just remove them and now let me just log in as orange fruit gmail.com and I'm going to write like uh orange1 123 and click on sign in and here you can see it will now brings us to and here you can see our email right here if I open my application tab so let's just go ahead and go to the application tab I can click on that and go to the application tab let's just close this one got to go to the local storage click on that and here you can see the email is no changed to orange fruit right here okay so yeah that's looking amazing and this is working totally fine you can also change your your password if you wanted to so I'm going to just change the password to like orange root uh one two 3 orange fruit ruit uh 1 2 3 Let's just click on the update and successfully updated let's just close this one orange fruit and then orange root 23 click on sign in and here you can see it will now successfully sign in right here let's just go ahead and check it out and go to the application tab one more time and you cannot see uh the password yeah you cannot see the password but yeah you you just got to trust me on this one you successfully update the password as well if you click on the orders we don't have any orders yet so it will not show us anything anyways so that was it about for the profile next we are going to be working with the admin routes by admin routes I simply means that only admin would be able to access them nobody else can okay or nobody else will okay so what I'm going to do is that I'm going to go ahead and go to the admin folder and I'm going to create my admin routes first of all route. jsx right here so I'm going to write my rafc sell my file bang bang bang everything is looking cool the next thing which I want to do is that I want to go to the main and I want to get that admin routes right here so I'm going to go ahead and go to the admin route and let's just grab that the next thing which I want to do is that I'm going to go right here underneath these register and all of that um or you know what let's just cut cut both of them out and let me just place them right here s my file and let's just provide our admin routes right here so I'm going to just write like um authenticated route or restricted or you know I'm not going to write any comments right here let's just write a comment for this one like admin routes right here okay so what I'm going to do is that I'm going to just specify my route it will go to um let's just for a path path of come on the path of admin right here and the element I'm going to be specifying like the element of element let me just specify the element of admin route right here and now let's just close there so that's there now inside this admin routes what do you want to do we just want to provide something but we will take care of that in a few seconds first of all let's go to the admin routes and create them so the first thing which I want to do is that I wanted to get my uh navigate first of all not navigation but navigate navigate and I also want to get the outlet from where from the react router D and underneath that we are going to be also getting the uh use selector from the not this one come on man you select there we go from the react Redux from react Redux there we go Redux and yeah uh let's just get our information like a user info info from where from or redex store it will be equals to use select and we just want to get the state and state will be state which we to be getting is from a. off and let's just excuse me let's just return our data right here so if you have the user info and the user info. is admin the user should be admin first of all we are checking for the user information we would have to have the user information and we are also checking the user should be um like a user and the user should also be an admin right here then what do you want to do we just want to provide our Outlet right here o and L let's just close that and if it's not the case so what you want to do we just want to navigate our user to where to or logging screen so log in there we go and I want to replace the r r l like so and I'm going to close it right here sell file and this is how everything looks like right here so I'm going to just close this file right here and now what I want to do is that I wanted to go ahead and go to that admin folder one more time and I want to create a user list right here so user list. jsx right here and we are going to be writing our user list right here semi file and inside there we are going to be rendering our user list so I'm going to just write like a route and path um will be equals to the user list and here we just want to specify the element and element will be user uh list there we go it will just aut completed for us and now let's just save that right here so let's just check it out there we go so we already have have a user list so what I want to do is that I'm going to just log out because currently we cannot see that user list right here we would have to log in as an admin right here so I'm going to write a user or not user but Huzan Huzan 123 hit enter and it will just uh log in as an admin and now I'm going to go ahead and click on this users right here and here you can see it will now brings us to this user list right here so we don't have anything right now but we will take care of that in a few seconds so the first thing which I want to do is that I wanted to get my use effect and I also want to get the use stand and I also wanted to get a lot of icons like fa trash I also want to get the fa come on fa edit and Fa a check fa a times from where from the react uh icons and let's just go ahead and grab that from the fa folder and the next thing which I want to do is that I wanted to get my lower let's just grab the loader and I also want to import a lot of uh other things or you know we're going to take care of that in a few seconds but first of all let me get my toast from where from the react toastify toasttify there we go so what I want to do is that first of all I'm going to go into that components right here and now let me just create one more component of message. jsx right here so inside this message component I'm going to use R fce inside this message component it will take a few parameters or yeah props whatever you want to call that and now let's just restructure these prams or props man not prams variant and now let's just use them so what I want to do is that I'm going to first of all create a function inside this uh component right here which will say like get variant v r i n CL uh like so and inside this function what do you want to do we just want to use a switch and Cas is right here so switch and variant and if that's uh if the case is success s c e s so what do you want to do we just want to return the background of totally green and 100 right here and also we want to provide the text of totally green of 00 a come on man 00 right here okay so that's that and we don't want any break so I'm going to just remove that break from here and now let me just point one more case so if the case is eror so what do you want to do in that situation we just want to return the BG or the background color of totally red of 100 and the text should be equals to red and um add 100 right here and for the info case what do you want to do so we just want to write case of info and here we are going to be just writing for the info C or you know we're not going to be providing any info Cas what the hell let's just provide the return right here for the default and we're going to be writing the BG of toally blue on of 100 and the text will be equals to Blue of at 100 right here and and now let me just use that right here let's just remove that provide a class name of this Dynamic class name so I'm going to just specify padding for all around four and totally rounded and now let me just provide get variant classes and now let's just execute that okay so I'm going to specify my children which we are going to be getting and now let's just use that children right here so I'm going to save this file and that's it for the messages or message I'm going to remove that from here and now let's just work with or user list right here but before we getting into the user detail in a really great depth I want to configure my user API slice right here okay so now let me just configure my endpoints right here so the first thing which I want to do or you know I'm going to just do that right away we are not going to be going back and forth so I'm going to just do all of them right away so I'm going to use like get users there we go and let me put my Builder query okay so for the Builder query what you want to do we just want to specify the query and I'm going to just specify y my uh URL right here so the URL will be equals to just this users's URL right here I'm going to provide a comma and underneath that or here we are going to be also providing the provided tags and it will be equals to just a user right here let me provide one more comma and I'm going to provide a keep unused uh data 4 okay so let's just set that to five so this is going to be the get user uh query right here and then we have a delete user and delete user will be equals to builder. mutation okay because we are going to be deleting the user so it is a mutation so we have to specify the query the user ID it will record the user ID as we learned that in the back end and I'm going to also show you that in a few seconds I'm going to have to specify the URL and let's just specify the user uh URL right here and we specifically want to go to the user ID so we will get their ID from yeah you will see that you will see that but first of all let me just just write the comma right here and underneath this URL what do you want to do uh we just want to provide a method of delete right here okay and provide a comma here and provide a comma there okay so now underneath this delete user what do you want to do we just want to create one more which will be for get user D um Tails okay get user details provide a builder and mutation or is that no we don't have to specify the mutation it should be query and let's just specify our query and I'm going to pass the ID right here and what else let's just execute that and here we are going to be just specifying the URL and the URL will go to the user come on uppercase user URL right here and let me just use the back slash off ID okay so let's just write our ID right here and underneath that let me use the keep unused data four and let's just pass Five in this case to I always forget this comma at the end let me just provide one more comma right here and I guess this is going to be the final one for updating the user so I'm going to just use like update user and let's just use builder. mutation and inside this Builder mutation we are going to be using the query and data will be equal to this method and the URL I'm going to be specifying the URL of the user uh URL like so and it will go to the data. come on data. user ID endpoint right here so now you might be thinking like Huzan where is this data coming from it is coming from the parameter right here okay so you will see that in a few seconds and the next thing which I want to do is that I want to provide the method of put right here and also the body will be set to data okay and and here let me just write my comma and invalid text will be equals to the user there we go so now I'm going to save this file and now we have to create a hooks for them so we want to create a hook for get user delete user get user detail and also for updating the user the first one was use get user uh users query the second one was for the use uh delete user mutation and the third one was for the use get user yeah something on that line so get user if I can get them man you you use um get user details Yep this one and the final one was or use update uh user mutation right here and I want to make sure that I didn't mess up something use update user mutation use update user and it is mutation yep that error is gone and now we would be able to get them so what I want to do is that I'm going to copy all of them out and I want to go to let's just close this profile I want to go to the user list right here and I want to import them so underneath this toast I'm going to use import and get all of them from where from uh let's just go ahead two times go to the Redux then we want to go to the API come on let's just go to the API and then we want to go to the users API slice right here and save that okay so that's going to be it but I guess we don't need that get user detail in this component and we also so yeah other than that everything is fine so now let's just use it right here inside our component so the first thing which I want to do is that I wanted to get the user query so let's just use data and let's just rename their data to users is loading come on and I also want to get the error if we have one let me use the use get um user quy right here and now let's just execute that underneath that we are going to be using the delete user right here and it will be coming from the use delete uh user mutation and now let's just execute that too and the next thing which we want to do is that we want to register our hooks right here okay so we are going to be writing const and then a DAT table user ID and then we have to change that to use a come on d i d abl e user ID and it will be equals to the use T and currently it will be said to know okay so underneath that we are going to be also changing that to like edit table username and then we have a set edit table uh user one username and it will be equals to use St and we are going to be also passing or you know in this case we're going to be specifying the empty strings right here and const and let's just use a DAT table user email email like so and then set a DAT table user remove the name and set that to email okay and it will be also equal to the used of totally empty strings right here okay so underneath that what we are going to be doing is that we also wanted to get the let's just cut that from here and P right here we also wanted to get the update user so update user from where from the use come on use update user mutation right here okay so let's just use or use effect right here so for use effect what do you want to do uh we just want to refetch okay re ref patch and execute that and we also want to provide the dependency array of reatch like so and I guess that would do it but we are going to have to create a lot of functions right here we will do that in a few seconds but first of all let's just write a lot of word jsx right here so if we can even see something so the first thing which I want to do is that let's just remove that and change the class name of the div to padding all around will be set to four 4 and inside that D we going to be writing H1 with the class of text of 2 XEL and I'm going to also provide the font of semi Bol and the um margin for the bottom will be set to four and users right here so if I save that and here you can see that user right here but you will see that in a few seconds all righty so underneath this H1 what do you want to do we just wanted to check is loading if it's loading so what we want to do we just want to provide over loader okay and if it it's not loading and if it's Error so what do you want to do in the error stage so we just want to pass our message right here Ms a g e but we didn't get that message did we or let's just close it right here and I want to make sure that we get the message right here let's just go back import the message from the message component go ahead two times to the components and let's just get our message right here so if it's so what do you want to do we just want to provide that message and for the variant we are going to be specifying the danger variant will be equals to um just danger d n g like so and if that's not the case so we just want to finally um not like that we don't have to close it like this we have to specify some sort of a message right here okay so I'm going to specify the message of like um error if you have on so we just want to get the data of that error and also the message which is inside the data otherwise um we just want to get the error message so outside from that if you don't get any error if you don't get any loading so then it means like everything is successfully working so we just have to render our content right here so if you wanted to render our content um why are we getting this error let's just leave it there let's just leave it there and I'm going to write my GSX right here so I'm going to write my D first of all and let's just provide a class name of what flex and flex column for the medium screen it will be uh Flex row okay so save that but why the word we are getting this error let me just cut that from here and now let me just save that and underneath that we shouldn't get any error or should we um I guess I'm going to have to place it here oh I just realized that we didn't specify the question mark right here okay so if we have some sort of error then print that eror if not then remove that and print this code result right here what am I even doing Huzan let's just go back let's just totally go back right here to this point and here what I want to do is that I wanted to put a question mark right here right away and now let's just use this j6 right here and that's looking better okay hosan you are amazing yeah I know they just shut out okay and now inside there we are going to be rendering something called the admin menu but later not right now so let's just create our table so let me create a table with a class of width full and also for the medium screen it will be the width of uh 4 over five and I'm going to also provide a margin for x-axis will be set to Auto inside this table we to be writing our T head okay and now let's just close there and then inside this T head we are going to be writing the TR and inside this TR we are going to be using our th right here okay so I am going to provide ID in this case and I'm going to also specify the class name of pairing for the xaxis will be set to four and pairing for the y axis will be set to two and text will be set to totally left okay so save there and I'm going to just duplicate there a few times and let's just change the ID to name change the ID to email and also change the ID to admin right here okay so let's just remove this one from here s file and we are getting uh the ID email I mean like ID name and email but what's going on with this users right here we will take care of theit later anyway or we can just totally remove their users right here from or you know let's just leave it right here for now but we will take care of that bit later inside this table but underneath this T head what do you want to do we just want to write a t body and inside this T body we just want to render our users okay so we just want to use like users. map we want to iterate over through all of the users and we just want to provide um jsx for them so we are going to be using the TR and let's just close that I'm going to provide a key to it and the key will be user. ID and inside this TR what do you want to do we just want to provide the TD okay so let's just write TD in inside this 3D our you know let's just give a class of pading for the xaxis of four pading for the y axis of two and let's just use our user. ID right here okay so this is going to be our user ID let's just save there and here we are getting the user ID that's looking amazing the next thing which you want to do is that we also want to get the user username so yeah underneath this TD uh I'm going to write my TD one more time pairing for the xaxis for pairing for the Y AIS uh will be to and inside there we just want to write our editable user ID and here what do you want to do we just want to check there if we have the user ID I mean like if the editable user ID is equal to the user ID so in this case we just want to provide this jsx right here which will be uh first of all let's just create our D with a class of Ls and we also want to create uh items and let's just use or Center okay so like this one and inside there we're going to be using our input field with a class or I mean like with the type of text and the value will be come on value will be set to editable P TBL e um user name usern name there we go so that's that now let's just provide the on change attribute on it so on change and let's just use the event object and then we have to just specify the set a datable user ID or not ID but user name word here okay so now let's just execute and e. target. value right here and finally let's just provide a classes to it so class name will be equal to with will be set to totally four and I'm going to also provide a padding all around will be set to two and border and also rounded large s this file but guess what we will get an error based on that you know what underneath this input field what do you want to do we just want to get our button so I'm going to write a button and I'm going to spe specify the on click Handler on it and we are going to be using the update come on update Handler update Handler which we are going to be creating in a few seconds and it will take a user and the user ID right here okay so inside this button what do you want to do we just want to provide a class right here so let's just provide our class name and the class name will be for margin left we going to be specifying two the background will be set to totally blue of 500 and text will be set to White pairing for the y axis will set to two padding for the xaxis will be set to four totally rounded and large okay and let's just provide our icon word here fa check and close them so if that's not the case so what do you want to do we just want to provide more GSX right here like some other else Clause right here so we are going to be writing the flex and items will be still set to Center and inside that we are going to be using our username do what come on username um or not a username but just a user. username there we go and here we just have to U provide an empty space and create a button this button will take on click event handler and we are going to be providing um our function word here it will say like toggle edit like so and we are going to be specifying the user ID and also the user and username and user. email right here email just like just email nothing else what I want to do is that I'm going to write my fa edit and provide a class name to it uh for margin left I'm going to write like one Rim close that and close this fa edit right here okay so we didn't create this tole edit but we will create that in a few seconds okay so that's that if you check him out so here you can see we have um this John we have mango and we have every single thing right here and that's looking amazing but now you want to make it so once we click on it so we just just want to get an input field and we would be able to change that we would do that in a few seconds but for that we'll have to create that anyways we will create that in a few seconds so underneath this one I'm going to create a TD with a class of ping for the x-axis and let's just provide a four and pairing for the y axis will be set to two Okay and now I'm going to just specify the editable user editable user ID will be equals to the user and the actual ID if that's the case so we just want to run one result if that's not the case so then we want to run another result right here so for this result we just want to create a flex and also the items will be set to toly Center okay but we got to do that manually we got to do that manually bro we have to write FX items will be set only Center and inside that we are going to be writing our input and here let's just provide our value right here so I'm going to write my value editable user what editable user email okay and also I'm going to put my own change and it will take the event object and set editable user uh email set datable user email like so and e. target. value for the class what I want to do is that I'm going to provide a class name of what I'm going to provide a width of totally full the pading all around will be set to two and border and rounded for large okay so I guess that would do it underneath there we are going to be writing our button let's just close this button and we are going to passing our on click method right here and here let's just use our update Handler right here which we're going to be creating in a few seconds it will take a user and the actual user ID right here okay that's a lot of talking that's a lot of talking um and inside there or you know I also forgot to include the class names right here here so now let me just provide a few class names so the margin for the left I'm going to provide two and background will be set to totally blue 500 and text will be set to totally white and pairing for the y axis will be four two and pairing for the x-axis will be set to four rounded will be set to large and inside this button we just want to write fa a check and close that okay so that's it and now let's just work on else Clause right here okay so we are going to just writing flex and also the item Center and inside that we are going to be using uh some paragraph and yeah I guess yeah we will use that paragraph and now let's just render or user. email right here okay so user email underneath this paragraph We are going to be creating one button and for that button we are going to be attaching the event listener right here and we are going to take care of that toggle Ed edit in a few seconds so now let me just pass my ID the usern name uh but not just singular name but a usern name like that and also the user email em come on email like so and inside this button what I want to do is that I want to write an fa edit and I'm going to also specify the class of margin left for one Rim right here and now let's just close the semi file and this is how it looks like right here so we are getting the user email and we are also getting these icons right here so that's looking amazing so now let's just take care of this admin area as well so what I'm going to do is that let's just create one more TD I guess so underneath this TD I'm going to create one more so I'm going to write a TD with the class of padding for the xaxis of four and ping for the y axis of two uh separator there and I'm going to also provide the user is admin if the user is admin and what do you want to do in that case we just want to provide the fa check and we want to provide a style of color po green and now let's just close that okay and also let me provide a separator right here and Fa times provide a style here as well and color will be set to totally red and also close this one as well okay so that's that now underneath this TD uh yep we are getting not adman not adman and hose is admin because hus is hus hus is an amazing person so that's why he's an admin all righty so yeah we are getting every single thing that we need right now um but we also want to provide that icons right here so let's suppose if you want to delete a single user so we would also be able to do that so underneath this TD what I want want to do is that I wanted to get my TD let me give him a class of padding for the xaxis of four and padding for the y- axis of two and inside that I'm going to check if not user do is admin and and uh one and one now let's just use our Flex right here and inside this Flex We are going to be creating our button and this button will have this on click event listener on it and we are going to be just passing or delete Handler which we are going to be also creating in a few seconds right here which will take that ID and now and I also forgot the class name class name as well and the class name I'm going to provide like background of totally red of 600 and how once when somebody hover over it so we just want to change the background color of that to 700 and text will be totally White and the font will be bold and I'm going to also Prov pairing for the Y AIS of two pairing for the xaxis of four right in here okay so and yeah I'm going to also make that rounded too so toly rounded and inside that we are going to be writing fa trash bang s them and here you can see we are getting all of that buttons right here but for the admin we cannot delete an admin word here because admin is a top G so I guess I'm going to just delete oh yeah we can delete that because uh we can't even edit that and we can't even delete that because we did not create a delete Handler we didn't create the uh toggle edit we didn't create the update Handler and also the toggle and update Handler so now let's just create them so the first thing which I want to do is that I wanted to create the delete Handler so I'm going to just write like delete Handler and it will be equals to the async and provide our ID to it okay so let's just provide our ID and we want to check if window do confirm and we wanted to make sure that the user or the admin do confirm that so are you sure question mark so then what you want to do we just want to specify the try and catch blocks and for the catch we are going to be using like toast. error and we want to provide the error and then the message or the data and the message or the error do error like so and if that's not the case so we are going to just using like a and then delete user and let's just specify our ID to it okay and it is taking that ID right here let me just show you that which is the user and ID okay so what I want to do is that I'm going to just save this file and let's just delete one user like the moment of truth I guess I'm going to just delete this John let's just click on him are you sure totally and bang refresh that and here you can see John is totally gone and let's just go ahead and check out our database right here let's just connect there once again check out our database we have we have five user right here inside our database we have mango we have orange we have John do we have John do which is this John do and we have uh husan and Joe all right so we successfully deleted one user from our database and it is working totally fine the next thing which I want to do is that I wanted to toggle the edit so I'm going to just write const and toggle edit and it will tag the ID the username and also the email okay so in in this case what do you want to do we just want to write a set editable user ID and we just want to provide ID to it so the next thing which I want to do is that set editable username and for that we are going to be specifying the username and then for set editable email email we are going to be writing our email right here so if I save this file let's just refresh that and if I click on I don't know for the John do and here you can see we are now getting this result and we are also getting this result right here like both of them are not totally inputs and then that's looking amazing so what I want to do like currently we cannot do anything with that but we want to make it so like if you change the data inside a name or in the email so we just want to update that so for that let's just create our update Handler right here call update Handler and it will be equals to the async and provide ID to it because it requires the ID I'm going to write my try and catch blocks and for the error or I mean like for the for the catch blog we are going to be using like toast and error come on error and I'm going to specify the error do uh data Dot message right in here and if that's not the case we are going to be specifying error. error like so and for the tri block what you want to do we just want to use a update uh user and here we just have to specify uh the user ID of ID and also we want to provide the username of a DAT table username where in the what is that editable user name there we go and we also want to put the email so we are going to be using like editable editable user email so let's just proide that and I guess that would do it but underneath this update user what do you want to do we just want to use like set editable user ID and we want to make that to null and the next thing which we want to do is that we also want to reatch Okay so so just refetch that and boom and what I want to do is that I want to change this orange fruit to just orange so I'm going to just remove that and click on a check and here you can see we now getting just an orange right here and now let's just check out this orange fruit and now let's just remove this fruit from the at end and now let's just change that to and just change that to Orange and click on this check and so here you can see it is not totally changed to Orange right here instead of a John do I'm going to just change that to like J JD or something like that JD gmail.com and click on check and now let's just change this one to JD like so and click on a check so here you can see everything is looking perfectly amazing all right so I'm going to just delete this user from the database and now let's just refresh that and here we can see we are now getting all of these users right here so that was it about for the users and I know there was a lot of talking and that was a lot of St to take care of so we just take care of the what do we call it this drop down component the navigation and we also take care of the profile and we also take care of what do we call it just a single user now let me just log in as a single user like uh I don't know I'm going to just log in as Joe and joe1 two3 and click on the sign in in and here you can see it will just successfully sign us in right here so now I'm going to just click on that go to the profile and here you can see we can just like change that to like Joe Goldberg or something like that goldberger goldberger so I'm going to just change that and here you can see we are now getting every single thing that we need right here all right so everything is successfully working and I guess that's it but now let me just take care of this flow bite thing so I'm going to import that right here inside our project and I just realize that we didn't plug in the flow bind in our project so I'm going to go ahead and go to the telling configuration and and now let me just get my flow bite like so and now let me just use that I'm going to copy this flow bite right here and place it right here inside this plugin s file and it should work from now on okay so here you can see this input is now changed to this black kind of color right here and the next thing which I want to do is that I want to provide a bit of more styling to it so I'm going to go ahead and go to the index. CSS and now let me just place this styling right here so I'm going to save my file and this is how currently things looks like right here here okay so let's just go ahead and log in as I don't know as hosan maybe so I'm going to just write like hosan one 2 three and hit enter and now let me just make that a bit smaller everything is looking so smooth and amazing so let's just go to the users that's amazing so yeah that was there about for the users and in the next video we are going to be taking care of the categories

Channel: HuXn WebDev

Views: 8,073

Keywords: MERN Stack, E-Commerce Development, Web Development Course, Building an E-Commerce Website, Full-Stack Development, MongoDB, Express.js, React, Node.js, Web Development Tutorial, Online Store, E-Commerce Platform, User Authentication, Payment Gateway Integration, Scalable Web Applications, Shopping Cart, SEO Optimization for E-Commerce, THE BIGGEST MERN STACK E-COMMERCE STORE ON YOUTUBE (INTRO), huxn webdev, huxnwebdev e-commerce

Id: KXzc-fTFIRE

Length: 235min 10sec (14110 seconds)

Published: Fri Oct 27 2023