React Native & Golang tutorial | #8 Authentication Provider, AsyncStorage, and persistent auth state

this video is part of a full course on react native and goang hey how are you guys doing in this video we are going to finally make the authentication work on the mobile so let's start by actually creating our types because we are going to use some types in here and let's start by actually creating a folder let's say make directory types and instead of types I want to to two files one it's going to be oops types actually one is going to be for the for the user and one is going to be a generic API which will have some generic types for the API let's open up our user type and in here let's do the following let's export in a user role which going to be our attends no not a string in here attend D which going to be attende and in here uh we want let's not forget the commment here we want the manager maybe we could place the manager in here let's see in here just manager all right so we also want the type of the user itself so let's export type user the user is going to have an IG which is the number m is going to be obviously I String rooll it's going to be the user role that we just created and let's have the time stamps created at and updated that all right so let's also open the API types because we want to do the following in here we want to export typ in here which going to be API response and this is going to receive a generic because in here our API will always if you remember from the back end our API is always returning status message and data so what we want to do in here is just um have a default way to define the type of the API response which in this case the data will change but the status and the message will always be the same the data is going to change which will be whatever the type that we passing here this is actually uh the standard way that sometimes people use to define this but we could also say here just maybe that's easy easier data whatever you want to do is fine I'm going to leave it as data all right so in here we want to export type of response and this is going to be API response and the data that we want to receive is going to be um user which is the user and also a token which is the string and if we hover over this we can see that the alpha response is going to be status message and the data itself is going to be whatever we passing here as the generic which in this case is an object containing the user and the token all right so let's close this file also this one and what we want in here is now to create the functions that we'll be calling the endpoints so let's create a folder in here called services and inside of services I want to tou um user do TS and also api. TS let's let's start with the API because this is going to be kind of uh the default API extension that we are going to create with axos let's actually start with installing axio on our machine let's see yarn add axio all right so we have axio already let's clear the terminal let's close it and here um before we actually start using the axus package that we just installed we need a URL and oops URL and the URL is going to actually depend if we are running the the app on Android or iOS OS and to check that let's use the platform and let's say if the OS is Android let's give HTTP 10 0 0 oops that's wrong two two and the default ports that we are using to run the the back end let's actually open the back end to check that again all right so I have the back endend in here let's actually start the back end and so we can see we can see that in here which is on the M it's the port 3,000 but let's already leave the back end running just so we when it comes the time to just test the the loging we don't have to do that so let's starting on Docker our back end all right so our back end is running and this is going to be this here is our Port let's actually copy this cuz on iOS is going to be exactly this port and in here the port let's just use the 3,000 one um else then it's going to be obviously iOS let's put in here this one so that's good for the URL let's now create use axus let's con API let's actually say API just like that this is going to be an axus instance and here we want to import as default ax because in here we want uh axus do create and let's pass in here a base URL which going to be our URL and then API because if you remember let's go in here on Main on our back end we are grouping everything under API so that's why we need to do that in in here so let's do in here API interceptors request use this is going to be a ning function which will have a config we want in here to have access to the Token because we want to set the authorization to have the bar token but where are we going to save the token obviously we have nothing right now doing that but we are going to take care of that in a couple of minutes when we start building the AL context provider but we can already kind of try to get in here the token from acing storage but before we do that let's obviously install async storage let's do yarn Edge react native async storage slash async storage all right so there we have it we can now await acing storage to get our token and if we have a token what we want to do in here is basically update the headers so let's say config headers let's setting here the authorization and let's see better let's pass the token and here let's just return the config let's add another Interceptor in here let's say API Interceptor this one is going to be for the response and let's have two functions here two Asing functions one it's going to be for the response axus response and it's going to always return response. data because uh we don't really care about the response from axis itself and let's see in here let's handle the error which going to be axis error let's always just return a promise uh actually reject with the error and for the last part let's just export our API so let's now actually open not this users actually user services and here what we going to do is to or not export let's import the AL response type let's import the API we just created and let's have in here our methods that will request to the back end so let's say async function login this is going to receive email uh let's actually do the following type credentials is going to be Mayu o u which is a string password which is also I String let's export this and here let's have um credentials just like that which is going to be credentials so that's good this is going to return a promise and this is going to be off response let's now return in here API post out login and let's pass the credentials let's duplicate this function and let's have the register any here let's just say that this is going to this is going to request to off register let's do the following here user Services user service actually let's add in here login register and let's export user service so let's now actually create our authentication provider let's make the directory let's put that inside of a context folder let's touch inside of context um of context. TSX let's open that file and here let's start by adding our interface of context props oh we don't need this actually we are going to have a couple of uh variables and methods in here so let's start by use loging which will obviously be a Boolean is loading out which also a Boolean let's have a function here asnc function which going to be authenticate and this is going to receive an Al mode which can be either like or register which basically what we have in here the AL mode from the login and in here we can receive it we need to receive an email and a password and this will return void we also want in here a log out and this is going to be a void function when it comes to void function we can do it this way oops this way but there is also a type of void function you can use whatever you want that's fine and for the last prop we are going to have a user which is a user user or it's going to be new let's create in here cont text of context it's going to be create context and the empty object in here is going to be S of context props let's already in here create custom use off hook let's export function use off and this is going to use context which is our Al context let's export in here function authentication provider it's going to have children because the props is going to be props with children and here let's have a couple of States let's start with is is loging and then set is logged in this going to be us stage false this is going to be a bit similar so let's see here is loading off so set whoa let's duplicated it's loading it's loading off just check if this is correct that's good and the next state is going to be the user so User it's going to be us stage and this is going to be no because this is of type user or no all right so let's actually add in here I use effect function um actually let's already return in here the the provider and let's put on the left on the right side in here this file which is this one let's put not working all right so that's good um so let's return it here let me close this so we have some more space of context we want from here a provider this is going to have a value which we are going to VI in just a moment this is going to receive children all right so in this file in here we can already remove this comment and use our Al Al ication provider so the whole app is going to have access to when obviously using this Hook is going to have access to everything that we have inside of the authentication provider we can close this file and each here let's open that again and in our use effect every time we open the app the first thing that we want to do is to check if the user has uh the credentials which is basically the the user itself or the token the user and the token actually if the if this data is saved on Asing storage if it's not then the user is going to be uh redirected to the login screen if the user has the data saved on Asing storage that means the user can just skip the loging and keep go back to the app right so let's do that now so let's see here async function let's call this check if loging and let's already put this function to be called down here we need in here const token and let's wait for the async storage get no keys get the token and then also oops the user all right so if we have a token and we have a user we are going to do something but if not definitely the user is not logged in so let's set that to false already and here if we have a token and the user then the user is definitely authenticated so we can set the usering here which going to be Json Jon pars the user and the reason why we need to do Json parsing here is because Asing storage only accepts strings and when we are going to do that in a moment we are going to set the user to async storage just like that we we will have to pass we can't pass the user just like that we need to pass the user like Json stringify and then we can pass the user all right so that's why the Jon passsing here and for the last part in here let's uh let's redirect the users to use that not the login screen so let's say router replace and let's send then to the outfit which is this one now let's add in here another function which going to be our authenticate function let's see function obviously and this is going to Let's actually grab the signature from here so we don't oops so we don't repeat ourselves let's place that in here oh yeah that's good now so let's actually try catching here we are going to also have a finally block because after everything we want to set the this loading off to false we don't want to be loading forever okay if we have an error when authenticating the user is definitely not logged in so let's set is logged in to false and when we before we try to do anything let's obviously set the is loading to true and let's have in here a response from await user service and in here we can actually just pass the off mode because our user service has loging and register written the same way that our Alpha mode is written so whatever is the Alp mode Let's just pass in here and let's pass the credentials which going to be the email and a password so that's good and typescript is happy all right so if we have a response let's here D structure data with going to be from the response and let's distract in here user and the token from the data because in here we want to await the asnc storage to set the token it's going to be the token we don't need to do anything here with the token because it's a already I String but when it comes to the user we do need to set the user to turn oops the user into a string so let's pass the user and let's also set the user on the stage right here and for the last part let's let's actually just copy this if the user authenticates successfully let's let them just use da and not be seeing the login screen right so for we need another function here which going to be the log out it's going to be easy forgot again here to say function let's obviously set the is logged into false because the users will log out before we do that actually after that's fine Asing storage let's remove the token and let's remove the user data let's just pass everything that we have in here so we have is loading off is logged in authenticate user and the log out so that's good that's pretty much it for for the AL context provider we only need to change two things now in order to to make the this work um let's go to this file in here and instead of is loging as a hardcoded in here let's grab that from use off and this is an object so this is going to be dynamic or is logged in and we also need to change the login so in here let's grab is let's say actually say before use off and let's grab is loging is loading off and is loging let's create in here aing function which is going to be on on hour authenticate and let's our wait actually guys in here is not is loading off it is our authenticate function I imported the the wrong thing anyways it's going to be authenticate and here let's pass the off mode let's pass the email and let's pass the password because down here we we don't need this comments anymore so let's just remove them because we already have the context provid Ider this is going to be um is loading whoa I also imported this wrong sorry guys it's loading off all right so let's in here say is loading off so the button is going to be loading if we are loading the off and when we click the login button or register button it's going to be just unauthenticated right so that's basically all the changes that we have to do in order to have this working let's just start up T let's do yarn start I'm going to run that on the iOS simulator and I'm going to actually shrink this code in here to give it a bit more of space to the simulator and I will also have the back ending here so we can see the logs all right so the app is running let's try to authenticate as a manager let's say manager at gmail.com password one 2 3 4 all right so this this actually work it we were able to authenticate request the back end but for some reason we are still seeing the login page probably we have an issue on the off context so when we set the response in here we are actually not setting our is loging to true so we are never going to be loging so let's set is lo loging to true so that's pretty much it guys for this video we can now authentic cage properly and on the next video we are going to start working on this page which is the events page we are going to create events edit events and also be able to create tickets which will be basically a button on the events to to just click by chick that's it I hope you enjoyed this video and you learned something and I will see you on the next one bye-bye

Channel: Vaillant

Views: 68

Keywords: reactnative, android, ios, programming, go, golang, mobile development, software engineering, app development, programming tutorials

Id: tW3Kun6kMlM

Length: 27min 57sec (1677 seconds)

Published: Tue Jul 09 2024