How to keep user logged in React JS || Stay logged in using window.localstorage() React JS Tutorial

hello guys welcome to the debug arena in this video we are going to see how can we avoid logging to our website each time we start our react js server or each time we visit our website so what does it mean let's see with the in help of an example this is the website which i am going to explain this and also solve this error now i am going to log in to this website and you can see here i have been logged in successfully and this is my profile homepage but if i close this and visit my website again you can see that login page is appearing again so we have to fix this thing like if user has been logged into our website once then he should remain logged in until he presses the logout button let's start with the code you can see here currently i am in the route.js so to solve this there are only three important steps the first one is in your login function the second one is in your logout function and the third one is in your routes so you can see here this is my home page homepage which is current login page this is login page and the other one is my profile page so here let's go to the first first step which is in our login this is my login function here i am handling the user data user id and user password so after all the validation like user id and user password match you have to write this window. local storage you have to ignore this you don't need to write this this is for my code local storage dot set item [Music] now if any variable name is logged in to true now what what i am doing here is whenever user is successfully logged in then this will create the variable name is logged in to true and this variable will be created in my chrome browser i think i will be i will be showing you in the next step so let's wait for that so our first first step is done you have to just write like this now let's go to your sign out function there in login we are creating a variable and setting it to true in log out we are setting that variable to false or you can say or you can say that we are deleting that variable dot remove item just copy that this variable name should be same otherwise it will not work so you can see so our second step is also done now let's go to the routes and in routes let's uh get that item and you can see here in this way you can get item here i had created a variable name login just window dot local storage get item is logged in now here i will be getting this variable and i am consoling it okay in console you have to go to here and go to application inside application local storage and in local so you can see http localhost 3001 this is our website uh currently website is running and you can see here this other thing which has been stored in our uh chrome browser so let's delete all this and refresh it you can see we are getting login as a null now i will be login to this website login and now it has been directed to the profile page and you can see that login is set to true now if i close this also and go to here like visiting in another tab previously yeah yes it is showing login page only but inspect if we inspect now that login will be true here and also you can see here in application in application local storage you can see here that is logged in is true because we haven't logged out yeah we had just uh opened it in the new tab so let's handle the third part now what you have to do is just write a ternary operation here logged in if login is true then go to user profile this is my logged in and if login is false then go to home page save this come here refresh it and you can see that i have been logged in now just open it in another tab you can see here that we have been logged in here also okay so in this way we can you can fix this issue so if you like this video helpful then please like share and subscribe thank you [Music] you

Channel: The Debug Arena

Views: 26,658

Keywords: How to keep user logged in, Stay Logged in, in website until he presses logout., keep user logged in until he presses logout, session storage, localstorage, react js, keep user logged in react js, react native, web development, chrome localstorage, console localstorage, window.localstorage, Redirecting Page After Successful Login and Logout, login and logout react js

Id: zXORFQvdxR4

Length: 5min 25sec (325 seconds)

Published: Fri May 13 2022