Keep User Logged In using React JS | Logout User in React JS

hello everyone this video is about how to keep user logged in using react.js for the first first time whenever we log into the system our website for the second and other times we should be logged into the system directly for example let's check this demo I will log into the system so then Press login so I have logged in successfully okay login but if I come again to my website again I'm on the login page it should not occur I should move to directly to the home or to the dashboard page so for this reason let's move to the hour code so this is our code okay these are the routes and this this is the login component and this is the dashboard and this is the sign up so the first step is that whenever we log into to the system we should store our variable inside our local storage let's come to the login component yeah it is like in component so whenever we press this login button so we will call this handle submit this function okay so here I will just write here inside this method yeah here somewhere I will write I will just use a window dot local storage that's it item and assign a name to that the key key is like La is logged in and assign value that is true it means that the user has logged any restore it this key inside our local storage and the second step is that whenever we move to the routes okay so we should check this variable if that was logged in so it should move to the home page otherwise otherwise it should move to the login page let's compare to the routes and just try it here first I will just read this is logged in property this value const log in is equal to window dot local storage item is logged in it will lead this property okay is logged in so now here if that was true log inverse 2 login was 2 we should move to the home page otherwise we should move to the login page this was the second step and the third step is whenever we log out from the system and we should remove that property from local storage so for that let's move to the home page this homepage here we have a logout button so whenever we press the slack out button we will call this method okay logout so here I will just remove that item let's write window dot local storage dot remove item is logged in it's correct here is logged in yeah that is the key so now let's check it okay whenever we in log out from the system we should move directly to the login page again so for that let's import navigate use navigate from react Auto down and create an instance of that instance of that is equal to use navigate and here we will move to back to the login page navigate login it will go to the login route right now we don't have login but let's move to the home page so these were three steps let's come here to the our Chrome browser and let's replace it and let's login now gmail.com 345 and let's Press login see we came to the dashboard okay before whenever we were refreshing for the second time we were moving back to the login page but let's try it now what happened see we came back to the home page okay we are on the home page we are not directed to the login page button let's press the logout button why it didn't work so let's come here to the button on click log out yeah call that and into the local storage remove item is logged in logged in spilling is okay is logged in navigate to Home Route we are at the Home Route right now okay we are on the same page but let's come here again to the local storage here on the login page again okay it means that the value has removed from local storage so it was all about using reactors to keep user logged in a simple these are just three steps whenever you log in just store a variable inside the local storage and whenever you log out just remove that and then the route just change your route if that was logged in move to the home page otherwise move to the login page back so it was all about this I hope this video was helpful for you if you like this video don't forget to subscribe our YouTube channel thanks for watching

Channel: Code With Yousaf

Views: 5,654

Keywords: react, react js, react login, react tutorial, react auth, react user login, keep user logged in react js, react authentication, react tutorial for beginners, how to keep user logged in react, react get current logged in user, login using local storage react, react router, stay logged in, react native user login stay logged in, react router tutorial, react login & register using json server, react authentication using json server api, login logout in react js

Id: ykoVJPVaSJU

Length: 5min 57sec (357 seconds)

Published: Wed Jul 19 2023