Login Authentication Tutorial in React Native | JWT Authentication | AsyncStorage

hey guys welcome back to my youtube channel today in this tutorial i am going to show you how we can implement the authentication in react native and here we are going to implement the authentication by using jwt authentication so here we have this onboarding screen and after clicking on this button we are presented with this login screen and here we can provide the email id or username and the password so here i am going to provide the username which is admin and for the password we have password now click on login after clicking on login we are presented with the actual app screen so that mean we have logged in and now if we close the app and reopen it then we are already logged in so this is the actual flow so that means whenever user is logged into the app if the app is been closed and later on when user will open the app the app will be logged in automatically so that is the authentication flow and now if i sign out from the app then let's close the app and then again open it we are logged out so we need to login to access the app so here our app is storing the login state whatever the login state is if it is logged in then the user will be logged in after reopening the app right so this is what we are going to implement today and let me tell you one more thing that this tutorial is a part of a tutorial series where i am showing you different parts of the react navigation version 6. so here as you have seen this login ui onboarding screen the custom drawer after login this bottom tab navigator this ui this custom drawer all these things i have already shown you previously in this tutorial series so if you haven't seen all those tutorials yet i would highly recommend you to see all these tutorials it will be helpful to you so i will provide the link of it in the description below or you can check it out from the i icon of this video and today i am going to implement the functionality of the authentication so if you are interested in these kinds 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 so that you get notified whenever i post a new tutorial on this channel so without wasting any more time let's get started with the tutorial so this is our app and here we are going to implement the functionality of the authentication so first here i am going to discuss about the fundamentals of the authentication flow then i will implement the actual authentication with rest api jwt token so the concept is that when a user tries to log in that time user will be authenticated and that user will be given an user token and based on that user token user will be presented with the app stack or earth stack currently as you can see here auth stack is being presented which is the login screen and this on boarding screen which we are seeing here and the app stack which is currently commented out that is the actual app screen which will be presented to the user after user has been logged in so that mean user has been authenticated by the user token so let me implement the basic version of it then it will be much more easier for you to understand and for that we need to use context and that's why i'm going to create a new file within a directory called context and the file name will be authcontext.js and here first we need to import react from react and along with it we need to import create context and we need to create a context and that context will be auth context and we can create it by this create context which we have just imported from react and we need to export it so that we can access it from any file and then we need to create a provider and here we will return this authcontext.provider and within it we need to pass the children prop which we will accept from here and we need to export this auth provider and by this context provider we can pass any value to any screen of our app and to get that value first we need to wrap our app with the auth provider and within it we need to provide anything whichever present in the app so this auth provider will be the main wrapper of the app then only we can access the value which we will pass from here okay so right now i am not passing any value i will provide that just in a minute but before that let me move this code to a separate file so let me create that file here in the navigation and i will provide the name of it as appnav and here we need to import this thing need to copy this thing from here to here and here let's change the path now let's import app nav here now let's provide some value to this provider and for that here i'm creating a state called test and here i'm providing this test value string and here i will pass this test now in this login screen i will get this value and to get that we need to use use context hook and the context will be auth context and the value we will fetch will be test now let me provide that text after this login so here we can see the test value so the value is being passed from this auth context provider and we are getting the value in login screen js also similarly we can get it in onboarding screen or register screen so like this we will pass the value now let's get rid of it and instead of test i will use is loading and by default it will be set to true and the other state i have created is called user token and by default the value of it is null now let's create this login function and in this login function i will set user token and here i can provide a random string it doesn't matter right now i'm just showing you the basic functionality of it and later we will use actual token here but right now it's just a string and set is loading will be set to false and then i will create a logout function and here set user token is null and set is loading will be set to false and now i will pass login and log out value here and here instead of test we will use login and on this login button on press i will use this login function and here in this app nav we need to get the value from our context so we will require use context hook and the context will be auth context and we need is loading user token and we can pass these values as well so now let's check for the if is loading is set to true then we will display a loader and for that loader we will use activity indicator so first we will have a wrapper view and in that wrapper view we will use activity indicator and for the size of it i will use large size and for the style of it i will use flex 1 justify content center align items center as well and here we need to check if user token is not equal to null that means when user token has been set that time we will display abstract otherwise we will display auth stack so that means when we have any user token present that time we will display this abstract which means user has been logged in and if the user token is not present that means null then we will display the auth stack which is this track okay now after saving it let's click on this login button so we are presented with this abstract and now let's implement the log out in the sign out button and for that go to this custom drawer and here is the sign out so here also it will be similar to this so let me copy it from here and we need to import use context hook here and also this auth context and here it will be log out so now click on this sign out button so we are presented with this login screen and we can we can log into our app so this is the basic concept and the main thing is happening here in this auth context here we have the login function and the logout function in login function we are setting the user token and in logout we are setting the user token again with the null value and based upon this user token value we are displaying this abstract and auth stack right so i think this basic concept is clear to you and here i have made a mistake here we need to return it now let's see if we close the app and open it okay it is displaying this loader okay by default it was set to true i have set it to false but now we can say previously i was logged in but right now after closing the app and reopening it we can see that i am presented with the login screen so now again i have logged in and open the app i am not logged in so i need to do the functionality where the login state will be stored to the app for that we need to use async storage so we need to install the async storage first and here i am using npm so i will use this command and paste it here and then i need to do this pod install for ios for android you don't need to do anything it will auto link so now let's rebuild our project npx react native run ios and now we need to use the async storage so here in the login first we need to set is loading to true and then when we will set the user token after that we need to use async storage and it needs to be imported then we need to set item and here we are creating a user token item in async storage and we are storing this user token which we are setting here and similarly while we are logging out from the app that time we need to remove the item so here also set is loading will be set to true first and then after the user token has been set to null we need to remove the item and this item will be the user token okay we need to remove it then i will create another function called is logged in and here we will get the user token so i have created a variable called user token here which is not similar to this user token or this user token it is separate user token which is being used in this function only and we will get the value from the async storage and we will use this get item function and here the item will be user token and for this one we need to use avoid so the function will be async and we need to provide it in a try catch block and let's console log is logged in error for any kind of error which will occur here after fetching the user token here we need to set the user token and initially we need to set the is loading as true and later we need to set it as false and then we will need this use effect hook which we will implement here and within this use effect we will call this is logged in function now let's login again so let's click here so i am logged in and now close the app and open it again okay so here we are having some problem let me check it okay so here the error is this thing i think it is because of this set user token is not working before we are setting the item in async storage and we are using this user token state here like this so instead of this let me use this string here and now save it now let's try again click on logged in so we are logged in and now we don't have that warning so hopefully it is working let's open the app so we are logged in and we have seen the loader as well right now we are fetching the user token from async storage item and this is logged in function is being triggered so our login functionality is working perfectly well so now i have signed out let's open the app okay so it's working perfectly fine and i am logged in again now open and i'm already logged in so it's working perfectly well and all the login functionalities is working perfectly fine so that's good now we are going to implement this login function with jwt authentication and we will do a rest api call so that mean instead of this hard coded user token we will get the user token from actual api call and for that i am going to use this api call so here you can see i have this localhost setup and i have set up a wordpress install where we can get the jwt token from this url and we need to use the actual credential here so i have the username as admin and the password as password now send the request and here we can see we are getting a success request and we are getting a token here and we can use this token here as user token and if i use any other value which is not matching to the user then we will get our respective error code here we have provided incorrect password now i have provided a different username so we have invalid username so it's working perfectly fine right so it is the api call which i am making and the process which i am going to show you right now this process will work for any kind of rest api authentication it doesn't need to be from wordpress because what i'm doing i'm just sending the api post request here from postman and in the postman i'm getting some response so you can understand that it is the rest api which is actually working you can use any kind of back end as long as you have a rest api endpoint with proper response and to make the rest api call i am going to use this axios package so let me copy this one and paste it here and now i will create a file called config.js and here i am going to use the url so this is our base url and for the login function i am going to use xcos and it needs to be imported from axios package then it is a post request so i need to use dot post and here i will use this base url which needs to be imported from config and with this base url i will use this one which is our actual api endpoint from which we will get the token now after that here we need to pass the username and password which we will get in our login function after posting the request we will get the response now let's console log the response and also catch any error and output that in console log as well so here it will be login error and let me just comment out this thing as of now now let's sign out and click on this login okay so here we can see the error with the status code which means it is not authenticated properly and i know why it is actually happening this way because here we are not passing any value to this login function from this login screen and we need to provide that whatever value we are putting here in this fields those values needs to be presented in this login function but to get that value we need to create some state so we need this u state hook and by default the value of it will be null and similarly we need to create this password and we need to set the password as well so for this input fields we need to set these states so for the value of it we need to provide the value this is the email field and for on change text of it we need to set email with the text which we are putting here in this field and as this is the custom component i need to update the custom component with this props as well so we will get this value and unchange text and here we need to provide those and let's copy this one for this password field as well now we can use these values here now save it now after that let's see here let's provide admin and password click on login and here we are presented with some response and here it is showing as valid credentials so that means this one okay so we are getting the response properly so here i will create this user info variable in this user info we will store this res dot data and i will create another state called user info where i will set the user info with this data which we get from the response so that means all the data where we have the display name email id first name last name all of these informations of the user and then i will set the user token as user info so here we have this user info which is this complete object as user info then within that we have this data and within this data we have this token so that means it will be user info dot data dot token so that will be the token which we will get and if we want to see it then let me console.log that user token userinfo.data.token i am just changing the position of this console.log and then we will use the async storage as we have used here so here for the token i will use this one and similarly i will store user info as well and that i will do by this json stringify similarly here for the remove item also we need to remove the user info from async storage and for this async storage gate item here also i will get the user info and then for user info we will use json.parse to get the object and then here i will provide a checking if we have user info present then we will set the user token and set user info as well now after saving it let's see now provide admin password click and here we can see the response so here in the log we have the token and i have provided another log for the user token only which is this one and here it is so it is working perfectly well so we are getting the user token and we are logged in properly right now let's close this one and reopen the app and we are logged in and here as we have the user info present and here we can see we have this nice name first name last name display name these values present whatever value is being present that can be present here so here where it is showing hello john doe in that place we can show this display name as this field is present here let me do that so as i have passed user token i can pass user info as well and we can get the user info to any screen and let me see where this will be i think this will be in home screen yeah so here instead of john doe i will use this context so let me copy paste it from here and here it will be user info so here it will be user info dot data dot display name okay now save it and it has been changed with the name so that's why i have stored this user info along with the user token so this is the tutorial guys i hope you have learned something new from this tutorial if you do so then hit the like button let me know by commenting down below and if you have any kind of suggestion for me then also let me know and share this tutorial with your friends and colleagues and i will see you guys in my next tutorial in the meantime have a great day goodbye

Channel: Pradip Debnath

Views: 113,208

Keywords: jwt authentication, json web token, react native login authentication, react native authentication flow, react native authentication, react native jwt authentication, react native jwt login, login functionality in react native, asyncstorage login react native, react native login authentication api, jwt authentication in react native, jwt token react native, login with rest api in react native

Id: QMUii9fSKfQ

Length: 25min 50sec (1550 seconds)

Published: Thu Jun 09 2022