Login implementation using JSON Server REST API | React authentication | React JS Full Course

authentication series part 2 login screen implementation using Json servers JP and this is the continuation of my last video so in this last video I have explained how to implement this registration screen using Json server rest APA so the same data only we are going to use in our login process and here I have listed all these steps we can go on day one so the first step is we have to design for our login page so in our application yeah this is our component okay so here first we can defend our use State variable so the first one is username and the function is user name update so the default value should be empty okay the similar way I am going to declare one more use State variable that is for password okay this is fine next I am going to have one function so this is for proceeding our login okay I just defend the function let me focus on the designing part so next we can have one form so in this form we can have on on Summit event so they even already we have defined so inside this form we can Define our controls so our first control is for username so let me see in this screen okay it is fine so the next one is for password so finally we can have the buttons okay I'm going to have one more button so for this one I'm going to use this link option for the new user we have to redirect into our registration page we almost completed our design so we can see okay okay see now it is fine next let me bind these new state variables into our 11 controls so first let me take this username the steps are same only the whatever things we have followed in our registration page the same thing we can use here also the same thing I am going to follow for our password also okay this is fine next I am going to implement this validation first let me check this username okay so if it is like this so we can change this return value into false okay and also we can display one notification please enter username okay the same thing we can apply for our password also so here we have to implement our login functionality okay So currently I'm going to have one console.log okay fine first we can verify our validation see we are getting this notification please enter username please enter password okay if I am providing some value see please enter password okay I have to change the type so anyway so in this console we don't have any value so if I'm clicking login so we got this proceed text okay so that means our validation is working fine so now we can focus on our login functionality okay for the login implementation so as I mentioned I am going to use the same Json service TPA so let me take the end point okay so here I'm going to use this getby code method okay so already we have this username let me I'm going to pass it here so this is the get method so once we have this data we can return into Json format so whatever data is coming I am going to put into the console okay and finally catching the crr okay if there is any exception we can show in this notification login fail due to the particular issue okay the issue we will get in this error Dot message and in our db.json so whatever data currently we have let me remove it I am going to register once again so the username is admin user password admin let me submit it okay I registered successfully so we are redirected into our login page so we have the all datas okay here I'm going to open this console so let me provide the same username admin user and the password is admin see now we are getting this object okay so that means we have the data so in case if I am providing some mismatched data so I am getting this empty object and for not forever that means we don't have the data right so here we can write on condition for checking the subject it is having any keys or not the response dot length so if it is 0 we are getting this empty object only so that means the user not found okay so we can say please enter valid user or else username that is fine okay and if it is fast we have the data then we have one more condition check so now username is matching the next we have to match with our password right so we can take this value I'm going to check whatever response we are getting response dot password equal to in our current state password okay if both are fine so our validation is success else we have to throw the error message one second so we can say please enter valid credentials and in this success scenario we have to redirect into our home page okay so for doing this one I am going to declare this used Navy head hook and if required we can provide the notification also for the success so let me save this one we can verify once again okay we are getting this warning okay so actually it should be use Navigator it's important okay the issue got result now we can verify once again see initially we don't have any values right admin user and if I'm providing admin one so please enter the valid credential so in case if I'm providing a wrong username so please enter the valid username okay now I am going to correct everything it is just redirected into our home page okay so let me go to the previous screen okay so here we have this new user option so if you are new user you can go to our registration page so once the registration is completed we can come to our login page right and now I am not logged in so if I'm trying to go to our home page it is following okay So based on the authentication procedure if you are not logged in you have to redirect it into our login page okay so that functionality we are going to implement now so before that let me change some decent part in our home page okay So currently in our home component we don't have any distance right I am going to have one degree first okay and let me include two custom classes in our app.cs file Sony's header and the next one is for overriding our anger tag here I am going to include two links so one is for home and another one is for lagot okay let me save this one okay it is somewhat fine okay the alignment also fine so we have these two links so if I'm clicking this log out okay actually it's moving to a register BJ it's supposed to redirect it into our login page okay okay this redirected into a login page still without login I am able to come to our home page so now what I'm going to do see in my home component I am going to use this use effect cook okay so I want this should be executed only one time okay and here I'm going to declare this use navy hook also and then in our login component so we have this username right so once it's success the username we can include in this session storage so whatever value they are passing that we supposed to use here so let me take this key value so in our ucfi hook let me declare this username okay so session storage dot get item I'm going to check on condition if it is empty or null big and pre-directed under our login page okay so let me save this one okay now I am going to our home page okay so see it is simply redirected into our login page so I'm going to log in once again admin user and admin So currently I'm in my home page okay so if I am moving to some other pages even though this login page okay if again I am coming to our home page so it will be still like you okay even I am logged out again I am coming to our home page so still it is working because our system storage is not cleared okay for clearing this one in our login page also we can use this use CFA hook the same zero dependency so here I'm going to clear our session storage let me save this one if I'm clicking this log out okay it is logged out so again if I'm trying to go to our home page it is never go it will redirect window over normal user screen okay so if I am trying to log in it is a redirected right and if I'm clicking this log out so it will be logged out so even this logout also we can move into right side so anyway I'm just changing this only okay okay this is fine so now we are in the end of the video still if you have any doubts or clarification please post in the comment box and also please don't forget to subscribe my channel so in my next video I am going to implement JWT token based authentication using.net core real-time vbap so stay tuned for my next video thank you thanks for watching

Channel: Nihira Techiees

Views: 51,651

Keywords: react js full course, react for begginers, react js full tutorial, post request making in react js, api handling in react js, recat js crud operations, React JS CRUD Operations using JSON Server REST API, JSON Server rest API in react js, React JS CRUD Operations using json server, react js routing with parameters, authentication in react js, react authentication using json server api, implementing registration functionality, react login & register using json server

Id: QapLfhqU8wY

Length: 20min 41sec (1241 seconds)

Published: Mon Dec 26 2022