User Authentication using ReactJS, NodeJS and Mysql.

hello viewers welcome back to my channel radhika Tech Hub in this tutorial I am going to explain authentication for the login page using of react.js node.js and MySQL before third see how to how to create the login page I has been posted the link in the below description can see and create the login page before going to do the Authentication and the user can log in through username either email or email address the password matching of that because I will login with the username and when I entered the username and with the right password we can it will show that login success and when I enter the wrong username and the password is correct and it is showed user not match if the person login with their email address and it should be success sorry wrong email address.com is not mentioned so login success now the email address is wrong so user not match now email address is correct and the password is wrong so password not match so the user can log in through his username are its email address so we'll do all this authentication using of node.js MySQL and integrate that node.js API to react.js we will see we have to set up our node.js in Visual Studio code so first we will create one folder so we will set up our node.js and before that uh in the react case we have to install our axios to integrate our apis and to get the data so you install that axis so we'll install that Express which is a framework which is used to build for the web applications mobile applications and it is used in JavaScript Express and node bond which we can easily we start our server and we are using the MySQL and the postman so Postman we have to give the inputs the username and email address which will be giving for the request body so body parser and curse which will be useful for providing the middleweight for the security purpose and which allows the resources with the different Origins and we will perform that get tape get and post operations so we required that curse and we required a DOT environment which is used to provide the secure sensitive data of whatever credential purpose dot EnV I am installing all together meanwhile installation I will explain the react.js which I created already you can see the link in the below description of Designing of login page here I am taking the login page and I used the formic for this before going to our before going to hit our API so we have to authenticate the input field will be filled or not correctly so by using the formic has been created that handling of that login page so here I am taking the errors which I have not entered any username or email address in the username field or email address field so it should be provide that error as the email address is required so to provide that and to get that errors in the form of by storing of errors and touched and handle change handle change all you know that it will Source the data when we change our inputs so handle blur which is useful for the structural reactions when we move the cursor from one one field without entering any content so it cracks the touching operation of input fields so has been taken the input fee input input Fields with the name of email and the password for this validation has been taken so in the user in the login page will not acquire this because it is authenticated by the data which is stored in our DB so when I have not entered any username or any email address it shows the username or email address is required please enter the email or username and if I not enter any password and without entering any password it is go I'm going to click on the login so it should not be hit the ABA so please enter the password by using formic and yep is a used for the validation of login page so it's completed foreign so I will create an app.js in dot EnV file so I will create our code port number I am taking a 5000 and for the DB username you can give here and the password I'm not showing my username and password Here so const Express we are already installed this one and for the port I am putting this one EnV so already been installed dot EnV so cons Port equals to I am getting from the tnv has been already shown that so I have to call that Express right so const app equals to express so app Dot listen we have to put we have to call the code and we have to listen to the server right so I am consoling here listening to the port so we will see our Port is coming on and now it can get connected to our board or not so before going third we have to initialize start so Node 1 has been installed already so we are created the server which we listen to the port is I have dot Js so npm start oh so it leads into the port of 5000 which has mentioned the port number with 5000 in dot EnV file so now we will connect to our database so has been not created so I will created the folder with the config folder and with the file name of DB config I am taking dbconfig.js so const MySQL has been installed installed already so I am importing my MySQL const ant EB config I'm taking the file name so MySQL has been already required that one so MySQL dot create connection so I am taking the host name I am using the host name like localhost so my database has been created by database with the user DB I already told that I initialized my username and password in the dot EnV file and what you has been created your username and password for the workbench you has to mention here foreign here so process dot EnV y dot user and my password foreign I have to throw it foreign database connected successfully so we have to export it module Dot sports or DB config so I am requiring these in app.js we will see it is connected successfully or not yeah it is successfully connected to our database and it is showing database connected successfully now we'll create our user service I will create one folder with the services I will call my database that is nothing but a DB config file in service because you will write the query and we will write the API here so const ant config so I will rename dbcon so user login we are doing for now so I am name of user login I'm using that async so with the request and response we are giving the username and password through the request body body so I am de-structuring I am giving the email our username we can name it through whether we will give an email whether we will give the username or email so I am taking the name as a use email itself only and I am getting from the request dot body my query is I am naming this query so select start from my table name is user information okay so I will show my what I am created so I am created the user DB as a database and the table name is user information has been entered three rows in our DB so three row cities so we are using now user information table when I entered an email address so I want to check whether where email it is so I am giving the email so when I am giving the username not an email I'm logging with the username so I am naming it as SQL query one and I will check where the username is so start select star from the same table which I am giving his user information and where the username is so username is I am giving with the email only whether it is email or username it will be stored in the email itself foreign when I am not given any email address so it had the data comes from the database is null so when I connecting with the database connection dot query I am not entering any email address I am logging with the username so the data come from the first SQL query is null so we will write it SQL query and I am giving the request.body through the email so whether I am getting an error or data I will store here so where I am and when I am not entering an email at the time of the time I will get is first we will login with the email address after foreign equals to equals to zero so at that time I want to display that is means now the email is not matched status of 400 I am giving and the message I'm giving is user not exist if my data is greater than 0 dot length is not 0 greater than 0 it is so at this time I am creating a need so here I'm not mentioned the catch that's why I'm getting an error here foreign and a message I am printing is the error so when I the length I am getting of greater than 0 I am creating separately it is so at that time it checked the username is matched so we have to check now the password so here I am taking the request your body and data as the variables and the response so at this time if beta dot length greater than 0 has been mentioned so if my I which I mentioned in the password field and in the database which has been stored as a password should be matched so data of zero that password equal to equal to password which I am passing through the request dot body should be matched if it is match means then I am getting the response of 200 and login success because the username already been checked in the query and now we are checking the password Here so with the status of 200 and the message I am giving here is login success yes if the password is not matched because which I entered our password and which is present in our DB is not exactly matched so at that time we will give as a password not matched so response dot Json the status of 400 I am giving and the message should be passed or not matched why I am giving the separate method because of when we login with the username and when we login with the email we have to call it the C because we have to write the same code of password matching so it we are writing two times why should we write the two times we are duplicating the course so that's why we'll separately we will write the method for the password checking and we'll call here as like this when I'm calling here I am passing here data request which I am getting the username and password and the response so now we will login with the email address only because we are not written any user so before that we have to write a router so we will create one route foreign service in the services field and so router dot now I'm using the pose slash login user service Dot we have named it as we are not exported right so module Dot exports user login we are named our method so dot user login we have to export it right our routers then only we can import so I am using the user so in the routes has been created my user router so I will call that app don't use so I can call through user slash login so I am calling user here so I already told that we have to use the curse so after integration I will do this so we can check it through our Postman now email address and the password with the email address gmail.com and the password radhika and we will see the login success or so we'll see login success if I enter the wrong email address so user not exist okay when I am enter the username so it should be match right so we will write that code so now we are checking here if the data dot length equal to equal to 0 at that time we return that user not phone so if the user has been entered his username so at that time we have to check right so in this place we will write the we will check our username in our database so await awaitdb dot query of has been taken of your SQL query one comma and if I get an error our data one I am taking so if again data 1 dot length equal to equal to 0 at that time the username which has been the user has been entered it should not be matched in our database so at that time we will say user not exist in our database so if the username is exist so we will go and we'll check the password as the user entered with his username or email address right so at that time the password again checked if the password is not matched if the password is not match it shows the password not matched if the password is correct then login success so we will check again now I am here only ending radhika so it is a username of that email address so we'll check sorry it is going but it is not it is stopping because of here the data one we has been taken now the login success I use on a miscorrect and the password is correct now I am entering the wrong username so we'll check now user not exist now the username is Kara but the password has been entered is wrong so password not match when I am entering with the email address now the email address is correct and the password is wrong so password now the email address is correct and the password which is related to that email address is also correct so login success okay the user can enter his username or his email address with the correct password it will be matched and login success so now now we will integrate this API in our friend and login design page and we have to take your fonts we already installed the curves now we go for the front end yeah and we have been already installed our axios first we will write our method const login handle axios which we has been not imported it will import foreign we can use post for getting also so here I am taking the post so that has to be matched what we have taken so and now my URL is My URL and the parameters now we have to pass we are taking the info inventional values we has been taken the email and the password we have taken initial values email and password and that values which are changed in by handle chain will be stored in the values so values dot email here we have taken the URL and we have the passing our request body we have taken email and password and we are sending that email and password the message which has we has been declared for the status as a status of the 200 400 and the message and that will be get from this data.data and if we get any error so we'll get there first we will see and this login handle method when I click the button at that time it has to be called so when I click on the button this method has been called and we'll see the output so I am entering with the username foreign status as a 200 and the messages login success we are passing in the response this is only so when I am entering the wrong username so I got the status of 400 as a message as user not exist where I am login with the email address so login success 200 the correct email address but the password is wrong at that time I will get the 400 of status and message of password not matched so we will will toast it when it comes 200 and when it comes 400 so if I get data.data dot status equal to equal to 200 at that time I want to be message with the success when I get the 200 it should be in the success of toast when I get 400 the toast with error the coloring has been changed according to that so we will refresh it so no need of this I am not consoling anything foreign success so you want this login success to be in the center we can place it that also top Center now I am okay we'll do so password not matched so the login is Success now and when I am login with the username so login success when I am entering wrong username um user not exist so this is the how Authentication using of node.js MySQL and that ABS will be integrating with our react.js if you like this video please subscribe to my channel click on the Bell icon it will give the notifications when I upload the new videos and before that uh before the doing seeing of authentication video see the designing of login page then you will be clear about that front-end code of in react.js designing of login and using of

Channel: Radhika TechHub

Views: 11,589

Keywords: reactjs, nodejs, user authentication, loginpage authentication using nodejs reactjs and mysql, authentication, login page authentication using reactjs, login authentication using reactjs, login authentication using nodejs and mysql, login authentication using nodejs

Id: gZzFiFRlXwg

Length: 41min 5sec (2465 seconds)

Published: Sun Dec 11 2022