Complete Login Logout in React, Node/Express, and MySQL

hello everyone this is a complete like any Lego system using great architis node.js and mySQL database the database you may be using mongodb but I have used in mySQL database and this is a complete system okay so let's check it what we will build in this video okay first of all you are not authenticated and login now so let's press the login we will come to the login page and let's add something um correct that we have in our database admin at gmail dot com and one two three four five and let's move to our console our application what we are getting okay let's come to the application and let's come to the cookies okay right now we don't have anything in our cookies let's press this login button see you are authorized and the cookie has generated for us okay this is the token we use GWT or Json web token for that generate a token it means that you are lagging if I move to another uh tab again if I just write my URL income here you are authorized okay because I have the token in the cookies whenever that didn't describe expires or I press the logout button so then that will be removed from that place okay so now let's please slack out button what happened let's press this lag out see the cookie has cleared okay everything has gone it says you are not authenticated like in now so we will build something like this is a compute system and also this is a very important topic in web development whenever you move to somewhere it is much that you should implement it and you should be very careful whenever you are implementing it implementing it okay it is it needs too much care okay it should be too much secure when you are implementing this system so now let's get started so we will implement this and we will get this so first of all we should set up our uh environment for front-end and backend okay for the back end first of all we should create a folder like this okay a server then we should move to that folder after that we will run this command and fame init y it will create a package.json file inside that and after that we will install just these packages okay this is the Express node.js framework MySQL course that's used for to access our apis in front end and node one will refresh our um server side code automatically whenever we make some changes in that cookie further for cookies to First the cookies and Json web token it is a web token that we will use for Authentication and for a front-end just create a react app so it is all about the environment so let's get started now so first we will move to our server side okay we will light some code for our server side okay so first we will import the uh Express before that something I should find you that this okay start nardma server.js it means that the node month that we have that we installed uh previously okay so it will refresh whenever you install it then you should write that's like this okay and also you should write like this type module if you don't try if you didn't write like this so then you cannot use Import in your code then this import will not work okay but you should write that type module so import Express from Express import MySQL from my secret four cards from Cars import cookie parser from cookie farser and also we will import GWT from Json web token so these are the packages that we will use and I imported all of them so now let's initialize Express we will write 18 up is equal to expressv.com express and after that we will just use up dot use express.json we will pass the data to the Json format and we will use up dot use our course um to access this backend side it means to create cookies and access in the front end from back end so we should use something in this course okay first thing for that is that we should assign origin this origin is in L2 with the so to this origin we should assign our a front-end URL okay wherever our protein is we should assign that here in this area right here the URL a front end then here we will like methods which methods we are using multiple Force and also the credentials should be true credentials should be true but this should be inside in object like this and so this should be type array later we will write our front end URL here after that let's create a connection with the mySQL database so we will write my accounts DB is equal to my SQL dot create connection and we will pass properties to that host is localhost with us end user by default with us in my SQL is a root password we didn't setup password for our MySQL and database sign up with us okay let's I I will show you the mySQL database so let's come here yeah this is the sign up database and this is the login table that we will use okay we have just one record inside that so now we will Implement API let's run our server okay we will write up dot lesson we'll assign a food number for example et1 in create a function which will say console.log listening or running [Music] okay we have created our backend site code so just to implement our apis we will Implement them later okay so it was the boilerplate code that we should write for every app okay so now let's move to our front hand side first we will create a front end let's come here to the login First of all we will create a login page before that we are using react auto Dom so we should install that let's move to our app.j6 so here I will use react router Dom okay I have imported them okay browse the router routes and route from reactor to RAM and also let's use that now browser router yes it's right inside that routes inside that route and for route we have two properties the first one is the path should be slash this is for home and the element e home if we whenever we write this path so we should goes to the home component I have already inputted this home company to okay we have that here nothing is there inside home page and also let's create one another for login this is for login let's write here login so we have imported the login there is nothing inside again so now let's move to our login page first of all we will just write some code for that and so let's export that yeah that is exported by default we will light our front-end design for login page to input fields for name and password for email in password in a button so I will write the design for that I wrote this code okay one input field for email one input field for password and a submit button okay it is just a simple login form so now we will run that how it looks like so let's first of all run our front end let's move to terminal and here we will move to City front end folder inside that we will just let's make it yeah we will write in npm run due it will learn our front end application let's move to this URL and let's write here slash login view login page we didn't see anything inside that let's export default okay inside app so the error is it this let's form let's come here to the home component and inside home component we should try something yeah it will work now because there was nothing if you were not exported that so you're gonna use that here so let's come here now let's appreciate yeah it looks like this okay it is our login form so now whenever we write something here so we should store that inner variables then when by pressing this button we should um check that okay just come here to the login let's create an object const videos is equal to use state and this should be an object with our name and also in email we will update all these videos so let's update them we will write here um call on change event and we will just update our values we will write sit values here we will update our with all our previous videos then we will update name here okay name is equal to e.target dot value the same thing we will write for um password Also let's check it and here we will update our password but this is not name this is email let's change that email and this is password [Music] let's copy this yes this is password and this is Damian okay we have now we updated our videos we store them in these videos object so now let's whenever we press the submit button so we should call a function on submit sorry and submit handle submit we should call this function in the submit let's create that const in the submit and you will get an image and inside that so now first we will prevent default submission after that we will call our backend server side API okay we will call This And from our front end so to call that uh previously we said that we will I will use axis for that okay access which is HTTP request Library dot post inside here I will let my URL selects first of all import access import access from axis okay that has imported so let's write our URL here our URL would be let's write localhost in our port number was 80 81. this was our food number so let's copy this and write that here yes HTTP localhost 8081 okay so we will move to the slash login or API route after that we will get a result from our server site right now we will just cancel that cancel that log result if there was any error so catch that and so that log here okay we have created this request and now let's move to the create this login API in our server side let's come here and just come here we will use up dot post the method was post and we will create that slash login after that callback function a function you will get a request in response so here we will write now our query okay to check our email and password with that so let's write our QD const SQL is equal to um select steric from login table where email is equal to with question mark we will later assign this password [Music] okay so now let's run our query and let's run our query we have created this DB object DB dot query and we will pass our SQL here and here we will pass our um this email and password okay we will attach them in this uh array let's write request dot body dot email we will get email in request dot body dot password okay we will attach them and later we will get a callback function that will be an error or data we will get the data okay so if there was an error so then we will return and just result.json an object message say server side error else now we will check if data that link it means if there was any a record was existed in our table so then we will learn this code this if black otherwise we will return just like this something okay we will write here no record existed [Music] password incorrect so now we will Implement our logic here okay so here we will just generate a token and also then we will store that in a cookie and then we will pass them to the front end result so here first of all I will just grab a name from our record okay that is existed in our database so I will just write like um const name is equal to the data that we have okay this data which we has returned data this will return an array we will get the first array from that first row dot name we will just get name from that record and after that we will just generate our token cons token is equal to JWT object that we have created we imported see this one okay that we will call sign method sign and we will pass here first of all our period that would be name that we have grabbed right now name and after that a secret key this secret key should be that in that EnV file and this should be a secret key no one should know about this but right now for the testing purpose we will just write that like this okay our token Secret key it should be at least 32 characters okay for the security purpose and after that we will assign some options that would be like expires in for example one day okay one day so we have generated our token so now right now let's create our cookies so we will write something like result dot uh cookies cookie and after that we will assign as name to this token for example and the value would be token that we have generated it's simply that we have generated our cookie so to generate the cookie previously also I have showed you that these are important okay for your react up here we will light our react after URL so let's copy that copy this remove login from that okay let's remove this okay this is the URL that we wrote here and also one thing else that let's come here to the login here you should write something like this if you are using axis you should write like this access dot defaults that with credentials is equal to true but if you are using which API then you should attach that with the header here here in this side okay you should write credentials true okay if you are using pitch kpi and oh sorry yes post it here we call the login we should pass our data also here okay we should pause our data here yeah we should not write that in current location we should directly write videos uh let's compare to the server side okay BM did everything so now let's return a response return I just did eraser response.json and an object status should say that success okay we return this statement that means we are successfully logged in so now let's move to login uh so we will just write here something like this okay if result.data we will return something like this data dot status okay the status that we have returned right now was equal to equal to with this axis so then what we should do we will run this area else we learned this area okay if we were successful so then we should move to our home page and that will write something for us that you are authorized okay so I will just use a use navigate hook here to move to the home page const navigate is equal to U navigate and we will move to our home page oh sorry we should not write anything here it's right here and navigate just move to our home page okay to this route business in our front end else just alert a message um let me suggest we has returned a result data Dot message let me helps return okay we return message save this message and this message if there was any error so okay now we did it we created our everything okay so now let's check it okay we will check our login system we have a record in our database admin admin gmail.com so let's write first of all our domain gmail.com if you write a wrong password what will be the response let's press this like in button uh sorry there is a mistake let's come here when we press this handle submit function should recall handle submit axis.post oh sorry our um this server side is not running so let's move here create a new terminal we will just move to CD server and here we will lightning start yeah that has started it is running okay the message that we saw previously shower page and right admin gmail.com and let's write a wrong password preset again we face with an error yes so the error is that this we have written this name wrong so prevent default so write a name here so it's correct now okay it's correct now so let's remove this gmail.com please login see no record existed okay so let's write correct password five Let's see we came to home page directly okay let's check that cookies are created or not let's uh to inspect and let's come here to the application and let's come here to the localhost cookies are not created okay I think we didn't create our cookies let's come here to our server side and okay result that cookie yeah we created them but where is the error yeah the reason is I think we didn't use this cookie parser okay so let's use this middleware up dot use uh cookie further okay this was the error that we faced with yes oh Oscar this is true let's come here and let's slide in again and let's write admin email.com and also write one two three button cookies are not created so yes the problem was this that this Local Host we should write this okay so now let's check it and let's sign in yeah we logged in and the token has generated successfully okay this the cookie has during the application the cookie has the localhost this has created successfully so it was the token which has create which has generated successfully and we created our cookie so now whenever we come here to home page so in the home page we should apply some restrictions that the one who is a authorized he should perhaps there should be a different message here for one who is not authorized um means that they get authenticated for him should be displayed a different message so let's do that so first of all let's create a variable a state const is it authorized or not authenticated or not the Earth is equal to use state by default it is false and now let's use it here instead of that okay let's come here if it was authenticated so for him should be displayed this message if it was not authenticated so foreign should be displayed this message okay so those who are authenticated for that we will display you are other priced okay and here we will display the name of him and also we will create a button here let's wrap this all message in H3 tag and later we will create a button for logout okay to log out back and those who are not authenticated for him should be displayed we should display the message which is returned from server side so for that we will simply write h three and we will display that message here and one another message log in hit a button here again [Music] primary okay so let's check it it looks like this right now login now and let's whenever we come to our home page we will call use effect talk okay it will check that is this user already lagged in it means is there a token available in our cookie or not if the token was available so we will may change this store true and it will display this message to him if that was not available it will display this message for him so let's use use effect hook create a function here and let's write array dependency at the end and here we will call our server side we will just write something like this okay access we will import access dot git and we will call our API our URL this is our URL okay we will call and then we will get a result after we get the result we will write something like this app result data dot status we will return our status was equal to equal to which state which success then we will just sit auth to true and also we will return a name from server side we will just create create another variable for set name cons name name use date by default nothing and here we will write city name result data dot for example name we will return name so let's first of all and implement this route in our server side it's right here up dot git this is our route that we will Implement request in response so here we will create one authenticated route okay authenticate a protected route okay so for that we will create another function and we will call that here we will call like this W like verify verify user so let's create this function const modify user is equal to we will get request response and next next is a middleware we will call it okay later we will use that so here in this function first of all we will eat our cookies okay so let's write cast token is equal to request dot cookies cookies that token that we have created later okay this token that we have created visit this cookie okay the name was token so is it available in our cookies or not if it is not available else if that was available so then we will verify our token so we will just try it JWT our Json web token that verify we'll call this method and we will pass our token after token we will pass our the secret key okay that we had this Secret let's copy this one and let's write it here after that a function oh sorry this should be string and after that let's create a function we will get an error already coded in the recorded we will get the this name okay that we sit here this name so if there was an error so then return to us copy this example uh 10 application error else we will just decode our name request dot name is equal to decode it Dot name that we had here okay this name and after that we will call next middleware okay it will just take this from the next one okay from this function back to here okay whenever we come here so we will just call return a message okay status and this should be success and also we should return um request start username that name that we sit before [Music] okay this is equal to request start name but we sit here okay this name we will return these so now let's check it let's come here to our home page if it was success so then we should do something like this else we are returning a message from our server side okay this message see this message or this message okay so next we will just write here another variable for the message set message is equal to use and in the else section here are the light or just I will alert okay alert dot data Dot message yes let's see now here here we will print our name that we sit in here message name and message yeah everything is okay so now let's check it right now we have our token okay let's just try this class content yes you are authorized because we have a token in our cookies okay let's stick it in our application see we have this token so it says that you are authorized admin it is our name okay admin is our name so it has returned those name also so now we should Implement lag out okay whenever we are not authorized then we should display as dependent message like this one okay so let's check it and let's copy this okay paste it here here it should be false so let's come here now to implement log out so whenever we place this log out button we will call another function on click handle log out let's create this function in the logout here we will call our backend API again so we will like access Target we will write like something like this slash log out 13 we will get a response the response so we will just run location we will just reload our application let's reload this true we should assign okay this two means refresh it from server side also and at cage there was any error so let's now create this log out API let's come here and let's create it here down foreign [Music] just we will clear our cookies now so just try to response dot clear cookies and we will assign the name the name was token after that we will listen return a success message to returning the message let's come here to the home page a light Apple result.data Dot message is equal to equal to with success so then it will do this ends alert error so now let's check it okay so let's move to our sorry to our application we will see live that we are deleting our cookies so let's press this log out see the cookie as a remote but why this is that has implemented successfully we invented the log out okay just a message here there was log out responses clear cookie the cookie has cleared successfully okay just come here to the home we should write here state does not message okay sorry for that it's okay now so let's appreciate okay let us like this okay we need to come please provide it login now so let's login back so for this login button we should create a link let's come here to the login where we created that yeah this should be react rotor Dom link and we should go through this route log in let's press it now we came to login gmail.com let's press the login the key should be generated see the cookies are generated even if we close now this tab again we come here again we will be um logged in there okay let's now run it again uh we need a token why we had token so let's check that I think in the yeah here we have the token so let's check it where is the problem just come here to our server side coding first come here to home status was equal to equal to its axis let's come here to our homepage server let's come here verify user yes what do you call it so the code is implemented okay here so let's add here something that we missed that is axis dot defaults dot with credentials is equal to true let's seek it now see by default that is okay so let's close it again let's come here let's say you are authorized admin okay so we have all the cookies in our um application side okay we have that let's log out okay as remote close this so if we run it again in another tab it will be again see as we need to open provide it again okay so it was all about login and logout functionality the main gmail.com so I hope this video was fulfilled for you if you like this video video don't forget to subscribe our YouTube channel and also like this video comment down to promote this video and finally thanks for watching foreign

Channel: Code With Yousaf

Views: 9,358

Keywords: login logout in react js, login logout, login in react js, logout in react js, logout in node js, login in node js, login logout in react node mysql, react login, login in react, redirect after login and logout, how to do login and register authentication in react node js, login logout in mern, admin login and logout in node express js mongodb, react user login and authentication with axios, admin login and logout in node js express js mongodb, admin login and logout in node

Id: GzlQS-0eWEI

Length: 40min 39sec (2439 seconds)

Published: Sun Apr 02 2023