Login Authentication Tutorial in React Native using AsyncStorage | useReducer, useContext, useMemo

hey guys welcome back to my youtube channel today in this tutorial I'm going to show you how we can implement authentication in our react native app so as you can see over here this is our getting started screen and after clicking on this get started button we are presented with the login screen and we can go to our sign up screen as win and we can get back to our sign-in screen right so this is our auth stack and when the user will provide their details over here after clicking on sign in if the credentials match then they will be presented with the app screen which is this screen and over here you can see your proper app screen and I have already implemented these navigations in my previous tutorials and all these things are part of our tutorial series in which I am showing you different parts of react navigation function file and this tutorial is also part of this tutorial series so if you haven't checked this tutorial yet I would highly recommend that you go ahead and see those tutorials first then come here see this tutorial it will be helpful to you and in this tutorial we will be looking at how to implement the authentication so if you are interested in this kind of tutorial then hit the like button subscribe to my channel for more tutorials like this and don't forget to hit the notification bell icon to get notified whenever I post on you too Toria so without wasting any more time let's get started with the tutorial [Music] so now we are at login screen and to implement the authentication I will separate this video in two parts in first part of this video I will explain you how to implement the basic authentication in an app so I will explain some fundamentals behind it and later part of this tutorial I will implement the actual authentication by using a Singh storage so if you are interested in to implementing actual authentication then you can see the time stamp over here you can directly skip to that part of this video but I will suggest you to stay along with me so that you get to understand the fundamentals of authentication it will be useful to implement the actual authentication so the basic concept is that if an user is an authorized user and if he is logged in then he will be presented with this app screen which is this drawer navigator in our case and if the user is not logged in yet or if he is not a valid user then they will be presented with this rootstock screen where our authorization screens are located such as this sign in and sign up right now to implement this in our basic concept i will implement some stats over here locally in this app.js file and later we will apply global state management by using use reducer hook and the context IPA so over here I am creating some states so I have created two state over here first one is is loading we will check if the user is authenticated or not and the other one is the user token and by this user token we will validate our user now I'm creating another screen which will be displayed when is loading is set to true then we will return this activity indicator which is a loader and for this view I will provide some styles so now after saving it we can say that our loader is presented over here right so now is loading is said to true now we will simulate our login so now over here we can use use effect reactive and this use effect will run when our screen will be rendering so in this we will check whether our user is logged in or not so I'm simulating it just for that I'm using a set timeout JavaScript function and over here I will set is loading to false and we will wait for thousand millisecond so now after saving it we can say loaded screen for thousand millisecond and then we have presented with our routes ex-friend and in between this time we will check if the user is logged in or not so now we need to handle those things so for that we will create sign in sign out functions well which said this user token and then based upon this user token we will display the respective screens to the user so now we will create those functions within another reactor called use memo use memo will use the memorization technique which is a optimization technique for speeding up the execution and with in use memo we can define those functions so the function will be sign in then sign out and another one will win sign up right and within the sign-in function we will set these user token and is loading will reset to false so fast we are setting some user token with a random token and then his loading will be set to false for sign out this set token will be null and his loading will be set to false for signup similarly sign-in we will set the user token and his loading will be false so now we need to pass these functions into our components so for that we need to use context so for that I will create a directory over here called components and within this component I will create of context dot JS file over here I will import react from react and then I will export context which we have created by using create context and our context is earth context so we need to import it in our app JS file as well as in sign inside of screen as well so that's why I have created this context yes so that we can import it easily anywhere we want now we need to wrap this complete component tree by this context and by this context providers we can pass the context value to our component tree so we have wrapped it and we will pass the value over here and the value will be our earth context and within this earth context we have this sign inside out functions right so we have passed earth context over here and then we can accept this earth context value in our other components so first in the sign-in we need to accept that so first I am going to import this earth context here I will access this sign in this one right by using this use context and we will pass our context name over here so now we can get access this sign in and into our sign-in button we will pass this sign-in function so now if I click over here then nothing happened because I haven't checked whether we need to present the app screen or not so over here first we need to check if username is not null then the user will be presented with this drawn navigator which is our app screen and if the user token is null then they will be presented with this root step ok now saved it so after saving it we automatically presented with this app screen right because previously I have already clicked on the sign-in button and this sign-in function already worked that time so our state has been changed previously so when I have provided this checking then it automatically updated the screen now we need to provide this sign out over here and this sign out is located in to our drawer content yes so over here we need to first import the fourth context now we need to get access the Sign Out function so now we can pass this sign out function into our sign out button so now we have signed out right so this is the sign-in and sign-out process working properly over here right so this is the basic concept of the authentication process now we will implement it by using global state management system properly by using use reducers and we have already used the auth context over here and also we will use the assing storage to store our value and over here in this use memo we need to pass an empty array so that this doesn't run every time we render our screen and now for reducer we need to create our reducer function and we need to provide initial state for our reducer so commenting these states over here because we will use the reducer States over here so first we need to have the initial state so initial login state and over here we will use is loading initially is loading will be true then we will use user name so user name will be null and user token it is also will be null and here it will be a constant and then we need to create our reducer function and reducer will accept state so it will be previous state and some action and based upon the action we can perform different kind of tasks over here so I will use a switch case over here and for this which I will use the action type and there will be several cases over here so we can see that we have this sign in sign out and sign up SS over here so I will call this login and for login we will return something similarly we will have knockout register for our sign up right and there will be another one which will happen when the user will open the app for first time so that time the app will check if the user is previously logged in to our app or not so I will call this retrieve token and for every cases we will get our previous state and is loading will be set to false so it will be same for every return and to retrieve the token we need to set the token as well over here so the user token will be action token so we will pass this token object to our action and it will set the user token over your fault login we will set the username and the user token so I will pass the ID over here which will be the holder name and for the user token we will do this similarly now for the logout I will set user name to null and user token to null as well now for register we will also set the user name and token similarly for login now this is our reducer function and this is our initial state so now we need to create the reducer the reducer by using this use reducers and we need to pass the reducer function and the initial state over here so we have this login state for our state which will hold these states and we can change the state value based upon these switch cases over here which we have created and we can dispatch the action by this dispatch so now we need to update these functions to change your state properly based upon the action so now in sign-in we will accept username and password and we will check if the username and password matching with our username and password so if the username will be our username so I am providing our username over here but in a practical scenario it would check from our database right but I am NOT doing that over here so if the username is user and the password is equal to us then we will say to the use and token and we will provide our random token over here but in the practical scenario it is also will be fetch from our database right so we need to create user token variable over here and by default this use and token will be set to null if this condition matches then the user token will be set to our token and now we need to dispatch this so the type will be logging so this login and we need to also pass username and you got token so we need to pass the ID and token so the ID will be our username and for token we will pass this user tokens right so now we have an error over here so his loading is not defined okay yeah is loading is not defined because we have changed our state and now this is loading is coming from this login state which is holding our state's and changing our states over here so it will be updated in our login state so we can access this from login state and similarly this user token will also be from this login state now served it now we have this error that set is loading is not defined yes we need to change this as well so now over here this use effect will work for this retrieve token because in this use effect we will check for our current state so here we need to dispatch this I am copying this code from here and type will be register and currently I am providing some token over here but later we will get the token from or assing storage so now accept it now we can see that there is no error now let's implement this sign out as well so far sign out we will just simply dispatch this log out and we don't need to pass anything so log out and remove these things so we have implemented this sign out so sign out is working now we need to update sign-in screen so that we can pass this username and password from this screen to our function right so now over here in the sign-in screen we are already handling these things so we have this username and password local state and we are handling all those things we are updating those things over here so we will create a function over here and in this function we will accept username and password and we will pass those username and password into our sign-in function sameen to login handle we will pass the username and password and those username password is located in flower data state right so data username and data password right so saved it now let's see our correct username will be user and the password will be passed so user first clicked on sign-in now we are signed in and if we click in sign out then we are signed out now let's test this for another user now still we are going in but we shouldn't do that let's see so now I will output some message in my console user token over here and same thing for this as well and I will update these user token and for the user token I will provide a token and I will pass that token over here now let's see refresh this so now why default this user token is sitting over here so we are going into this now click on this sign out now it has been updated but we haven't provided any output for sign out so we cannot see over here so let's see I have clicked over here it's showing the undefined we are logged in okay this is the error this should be user token so I am setting the user token as null now let's see again so we are signed out now click over here so now it's null and now we are not signing in into our app right so we can put any other thing over here click then we are saying that you got any set to null right now we need to change this thing because whenever we are rendering the screen that time this use effect is occurring so we need to fetch these user token from passing storage now it is time to implement the assing storage over here so for that we need to go to passing storage page and we need to install it so over here I'm using the NPM so in p.m. install passing storage so I think storage has been installed so we can see that a sink storage has been added to our package dot Jason now for the highways we need to do this step so CDI us know or install so it has been done and for Android we don't need to do anything now we need to import this a sink storage and use it so I have imported this a sink storage over here and now for the signing we need to use it so we need to use this I think now it over here so we will set an item so for this sign-in we will use this I think and then if the user matches then we will try then we need to set these things in try I will add this weight and the item will be user token and the value for it will be this user token and I will position this into this Drive block and for the error we will catch the error and currently we will output this into our console log ok and we will similarly do this thing for use effect as well now over here it would be a sink then similarly this try and catch and over here we will get the item so we will get the item this user token item we will get it and now it will be set to this user token and then we can pass the user token over here and for this over here we will pass null so first the user token will be set to null and then we will try to get the user token from our assing storage if it fetch the data then it will update the user token and then we can pass the user token over here and for the sign-out also we need to implement the sink storage so that we remove the user token from our assing storage now we don't need any username and we will remove the item so now check it see when I saved it then the screen is automatically set to our odd screen right so now let's do it user and password sign-in we are signed in and then click on sign out so we are signed out from this and now if I click on sign in and nothing happen and if I'm sign in and from here I'm closing this app okay and now again I'm opening this up then we are directly presented with our app screen because we have previously logged in and that user token is stored into our a sink storage right so from the assing storage we are fetching the user token and then our app is saying that and this is a logged in user so we are directly presented with this app screen right and if I sign out now close this again open this app now we are presented with this login screen right so this is the correct way to implement the authentication in an app and in my next tutorial five will implement the validation over here so currently if the user is not putting anything over here and we can click into the sign-in then there is no clear message what is happening so user will not know what is happening also if the user put any other detail over here and click over here then also it's not showing any proper error message to the user so the user experience is not good enough so we will implement the validation in my next tutorial so stay tuned for that and I hope you have learned something new from this tutorial if you do so then like this video let me know by commenting down below and if you have any kind of solution for me then also let me know in the comment section and subscribe to my channel for more tutorials like this and don't forget to hit the notification bail icon so that you get notified whenever I post on in tutorial so I will see you guys in my next tutorial in the meantime have a great day goodbye

Channel: Pradip Debnath

Views: 134,026

Keywords: login authentication in react native, authentication in react native, login functionality in react native, user login in react native, login with asyncstorage react native, authentication in react navigation 5, authentication flow react navigation 5, authentication flow react navigation, authentication flow react native, usereducer usecontext, usereducer usecontext example, react hooks usereducer usecontext, usememo in react native

Id: gvF6sFIPfsQ

Length: 23min 45sec (1425 seconds)

Published: Thu Apr 23 2020

Reddit Comments

[u/BooneTheSaint]

Normally when you sign in you get a token returned. This token you use to do your calls. Most of the times you add this in the headers when you make a call to an api.