Keep user logged in || Switching between two navigator || AsyncStorage || React Native Application

hello guys welcome to the debug arena in the previous video we have seen about async storage in react native now apply that in some scenario suppose we want a user to stay logged in in our react native application like whenever user closes our react native application and opens it again he should be logged in in our application so let's see how can we keep user logged in using async storage let's see the code this is my app.js and here i am handling this uh login screen navigator and the first component of the login screen navigator is my login screen now first have a look at the navigation like here i have created two navigations two navigators two stack navigator one is first in navigator in which i have my home page and one login screen navigator in which i have my login page so what we will do we will get variable name keep logged in using async storage and if user is logged in then we will show this uh if user is logged in then we will show this first screen navigator and if user is not logged in then we will show login screen navigator so the first step is go to your login function and inside that store a variable in the previous video i have already explained it that how can you store all this and i am giving variable name as keep logged in okay and then store is it as true now if you remember that we have to store this boolean value in json.stringify format to now our first step is done now let's access it in application.js now here i will create and variable [Music] is log you state to false and now let's create a function and inside that get async value get item keep logged in now you can write it in try and catch okay [Music] now let's store it in this way in this state okay and don't forget about that it is an asynchronous method so you have to use async and have it all this thing i have explained it in previous video so you can watch that and now let's save it and we are getting some error okay confirming variable shape data oh sorry i am much more familiar in writing code in a class component that's why it is happening okay we drive data now our first step is done let's console this data we are getting from using storage and in the console we can get it as true okay no we are getting now let me make some mistake go to login okay yeah let's okay i made the spelling mistake here like you have to you have to remember that uh keep the variable name same okay now it is good now you just have to add condition here that if user is logged in like is logged then show first stack first screen navigator which is my home screen otherwise so login screen navigator let's remove this and at the moment when i hit save you can see that the home screen appears now also make changes in the logout function in that we have to clear the value so here keep logged into also i have token here that too and null and just navigate it to my login screen now you can see that we are ready now i will show you here the moment i've hit log out just refresh it you can see that i will get login screen only okay we are getting a login screen now let's try by logging you can see that we have been logged in successfully let's close the app open it again you can see here that we are getting our home screen so in this way we can easily manage our user logged in using async storage okay one more important thing you can see here we are at the home screen but when we press the back button it is going back to the login screen so in the next video we will be handling this like it totally disturbs the flow of our application so we want that whenever user is on the home screen and if the user presses the back button then there should be an alert saying that whether you want to exit the application or not so this thing we will be handling in our next video till then stay tuned and if you found this video helpful then please like share and subscribe thank you

Channel: The Debug Arena

Views: 12,282

Keywords: Keep User Logged In, Show Home screen is user is already logged in, Handle app after recent tab is closed, Switch between two navigator, AsyncStorage in React Native, React Native, Handle navigator, react navigation', login in react native, handle login, Async Storage, Boolean in Async Storage, Learn React Native, componentDidMount, Stack Naviagtion, React Navigaton, stay logged in app, keep user logged in after app is again started, stay login after app is restarted, login

Id: GXlBvRmwwRQ

Length: 7min 3sec (423 seconds)

Published: Mon May 30 2022