#5 How to do Logout in React JS || Keep user logged in React || Stay Logged In || React JS || #mern

hello guys welcome back to the debug arena in this video I am going to implement the log of functionality in our react app this is going to be the seventh video in my login system playlist so if you are a beginner and want to learn node.js along with react and mongodb then watch all the videos in this playlist I am definitely sure that this playlist will help you to learn node.js react.js much better this playlist is must for the beginners and also if you are following this playlist then don't forget to subscribe to my channel now let's move on to logout functionality now let me first login so when I click on submit we get a pop alert login successful and when we click on OK we get our user detail so let me first show you that how we are actually login in this is my app.js inside login component what I am doing I am calling this handle submit which is called on submit function here I am sending the request to the login user API and also passing the email and password in response we are receiving a data if the status of the data is okay then we are alerting login successful and we are storing the token which is generated in node.js let me show you here so you can see here we are receiving email and password doing validations and we are returning here token JWT token which helps to get the user details so if you are not following my tutorials then it might be hard for you so it is recommended to go and follow my tutorial or you are like intermediate developer then you can understand this easily okay so here I am storing the token to the local storage and after that I am just navigating it to the user details inside user details I am again calling an API and getting and with the help of the token I am getting the user details which is this name and the value so to log out what I will do I will just delete the token and navigate the user back to the login page so let's apply that the first thing I will do is to create a button so I will give you a br tag now I will create a button log out just save it and you can see ah it is pretty ugly let me make it good I will just copy the class name yeah now it's good now let's make a logout function the first thing we will do is to clean up our local storage so I will do window dot local storage dot clear this is the function to clear all the values inside the local storage you can also clean only token but whenever you are login it is good practice to clear all the things and now I will just navigate user to my login page and what is the name of my login page it is sign in so I will just copy it if there is mistake in the name it will not work keep that in mind yeah now I will just go here let me also show you the token here in application.js you can see here the token is available now when I click on logout okay it's not happening okay sorry I have not linked it let me just call it now it should work so I click on logout and you can see here that my token is deleted and I got navigated back to the login screen so in this way you can perform the login and logout functionality let me show you that again but there is also one issue with this you can see here when I log in yeah I have been logged in again and the token is generated if I click on logout the token will be deleted and we will be navigated back to login page but what if I open the same website on another tab yeah I am getting the login screen but inside the application the token is already there so we have to handle this also like if user is logged into our website then you should be logged in until he clicks on the logout button or the token is expired I have not covered the expiration of the token yet but I will cover it in the next video so stay tuned for that but for now we have to handle this that user should be logged in until he click logout so let me show you sure can we do that [Music] to solve that first thing we have to do is come to the login component come to the place where we are storing the token copy this line paste it here now we will create a new variable logged in and we will set it to true so whenever user click on the login button the token will be stored and a variable name logged in will be set to true whenever user clicks on the logout button all the local storage values will be clear so now what we will do we will just go to app.js here we will create a variable name and here we will store the value of logged in okay so here we will get whether the user is logged in or not you can see here that this is the component which is render first when our website is loaded so that's why we are getting the login screen whenever website is first loaded now we will give condition here that is logged in is equal equals to 2 this means that the user is already logged in because we have stored that in our local storage so if it is true then we will show our user details screen otherwise we will show our login screen whether it is working or not let's go here okay set item on storage two argument required but only one present let's see [Music] where I had made the mistake set item okay and I think in app.js okay okay here we have to write get item okay no issue [Music] I will just clean up your inside application you can see nothing is there now I will try to login when I logged in you can see two variables are stored token and logged in whenever I will click to log out this board will be erased now let me open this again and you can see here that our user details screen is coming here because this is already stored so our react will first check that if is logged in is true then he will show our dashboard screen Let Me Show You by deleting this when I click on logout and now if I come here then you can see the login screen so in this way you can implement the log of functionality and handle the issue that your user should be logged in until user press the logout button that's it for this video in the next video I am going to show you that how can we expire the token and if the token is expired then the user should be automatically logged out so we will cover that in the next video do share this video with your friends and tell them to learn react if you found this video helpful then please like share and subscribe thank you

Channel: The Debug Arena

Views: 7,401

Keywords: How to logout in react js, login and logout in react, logout in react, how to solve login again after page refreshes, keep user logged in, don't have to login after each refresh, login auth in react js, login auth in node, logout auth in react js, logout auth in node js, logout in mongo db, stay logged in, learn web development, login system a to z, login system in node, node react and mongo, mern, login authentication, logout, logout in js, logout using localstorage

Id: SqHoqeuZqHk

Length: 8min 28sec (508 seconds)

Published: Mon Dec 19 2022