How to keep the user logged in | React Native Login System #6

hello there welcome to another episode of to the point good in this episode we will look at how to keep a user logged in in our application even when the app is closed or refreshed we will do this using async storage and also context so let's get started we will start by installing a couple of packages first of all we have to install async storage [Music] now in addition to async storage we install expo uploading as for context we'll get it from react so the concept of what we are going to do is that whenever a a sign-ups or sign-in we are going to store all the credentials of the user in async storage now whenever the app is starting that is when it has been closed or refreshed we make sure to check async storage whether there are some credentials existing already if their credentials exist already then we'll fetch those credentials and use them to populate our welcome page that is the user will go directly to the welcome page should allow you to enter the details to login again now what you are going to do with the expo uploading is that you're going to use it to put the application on hold but you need to display the splash screen whenever you're trying to fetch the data from the async storage so if you are not done fetching the data from the sync storage the app will not start but rather show the splash screen for contest we are going to use it as a means to pass the data to all our components so once you're able to fetch some details from the async storage we are going to put it in the contest so that it can be accessed in any component that i want to use the data in so let's head to the app.js file and import the expo uploading and also async storage [Music] now to monitor when our app is ready to launch that is when the a6 storage has been checked successfully we used it here so let's import the ust hook from react [Music] we call our first state app ready [Music] and we'll give it an initial value of force now if our app is not ready we want to return the uploading component [Music] now this component will take a few properties the first property is started sync this will take a function that should run when our app is open [Music] the next property is unfinished this also when the statistic function is done now for the unfinished we use it to set the app ready to true [Music] now on the last property is on arrow now we will use this to create a one whenever there is an error now for the statistic we'll pass a function that we use to check the async storage for any credentials that are existing so let's create the function we'll call it check login credentials [Music] and we'll pass it to the statistic [Music] now we use the get item method on the sync storage now we pass a key to it this will be the key that we use to store our credentials in the sync storage now for this app i'll cue the flower crib credentials this will return a promise you can go ahead to handle the catch block now in the damn block we receive the results now we check if the result is now or it has some content now if the result is not now you want to set the value as the state of our application so let's create another state variable or call install credentials [Music] so if the result is known now we set the credentials to the result now for async storage we cannot store anything apart from strengths in it so even if we store an object in it it has to be stringified so whenever you're fetching the results from the sync storage we'll make use of json.pass to pass it back into an object i'll see the result is now we just set the stored credentials to now now once we have done this we need to make sure that the value of the store credentials that we have here can be accessed by all our components and that is where the contest comes in so let's go into the components directory and create a component for our context we will call it credentials contest inside it will import the hook create context from react [Music] now let's create a contest by using the hook [Music] now they create contests who could take an object and for now we pass two parameters to it the first one will be our stored credentials and the second one will be a method to set the values of our stored credentials we use the same name as the state variables in our app.js file for now the initial value just be an empty object let's come up to an empty function body [Music] now let's import the credentials context in app.js form [Music] now to be able to pass the values that we have into the context we make use of the provider that comes with contest so we create a wrapper credentials contest.provider and wrap it around our root stack um [Music] once we do that we'll be able to set the initial values of our contest this will take a value property and this value that we passed should be of the same format as how we defined it while creating the contest so you pass an object of the stored credentials and set stored credentials [Music] now all this we are doing should not affect any of the ui that's why i'm not worried about refreshing it now once you've passed it to the root stack you want to access the value in the root stack once we get hold of the value in the root stack that will determine what we are going to show to the user so let's visit the root stack so at the top of the root stack we need to import the context and to be the same as the app.js [Music] but in this case we need to go back a directory once we have that if you want to assess the values of a context we need to create a consumer and just like how we use the provider we are going to wrap the navigation container in a credentials contest.consumer this will make it possible to consume or assess the values that you have stored in the contest [Music] but unlike the provider the child of the consumer should be a function [Music] now as argument we can assess the values in the context in this case the stored credentials so we destructure it once we've done that we can pass the navigation container as the child of the function [Music] now we've gotten to the most important part now what we are going to do is that based on the stored credentials values that we have here if any tangible value exists in it we are going to move straight to the welcome screen otherwise we return the login and sign up screen to the user so inside the stack navigator we will check for the value of the stored credentials so if the value has been set will return the welcome screen [Music] otherwise we return the stack of the login and sign up screens so we wrap this in a fragment [Music] once you've done that whenever the stored credentials has any tangible value the app will move straight to the welcome screen but if the value is now the login and sign up screen should be presented also since we want to set the values into the async storage and also the context whenever we sign up or sign in we need to add that feature to the sign up and login screens so let's visit the login screen and implement this in storage feature so once again we import essence storage and also our credentials contest we can copy them from the app.js [Music] [Applause] for the credentials contest we need to go back a directory now below the google sign-in let's create another function we'll call this persist login [Music] inside this function we will set our credentials into the sync storage and also update the value of the context so as parameters we'll first take the credentials also we take the message and status now once the credentials is passed to it we will call the async storage now we use the set item method the first argument we provide is the key and we have to make sure that is the same as the one we used in our app.js [Music] as a second parameter we pass our data and that will be the credentials i will stringify it using json [Music] this will once again return a promise [Music] and we'll handle the catch block as well for the arrow we'll log it to the console and also display it using the handle message [Music] now once we are in the dem block it means that everything was successful so we can go ahead and set the success message and also update the values of our credentials contest [Music] remember we are getting this function from the contest but we have not defined it yet so let's do it to do that we'll make use of another hook which is known as use contest it can be used in place of the context consumer in our component here it will be cleaner if we make use of that instead [Music] so before the handle login i'll make use of it so from it we can destructure our context values which is the stored credentials and also set stored credentials [Music] [Music] now as an argument we'll pass the credentials contest that we imported now we need to make use of the persist login in our handle login and also handle google sign-in so inside the handle login add the portion where we navigate to the welcome screen will make use of persist login [Music] the first agreement will be the data and follow it with the message and status [Music] [Music] now once we do this we don't need to navigate to the welcome screen manually once our stored credentials value updates the stack will automatically display the apple press screen which will be the welcome screen now i will do something similar in the handle google sign-in once again add a pointer navigate to the welcome screen [Music] the first argument will be the data so we can just cut and paste it we follow it with the message and the status [Music] once you've done that you can get rid of the handle message and also the set timeout good now i'll do something similar for the sign up so we start by importing async storage and also our credentials contest we copy it from the login.js file [Music] also we import the use contest now from the login.js again let's copy when you created the contest variables [Music] once you have done that let's copy the persist login function it's exactly the same so there is no need to type it again [Music] now at the portion where we navigate to the welcome screen will do exactly the same as we did in the login [Music] but in this case we get rid of the index and also the navigation command now once we've done that everything should be fine but now this creates a problem for the welcome.js file if you remember we used to pass the data as an argument to the navigation.navigate command that is the data that will be used on the welcome page will be passed as we are moving to the welcome page but now we are no longer moving manually to the welcome page this means that the welcome.js file should also tap into the contest and access the values directly from there so let's go to the welcome.js file and give it access to the contest so once again we import async storage and also our credentials contest [Music] no i copied the wrong thing it's rather be the inputs [Music] now let's import use contest from react [Music] once again we'll copy the line that we used to create the contest variables [Music] now what we do is that all these values that you are destructing from the router or params we will do that from the start credentials instead and this should come below the contest [Music] now you can get rid of this and also the route we can even get rid of the navigation as well now the last function i want to create is a clear login function we'll create this and pass it to the out button that we have here [Music] now the first thing we do is to clear the data from the async storage so use async storage dot remove item let's copy the key of our data for values like this it's advisable to copy so that you don't make any type of which will create issues and this retains your promise as well [Music] and we also handle the catch block [Music] now once you are in the den block it means that the item has been removed successfully so now required to set the content of our store credentials contest to an empty string or now [Music] so now let's pass the clear login to the logout button [Music] let's change the c to a small letter so now we save and run our application now emulator hoping that you don't get any errors [Music] so now let's try to log in first we use some invalid credentials [Music] we see the invalid credentials error message now let's put some valid credentials [Music] now the login has worked successfully now how do we know that our async storage is working successfully now let's close the application and open it again now on open the application again we see that the app goes straight to the welcome page and all the details of the current user are being displayed

Channel: ToThePointCode

Views: 5,777

Keywords: how to keep the user logged in, persist login in react native app, keep user logged in in react native app, staying logged in react native, react native asyncstorage login, login authentication in react native, login authentication tutorial in react native using asyncstorage, login authentication tutorial in react native using context, react native login, react native login system, create a login system with react native, how to create a login page in react native, context hooks

Id: -N12hjV3DPQ

Length: 23min 50sec (1430 seconds)

Published: Tue May 25 2021