React authentication using JSON Server REST API | Registration screen |React JS Full Course

today I am starting one new series react.js Authentication so our first video is registration implementation and managing the data I'm going to use the Json server htapa okay and here I listed all the steps we can go one by one and also I have splitted this video into three segments the first one is configuration so the configuration includes creating the application and installing the required packages and creating the required files now the next one is descending part I'm going to complete my design using HTML and bootstrap and the final one is implementation so it includes so completing your registration including the validations okay so the first thing is I'm going to create my application so let me copy this command npx create react app then our application name so application name provided react Authentication so the application installation gets completed now let me open in vs code okay fine now let me go to the new terminal so we can install the bootstrap so let me copy the command npm install bootstrap okay the bootstrap installation gets completed now let me refer one CS file so in our index.js file load models bootstrap then our bootstrap file okay so let me take this minified version next I am going to install this reactive thirsty file so this is for providing the notification okay great this one also gets installed now I am going to include one more CS file so this is for our reactify okay we have done and the next one is for routing so in this react GIS we don't have the default routing so we have to install this one manually okay great this one also gets completed now let me go to my app.js here I am going to remove this header section and next I am going to use this browser router here so inside we can Define our routing so before that I am going to create some components the first one is home here I'm going to use this sfc stateless function component and my common name is home okay so the home initially I'm going to provide on static value and my next component is login and the final one is registration so let me save this one and in our app.js we can include the routes insert the rounds we have this route option first one is path so the default one is home so in this element section we can include the first one is home okay foreign the second one is login and the third one is register okay and we can change the component also login component and also a register command okay and part of the toast notification I am going to include this toast component here I mean toasty container so now we almost complete the configuration section I believe one package is spinning okay actually this is for the Json server http so let me Define this one also we can go to our new terminal so see the command Json server and the db.json file so currently I don't have any files so it will create at the port number I am going to execute in 8000 because so default value is 3000 even our react.js application also going to run in the 3000 so I am provided the separate Port name okay so see our Json server is ready I mean the db.json file and see our application is running in the port number so here let me remove the existing objects okay I'm going to create one new object user so let me remove all the empty data here okay so this is our APA endpoint now let me run our application so see now the default value welcome to attack is it is coming from the home component so if I'm going to this login see this login and the similar way this register see the user registration so in this component only I'm going to start my designing so inside the due we can use our form the next time using this card so card have this header body and footer section so let me create the required views so we can move this headphone into our header section yeah the footer I'm going to have one button type submit so let me check the design see now we have this header and in this footer we have this register okay so in this body section we can Define all of our controls so before that in this style point of view let me make one change here and I'm going to have two custom classes so our first control is username and this is the mandatory field also so let me provide the star symbol and we can use the class already I defined one class let me use this one see the design now see so it should be like this so we can include our next Fields one by one okay the second field is password and in this type we can provide password and the third one is full name and the fourth field is email the next one is phone number and then country so in this country I'm going to use this select control here so let me provide some default values so the next field is address so for this address I am going to use this text area and we have to provide the text is address see we covered most of the controls like input and select on text area so let me include on radio button also maybe I can include like a field is gender the value I provided mail so in this label let me provide like a mail okay the similar way we can have one more thing and finally name okay so name I'm going to provide gender so let me change this class name so we can use this object see okay it is fine right and in this button point of view I'm going to include one more button for the back okay so our design is fine so let me move on the functionality point of view okay so the first thing so already I have different on form here I am going to include this Summit event and our function name is handle submit so let me Define this one here we can prevent the default event of summit okay this is fine and next let me going to Define all the states one by one so the first one is ID and the event is ID change so the default value I'm going to provide empty okay the similar way I'm going to declare the status for the different controls the second one is name from this password the next one is email traffic on this phone then country the last field are on this address and the final one is gender okay so now let me map the status to our relevant controls so the first one is username so the value I'm going to use this ID and then I'm going to use this on change event okay this is fine if there is any data change so we are updating to our ID State working so the same thing I can apply for all the controls so let me copy this one so my next control is password and the state is password and this event is password change okay and the next one is full name so we can use the status name so we have completed up to this address the final one is gender so here we can do something different the change event is fine so instead of this value we have to use this checked option okay here I'm going to check the state value of gender if we go to mail I'm going to check this radio button okay and the same way so this next radio button is for female so let me save this one and in our Summit event I'm going to declare an object so here we can include all the states okay let me include this one into a console okay now we can check whether we are able to get all the values so in this console we don't have any value so if I'm click we are able to get this empty object see so we can see all the fields but currently we don't have any data so I'm going to provide the values okay some value okay then this gender so let me click this one see we are getting all the values this gender is mail so if I'm changing this into female see the next stop sheet we are getting this female okay so the next thing is I'm going to call the APA we can complete the service call and before that let me show you one more thing so the default value so we not provided anything that showed the default leads not checked anything so we can provide the default value here I just added into mail defaultly set even if I'm refreshing also the same way if I'm providing female so it should be automatically set okay now I am going to call our APA so let me command this one for calling this APA we have to use this fetch option so the first input is our endpoint so this is our APA endpoint so next we have to pass some objects and the method is post request so the next one is here test so for the header I'm going to pass the content type so the final one is body so here we can pass our input object so that we cannot directly pass so let me use this Json Dot stringify so this is the success scenario and if there is any error we can get from this catchy section okay okay this is fine the finally we have to provide the notification so already we have installed this toast if I react so let me use the feature here toast so the first one is Success scenario registered successfully okay and the next one is the failure scenario I mean this error we can provide like a toast dot error failed and then we can provide the exact reason why it is failed okay okay we have completed the functionality now I am going to run the application once again and we can check okay NT user let me going to submit this one see now we are getting this response registered successfully so let me check in this database I mean our Json file see we have this data okay and let me include one more data into user1 see again we are getting the same response only so if I'm checking this db.json then your record is inserted and if you noted we have the plane notification so we can change the theme also so we can change it is globally okay it is colored and the one more thing so once our registration is completed we have to redirect into our login page so for doing this one I'm going to use this use Navigator hook just let me Define this one once we successfully registered we have to redirect into our login page okay so let me save this one so let me provide some new records charm see so we are getting this uh registered successfully message and also we have redirected into our login component so as of now in our login component we not done anything so in my next video I am going to complete the functionality of login now let me check in this db.json file so whether we have the latest data you'll see so this information also gets included so except this country we have all the values so let me check why it is not coming Okay the reason is we not selected anything under the default value also we have provided as the empty so in this case we have to include one more option as say EMT or else in the state itself we can provide the default value I am going to provide us the India okay so we can check once again so once it's fine we can move on the validation part okay so let me check once again see the country is updated and this address had a phone number I am not provided that's what it's coming like this okay so now let me move on the validation part okay the validation point of view we can provide the custom validation and or else we can use the existing feature of HTML okay so let me show you first let me consider this username okay so if I'm using this required attribute let me go to the registration page okay actually I'm not provided any value so if I'm clicking it is one dollar okay so in case if I'm providing some value if I'm clicking it is completed action now let me explain how to implement this custom validation so I'm going to remove this attribute first so next I am going to create one more function for the validation purpose here let me declare on variable so we can call this function in our handle Summit event okay so basically it will return the true or false if it is true we can proceed far further if it is false we have to provide the warning message okay so here we can Implement our validation logic first let me take this ID so ID actually we are using for our username if it is null or empty means the is proceed value should be false and let me declare one more variable for collecting the error message okay we are getting some warnings okay okay it is fine add one more thing we have to show the warning message so already we have installed this toast so we can use the same thing toss dot burning here we can use our error message okay now we can verify this one if it is working we can include for other fields and also we can do the other validations okay we need to prevent the default Summit event okay fine see now we are getting the error message like please enter the value in username okay so in case if I'm providing some values so the registration completed and also we have redirected into our login page okay now let me include for other fields also so in our case the first two four fields are mandatory field Garden is password and the final one is email you know so initially we are getting this username full name password and email so if I am providing some value now see the full name password and email these are the fields only mandatory field okay so this is the record field validation now I'm going to do one pattern validation for the email checking I'm having some kind of pattern so here I am going to pass the value of email okay if it is fast there is nothing in this field the scenario we have to change this is Pursuit value into false and also we have to display the warning message okay please enter the value it email now see I'm going to make one more registration now we have entered values in all mandatory field but the email field having the values not a valid email that's what we got this kind of warning still it's not a valid email so again we are getting the message let me complete this one now I have provided the valid email address so now the registration gets completed okay we can now be this working fine so using this way we can complete our custom validation so this rejects pattern actually I have used for only email the same thing we can apply for the phone number or responsible code in some other fields also so now we are in the almost end up the video so in my next video I am going to implement the functionality of login using the same Json server HD APA so still if you have any doubts or clarification please post in the comment box and also please don't forget to subscribe my channel thank you thanks for watching

Channel: Nihira Techiees

Views: 34,671

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: 5OV-TYyJEnw

Length: 32min 18sec (1938 seconds)

Published: Mon Dec 19 2022