React and Node Authentication and Authorization with Session and Cookies; Login/Register Pages

hi everyone in this video we will perform authentication in authorization okay both we will perform Sign app registration and sign in login page okay using react.js with node.js in mySQL database so whenever you will perform something that is okay if we would like to access our home page so we cannot access that okay we will come back to our login page because we are not authenticated we are not authorized but let's register first of all in account for example name is sub 1 and email Yusuf gmail.com and fast forward one two three four five okay let's sign up CB sign up automatically we came to um login page so let's login now gmail.com one two three four five that's latency we came in a logged in use of one our username showed to us okay so it is our username which has shown but when if we now to access our login page we will directly come to our home page because we are already logging the session in the cookies or sit already okay so we will perform these functionalities with session in the cookies okay so let's get started hey everyone this video is about authentication and authorization and react is with node.js in my SQL database the authentication means that whenever we would like to authenticate a user in which that is he existed in our system or not but the authorization is that he has the rights to access this page or this component or these resources or not okay for example I would like to come home is the the user is authenticated but as he has the rights is he authorized to see this webpage these component or these resources or not so now let's move to I have already created the login into sign up page because because we will not go through the front end we will go now how to submit for example register this account and how to again login and check that is that exist or not okay let's see first of all the code of this this is a sign of page code okay just simple okay this is the sign of page which I have written I use bootstrap for the designing okay very simple and this is the login which I have used okay and also I have used react router for routing okay or slash home sign up is login okay so now first of all let's come to the sine FH we should register our account in the database mySQL database for the MySQL I'm using this okay PHP my admin some server I would like to store my uh users here in the sign up I have a table at uh database name sign up okay let's check that come to the sign up uh I think I created that in the yeah the student we will come to the student table database into the user um actually I will create this in the user to the in sign up yeah I have created the users table inside the sign up database so now let's move to our sign up page and to register a user in this table okay users right now we don't know ordinary card inside this so let's get started so first of all whenever we enter something or some video in this input field in the username so that should be stored in a variable okay we have created this video object here and we have three pairs in that name email and password whenever we enter the videos here so it will call handle input method okay Enter input method and it will store update this various object okay it will for update that object to sit video it will call this function and then update that the previous video with us then it will update even.target.new for example the name is name with us so it will update this name okay and assign the event.orgit data video that we are writing in this new input field same for the this email and the password after our storing our videos inside this so now whenever we press this submit when submit button okay uh this submit button okay sign up in your refresh this submituated we should pass our data to the server side or to the node.js to show that in my MySQL so first we will create the environment for our server side at the back end okay for the node.js for that environment so let's come to the console let's create a new one uh inside this I will create first of all a new folder CD server sorry yeah new folder has created so I said that I will write 10 pm let's move to the CD server and APM in it I can avoid it will create a new package.json file inside this see let's see it yeah that has created so now let's install a few packages so first of all we should install npm install MySQL Express expresses node.js free mode which we will use to for inside for the backend language okay and in my SQL MySQL is our database after that course the cards are cross origin okay for example we are accessing our server side code inside our front end so we should use the course for that and also not one nerdman is used to refresh our server-side code automatically whenever we make some changes inside that all these first yeah these are installing yeah the packages are installed inside that so now let's create a new folder inside this a new file sorry the file would be like maybe that Js okay we will use this to write our code inside this okay we will write all our roaches your express code inside this db.js so the initial things that we should write in this DB that is file those are let's close this first we should import the express to import the express we can right now all right like this okay const x-rays is equal to require threes partition it is a traditional way so to write like this okay import Express from Express so let's check it first of all is that working out of that lesson sorry we should write const is equal to Express here we should assign a port number our server will listen and portable 881 so let's create a function and inside that we will console DOT log server I will commit this one and I will learn our application let's come here and npm start uh sorry house we should set up our nerd mode so for the node one I will come here and I will light start no demand DB dot Js let's write in game start ESC connected to the server so now let's come here and just coming down this and uncomment this see we got an error cannot input statement so for that we will come here and here you will like type module let's see connected to the server so that is working that's fine let's close this and let's remove this one let's import the MySQL log import my SQL is equal from sorry my CTO import cars from course and after that let's use our calls half dot use curves should call that and also whenever we pass data to this debit address file that should be the first the GC format so for the three values of dot use I express.json yeah we did the initial things so let's create connection with the my SQL database so for that we will like count DB is equal to mySQL dot create connection and here we will pass the properties the properties of the first property is the host we are working locally so localhost and with the user by default the user with means root and the password I didn't set up the password so I will leave it empty and the database the database without the sign up literally saw that so after creating the connection so now we will create our apis okay so now let's come to the front end the sign up page so whenever we press the submit button we will call the function so let's come here on Ender unsubmit you will call handle submit it will call this functions let's create that information const handle submit equal to we will get an event and as it should be the same function with us so here first I will like even dot prevent default submission and after that far to post the data we believe is access library for that let's import it start we would like to post the data okay the data forum and here our URL that would be let's come here to localhost our food server Port was 8081 let's copy this and we should go to sign up route sign up okay after that we should pass our data with it the data is the values that we have okay this object that we have created this one I will pass that that then we will get a response if we got any response so I will just go to back to the home homecoming I will go to the login page so to go to the login page I will use use navigate Hook from react to turn down so to use that let's write const navigate is equal to use navigate from react router down to navigate to other component I will like navigate I will move to this home component okay this route we have already played this route here okay we will go sit down that cage if there was any error so cancel that so let's log here it's okay now enter submitter it will call what let's come here to the db.js and inside that we will now create this API okay sign up so let's create that app dot post we will create for the Post one and our route would be signed up [Music] here we will get a function and we will get a request to parameter request in response inside it we will let our query now to const sqvl is equal to and we will insert insert into the database the table name was users and we will insert into the name email address where I should write name username and email password let's check our table a username email and password come here back in the videos would be let's pass this time for videos I will just write the question mark nature I will attach that so now let's run our qddb so first we should get our values that we passed from a front end so for that I will like to const they will use request third body dot name first one then request added body dot email start body Dot [Music] yeah let's see that yeah name email and password after getting that let's run our query like DB object dot DB dot query and first we will pass our SQL statement then we will pass our values and hit array and after that we will get here a callback function so we will get an error and we will get the result there was an error for return result.json will pass a message here not yes we will just return our result foreign we will print the result also here okay so to print the result we will first trap it in and I will write here cancel Dot Lock result let's come here and come here to the sign up I will enter a name and let's go to the console first what we are editing the result come to the console let's press the sign up button came directly to the home component and we got the result this is the result that we got let's check it yeah we got status okay and what is in the data side in the data we have affected rows one okay it means that as a record has inserted okay so let's check it yeah let's check that inside the database let's refresh this see one menu record has inserted and we should go back to the login okay now to the whole component we should go to the login so we never wake up to the login page yeah means we came directly to the login so then we should write our credentials to log into the page okay yeah here we should write our credentials let's come to the login so here again we are storing our data in this object let's check yeah here we are storing our wages image rights someone in authentication is an email and password so again whenever we submit here um this submit button we should call we should just check that is the wallet or not so for that let's come here we will call on submit handle submit let's create that cost handle submit is equal to again here let's prevent image dot prevent fault and here we will call again access start to post and this time we should go back to copy this route and URL and paste it here but we should go to login after login we should pass our values after fasting again we will get a result and we will print that console.log result and also we should navigate let's create a navigator units navigate and here we should go back to the home page Dot Page it was an error console.log here so now let's move back to our server side and here we will write an API for our login after that post API would be again here we need to request in response let's come here and we will write again our query comst SQL is equal to now we will check that okay we will select select steric from users where a newer user name is equal to with question mark and password is equal to neither not email and also the password okay so now let's write here first we will get our yeah we'll directly run our query divided query first write our SQL query then we will just try to request start body dot email and request dot party dot password after that you will get an error or Reason let's run that if we got any error so we should return laser.json Timber else we will return no we will check now the result if the result dot length was greater than 0 which means there were a record was existed so we will return result again equal to true else turn is false or we can return a message so let's check it now let's come back to the login here we will check April result dot uh data DOT log in if it was true so then we should go to home page where else we will display a message hello to no record yeah DB login okay yes so now let's check it now let's come here to the login and here I mean light first I will write a run email I will just remove this one from that all right let's place the login see no record existed again okay let's add this one here and Press login uh gmail.com let's check the console what we are editing in the response come here to the console we got an object in the data we have the login right now that is false y come here to the dp.json so we have written our query here is the mistake that we've written twice the password now login C that is correct that is okay we came here to the home component so now let's move to the session and a cookies site and also then we will check for the authorization uh whenever someone would like to come here to the home component if he was authorized means like int so he should come here otherwise he should go back to the login page so for the first we should install a few packages let's move to our yes it is we are at the server side yeah here we will just uh let's go create a new one and here I will just go to the server inside that I will install and game install Express session and after that body faster in cookie parser these are for the session and cookies that we should install so let's preset and install them yeah they are installed so for the selling themes and receive theme so let's first of all importing import session from Express Station and also import cookie parser from cookie parser after importing names so now let's use them let's come here after to use the parser and after that let's use session and he said that we will pass a few properties so I have added these properties okay secret it is a secret key okay which will be used to sign an encryptosition cookie receive and then see one initialize this should be false because it will help you in performance and to save the storage because this means that if there is no modification so it should be first we should sit in both of them to fall okay and the cookie the cookie we should sit secure first because we don't use https right now and the max Edge it means that it will expire in one day it is one day millisecond deck if we multiply it okay so now let's come here down to the login so whenever we log in a successfully so we should set our session here let's write request session uh that we will assign username is equal to uh we will assign we can assign email also that we got here okay and but we will assign the username that would be from result .to username so we'll be assign the username to the session but reset is in a retyped as we should write the first record that we are getting okay they take the username of that and assign that to the username so let's first of all check that in the console console .log are we getting request dot session that username are we getting it or not so let's come here and check it here in the server so let's log into the system yeah let's check it yeah we got our username okay it is in our session so now let's pass our username also here request dot session dot username let's get it other login page okay whenever we succeeded so here we should so to access change display that name we should display that and home page so we should remove that from this place we should back create a new route yeah because we are not cannot access that here so let's move to the home component let's come here and come here to the home company here we will use that if we were logged in so we should display the name and also um if someone would like to access directly the home company so first we should check that is this user like in or not authorization should be checked for that so let's use use effect hook and we will call a route here it's you can see here so here we will use axis Library access dot git and here home component and then we will get a response if there was any error consoled DOT log the error but here we will give a result and by default first we will cancel clock the result let's come here to the db.js and here we will create a new route that would be up Dot git that would be home and here we will get request and response and here we will check if the user was logged in so we should move to the home company to display the name let's write it request dot session dot username was exist so then we should just the result return result Dot uh Json valid is equal to with true and also username requested session dot user else we should return result.json wallet first yeah so let's move out to the home component yeah first we will just display that okay we will display that and the console let's come here let's move to the console just come here to the console we displayed the object we should import body parts or import body forcing from body parser and let's use that up dot use body first cell dot Json and one thing else that we should use my hair to the login oh we didn't see Tower path here sorry let's just refused let's copy this and let's come here we will move to this server and let's check it now see we got this result right now okay let's appreciate yeah so we got this result okay so let's stick it in the data we got that valid files okay it means that the session is not valid we didn't set that and let's print here if the session was not valid so then we should move to the uh back to the login page okay so we will just come here and right into result data uh that valid if it was true so then we should just sit here we create a variable advanced name set name go to use state hook and we will set our name sit name result dot data Dot username that we set okay else we will navigate we will use navigate hook again it is equal to use navigate and here navigate login we should go back to the login inner so let's display the name welcome foreign page okay so let's log in yeah let's press the enter see uh we came back but the session is didn't sit okay we have problem with our session here yeah the problem is that we should add here to the course the origin we should add that here let's write origin that is the localhost so let's come here copy this and paste it it should be in the array let's remove this this is our origin and the methods that we would like to use tools are post indicate method that we are using and also um credentials credentials are true for this okay we should specify this in course and also we should write here in the login section here we should write axis that defaults that with credentials true by this it will not work okay as we saw previously it was not working so now let's check it yeah so whenever we log into our system for let's login see the message has printed for us so let's appreciate again uh the session has gone the cookie so let's here that we have the cookies or not yeah we have the cookies [Music] we have the cookies so let's check it here and here is it everything is okay let's check it login so let's copy this access.default dot credentials we should specify that in home page also because we are accessing with this route also okay so let's check it now let's back to the login let's appreciate again yeah it's okay it is printing our values for us and also we have the cookies the cookies are okay but before we were not we didn't use this access the report with the credentials okay if you would like to go to login now so here we should specify if you were logged in it means that the cookies were sit so we should go back to our home page let's perform this here and yeah in the login section here we should specify uh use effect also let's just copy this use effect copy this say base to two we should move to home page and then result the data wallet if your wallet so it will be okay if not valid the initiative goes to let's import use effect and also one another year was uh yes let's remove this name if you were valid so we should go to navigate home page so let's try to login because we are already logging so we should go back to our home page okay if we remove our cookies so let's remove the cookies let's come here to the application to the cookies let's delete this delete okay this one always move to the login you should come back to our login because we removed the cookies so let's login back we would like to try yeah it's okay so it was all about sitting there session in cookies in reactors in node application and my SQL database if you like this video so don't forget to subscribe our YouTube channel and thanks for watching

Channel: Code With Yousaf

Views: 25,146

Keywords: authentication, react user login and authentication with axios, register and login in react, react login and registration authentication, node js authentication and authorization, authentication with react, jwt authentication, react authentication, react, how to do login and register authentication in react node js, login authentication using nodejs and mysql, react registation and login in hindi, react js login and registration form, login and registration form in react, reactjs

Id: b4H9EOKc910

Length: 38min 55sec (2335 seconds)

Published: Sun Mar 26 2023