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

hello guys welcome back to the debug arena in this video I'm going to apply one functionality through which when user will log to our react native application he will be navigated to home screen page and if user try to restart our application then also he should navigate directly to home screen rather than going back to the login screen so we are going to fix this so first let me show you the problem you can see here this is my application where I have implemented registration and login by integrating nodejs and mongod Deb with our react native application so if you also want to learn this then you can go and check out my previous videos so first I will try to register one user name will be takur okay I'll click on register you can see I'm getting registered successfully now I will try to do login and when I press on login you can see I'm getting the message as logged in successful I'll click on okay and you can see it has been navigated to home screen and here I'm getting all the users details now I will try to restart my application like this I will close the application we'll open the application again and you can see we have logged in previously but it is again navigating us to login page so we have to fix this issue to fix this issue first we have to go to our login page and let's go to the function where we are handling the login your login function may be different but you can apply the same logic so this is my login page and this is my login function and here I have called this xos request and this is my response after the user have been logged in successful here I am alerting logged in successful and here I am storing the token with the help of this token I am getting the users detail inside home screen page if you want to learn this then you can watch my previous videos so now here the first step you have to do is to install this package name as react native assing Storage assing storage so you can go to your CMD run npmi add react native assing Storage assing storage then I will come to my login function then after the user have been logged in sucessful I will come down and write here assing storage. set item this will create the variable inside our assing storage and this assing storage will be stored in our Mobile Local I will pass my variable name which will be is logged in will be set to true I will not set true directly I will just json. stringify it so our first step is done now let's go to app.jsx where we are going to get this value so this is my app.jsx so I will come to my function app and here I'll just create a new function name as get data we make this function async here also I will import that async storage I will copy this come here paste it it will come down and here inside this function I'll create a variable name as data is equals to this will be await and it will be a sync storage there we have set the item and here we will get the item and we will pass here the key and the key is is logged in this name should be same as this name otherwise we will not be able to get that so I'll copy this and just paste it here now I create one state here name as is logged in I will pass here use State and inside this I will pass it as false whatever data we will get here whether it will be true or false we will set this data inside this is logged in and I will pass this data for now let's console this data also so that we will see what we are getting true or false now I will call this get data inside my use effect so that it will run every time now the second step is done now let's hand handle this like if our is logged in is true then we will navigate user to home screen if is logged in is false then we will navigate our user to this login screen you can see here this is my login Navigator and if I come up this is my draw Navigator so these are two Navigator which I am using like this is the Navigator responsible for all the screens inside home screen and this Navigator is responsible for all the screens before logged in okay so I will also create a new function here just like draw nav so I will just contr X here I will come up here same like draw nav what I will do I will come here and login nav inside this I will pass con stack create native stack Navigator done and I will paste that code so here this is my login nav and this is my draw nav these are the two Navigator which I have to show so I will come inside this function and here inside navigation container what I will do I will just write here is logged in if if my is logged in is true then I will show user my draw nav it is false then I will show user my login now okay I will save this okay I will remove this also and this step is also done now the only remaining step is that we have to implement this logout functionality so for that I will go to my draw Navigator so I'll come here and all my draw code is inside this draw content because I have made this draw content manually like customize that's why it is separated here so I will come here and you can see this is my sinoid function so inside draw item I will just write here on press and I will Define a function here name is sign out go to top and here we will create that function name as sign out inside this what I will do first I will import this Asing storage and then I will try to set item and I will set our variable which is is logged in and I will set it to null what this will do whenever user will try to click on this sign out button it will make this variable as null that means this statement will be false here you can see and it will show us this login now I also have another variable which is known as token so I will make that also null like this and now once user press on this side out button I have to navigate to my login page for that I'm going to use react hook name as use navigation so I will scroll up I will copy this use navigation I will come here I will paste that inside my main function then I will come here and write navigation do navigate and in this I will pass my location which is login user and I will hit on Save I'll click on the sign out button and you can see I'm getting this message action navigate with payload name login user doesn't exist so let's go to my app.jsx let's go to stack Navigator and you can see here this is my stack Navigator and there is nothing like login user so let's create that so I will write here stack. screen and my screen name will be login user in component I will pass my login name this login name I have just created now okay now I will save this then I will come to my draw Navigator draw content okay now I will try to do login so I will write here ad3 I'll click on login and you can see I've got logged in successful I have been navigated here now I will try to reload my application as for our implementation we should directly be navigated to my home screen so let's see whether it is happening or not so you can see I have been directly navigated to my home screen there we have seen that login screen but in that case we have to use the loader to hide this transition now what I will do I will click here I will try to do log out and then reload our application so I have been logged out now I will press R here and now it should directly go to login screen and you can see it is totally working fine so this is how you can control whether to show your login screen or your home screen that's it for the video in the upcoming videos I'm going to cover this loading thing also I'm going to cover this functionalities if user is at the home screen and if he presses the back button then he should not be navigated back to the login page because that is illegal he should get the message if you press back once again your application will be closed so we are going to cover that functionality in the next video also instead of alert I'm going to implement the tool message in our application so stay tuned for that that's it for the video If you like this video then please like share and subscribe thank you

Channel: The Debug Arena

Views: 2,066

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: MGtpYbnCWcI

Length: 8min 46sec (526 seconds)

Published: Mon Jan 08 2024