SignIn and SignUp with localstorage in React JS || Registration form in react js with localstorage

hello everyone in this video I will show you how to create a sign up sign in login using local storage in react.js let's start here I already created a react project and also I'm running this project and this is CSS I mean this is JS file and this is CSS okay I imported that CSS here and I'm going to use this home page okay home page after login successful means uh we are displaying this page okay I imported that page here okay so when I'm close that home page and I'm going to initially get a I'm going to get the input value from the user one is email ID password and also name okay so that I'm going to use a user to get the value doing const ant name new stuff okay it's imported here and I'm going to duplicate this for two time this is the email this is password okay and here I'm going to create a div inside this and I'm going to create one more two okay sorry last two okay here I'm going to create input close this placeholder name I mean type okay this is text doing ref sorry name okay and I'm going to give a class to this container this is input underscore space okay you want to duplicate this four or two times this is email password yeah this is password after this I'm going to create one button use this sign up okay yeah I want all content in center and also I'm going to change the style of this input field Tower okay text align Center okay container mods and toppers 100kx why containers I'm going to copy this container here yeah I get all content in Center so I mean I get a space at the top after that I'm going to create input underscore input space yeah this CSS okay copy that go here okay here margin bottom 10x yeah this is good after that I'm going to create change the input style okay hi 30px with this 20 percentage yeah this is good and also input size okay font size IQ 18px and also after this to create a pattern here I give um I test 30px with this 15 percentage okay I mean 15 percentage sorry X yeah this is good background color is gray green means I try to change the color yeah this is okay oh sorry this is not good ready to change the color I try to give a gray color okay okay border oh super now I'm going to control the value okay so that I'm going to create a on click function click handle click okay okay copy this function save this after this I'm just create const ant function name create Arrow version okay here I type name email password save this I'm going to right click and go to inspect excited inspect and console okay type something in the name okay password is not oh sorry this password okay yeah this is good if I click submit means yeah I get a current value but I didn't get value but values in I mean input values in this this current value okay I try to get name dot current dot value okay I'm just copying that go here paste that here yeah I just refresh this I just type and name and password something it's like that okay yeah we get a value in the console this is name this is email ID this is password okay and refresh this once user click I mean uh once user click this uh I mean type once user typed all values okay and we need to save this in the local storage and also we are going to show a lot it contains a account created successfully okay and also uh if user is does not type name but he typed email ID and password means uh we are not allowing him to next page okay because we all we need all these three input field okay input value Okay so I'm going to create a condition here if I'm just copy this three values okay I mean copy this paste it here and just remove uh comma yeah here I just if user type all those values okay then we are going to console this value okay and refresh this just type demo demo mail.com or if I ever type this okay name means I click sign up means it's not console it's not print the console okay if I type uh name means if I click sign Miss yeah we get all the value in this console okay I'm going to set I'm going to remove this if you can listen I mean console and here I'm going to set all value in the local series okay local storage dot set item I mean first I'm going to set the name name s this is this is the name okay paste it here and we'll duplicate this for a two time this is for email this is for password okay email this is password okay yeah now it will print in the I mean sit in the console and also I want one more value for sign up okay I'm going to change this password into email I will show you why I'm using the sign up okay save this yeah refresh this I'm going to Applications here I did not get any anything in the application I mean go to local storage and click the airport I mean what means yeah this URL okay this you are click that okay here you will navigate to this page here I am typing demo and this is demo art mail.com okay tab one two three four five I will give up Mercedes one two three four five if I click submit means yeah all the value set in the local storage and also after that I'm going to create a lot okay here a lot yes say this and if I refresh this page value is already inserted okay if I type demo again or otherwise I can remove this okay demo demo at one two three we do not com one two three four five okay if I click sign up means yeah I get a lot Okay click outside means it's not closed okay right click OK means yeah values inserted I mean value seted in the local storage if I mean if signup is Success means we are navigate this page into home page Okay so I want to check on use effect I'm going to check uh the value I mean if sine of values exist in the local storage means uh I'm going to navigate this to homepage okay so that you want to create a use effect yeah it's imported here okay use effect okay here I'm going to create I mean if you want to directly get the local storage dot get or otherwise I can declare this in the top okay just cut this here just I need a I mean const ant local sign up okay so and I press that local storage dot get item you want to get this sign up okay this I mean copy this if we have the local storage value okay so we are set I need to create on state for that date so home set so boom okay use state any Series in false it's important here your state is imported here okay and also I'm going to copy this set and paste it here and just change that into true okay save this I'm going to copy this go here if I mean if Soho Miss true means we are navigating to home page okay yes to remove this curly braces else means we are displaying this pop-up okay I mean this input fields okay yeah this is good say this go here why it's showing Here sign up is not defined that straightener prints ninth line uh ninth line means sign up oh sorry it's in it should be in this string refresh this okay yeah we already have a signup value in the local storage where is it means if I refresh this page yeah we are in the home page if I type again add demo tap demo but mail.com have one two three four five okay if I click sign in means if I click the account created successfully and click OK means yeah uh values printed but page is not refresh if I refresh this page means it's going to the next page so what will I do here I'm just click I mean I change Windows window dot location dot click load just root that okay again I'm going to remove this we press this page yeah here I give uh APC ABC at mail.com okay this is the password email ID okay name okay if I click sign in means yeah you guys okay yeah we local storage is seated okay and also I don't want to save this yeah yeah navigate to home page you are successfully navigate okay after uh we click there okay alert okay alert okay yeah now here I'm going to create two buttons one is for uh log out another one is for delete account I mean if you click the logout button means uh so I know sign in page will change into sign sorry sign up pins will change into sign in page and you can log in with by using a Gmail ID and password and it will navigate to this same page and also if you delete contents it will delete all entire uh page local Services also empty okay so you can type a new email ID okay so go to home page here here after this I'm going to create a button okay this is log out okay another one is for delete account or otherwise delete okay in the delete okay this is yeah this is fine and I need a space between both okay it is create a class for this log out this is class yes delete okay say go go to CSS page I'm using this same CSS okay same CSS prints this same CSS here this CSS okay after this if that log out I mean margin right 5px yeah this is good and also [Music] color okay color is white font weight is 400 yeah this is good same as d to delete okay and the color should be different just change this into yeah this is good okay yeah this is fine I mean I'm going to change this into background background color and colors are the same okay but it's I mean color is white okay save this yeah this is good okay now I'm going to create a function for this and click this is log out you want to create a function for this mentally okay delete account okay and here first I'm going to copy this after this I want to create the arrow function okay here I need to remove the I mean I'm going to remove this sign up okay copy that local storage Dot remove item okay I'm going to remove this after this I'm going to reload okay dot location Dot reload okay page will reload and also I'm going to create a function for I mean delete account I'm going to replace this log out into delete account here I'm going to clear entire field okay clear and save this yeah this is good uh if I click logout means sign up is removed okay here we get a we back to uh login I mean sign up page but here I'm going to check if email ID is already exist means I'm going to display uh username and also username means I display ABC hi ABC and Imo 2 hide this name and instead of sign up is using uh instead of sign up I'm going to change that sign up into uh sign in okay uh I mean after this if I mean I need to create one more for uh email okay this is email copy this paste it here values present means I want one more state I'm just create a show okay I'm going to copy this show paste it here this is true okay and I'm going to copy this and go here I'm going to display login page okay so here if so is true means I'm going to display I mean I'm going to remove this so it's true okay so I'm going to copy this View I'm after this paste it that and close that okay here I say this here if so is true okay I will show two means email we have email in the local storage while I don't want this input okay instead of input we are going to replace that into um hello hello uh local storage okay I mean I'm going to addo one more for local name okay this is name copy this go here I mean here paste that okay and save this yeah we have hello ABC and email it in password and I'm going to change this into sign in here handle click change into handle sign in okay copy this function go to the top after this const ant name here I'm going to check same but we don't want name okay we don't want to check the name here I removed the name a female and password is exist means I'm going to set the we removed the sign up okay so I'm going to add this sign up here first I save this and also I need to copy this I need to paste that here I refresh this here I'm going to type a wrong email ID and password click sign in oh my God it's replaced oh I need to check the condition if email ID value equal to the local storage value okay I mean we don't want to change this okay I mean our new I mean our login email ID should be same as the this this okay so here I'm take enter the values equal to local storage email ID and also same as the password I'm going to create one more for uh password and this is password copy that go here and paste it here okay I need to double double equal to okay save this and I will I'm going to remove this okay I mean I'm just click logged out while that value will get removed this is our old old value okay I refresh this yeah this is fine uh this user is already exist so it's showing hello here we see if I type wrong wrong name or wrong password means but click sign in means it will not work okay while this case I will show a alert if it is not means else case we are showing a lot and just please enter valid valid uh details valid credential valid credential okay please enter a valid credential okay save this go here I refresh this page if I type a wrong password okay click sign in it's showing uh please enter a valid credential click ok then save this refresh this I type wrong password it type something wrong okay so it's showing a error a lot click OK means and I'm going to type a correct correct name correct email mail.com here one two three four five now I'm going to click as sign in Tada it's working no need to save yeah it's working fine right if I open this in the new tab means yeah it will get login by logout means okay if I'm going to login to uh new that means it open the login page okay if I type something it's wrong password means it's showing a error alert right and also if I type ABC at mail dot com okay password is one two three four five click signing it's working fine okay you don't want to save this password and if I refresh this here I already logged in okay here I'm going to refresh this page okay yeah it's also getting logged in same okay I'm going to delete means yeah it's back to uh sign up page okay here we can able to uh parrot and here I do um mail.com here I give one two three four five sub password click sign name yeah account created successfully click ok yeah we are navigating into a home page here I have a I have login and logout button okay uh I mean here I see go to home page here after this I'm going to create one more h2 tag here uh display a username okay I mean hi otherwise welcome local storage dot get name right save this go here okay and uh I change this H2 into P tag yeah this is put our maybe this is fine I think okay yeah if I click log out it's back to the normal page if I type mail.com signing means it's back to our home page if I refresh this page yeah part of this here but if I delete means everything will get delayed if I refresh this page means other tab everything will get reset it okay yeah this is what I try to tell in this video I hope this video will help you thank you for watching this video bye

Channel: Coding Comics

Views: 21,210

Keywords: signin and signup with localstorage in react js, login and registration form in react js with localstorage github, registration form in react js with localstorage, how to store username and password in localstorage in react js, react js login and registration example step by step, login signup react localstorage, how to store form data in local storage using reactjs, react save file to local storage, ogin react js, login logout localstorage in react, login page in react js, react js

Id: kt8-6mSyE0E

Length: 30min 41sec (1841 seconds)

Published: Fri Sep 16 2022