Login Authentication in React with JSON Server || React Login Page with API

hello everyone welcome back to the reactjs authentication uh in the previous video we perform registration okay we created this registration form and also the validation and we did all these things and also react router which we have implemented press this we came to directly to the login page and also we can move back to the uh home page this is our home nowb bar registration and we came to the registration the validation and let's see we use Json server for this okay this is our server file uh which we has uh uh right now it is running okay uh this is uh 8,000 is the four number and then we came to the users okay in our server so these are the user that we registered let's register one new record then we will move to our login functionality okay in the first uh first video we implemented this registration form in this video we will Implement login functionality okay to log into the system so let's first of all uh register a new user okay right now we have these 3D cards and let's press sign up button see registered successfully okay and we came to the Lin let's refesh our server app see any card has added okay the ID has automatically attached with that so in this video we will move on to create our login functionality okay first of all we will create login Forum then we will perform validation and after that we will validate it the user so so I am recommending you to watch the first video okay because we will do the same thing as we did in the previous video because this video will be short because we have already did the those things we will just copy from the previous video some things uh this is our registration Forum okay so now let's move to our login page okay this is our Lin component in this Lin component we will create the same comp the same Forum uh as we did in the registration but we will just uh uh take the email and password field okay let's first of all uh we will copy The Forum okay the whole Forum contrl C okay copy this and paste it instead of this after pasting it we will remove these things let's remove the first name and last last name yeah let's remove the uh first name and last name okay this is the first name and then we have the last name uh let's remove the confirm password also this is confirm password so after removing the we have just password and email right now okay we have these two fi let's remove it also let's per the document format the document yeah format it what we have in this um component right now okay see we have this input fields we have a forum in Forum we have these are the validation errors that we will validate and these are the um let's check it this is the email component that we have okay email component and this is the password company then we have a button okay this is the same code that the we did in the previous video but we will change this text to registration okay here we will write if you have account if you don't have account here we will write if you don't have an account please link okay here we will move to the registration okay and let's uh now remove this registration okay save it and also what we should do now the data that we are writing inside these input fields we should store them in these variables in email and in password so for that the same thing okay we will create state variabl so instead of creating we will just copy them from this okay we will copy the object this object copy this come here to the login paste it here and we will just remove C password first name and last name okay we will have just email and password so after now whenever we are writing something in this input field we will store them inside that okay email and password so we did it okay on change event set Forum data we call the set Forum method okay this one so then we will update the email and the password so after that when we press this uh email button okay this submit button this submit button okay let's write log in so by submitting this button we will call a handle submit function this function okay so let's create now this function so let's create handle submit function so for that again we need the same code as we did in uh registration form I will show you the code okay I will explain it to you step by step so first of all I will copy this handle submit instead of writing these all simple code just come here to the login and I will paste it now I will show you the code okay so this is a handle submit function that we has created and either prev default prevent the default submission okay these are two variables this is validation error is for to store the errors and this is for just to is the form valid or not these two variables okay and now come here um this is for first name and last name we will remove them because we don't need them in uh login Forum uh this is the uh email validation okay if the email Forum data. email was empty or null so then we will The Forum is not valid we will assign false and validation error. email is equal to we will assign email required but this is a patter where the email match okay if the email match with this pattern so that is okay if it didn't match so then we will again assign false to this end email is not valid uh same to that this is for the password okay password error and again if the password length was less than six so password length at least six character okay this is confirm password let's remove this now let's come here okay these are two variables where uh let's first of all create these two variables sit error and sit valet so for that we will simply copy these two variables where we are storing our errors and is the Forum valid or not P them here after that come here and now I will remove first of all this okay and also this one select this and press shift tab so after that first of all we will fix the data okay we will use git method of accs let's remove this text this object we will fit the users okay from this URL okay whenever we fix the users so then we will store them in the result so now let's use like this okay let's remove this so here I will Implement my logic okay to configure is that valid user or not valid user so let's use result. data do map I will map through all those objects that I get from the server side okay and here we will get a user now inside this m function I will write app user do email was equal to equal to with Forum data do email so let's make this curly braces close this and change this to currently check that okay go through all the objects that we returned and uh check if the user if every user record email was equal to with the email that we have written in our input fields and we stored here okay if every email became equal with that so it means that record is existed okay when the record is existed then we will check the password it means that we check the email that is okay we will check now the password he um we should check yeah user. password was equal to equal to with Forum data. password if these two passwords were also equal so then here we will Implement let's just now display an alert login successfully okay later we will move to homepage else if the password it means that if the email was okay if the email match but the password was wrong so for that we will write is valid variable is equal to we will assign false it means it is not valid and also validation errors do uh password is equal to wrong password we will assign this to this object validation error. password same to that if the email if the email didn't match it it means that if the email was empty or wrong email so for that we will figure out like this okay else F if the Forum data. email was not equal to equal to with an empty string it means if there was an email if that was not an empty email filed okay so then we will again do something is valid is equal to false and validation errors do email is equal to wrong email are not registered email yeah it will definitely it will work but uh let's bring these things contr X cut it cut them and we should paste them where we should paste them yeah here under this okay let's past them here and also let's import the um use State and also AIS what else we need link okay link cor let's save it so yeah let's move now and this is YouTube just come here and here we are at the login page at our l page so now let's check it okay first log see email required password required it means that both are equal right now both are empty right now let's write an email youf gmail.com let's press again login button see wrong email it means the email didn't match with a card and password required let's write a correct email now let's press loog button see just wrong email and wrong password uh yeah let's check it okay we will move to write the password yeah wrong password let's remove one of them that is correct password now let's Press login see login successfully both email and passwords are correct press okay so it means the wrong email we should not see this message let's check it when the email is correct we should not see this message okay just come here down so so let's just remove this lsf F first of all okay let's check it now let's refresh our page email required password required let's write t1@ gmail.com Press login now wrong password so let's write 1 2 3 4 5 6 see login successfully okay it means both email and passwords are correct so now let's move in over we log in successfully we should move back to our home page so for that we should import use navigate hook use navigate hook after importing that let's create an instance of that const navigate is equal to use navigate and now come here down we will use now the navigate whenever log in successfully we should we get to homepage let's write our ft2 gmail.com let's write the password let's Press login now l in successfully and we came directly to the homepage so it was all about that we have implemented the login and registration so it was just for the purpose of to learn something new okay to learn the authentication in react JS how it works and how to do it okay and if you would like to WR watch real life authentication and authorization and all about uh it okay so I have implemented the videos using Mar stack or with my SQL using react in nodejs okay you can watch those videos also I will drop the link in the description so you can watch this video to understand fully about the authentication and authorization so I hope if you like this video don't forget to sub subcribe our YouTube channnel like the video thanks for watching

Channel: Code With Yousaf

Views: 10,532

Keywords: authentication in react js, json server rest api in react js, react authentication using json server api, react login & register using json server, react js routing with parameters, react login authentication, authentication, api handling in react js, jwt authentication react, react authentication using json sever

Id: 3TeDdBbkQ6E

Length: 14min 3sec (843 seconds)

Published: Thu Oct 05 2023