Build a Full-Stack Authentication App With React, Node, Express, MySQL | Login, Registration, Logout

hi everyone this is a complete tutorial for authentication in authorization and I implemented it a step by step okay you will understand and you will get the idea I have did everything in authentication in authorization even if that is registration login logout hashing the password and also generating the cookies generating the token and storing that inside the cookie it is a complete tutorial for authentication and authorization I hope this video will be very helpful for you you know that the authentication in authorization system is very important for every web developer and for every application and you should implement it for all websites and that should be very secure you should be very careful in that okay and I have implemented it and it is uh believe me it will help with you it is very secure and very good way that I always limited so now let's check it okay first of all we are lagging to our system let's create an account okay let's get an account that would be a domain to gmail.com and the email would be oh sorry this should be add Ed here admin to okay let's write a password three four five for example okay so let's sign up we should directly come to the sign in page and in the sign in page whenever we sign in so first I will write admin too at gmail.com one two three four five let's come here to the application to see live we are generating the cookies okay free slogging see the token has generated for us okay GWT token are generated and we show that inside the cookies and it means you see the message that let's make it like this okay you are authenticated me too that name has printed for us if we log out from the system see the token will remove from the cookie the token has gone clear now in it back game you are not authenticated you should log into the system you are not okay authorized with us again you should come to the login again log into the system for example let's come again let's write try this admin too five like in again you're authenticated at me too in the token as generated so it will help with you so let's get started before starting so don't forget to subscribe and also like this video support me in comment down so for this project first of all we should set up our environment first we will set up our server side environment and the first thing is that you should have load.js installed on your system after that create a folder like I have created react MySQL and inside that create a folder like server okay create a folder by the name of server or again whatever name you assign after that just run these commands and that okay npm init minus y okay it will just initialize it and it will create a package.json file inside This Server folder then run these commands Okay in payments are Express which is new touch is framework my secret for mySQL database course which is used that cross origin It means that to access our backend API inside our front end now demand it is used to refresh our server side automatically whenever we make changes cookie further for cookie Json web token for authentication or security purpose and Big Clip to Hash our password so we will install these packages inside this server side okay I have already did all these things okay let's come to the package transition so these are the thing that I have installed okay already setup and to use this nerd mode this node one you should write like this okay in scripts area start nadima server.js server is that file name okay server touches so it will automatically refresh this file and after the front end for the front end just create your act of Simply okay like I have created the react Hub inside that install bootstrap axis reactive data access the HTTP for HTTP requesting and reactive product for routing so simply whenever you done this job so now we will start our coding yes close this so first I will come to the server side this file server.js okay this file is created by me okay you should create this whenever you run those commands after that you should create a file like this okay after creating this path so we will write that code which is necessary for cable project first of all we should import Express framework from Express available you you are using the express here this import statement this import statement is not working by default so you should have adhered in package.json this statement okay type module if you didn't add if you don't add this statement so import is not working then instead of this you should write a require so I have added that statement I am using import let's import MySQL from my secret and import cards from cars import GWT for Json web token Json token import from Beatrice for password hashing and I think everything has finished so long let's creating up launched up is equal to express we will call Express method and after that now we will use this app okay this has the functionality inside this method so up dot use this is available express.json it will force our data to the Json format of that use I'll show the course middle gear and also I should import cookies and all cooking parser from cookie parser if she used that up articles cookie further now let's create connection with my SQL database to create the connection so let's create an object accounts for example DB is equal to my SQL then create connection this function inside this we will pass our properties the first property is the The Host end user the user for the default is the root for the MySQL and also the password I didn't set up the password I will leave it empty and the database we will use the database for example by the name of let's call it sign up okay or we can yeah sign up he will name it to sign up we will create this database inside our my sequence now let's run our server app dot lesson here we should first assign a port number for example 8081 and in a function data function inside that let's cancel that now for example the running so let's test our server what happened let's move to CD server and in frame start yeah it is running C statements are printed it is running it is successfully created so after this now before creating the API inside this we will move to our front end and we will create user interfaces let's come here and inside this layout this is the main component and we imported up here and also I have imported the bootstrap inside the spooky bootstrap this is the app component we don't have anything there is nothing in this app component let's create first of all the register page okay let's create register the G6 so inside this first we will create the user interface for this so this is the code for our registration page I just wrote it because it will take times to writing simple in HTML code okay these are the bootstrap classes that I have added and this is the input field for name this is input field for email and this is input field for password and this is a button for submitting this is for create new account button just simple okay so now let's import it inside app but before importing this we are using react rotor dub so we should set up react Auto dump also so let's set up that we will import browser router and route end route from browser for react to turn down before react to turn down after importing them let's use them subscribe browser router yeah so inside that let's write routes inside that route how to parameters first one is the path what our home is this one this is just the slash is just for Hope and here the element is is equal to that should be home okay right now we don't have hook up on it let's create that just simply we will create that home.jsx and inside that we will light our CE random question component export and let's come here import that is imported after that we will create another route here for our registration page this should be register yeah register accompanied and the path should be a register yeah he did it so now whenever let's come here and yeah be imported let's run our front end now so to write printer front end let's take a new command line and we will move CD front-end folder front end and inside that I will write npm run dim yeah let's move to this URL it's the Chrome inside the vehicle home component right now we are at home component so let's move to register main body so this is our sign up page okay that we will create so now whenever we are writing something in this but before writing this let's make a login page also when you're working this we should move to login page we will make the user interface for login iPhone let's add one another route here that would be for logging login and let's create that GSX and inside that rfce let's import that here login okay that has inputted we use that here and now let's use the path let's move create user interface for login as so this is simple code HTML code just for login page and these are the booster classes again email and password input fields in button first like it name button or sign up we will move bar2 back to create app so let's come here we check it instead of this let's write a login see we have liking it so now whenever we please send this great account we should move to sign in and on a key create account let's just log in here we should use instead a button link okay react up to now provide link for us so let's import that first import link from reactive turnout that has imported so let's try it here Link in it has a property 2 is equal to we should go to a register page same to this we will just move to copy this line and come to register and import it here and use at the binary at this button link to come back to the login 2 is equal to slash line yeah everything has done let's come here let's press this create account see sign up sign in yeah that has worked okay the user interface as done now so now we never we come to the sign up page whenever we are writing something inside these input Fields so be sure to store them in a variable then by pressing them we should pass that to the server side let's come here it means that come to the register whenever you are writing something in this input field we should store them somewhere in the variable so let's click that const let us create a state we'll use C values is equal to use state it is an object with us we have Name by defining nothing we have a mail and password this is an object we have these videos so now we should update these videos whenever we are writing something in these input fields we would like something like this we will use all change event and inside that we will create a row function and we will call sit videos this method okay this one you never recall that so let's try it now we should update our object we should write the previous object the previous videos and now update the name just name and write either Target dot value what will you be a writing in input field assign that to the name same to this to write for the email update email also cite it here and update just email and also for password let's write the password yes anywhere we are writing something in this input field will be stored in these videos submit button sign up button we should call a function let's call that and submit handle submit for example let's create this function now copies cost and the submit is equal to we will get an event create this function event dot prevent default submission and after that we will use our apis to it means that we will call our server our server side and we will just register this user so here let's use Axis or h axis from axis okay let's use it now hack CS we will use that post method because we are posting data and our you are able to be would be our URL so let's come here and write our URL Google host our server side port was ET 81 okay this was our server side phone let's copy this and write it here this will be our server side URL and whenever we pass this we will pass the data also and we should move to register register route okay here and let's pause our videos after fasting the videos we will get a new result console.log by default first we will just cancel that if there was any error cancel the error and error so whenever we call this route so we should move to our server side and create this API now so let's create that API half Dot post the meter was Post in register name of that was register and here a function that would be a request we will get a request in the response get this function and here we will click now our statement it means the schedule statements to connect to further SQL SQL purified my SQL database accounts SQL is equal to insert into the table name would be like login okay I will create it just right now okay just a minute later uh insert into login and we will insert into values sorry we will insert into [Music] distributed wait a minute yeah we will insert into the name field email and password field okay IDK to increment values would be values question mark okay we will attach the videos later so first let's create this login table yeah I have created sign up database inside that we have login table in that table we have ID name email and password this is my SQL database inside exam server okay I'm using some you may be installed my SQL separately my SQL workbench okay ER you may be using mongodb that against the new database number so after creating this now let's come here back we will enter into the login table to the name email and password field in the videos now let's grab our videos from breakfast we will write const we'll use is equal to our videos reaches start the party dot name we will take our name from request request dot cardi dot email password after taking the password the password is a very simple password for us so we should hash that it means that we should change it to the hash first of all then we should assign that to the database so for the password we are using this big lift okay so let's use it let's create one variable cons salt is equal to Tin this we will use it in for the Big Crypt because later I will explain it to you let's come here now to the register under this let's write B Crypt that hash so first of all we will assign our string okay our password that is a request dot party dot password we will change that to that stream there are two string if that is not string we will change it to the screen and after that our salt that we created before okay this sort this means it will add 10 characters to our password unique and for the security purpose I think sort around okay it should be numeric uh adapter that it will create a function and we will return an error our hash password it has two parameters if we got an error let's return uh result the response.json here here for hashing password else if we got hash password so for that let's copy our this code yeah Ctrl X it and write it here instead of this password the right hash password that we got here okay this one and under this we will learn our kdt object that we created from MySQL connection dot query we will call this method we will passports our SQL then we will pass our values okay this values and after that yeah let's we will get an error a result if we got an error so James simulator response dot Json that would be an object error and that would be in serting data error server else we will just return there is later response.json status it means we succeeded yeah just return on the success message so now let's try it okay let's move to our register page we call it okay let's come to the front end here and here let's sign up first of all I will just yeah let's name her name Gmail and let's write a password for example one two three five let's press sign up what happened let's move to console what we are getting from our server sign let's come here to the console and the submit is not defined it's where is the error so let's let's press the sender button we got this data okay and and Define what is this so in the data what we have data status means the success okay let's check our database our login see the record has entered successfully okay this is the hash password and email and name and ID have you successfully logged in so whenever we lack in so we should move to our login page back okay so for that let's write here's something like this okay let's remove it and here we would like it result dot data dot status okay be returning status for success status was equal to equal to with success so in a use navigate hook let's import that first navigate is equal to use navigate we will put it from react chapter down to navigate to other Pages we will use navigate and move to our login page to log into the system okay it will move to the login page so before that if there was an error just alert here the simulator right okay it will be successfully will come here to this point okay and everything is okay yes we should move to our login page yeah let's try to enter another record admin admin gmail.com [Music] and index password 6 and let's press sign up we succeeded okay and we came to the sign in page and we asked our password so now let's write our code for the signing page so for the login page as we did for this submit button register page we will create first an object then we will adjust handle the submit button okay so simply let's first copy this one hold copy this whole code okay copy this one and come to the right game because it will take time it is the same code it doesn't mean that I am lazy okay so just come here we have just remove here the name okay we don't need name we are just taking the email and the password and after that let's import use navigate and also access import use navigate from react totoda and also import XCS from axis and nothing else okay and here instead of that we will use login and we will pass our videos so let's first of all store our videos here as we did in the register in this area okay let's copy this one copy this one yes and let's copy the email one copy this one and come here if you know where we are updating it's writing something in your fulfilled name email so we should update our email and same for the password let's update the password I think it is okay and now whenever we submit this so we should call a function on submit angle submit function okay we will call this handle submit function this one okay so whenever we come here first of all three window then move to the login and pass these videos If result edited as it is for Success so then if we should move to home page okay to home component else alert login okay so everything is okay enough just our login page has user interface has done now let's move to the server side to create this login API let's come here and just create up dot post login API we will get to request and response and here we will write our query const able is equal to select staring from login yeah you can write it from login here email is equal to with question we will just reflect the records based on email just email okay the password we didn't mention the password the reason is that the password we will compute that with the hash password because our password is hash so let's come here now let's write a run our query db.query and we will pass our SQL and also our email okay for this question mark let's write our email latest body dot email and after that we will get an error art our result let's create this function if we got an error okay if we got an error you should return something as we did in the register page yes here [Music] login here in server else we will check if the data dot length was greater than 0 it means if an email was existed so then we will run this block of code else we will just return [Music] in a error and no email existed it means there is no email and in the database so here if the result was okay so then what we should do first we should compare our password so let's compare our password we will write decrypt dot com here first we will write our request dot body that password that we passed from front front end tattoo string we will change that to the string and then the password which is in the database how to take that we will write data the first record of the data that which fits from the database dot password okay this is the data that we got the data we pitched from this query and we take the password from that and in the result we will get an error or response create this function if we got an error we will just paste it here and so let's move it return result password hash error password come here if we got if the response was okay it means if it wasn't key the password was okay so if it was okay we will return a success statement okay [Music] we will return status success else if the password was not okay return in error message okay password not make so now let's check it okay I think everything is okay so let's move to our home page log in and in the login if the result status was success so then we should navigate to home page yes let's see it yeah let's let's dig it once we are in the logging system uh where is the error I think Navigators imported okay access is also imported and we didn't import the use state so let's import it use state that has imported okay yeah we have this now let's move to our console we got any error for this application to remove these all errors yeah let's come here so now let's write our immediate password we have admin and admit gmail.com okay and also we have the password one two three four five six for that let's press the like in what happened yeah everything is okay and we came to the home page it means the password matched okay um but if the password didn't match what we will get so let's try it also just come here repeat it and here we will just print instead of this Arrow we will print the message that we are here we are returning result that data uh dot to here I think it's okay let's come here write something like this okay we have the email but the password didn't match it's okay okay so we implemented the login page also so but we should now generate the token okay we should use this um let's come here to the server side this is a Json web token okay to generate a token and also store that in the cookie we will use cookies for that and let's do it first we will generate a token let's come here to the login page inside here response if the response was okay it means login page was successful so here we will generate a token first we will grab our name const name is equal to date 0 that name we will grab name from our record and then we will use GWT const token is equal to with the GWT DOT sign and here we will pause first of all the period the period is our name we will pass the name a ID name and ID whatever you are passing okay then we will write here a secret key this should be a unity and private key and it this will be a private key okay and also it is better that this should be in that EnV file in real application you should access from that place index should be at least 32 character for the security purpose so now I will write something like this okay rtwt Secret okay I will write like this something and after that the optionals like expires thing it will be expires in for example in one day okay it will expire in one day we generated our token so when we generate our token we should store it in the cookies so the cookies are on the front front site and the browser and we are at the back inside server side so what we should do now so for that let's come here to the course we should write something on course to access our personal we should write origin the origin should be our URL okay from here we are accessing URL is this this is our URL copy this and write it here remove this login this is the rule you need let's remove this we should write localhost copy this I think it is the localhost as before I paste with this uh sorry we're in high oh I came to PHP yes it is volcano so this will be our URL here we should write then the methods we also specify for example we are using post and git method and after that we should specify credentials credentials will be true this is the first step that we should use here okay and after that um we should come here to the front side in the front side if you are using axis you should write something like this okay axis dot equals dot with credentials is equal to true but if you are using which API you should pass here like this okay credentials include the initial right and we did it and we wrote it yeah so we should write it yeah and right now it is okay here and now let's come here to use the cookies and here we will just write result dot cookie okay what we will pass token this is the key and we would be token that we have generated I hope that it will work and there will be no problem let's come here and let's move to our inspect and here come to the application that we are getting our cookie or not okay so now let's slide admin gmail.com let's try the password let's place the login see the cook has generated successfully okay it's okay okay the cookie has generated sex will be generated that so we never um you generated the token then you store the token in the cookie so it is okay and we came to the home page so now what we should do now we should Implement log out and also a protected routes for example whenever someone come to the home page those who are logged in you should see a different message and also those who are not logged in they should see a different message and also there should be let out functionality let's come here to our home page so whenever we come here to our home page first we will compare our token if a user was already logged in so then he should see a different message so this is the home page code that we have okay just we will create this auth variable right now okay we didn't keep that so this means the one who is authorized it means he is already logging for him it will print a message you are authorized and hear the name of him and also the log out button okay let's remove this the logout button and the one who is not authorized he will see a message that you are not authorized and login now so you should log into the system so let's keep this variable now const ant part sit Earth is equal to use state by default it is false it means he is not authorized with us okay so now let's create use effect hook we will call our server side and we will check the one is authorized or not that's right access import access it we will check is the user authorized it means the token is in his browser or not in his cookie here we will just Implement like this okay then we will get a result uh before this let's write as we wrote in the register yeah and login page we will write something the same let's copy this come here please sit here and just remove this URL it goes to this URL and we are not writing this it should be it and result will get a success since alert if it was successful log in So within we should update auth or true it will pass through to this variable auth otherwise set up to files and also we will return a message let's remove this and we will create a vertical here first message sorry message sent message you will return a message from our server side routine use to empty and we will receive the message here saved message and we will assign result dot data dot here that we are getting and we will print the error here that message here and also we will return the name from our server side so whenever we return a name we should create one another variable here counts name is equal to use state it is empty right now and we will set that here say to name result the data dot name we will assign him to that name and we will use name here sorry we did front end site okay let's move to our server side and create that route for that's right around I will light up dot get just home page we will get a request and response here we will check our before doing this we will call a middleware here okay for example like chap verify verify user is this already logged in with us or not is this our user or not so let's create this wi-fi user function cons to verify user is equal to Infinity request response and also next middle name this function so here first of all we will lead our cookie to read the cookie what we will write we will write um cost for example token is equal to a request dot um cookies cookies okay dot token the name of the cookie was token okay that we as in lagging system okay this was the name of the token we will need our cookie now we will write if not token token if the cookie was not existed then we should return a message with error okay like this one copy this paste it here and return error you are not authenticated authenticated okay is if the token was existed now we will verify the token is it the token that we have generated here in the login or not okay that we have generated here is it that or not so let's try write it here instead JW 5 and to the modify what you will pass first of all our token okay what is our token that that is the token that we got from our cookie and here would be the private key what was our private key this was our private key let's commit this one okay let's copy this and just come here paste it here and after that we will get an error or decoded video error so then we will just copy this one we will return something if there was any error and token token is not okay okay the token is not correct else we will decode our name first of all request dot name is equal to decode decoded dot name okay this decoded name means that we has later okay this name we have coded now we decoded that back and now we will call our next middleware to move back next yeah call that and it will come back to our home page and here we will return something success return response done Json status success and also return the name name request dot name that we have wrote previously okay so I think we did everything we implemented everything just the Lego functionality is limited so let's come here now we finished within error so where is the error just come here to the console what is the error it says that curse is not defined here at home that let's say there is an error in our home page called This is cost spelling mistake let's come here now again what is that here link is not defined oh sorry where we wrote link yeah here we didn't import the link let's import it from reactive yeah it is okay now so I think yeah the either is this so let's write something as we wrote in the login we should copy this and write it in the home page also write it and also import the access is imported I think yes okay let's take it now so let's refresh our page what we get in the result [Music] like it now we got an error here or let's come here yeah the URL was wrong let's copy this our path should be this okay now just slash okay we should try something like this now let's take it see you are authorized because we have cookies okay let's check them we have this cookie okay okay it means that you are authorized and the name is admin okay if you don't have the cookie let's delete these cookies and let's refresh it now what we will get now you are not authorized login now you are not authenticated like it now okay then you should move to login page so it was all about that okay so one thing else that we should do in the home page we should not use limit here Navigator we should use I think let's remove this okay from this area uh everything is okay yes so now let's login back admin gmail.com we log into our authorized so now we should we never replace this log out button we should log out from the system we should delete the cookies let's come here to the home on click we never replace this logout button on click sorry on click handle delete yeah let's create this function now let's come here and create this cards we should just call an API start get and our URL would be let's copy this one copy it and paste it in live let's write log out we should move to logout but then we will get a result but before the result we will just write location Dot reload we will reload our file we should write through inside that okay it means reload it from the server side also cage foreign and we should move to this API now let's come here and create that come here down and create that after ticket we should create log out what we should do inside and log out adjust response we should do we should just uh clear our cookies we should write response dot clear cookie and we should pass the name of cookie was token and after that later Reserve response.json and status let's check it now okay let's come here and we will move to the application to see life that we are deleting the cookies or not let's see how right now the cookies gets pretty slack out so the cookie has gone okay and maybe that could be refresh automatically like it you are not authenticated wow congratulations you did your job it is very important to implement a secure authentication system in your application you know this this is very important application for every week and this was I think a secure way to implement it and I just try too much to implement it and I learned it and I just shared with you I hope this video was helpful for you if you like this video so don't forget to subscribe the YouTube channel like the video and comment down and thanks for watching

Channel: Code With Yousaf

Views: 7,949

Keywords: react js login and registration, react user login and authentication with axios, react authentication, login authentication in react js, react, react login and registration, how to do login and register authentication in react node js, react login, login authentication, login in react, jwt authentication, registration in react, user authentication, react login page with authentication, login authentication in react js jwt, logout in react node, login logout, login logout react

Id: 0i86B4mU-vw

Length: 49min 35sec (2975 seconds)

Published: Mon Apr 03 2023