Register and Login in React with MySQL and Node JS

so hi there welcome back to my YouTube channel in this tutorial video I will show you how to connect your react application with mySQL database in full depth but before starting the video I would like to introduce you to the Limitless downloader website wait this is not a promotional video Limitless downloader website is used for downloading YouTube videos in one click so if you want to download your YouTube video just copy your videos URL visit limitlessdownloader.com the link will be provided in the description below paste your url over there and click on convert your link will be converted to the video and when you click on download your video will start downloading automatically so that's the best thing and it will be downloaded in 4k and 720p quality so why it is used for so for an example if you are watching a tutorial video and if you want to save this tutorial video somehow if the user deletes the tutorial video from his Channel or somehow like for an example you are not having an internet connection so how you will watch the tutorial video so you need to download that video and to download that video securely and fastly within one click visit Limitless downloader website copy the URL of your video of the video paste it inside the form tab select the quality you need to download depending on your internet connection after that click on convert button your downloading will start automatically all right guys so without wasting the time let's jump right into the video and see how to connect your react application with mySQL database let's start so all right guys so I will be explaining my folder structure so as you can see over here I do have two directories one is named as server and one is named as user in my user directory I do have my front end that means react application in my second directory named of as server in which I do have my backend if that is running with the help of node and you can just ignore this client directory over here all right so I have already set up my project I have created my node project for backend and I've set out my front end with some login and registration form so we will be connecting our react application with our mySQL database and we're going to be registering the user and we're going to be logging in the user so as you can see over here I do have my front end in which I have not done anything I do have two forms one is our login form and one is a registration form and I have provided some of the stylings to it so let's close our styling now let me explain you the packages that we need to connect our react application with my SQL database so as you can see right over here for our react application we need the package known as axios the link will be provided in the description below for downloading this package in your react application that's it we need only a one single package for our front end now let's come to our back end as you can see over here we do have our backend that means our node package.json file and these are the four packages that we need for connecting to our mySQL database first package named out scores second is an Express package third is MySQL package and the fourth and the last one is node one package of course that we will be using for live restart for our backend it will really help us all right so let me just close out my package.json file and now let me open our index.js file so now the main work is in our index.js file and our app.js file this file is used to write backend code and this is used to write front-end code in which we are going to be adding the functionality so when the user clicks on that we need to register that input data and this is going to be our backend code so first we are going to be starting from the back end code we will be writing all of the functionality however code will be registered how the user will be logged in how we will be connecting to the database after writing the backend functionality then let's come to the easy part the easy part is just going to be connecting it to our form what we are going to do is we are going to be connecting our back end to our front end our registration and login form it is that simple so let's start coding our backend to connect to our my SQL database so as over here I'm using the PHP my admin so I have started my xampp control panel in which I have started to server one is Apache and second is MySQL and over here I will show you as you can see over here here's my login and registration form in which as of now we are not concentrating on the form UI design just we are focusing on the functionality here is our database I have created a database named as register and in which I do have a table named as users in which we do have three field one is email username and password three Fields will be used for registering and for login we're going to be using the two Fields one is username and the second is password alright guys so let's start all right so first we are going to be creating three variables the first variable is going to be the express variable the second variable we are going to be creating it for MySQL and the third variable we are going to be creating it for course all right now the express variable these three packages are installed in our backend so how we are going to be requiring how we are going to be importing it in our index.js file just use the required keyword and name your package Express same thing we're gonna do with our MySQL and with our course package require MySQL and require course great now we are going to be creating one more variable which is going to be named as an app in which we are going to be calling our Express package now I will explain you in detail what we're going to do over here is that what we're doing over here is that we are calling our Express package in our app variable so when we need it we're just going to call our app variable our Express package will be running great now we're going to select our app and we're going to be using the use keyword and we're going to select our Express and convert it into a Json format then app.use then we are going to be selecting our course now what I'm using over here I'm selecting my Express and after that I'm calling my third package that is named as course now let's come to the main part now what we are going to do is we are going to be connecting our back end to our mySQL database this is the main thing so please don't skip the video watch the video till end to understand how the connectivity means how the connectivity happens in detail so for having the connection between the database create a variable named as con that means connection that equals to select your MySQL variable dot go with the method named as create connection here we're going to be having different key with different values first is going to be our user second is going to be the host third is going to be the password and the last one is going to be your database name as simple so remember in this create connection we do have these different values so it is an object so do have a curly braces now the user is root by default the host is of course the localhost and the password is null so we are going to be keeping it as an empty string and now name your database so my database name is register great so now let me align the code so it will be really easy for you all to edit as I'm going to be providing the source code in my GitHub repository the link will be provided in the description below you are free to use it and make changes and even use copy the code and use it in your application all right so now we do have our connectivity into our database now what we are going to do over here is that we are going to be calling our listen function so our react front is is running in localhost 3000 port number and the back end will be running in localhost 3001 port number to run our backend we are going to call our app.listen method over here and now we're going to be running it in 3000 in one port number and then we're gonna call a function to check whether our back end is running or not in this we are going to console.log and we're gonna write like running back-end server in simple way depends on you whatever you would like to for now I'm going to go with running back-end server great so now what I'm going to do over here is that I'm gonna be opening the terminal all right in this terminal I am going to be selecting my backend directory so let me just lift over here see my backend directory is server after that in this backend directory what I'm gonna do over here two minutes we're just gonna run node index.js file node index.js just press enter to start our backend server if our connectivity is correct then it's gonna display us running back-end server if it is not correct then it's gonna display you the errors so as you can see over here it is displaying me that it's running the backend server that's great that means everything is going good our backend is running now let me open my browser over here and I'm gonna be opening a new tab and gonna run my back and port number 3001. as you can see I do get an error over here as we have not entered any kind of a code to run in our back end so let's come back to our code editor all right so now we're gonna be creating two things one is going to be for registering the users and the second one is going to be for logging in the user so select the app and we're gonna be using the post method and now the URL the main thing we are going to be specifying over here is the URL to register the user so for registration form I'm going to be using the register URL comma I'm gonna get request and response from the user in this we're going to create three variables one is going to be for email one is going to be for user name and one is going to be for password to get it we are going to request it from our body that means from front end and we're gonna get the email same thing we're gonna repeat for our username and password request from body the username request from body the password great now let's run the MySQL Query to insert it into our database table so create select your database connectivity variable that is gone that equals to to run a query of my SQL just called acquiry method and run a MySQL Query insert into my users table all right there's a table named as email username and password now we're gonna be entering the values so the values I'm going to be keeping it question mark over here and after the double quotes add a comma and now what we need to insert in it email username and password great so we have done that now we're gonna see whether everything is working fine or not whether the data is inserted or not and display the error am I right so over here we are going to be having an error and we're going to be having a result so we're gonna say if our result is correct I mean to say if the user is inserted into a database I'm gonna select the response and send the response to result send the response as a result to my front end else I'm gonna send the response [Applause] which is going to be 2 minutes which is going to be a message if there's an error while entering the user that means while registering the user if the user have entered a wrong details or we are having some issues in our form they're gonna just go with this enter correct asked details great so this is the code that we're going to be writing for registering the user into our mySQL database let's save it now let's come to our login functionality just copy the same registrator code that you've written and paste it below any login functionality we are almost gonna do the same the thing that we're going to change is the URL it's going to be login and over here we are not going to be selecting email we are just gonna go with username and password then over here for writing the sign inquiry what we're gonna do over here is we're gonna say select all from the users table where username that equals to the username and password that equals to password and in our brackets we're just gonna have username and password selected now in this error and result we're gonna say if there's an error we are going to request that error what we are getting so request set encoding in which we're going to be having an error displayed else what I'm going to do over here is that I'm just gonna cut this line I'm not gonna delete it I'm gonna cut and we're gonna use if and else Loop over here we're gonna say if my result length is greater than 0 that means if the user exists in our database we are going to rescind this response to front end that is going to be the result that means the user is there and he is successfully logged in else we are just gonna paste this response and we're gonna set that you have entered a wrong username or password that does not exist in our database so wrong username or password all right that's it guys for the backend functionality in which you have learned how to insert the data for registering the user and how to login the user that means how to collect the data from the database in react application all right guys so now let's come to the front end and in this front end what we are going to do over here is that the backend functionality that we have set up over here we are going to be adding in our front end so when the user clicks on this button we're gonna call our backend server in which we're going to call the specific URL in which the function is going to be running and the user will be registered or logged in all right all right guys so now what you have to do over here is that you need to import the use State Hook from react after importing the use statehook from react in your front end react application come before your return statement and create the State variables that I'm creating over here the first date variable is going to be for email set email that equals to use State hook and it's going to be an empty string I'm gonna copy it and paste it five times as I need the second one is going to be for username then we're gonna set the username all right and the third one is going to be for password and set password the fourth and the last one is going to be First Status the first one is going to be the login status and the last one is going to be for register status great after doing this what we're going to do is we're going to be getting the value from the input so for doing that come to your input over here and provide it a own change value so on change not on can play it's going to be an on change we're gonna be getting an event and what we're gonna do over here is that we're gonna set the username to the value that is entered by the user so e dot Target dot value same thing we're gonna do repeat again for our password and for our registration form so by for saving the time I'm gonna be copying it and pasting it over here just gonna change the set keyword to password same thing we're gonna do with email username and password for our registration form set email it's really simple if you're having any doubt regarding to connectivity to your database if you're facing some if issues just comment down below or I will be providing you the Gmail address in which you can just write the error that you're getting paste the code over there I will just reply you as soon as possible third one is going to be set password all right all right guys so now we are all set with our statements now what we need over here is that we want when the user clicks on the registration button to create the user and when the user clicks on the login button to log in the user so over here we're gonna take on on click value in which you're gonna call that specific function for register register function and for login we're gonna call login function simple naming it as login that's it guys now we are going to be getting an error as we have not created this both functions so first we're going to be creating the registration function so scroll to the top before your return statement I'm gonna create both of these functions to remove the error the first function is going to be for registration and the second function is going to be for login it is that simple we have created our two function now we are all set now we are going to be getting the event from this function that we are passing from our user input right e dot Target dot value that you can see right over here that we are passing E from this and we're getting it in our function now first we are going to be preventing it as default when this function is called what we need is we don't want to refresh our page as we are going to be having the login and registration state is being displayed over there am I right or not yeah after that we're going to select our axios in which we are going to be using the post method and now right over here what we are going to do is that come to your back end and you can see over here for register we are calling a URL named as register so when the user clicks on this function with the help of the post method we are going to be calling that specific URL that is register and when we call that specific URL our backend function for registration will be running right so how you can call that URL it is simple go with HTTP remember don't add https if you add s you're going to be getting an error and you will be finding where is the error same thing happened with me what I've done is that when I started means when I just created this project for the tutorial video by mistakely I have added https then I was searching the whole code where is the error oh then I got over here that's the error so please avoid that mistake don't go with s it's HTTP not https alright guys after that select your localhost server that is 3001 and the URL that you have entered that is register right now we're going to be getting the values to register it first is our email that we're gonna get then you're gonna get username then we're gonna get password simple now after getting the value to after passing the value that we got from the user's input that the user have entered in the input to our backend register what we're gonna do is we're gonna wait for then the response that we're gonna get all right in this we're gonna say if and we are going to run an if and else Loop we're gonna see over here if my response dot data Dot message okay what I'm going to do over here is that I'm gonna set my registration status uh to that response dot data Dot message that means if you're getting some error but if our account is created successfully we're gonna be displaying that your account has been created successfully so for that we are gonna set our register status to a string which is going to be account created successfully great now let me end it with a semicolon that's it guys this is the code that we're going to be writing for registering the user into our mySQL database there's nothing in front end the main thing is running in our backend so what we have done I will done I will explain you in detail so it will be really helpful for you all guys to understand it in depth what I am doing over here when the register function is called I am using my axios package with the post method and calling my backend server with the registrar URL the values that I got from the user I am passing to this URL then I'm waiting for the response if there's an error I'm gonna get that error message but if the account is created successfully what I'm going to do is I'm just going to set my register status to a string and you can go with anything you like I have just gone with account created successfully approximately same thing we are gonna do with our login so what I'm gonna do is for saving our time I'm gonna copy the same code and paste it inside my login function but I'll be changing the URL to the login and we don't need email we just need username and password if we get now we're gonna set the login status not the registration status it is going to be login status and over here this is going to be response dot data message but if you have successfully logged in what we want is that we need to display the user's email address so how can we do that if the user has successfully logged into his account we are going to select the response dot data index 0 that is matching and we're gonna get the specific email of the user with which he have logged in and now let's come where we are gonna be displaying the status register status and login status whether it's an error or whether it's successfully created or logged in that's going to be our last step all right so come let's come to the login form what I'm gonna do over here is that I do have a code already written so I'm just going to copy as it's having some stylings provided I'm just gonna paste it over here nothing is done over here I will explain you we do have an H1 tag which is having some kind of styling like font size color text align and margin from Top of 20 pixel in this I am calling my state variable that I have created named as login status in a curly parenthesis sorry same thing we are going to do with our register I'm gonna copy after my our input I'm gonna paste this over here I'm gonna display my register status all right so now it's time to test whether the functionality is working fine or not so for that we are going to stop our backend server and run it once again as you can see it's running successfully now what I'm going to do I'm going to be opening my browser here we go I'm going to be coming to my database as you can see here here I do have a users table I'm going to be refreshing it and as you can see there's no user inserted let's come to react application refresh it once again and now let's try to register a user so for now I'm gonna go with the mail named as simple senior developer at the rate gmail.com username I'm gonna be entering senior developer and now let's come to the password I'm gonna go with one two and three let's create an account when I click on create an account as you can see over here it is saying that your account is created successfully now let's see whether the user is registered into a database or not let's come and refresh the page boom guys as you can see over here the user is registered successfully and our connection is also working perfectly with our react application to our mySQL database now let's let's see whether the login functionality works or not the user name is senior developer let's check whether it's catching its wrong or not all right whether the username is correct or not let's go with something blah blah blah blah and password let's go with something blah blah blah blah simple all right and click on login all right it's catching that this username and password is wrong that means this with this username and password the user is not registered now let's enter the correct one senior developer password one two three not blah blah let's click on login and as you can see the user exists so now we are fetching that specific user's Gmail with home's username we have logged in with the password correct correct credentials we are displaying that specific Gmail over here that is senior developer whether it gmail.com all right guys so now we are all set and in this video you have learned how to connect your react application with mySQL database in full depth so this is really amazing so if you have watched the video till end and if you liked it please do not forget to subscribe to my YouTube channel and press the notification Bell and thank you guys for 1K subscribers I really appreciate that thank you all thanks so and I will see you in the next amazing tutorial video in which we are going to be continuing our flutter projects right yeah yeah we're going to be having next project that is our to-do application all right guys so let's see you in the next amazing tutorial video

Channel: Eazy2Code

Views: 25,498

Keywords:

Id: Lb9Basl0StM

Length: 30min 19sec (1819 seconds)

Published: Sun Dec 18 2022