Authentication in React using JSON Server | React Registration (Sing Up Form) and Form Validation

hello everyone uh this video is about user uh authentication it means uh we have to video okay this first video is just for registering a user and also the validation okay if you pre the sign up button this is we will perform registration and also the validation of this input fields in this registration Forum uh but in the second video we will perform login functionality okay so let's first of all move to our homepage okay this is the demo that I am showing to you okay this is um the home component and let's press registration so we came here uh the if we are already registered so we can move to the login component okay but right now we didn't implement the login we will Implement that in the second video so if you press this see these things are required okay so we can also display these messages down from every input fileld but I displayed them on the top so let's now uh import these things let's for example I would like to remove this okay let's press sign up button what happened see it is not corrected let's write like this sign up button see password is required okay just password is required the this uh error message didn't display because these both are equal both are empty right now empty equal string so let's write something inside this okay sign up see password should be at least six character and confirm password not match with the password field let's write correct password and also correct password see whenever now we press sign up button we will be register a new user okay let's PR sign up see registered successfully it means that we registered a user inside our um server okay we are using Json server we would like to perform these operation with Json server so you will learn all about Json server in this video okay so we came directly to the Lin page this was the first video in the second video we will perform L functionality first of all watch this video then move to the second video okay I hope this video will be very helpful for you in authentication authenticating a user and also validation so now let us get started okay to perform these operations so for this registration first of all I will open create a new project okay so let's this is uh react o folder which I have created okay this is an empty folder okay I opened it in in vs code so now let's move to the terminal and we will create our project we'll write npm uh create wi okay which is used to create our app let's press enter let's assign a project name project name is registration or we can assign it Au just simple o okay press enter uh which framework you are using we are using react CHS select it and we are using just JavaScript and now let's move to our art folder CD a and inside art now I will uh write this npm install to install the uh uh essential the those um packages and dependencies npm install okay press enter so it to install all the packages and dependencies the packages has installed so now let's run our uh server okay so this is the command npm runu to run our react app npm run de so press control and press on this um URL so it will open react app for us see this is our default react app Okay so so now we will change all this uh user interface and to write our own uh registration form this is the first video for registration let's check our app but before everything I will move to the terminal and I will create one another terminal and inside that I will install a few packages okay important packages that I need okay the first one is npm that is npm AXS accs is http request and response library that we will use in our project and also the boot strap which I will use for uh designing uh then react router Dam router Dam which is used for routing okay navigating from one component to another component and Json server which is a fake server that we will create our database and I think these three libraries okay so let's press enter and install these uh packages yeah these packages has also installed let's delete this terminal and let's close the terminal so this is the C SRC folder where we will write our code our logic okay and now let's remove the default code in this uh up. GSX I will remove all this code first of all we create D element let's also remove this and remove all these things and remove the code CSS code from op. CSS and also index. CSS so this is our entry point okay the main gs6 and here we imported this app.jsx in app.jsx now we will write our code okay so the first thing is that we should create our uh registration Forum but before registration uh it is better to create our components okay so first of all those components that we would like to have in this application we will create them let's create a folder components and inside this I will create first of all registration jsx and and I will use um shortcut R Ace react Arrow functional component export component okay so this is a shortcut that we will use through this extension I will show to you search in this come here to this and search here react after searching this see this extension just install this extension okay I have already installed it so you can use those shortcuts and let's create now another component and which is by the name of sorry let create here and that is log in. jsx and we should create a home. jsx also for now we have these three uh components okay home login and registration now let's come here to the upd G6 we will perform our react router Dam okay it means that we will just uh Implement our router okay react router so for that we need first of all to import the react okay import react autom browser router browser router routes and Route we will uh import this uh import from react router D okay after importing them so now I will use them okay instead of this I will use browser router inside this we will use routes and inside routes we will Implement our route now and in this route we have two attributes the first one is the path this is for home component element is equal to with the home component here we will import the home component the home component has imported so let's close it now let's create one another route that would be for um registration registration yeah let's import registration component registration has imported and shift alt down arrow and it will create a copy of that and this is for login and here we will import the login so now let's move to the browser and let's close it and just come here to the Microsoft Edge right now we are at the home component let's move to registation registration if you m to login you Mo to login components that is okay so now let's create a no bar okay which will be existed on the top of Home component and where from uh now bar we will move to registration or login so let's move to our create a no bar so to create a no bar for that we will use I am using boot stuff okay before we install the boot stuff so for that let's use the boot staff uh let's write boot stff five now bar okay it we can write it manually but it will take time it is just HTML code and the bootstop classes that we are using let's copy this code okay we will customize it after copying it so now let's create one uh a new component inside this that would be nowb bar. jsx rce and instead of this code I will paste that code and now let's close this tag tags okay close it close it it and yeah the error has gone now let's format our code format document so after formatting the document this is our now bar now I will change this now bar to link okay it means whenever we press this we should move to our homepage so for that we need to import link from react Ram that is okay okay let's change it to the link and also instead of H we will use now two property two is is equal to to homepage we move to this route and also let's remove all these things we don't need this and here we want just to in this uh let's remove all this code I think yes no let's remove the URL after removing the URL h so here I will remove this I will just leave this button move this control Z it and instead of this button we will create to link 2 is equal to we will move directly to registration class name button uh yeah I think let's leave it empty now let's check it okay first of all how it looks like uh this is let's move to homepage yeah first of all we should import Nob bar just come here to the upd G6 and here we will import that uh or we should import it inside the homepage okay because we need just add the home component sorry you should write it here no bar uh I think no bar so yeah no bar has imported let's save it and let's check it now I think we faced with an error slash Nob bar no bar has imported let's check the Nob bar where is the error link no bar and Link to/ registration let's check it now refresh the page back let's close this page and come here paste it and refresh it yeah it looks like this uh but we should import the boot straff so let's import boot straff import bootstrap sl/ CSS SL bootstrap main.css save it see it looks like this now okay so whenever we PR registration we to should move to the registration component so now let's create our registration component okay so for the registration I will come here again registration uh boot stra Forum or signf Forum using bootstrap I will just find uh a template um assign up Forum so this is a simple Forum which I have created okay I just copied this code okay code from this but I have customized it okay I added the email this cord okay so this is a simple regist Forum okay you have the code Link in the description so you can copy the code and you can use it okay this is just HTML code nothing else okay in the board straff uh designs okay there is nothing else in this code inut forums okay and at the last we have a link react autom okay to move to the login page okay this is route to login page okay if someone has the account so he can move to the login page like this okay so now let's add validation whenever we press this sign up button we should add validation if the first name or last name whatever if any field was empty so we should display a message that these fields fields are required so for that let's come here and we will create uh first of all we will create um the states okay so let's create an object count uh we will write just uh Forum data or Forum object is equal to use State we will use State okay to create this object and we have name uh first name by default empty string last name and then we have the email password and confirm password so this is the object that we has created okay these are the default values that we assigned so now whenever we write something in these input fields we should store those values inside these uh variables okay to store them let's come here to the first name okay the first name this input field okay here I will WR at the end unchange event okay we will use unchange event whenever we are writing something we will store that data inside that variable so now we will create an arrow function and here we will call this uh function okay sorry whenever we are using use state uh so we should write like this sorry okay Forum data comma sit Forum data we should call this method okay to assign values to these variables are updated so just come here so here we will get an event and here we will call sit form data and we will assign we will just update the um first name okay so to update it we will write like this okay here we will write the uh data Forum data and here we will just assign to the F name e. Target even. target. value what I did I will explain okay whenever we write something in this input Fields okay so we will call this function okay this is an arrow function with us okay so whenever we call this we will then use um inside this function we call this set Forum method okay this one whenever we call it so we are updating just this first name uh property okay so this is a spread operator these three dots mean okay so first of all we would like to um uh just try spread operator and then our object okay object name it means that just take all the previous properties and update the first name to assign a. Target that the value that I'm writing to this F name okay to the first name so we will do the same thing just copy we will copy this line and we will do the same thing for all the uh input Fields just we will update this second value come here to the last name right here we will just update our last name here and come here to the uh email for the email we will update email and now come here to the password you can create a separate function also okay to handle these input Fields but I have changed the uh data inside these um Arrow function okay this is password with us and let's move to the confirm password Here we will call C password C password save it so now when we press this submit button okay this sign up button so we should call a function okay so let's come here to the uh Forum to this forum okay in this forum now we will call unsubmit MIT event on submit and we will call handle submit function let's move to handle submit function we will create that now const handle submit okay is equal to it is an arrow function and we will get an event here e. prevent default we will sub uh prevent the default submission now let's console the data of this forum data okay object console log Forum data save it and let's move to our browser just come here and let's move to the console on the console let's come here to the console so let's appreciate the data and here we will just trite close this let's write here uh the data let's press sign up button okay see we got this data okay let's check it see we have this C password is confirm password was empty okay we have email first name last name and password we have all these things okay so we got our data inside those variables so now we will um so now we will just perform validation on this so for the for M Edition I will write code in the same file we can write it in a separate file also but I will write the code in the separate in the same file okay so first of all I will create two State variables okay const one is for errors okay to set our errors inside that set errors is equal to use state the second one is const that is for valid or not valid set valid is equal to use state by default it is true and also it is in object type with us now let's start our coding to validate Forum okay so whenever we come here instead of this console I will validate my code okay let's just declare let is valid is equal to I will assign True to this right now and create one another variable validation errors is equal to an an empty object now let's start our coding okay app Forum data Forum data sorry Forum data dot f name was equal to equal to with an empty string or Forum data do if name was equal to equal to with null if that was null or empty string so it means that our Forum uh is uh not validated and the Forum is required so here uh I will just write now is valid is equal to false and also validation errors DOT first name is equal to first name required okay we will assign this value the same I will copy this for last name I will just change this to last name copy this paste it here also in validation. last name is equal to last name required now we will do it for email validation okay for the email validation paste it email email okay and it's SPS and email email is required else if it was not empty or null so we will check the validity of the email okay if that was for example it it if it had the art sign the DOT sign and is it valid email or not Els if if not I have a patter now for the email I will paste it here okay this Pat means that accept all C without space then plus sign okay this plus sign means one or more character after that we should have an add sign after that again accept all the characters without space again plus sign it means one or more character then we should have a DOT sign okay dot after that again the characters plus one or more character do test Forum data. email so if it was not validated with this pattern so then again we will do the same thing like this we will display email is not valid this was for email now let's move to the password so for the password let's copy the same thing do it for the password password and again then here the password copy this paste it here and password required here password and here now we will just validate the length of the password for data do password. length was less than uh six for example so then we will just is valid not validated and change it to the password password length at least six character so this is the password for the password now let's move to the confirm password a confer Forum data do c password was not equal to equal to with Forum data do password so then we will do the same thing okay let's copy this and paste it here and this is C password with us and C password so let's change not m now let's come here at the end now I will write okay if object. Keys validation errors okay validation errors that length was equal to equal to with zero so just alert registered successfully we will register at at the server uh later okay so now I will just display this message now let's display the errors okay just come here at the top of the Forum I will display all the errors okay on the top of forum so to display all the errors just come here and let's do one thing else here I will use um these two State variables okay set errors and sit valid set errors is equal to with the validation errors set valid okay set valid is equal to as valid I will assign this to that okay now here I will use turn operator if is valid what was the variable name just valid okay if valid it means if it was true it means that our forum is okay okay it is valid so then we will just display nothing okay then we will display nothing nothing if else if there was any error so then I will display all the errors I will display the errors at the same place okay you can display uh under this area Okay under name you can display the name under last name you can display the last name under password you can display the password also but I will display all the errors at the same place okay on the top of the Forum and I will assign a class name text Danger let's explain now the errors okay to display the errors I write um for validation errors do um uh first name okay then I will display just question mark errors do last name then I will display errors do uh email okay after that uh um let's display errors do password and errors do c password yeah I think it will work yeah let's check it now okay what happened let's come here and we came here let's refresh our page let's press the submit button what happened see we displayed the errors at here but we should display them here under this okay this area so let's come here let's cut this code and we should display that uh on the top of where should we display uh under from the create account okay under from this area here save it press it and sign up see first name required last name required email required password requir re okay so now let's first of all we will write a name okay so let's write these things and let's press sign up button now see just password required okay so just come here I will write password three sign up see password Link at least six character and C password not match six sign up c c password not M sign up register success y that means our validation done successfully okay so now let's move and we will just register our record data inside Json server so for that we need just come here first of all we should move to the terminal okay uh let's move to the terminal create a new terminal and let's move CD o and here we will run this Ser this okay Json server then watch double hyp on watch after the db. Json it will create automatically this db. Json then we will assign a for number okay for number 8,000 for example okay so let's press enter what happened see we faced with an error so I think let's add NX at the start npx what happened see the server has run okay successfully so now let's check our db. Json which has generated just come here to the db. Jon this is our file okay we have posts inside our file and comments comments okay profile post and comments so I will remove all those things let's come here and I will remove all these things after removing those things I will change it to the users and after that here we will will then record register our users let's save it okay now now let's move to this URL okay let's copy this URL or we can uh control and press this button and we will move to our this URL see we came to the users but we have just one right now here because we don't have any record there let's move to our Chrome browser and here I will open our users right now we don't have any cards in empty array so now we will register users there and just come here to the registration control V it and so when you we came here uh it means that everything was okay our for Forum was valid so then we should register the recard so register the recard we will use accs library for that accs okay let's import first of all the AXS import AXS from axis after importing that let's come here now acc. poost we would like to post the data then our URL so let's copy our URL this is our URL where we want to register our records so after that we will pass our data where is our data our data is inside Forum data then do then we will get a result okay so let's um conso the result console. log result dot catch error if there was any error console.log error let's save it and let's run it okay what happened let's move and uh uh let's come here to The Forum repeate and let's insert our rec card let's insert password Sixx and let's press sign up button see sign up uh let's check it okay I think we removed the alert okay we removed the alert so now let's check our file let's come here and appreciate see a recard has inserted app name email password C password and ID ID has also automatically attached with that okay this is the ID first ID okay the ID has attached with that automatically so this was our first register ation that we done okay successfully so now whenever we logged in so we should move back to our login page okay to the login the system and also uh we should display an alert okay that record has created successfully so for that let's remove this I will create an object first of all I will display an alert registered successfully okay registered successfully and after that we will use use navigate hook okay to move back to the login page or we can move to the homepage let's move to the login page okay import or I will just write use navigate hook use navigate hook that has imported from react aamc use navigate now let's create an instance of that con navigate is equal to use navigate after creating the instance now just come here to the last area okay here I will move to the Lin page SL Lin save it let's move to our homepage we are on the registration page let's register change our email password see registered successfully and okay we came directly to the home component see we came directly to the home component to the Lin component sorry okay the login component so it was all about our registration that we done successfully okay this was the first part and in the second part we will Implement our login okay this was the registration in the second part we will implement the login okay with using with this Json server so I hope this video was helpful for you for the second video I I will drop the link in the description so you can watch that also so I hope this video was helpful for you um please watch the second video also uh thanks for watching

Channel: Code With Yousaf

Views: 6,868

Keywords: react, react authentication using json server api, authentication in react js, json server rest api in react js, react js, react js routing with parameters, react form validation, api handling in react js, react login & register using json server, react registration form validation, post request making in react js, react authentication, react js form validation in hindi

Id: v2CFJGfUIgQ

Length: 36min 31sec (2191 seconds)

Published: Wed Oct 04 2023