Login and Registration using Mern Stack | Generating JWT Token | User Authorization.

[Music] foreign [Music] and when the role of the person with admin means the whole employees list will can see the person so it is a manager except of the admin the whole employee's list will be seen by that manager and if the person Logan employee means only his information his heart has information only can be able to see admin employees [Music] the role of the person will see now the login way the person of now we'll see except of the person is having a mineral except of third person information the whole employees information will be seen by this person you can see this see you except of that person the whole approach the least will be displayed in this personal page now we'll login with the person having no manage Rule and no admin rule only employee rule the person can see itself information right we can see now one of the person male will be visible so this is the how we design and dashboard I simply insert a cord itself know that much of Designing only the VR focusing only the concept how will pass the employees information according to the role so that is how we'll do here that's it so all this will happen using of mandrel and first we will look after code will set up our node.js right so first we will set up our node.js now I will go to our code so we required Express anchors and body parts [Music] so meanwhile of this installation will go and will set up our port 3815 what is third index store Js okay [Music] foreign [Music] [Music] so phones app equals to all our Express senator and we'll listen to our code process stored pnb so first we have to require a word in capital we'll see our output please it is working or not so install our new moon also setup now we'll see yeah here we started our server now we'll need cover all everything set up and we'll go forever for creating of models and routers and services so we already set up our body parts because we are using the requested body right so body person is required so I don't use [Music] and we'll set up a course because of the integrated door printing what app don't use of I will go forever we'll create our models first so we'll make one folder and services foreign [Music] [Music] you will get the link so this is the one you will get the link here and get the link here and make your password and database name to be clear and mention the an update to the link which database you are using so this is equals to place the link here itself here is the question mark you can see here in this place you have to place your database name which you are using guys and the name of password how to place your password what you have created your password for your database database URL in the EnV so now we'll set up our database connection so here it says database is the database itself now mongoose don't connect so we have to call your url here use new uh you'll see my database is connected or not foreign so you can see here database connected successfully so our database connection is completed successfully right now so now we go for our models so we are completed for this I will export it thank you so legislation model equals dot model I am making as a collection name as a registration here which we have been specified schema we have to make it here importing of this schema here it makes us creating of model so now we'll export it exports equals to registration model now the registration model is completed for now we will write an APA for the registration and we will make it as a in the post or get field of creating of routes after the first we'll create our API and now the fields we initialized in our model we have to take from the requested bodies right so I'm making it as first name which we are engaged in order and the last name and email which we are taking from the request on board now already we know that in the registration process where the email already exists means we have to throw all the email existence if it is an existing user or not we will check now itself if the existing user will be there means we will throw as an account with this email already existence existence if the new person makes we will create the new person so we'll make it as a password in the byte keep in the hash in the form of hash right so we convert the password into hash body [Music] now I will create our new user to save so we will pass our fees now we'll save over to use thank you foreign now we'll import our user router in our index.js foreign [Music] foreign [Music] so here you can see there is success for the password in the form of hash now will hit again because already so and I come with this email already existed so now our registration is completed now we will build our login perfect so for our login service we have to create a token also so at this time we will use a token when we execute when we login success means the token also generated body as usual we already know the login we have to take the email and password so now the email is present or not or existence or not in our database we have to check so first of all we'll do that or find one please user is not present then we will throw the user doesn't exist s so in the health part if the user not exists means it will come to the else part and check the password the password mismanagement will draw the password mismatch so now we have generated our token right now we'll send the response of 200 and then I'm Gonna Save slowing services in your past talking well so if password is mismatched so at this time the pass is here so as [Music] for a mismatch so now we'll check the password please match our password and the token is generating or not filtered so before that we have to pass in the router post ing the service go to here and change here to login email because here is the two I will make this login success so now the login is successful now we'll change our password which is to mismatched so here is the how login service is completed now we will go to inserting of amp and for that also the employee should be already registered employee only the information and register person employee data will be inserted in our list in our database so further we are getting the based on the database employee table we get the list and further we will split them into as based on the rules so further we have to write the insert service foreign employee employee rule rule ID and the email so that email to me which is present in the registration so for this we have to create one model right so first we'll create our model and come to here to complete our API um it is completely schema [Music] foreign [Music] [Music] foreign foreign [Music] stored in this table so this is a registration table which is a user so as the user is person means then only so we have to import our employee model also foreign [Music] thank you foreign now we'll hit our APA the employee record note form please register um [Music] foreign coupons get user list to be authorize the person further we'll go to the utils and create our verify token class here we required accounts here we'll be making as in this we get from request stored header so authorization now if the type of token a barrier header who will make it as a hitter not equal to equal to undefined make less every space will get right here well soon which we are getting a store token equals to barrier protein if it is undefined our empty means we will pass as invalid token so if it is not undefined means it will get into the if condition RS will make it as a Thrust invalid token so here we will verify comma I think here can pass a secret code which we are already used if it throws an error means let's see which we are coming from the invalid token equities part I already told that the email will be surrounding total and time our apis will be related to the email so I already told that uh in the insertion VR check the email which is present in the registration itself only third person employee record will be will be passed into our employee information table the same here if the email present in the employee record itself at that time only we get to know that the role ID right so further we are checking the email authorized or not user which the person is to be authorized so of course will check you what is coming from here to make this router call here it is foreign sir now we will check again export see request a call back okay [Music] yeah here we are getting yourself [Music] talking you won't just I will show you the password Jason stages of 200 5 so you can see here with a verified and the status of 200 so now we'll go to the next so you can see here with the user after the user itself we are getting the person details so we will use here so Auto user don't email now that user exists click the role ID so why I'm keeping the question mark means if you're not get any data means sometimes it will be crashed so at that time if the data present means it will be go further otherwise it will not rain here so he has to get all over the employees information so for that person where we are getting this information from the employee table so we have to get all our employees information so we are using the find we are passing if in case it is not matched here we have to use the then right for this use the catch now if the person is admin so for the manager we will use the employee role ID with the number of two so [Music] like this in user role ID equal to equal to 2. now we have to do one change is the for this manager the employees who are under that manager employee information only I want to accepting of admin role the all employees information he has he or she can able to see so for the employee don't find Keys also confined because now we are getting a single specific information right so we are taking his hero as a collect I am taking user info so user don't plan so here user directly we cannot retrieve that user dot roll ID if we're doing like that means it will do as undefined so we have to make this under in the user under we are getting the one ID and another ID continuous object right so first the I want to make it as a don't roll ID not equal to equal to 1. so I make it as user info don't push so this condition has been we already completed now we will get the response so response to Json foreign now 210 foreign [Music] you can see here the role id4 so now our token with the role ID of four so for this information we are getting you so now we'll insert with the roll ID 1 and with the rule ID 4. so before that we have to register registration so for this we will see the error also employee record not phone please register so we will go further registration so registration completed you already make changes manager 2 here employee so we can see here for the admin we have to get the information foreign [Music] and we'll make this use of context API also foreign [Music] action [Music] create our pages Pages folder and we require the components folder and required context [Music] thank you [Music] foreign [Music] [Music] thank you [Music] [Music] for the home page we'll make it as a private route [Music] so now we'll design our login page first [Music] [Music] thank you foreign [Music] [Music] foreign [Music] [Music] foreign [Music] all right [Music] thank you foreign [Music] [Music] foreign [Music] foreign [Music] foreign [Music] foreign [Music] [Music] thank you [Music] [Music] thank you thank you [Music] [Music] foreign foreign [Music] [Music] foreign [Music] foreign [Music] [Music] now our time to come to our action reducer foreign [Music] [Music] now our time to create our create context [Music] foreign [Music] [Music] it is two only [Music] so here we use sustain and dispatch so here call our reducer so as of now we are not created any reducers so make it as like the but will cancel state foreign [Music] [Music] item name things [Music] and we have to call our dispatch so before third you have to create our reducer and we have to create our type [Music] over here [Music] and we'll create our user reducer also [Music] thank you [Music] thank you [Music] [Music] foreign [Music] foreign [Music] [Applause] [Music] [Music] [Music] we are we are updating that response message into the ease message so when the user type is not matched so at the time would happen so we'll make it as a true [Music] so action type not matched so now we call our red user here [Music] okay [Music] foreign [Applause] [Music] [Music] laughs [Music] [Applause] [Music] so going to the army page we will call over context and user login method and will pass the data and we will check the login if it is getting success or not so before that we have to pass our provider in the index.js to make a control over the our app.js over our entire project will be controlled under context now please [Music] close this when I also so when we get the login we have to make it as your output of login success or user doesn't exist and password so we'll display that in the toast in the form of toast foreign [Music] [Music] [Music] so if I are getting an error [Music] so let one checking so I'm getting the login services so the password mismatch now the email user doesn't exist please register so our API is integrating successfully so when I am getting the success means I have to go to the home page further we have to use navigate [Music] thank you [Music] navigated to our home page now we'll look after our homepage after that we will go for the registration part [Music] so when I am clicking to the employee information I want to get the user released under the employees manager means whole employees admin means whole employees for the Management's expected for 10 October about this box while we are using here right so we have to here display the content which we can click on the dashboard or employ information the content to be displayed route so two pages are running dashboard and employees info [Music] thank you [Music] foreign [Music] [Music] [Applause] [Music] but this why I'm clicking on here we have to make residents to record you it was [Music] so when I am clicking on employee information it has to be changed to the route as a slash home slash employee and it it will display the employees page and when the dashboard click on dashboard will be changed [Music] thank you [Music] now check the output the information when we are clicking the card is coming or not foreign [Music] yeah we'll integrate our API off to get our user list foreign based on the role we are displaying the information of employees so for that we are taking the look when the person is login we are taking the token right so we have to pass the token in headers thank you authorization here we are taking the barrier token right barrier so we are when we login we are storing our token in the local storage so local storage don't get item [Music] you are taking as nameless token so now when we get success at that time we will pass [Music] so dispatch so we named like user list fractions will check what is the name he has decided so get user list foreign the previous get user list [Music] Ed at this time we will pass an employee info right in this reaction action door fail right and we'll make it as if your name is mistake and if we get any error means it will become true in this part it will be today and ease message okay so when we get here also force and it is true so our reducer and our context integrating of API is completed now we'll get this data in our employee here now we call our method here when we login only at that time the data has to load completely so further first we have to call our state and get user list which is from coming from the context so now we'll make with the empty dependency of user effect for the login success our method will be called now we'll map our data which is stored in employee and when the employee data if we are getting any employee data and it is better than what the length of this is more than one so when the length is greater than one at this time and when we get only single data when we will get the single data single info single person information means at the time of the person with an employee role of id4 role id4 at that time only his information will appears at that time thank you does it display please [Music] foreign foreign [Music] [Music] foreign [Music] [Music] first time ish foreign [Music] [Music] now I will login where admin Road [Music] so here we get the three members now we'll log in with akura which is having a role ID of two so at this time we have to get accept of the role for radhika now now here you can see here two minutes of one with the name of Jaya so except of the person details we are getting two details okay now we will go to the as dashboard I have not design anything just I display the dashboard as the name of content uh now we'll go to the registration and we'll integrate our APA when we login when we register successful image it has to redirect to login page go to our context page so we'll copy your registration foreign [Music] in the registration and [Music] here we make the reports what's your meaning of the same now we'll integrate it into our registration page state foreign [Music] [Music] text so now it's gonna play Third user register here and we have Passover probes that is user which we are storing the values and we will use user effect so the dependency of state of having changes easier and ease message and easily success so we'll make it as a year at the time of success we will make two locations right so it is so register handle will be called when we click on register here click equals method and back to working when we click here also on click here [Music] now once we'll go and check so when I click on the register see here it is navigated to our register page so we'll be back to login means so these redirected to your login page and we'll register one so when you click on the register foreign [Music] foreign [Music] okay if you like this video please subscribe to my channel [Music]

Channel: Radhika TechHub

Views: 1,225

Keywords: reactjs, radhikatekhub, login and registration using mern stack, login and registration using mernstack, generating jwt token, designing login and registration, using mern stack, login using mern stack, registration using mern stack, authorization using mern stack, user authorization using mern stack, user authentication using mern stack, mern stack tutorial, login signup using mern stack, mern stack project, mern stack authorization, mern stack login and registration, mern

Id: n3vcNQSi0as

Length: 121min 31sec (7291 seconds)

Published: Tue Mar 28 2023