React Native Axios, AsyncStorage and JSON Web Token (JWT) for Login Authentication

hello everyone welcome back to my youtube channel my name is karis mccormarjee you can call me karis so in this video i'm going to show you how to create login with axios with api and then we're going to save the token on the asset storage so for example when you try to log in after you're logging and then move to supply screen it should be navigate to home screen you don't need to log in anymore so without any further ado let's go start it the first thing that you need to install is on this package axios delta d code and react native async storage so yeah okay after that we're gonna create folders api and then we're gonna initiate api manager to js and create import axios and then cons api manager axios that create base url i'm we're gonna use localhost i already create a server for it but if you have a server just uh put your endpoint in here local host for this last rpi and then respawn type json and with credential true after that we need to create user api dot js so in this uh file we're gonna import api manager oh sorry i happen for export for this one so export default api manager and then i'm going to import api manager and we're going to create for user login export cons user login asynchronous data this is data what we gonna for do for the requests add try catch if error it should be return error response expose the data columns resolve weight api manager and what point we use on this section i use user and then slash login after that we need to add what method we use pause for example i'm gonna use pause healers at content type sorry heaters content type application slash json and for data data from this and then after that we're gonna return for the result okay we're gonna press save and then we're gonna go to our home screen i mean we're gonna go to login screen okay on this login screen on this login screen i already create some validation for login you can see that on github i already put it on the description so on this one we're gonna add first i'm gonna add two navigation for the props and then we're gonna import this one user login and then we're gonna input email for email this is from the body what we from the api for example if your api using username or user or phone number you need to write it same as the body from the api so for the password i'm gonna use password and then then if result so don't start this i'm sorry i'm sorry uh i'm gonna do like this then result callback if resolve the status are 200 we're gonna add acid storage scene storage dot set item we're gonna add actions token for the name and then what data what we know what data that we want to save on the asking storage and then i'm gonna resort the data the token and then after that we're gonna add a navigation that nothing get i mean replace to home okay and then we're gonna add catch if error console. error error okay i think it's done we're gonna try to add cherries at gmail.com one queue unzipped what's wrong i think we need to console oh you should not phone okay wait a minute oh okay don't forget to this one two lowercase we're gonna try again wrong password okay we're gonna add this one and it should be succeed oh there's a lot oh i'm forgot for access token we only want to add one data we cannot add more than one data for example we're gonna use postman if we want to have a look for the api yeah we want to add only token for this one so i'm gonna rephrase and then try to login back data. so it should be working cherries gmail.com yeah it should be working now on the splash screen we need to add split screen so if we are not set up on our supply screen every time we try to refresh or nothing do something on the apps the apps will be back to the login screen how can we set up so uh how can we set up for the login screen so we don't need to log in again this one is the way we need to re-login and then and then we need to set up on our splash screen so in this section we need to create some function cons handle token viet token asynchronous cons data token we need to get data from the our asking storage asking storage the get item and then what key that we initiate on the login screen we initiate the access token and then add variation if there is no data token it should be navigation dot replace to login screen else navigation replace to home and we're gonna delay for this handle get token yeah i think that's enough now we're gonna try to refresh it and then yeah it's already navigate to home we don't need to login anymore so i think there's a tutorial for today i'm sorry if my english is not really good and then you get a bit confusion uh i'm sorry because i'm still learning on speaking english yeah if you have any question you can just email me on the description and also ask me on instagram i already put on this one uh on this on in description for the link github so yeah i think that's it for now thank you

Channel: Coding with CharismaAji

Views: 43,473

Keywords:

Id: hMpcOLgLdlw

Length: 12min 5sec (725 seconds)

Published: Mon Jul 04 2022