Login Authentication of React Native Application

this issue so I am back with another video and today's video is all about login authentication of react native application so so we'll just start developing the application okay so I have generated this this application I have generated this this decorative application so I hope that you know how to generate reactive application so if you don't know then go to go to react native website and just take the commands over there okay now okay and I'll now I'll create one folder called called Springs and we'll keep all the screens inside that folder and basically we will have three spins one is login one is dashboard or the after login screens and one is worth noting screen so login screen the form login form will be there inside the login screen and dashboard inside dash boot screen there will be the I mean user details if there is any and the logout button and awed login screen there will be one indicator or or the loader and it will basically do I mean check the user is logged in or not based on that if it's logged in then just just to the dashboard screen or else the login screen okay now okay now I'll create one login so we'll build one by one we'll first we'll the login screen then we'll build the dashboards contain a loading screen then route routing things how the routing things work in react native application then the authentication authentication process so first we'll create a login spin your chase import view also be 1/6 B then I'll write the caspase component so I'm using I'll use class-based component only because there will be the X is calling me EPA calling so all those things will be there and also I'm not very comfortable with her I mean hook's kind of things I'm comfortably the functional component but not hooks ok now class constant and write the style sheet silence style sheet to create containers sty style that container right context logging in containers 800% a line items swing down vertically center and justify justify is for scimitar okay now input export this component from here default for this okay now I just see what is output so this is the right now output now we'll build the form now I will save some weight with 90 percent or something now view now the login form Rho u I'll import the extreme [Music] use a new style Scott now I'll write some it's not needed I exchange poets needed styles in the depth let me see what is output okay now if you see it's coming right the text input type some text is a text input some set some background adding poison let's sit here the place under colors okay now color three three three we'll make it 80% okay no bottom end so using name is done now the password is same but secure something secure text entry quality so because of that password that's password to be hidden okay now you do we have to just give some title of this screen or form so this will be I mean we can keep something like this welcome user welcome back in style Styles welcome text context so welcome text should be in center position text-align:center matching bottom 20 and own size done the form is almost done but we have to add one button so touchable oppacity I like the touch full opacity because I can design it like my own way touchable it's sign style style stop sign in button and so you text will set it flow you can said something else also text-align a lot because on the design but I just focus on the function will be part design we can relator reason is not a big things I mean design is a big things but right now I want to show the function will set some padding padding vertically in okay done so much in top is this become looks much in but no turkey okay now the form is done or me why is done okay now I will fill the dashboard spin dog chase I will copy this whole thing King I will change this to dashboard now go to app spring app or chase this right some text a user and one login button rusty xed just see what what it is showing a user user text style sign use the text 20 scaling cinder okay extra line is teasing the button style style [Music] I don't bring political [Music] text-align:center against it's okay now what we'll do I'll make it on the dashboard screen is ready now we'll do the auth load loading speed a copy [Music] yes I will just remove unnecessary boots these things are not need to be indicated I'll go to Epcot chase and dust import okay it's loading so it will be only loading will be there and it will basically decide whether the the screen is I mean the user is logged in or not okay so the three screens are ready now we'll build the routes file route stop tjs so one thing I need to show you guys that whatever I mean which packages are used for routes and all so for I mean I'd be you see so for passing storage I think I hope you guys know that I think storages move to react native community and a sink storage and I think storage I'm using for storing the token excuse for calling the calling EPA's and end and yeah we have negative navigation M react native react Nick Jeff navigation and react navigation stack is for for navigation routes for going from one screen to another screen and I will suggest you before building the routes file I'll suggest you to go to react native website and just react navigation website and just see this getting started page because this process is not very easy this I mean installing react a navigation it was I mean earlier it was very easy but in react native 60 m in 0.60 what is the version the version is react native version is 0.16 60 1.2 I think after 0.59 this react narration say tough is bit changed I think so after 15 or after 60 so I suggest that you go to this screen and at this page Vietnamization tox-en getting started dot HTML and see the setting which ever there I mean they're just asking you to follow then you'll understand because I was getting lot of issues when I was setting up the react native named emulation okay now and this react native would reanimate a react native screen these are all for I mean great nearly an innovation already so this is not for routes Browz page allows things all outing can be done for this application okay now I'll first import few things input nation nation what the input input create app contain okay now import create a stack navigator give negation stick so earlier this create technovic attack a drawer navigator this world all in we happening inside react navigation only but now it is moved to new package called k maybe the unionization stick okay you put these three things I'll import I will just cut this thing is coming here and I will paste it here just cut this is remove this one ok now I will create the first stack name you Gator that is for before sign in pages or I will get the routes for before sentences before sign we hit stack Navy aviation its application so I think it's not a vacation maybe Gator I think let me just see your strength may be greater okay these are not default input I'm doing some mistake these are not default important we get stuck maybe we get yeah okay in the login screen so you can do like this also like this but that is for these foreign I mean if you want to add some configuration here you can add for only for logging out so what that purpose now I will add some configuration like now the initial route name that should be login for this yep so now this is the login route now if you want want to add registration I mean you have very stern registration page also you can edit here you can change this to registration or register something and you can change that component also same like if if you have forward / salt you can add that heroes I'll field after after signing out like the dashboard or anything kind of user profiles those things after signing and add dash okay there's no screen sing like a copy-paste save now I will create the app navigator I mean which will be the main navigator which will import or which will export from here and inputting AB dot J's so let me just this is also create stuck maybe authentication is because is the before signing pages then air app is the after signing face I mean we can keep some other neighbors that's not a problem that's your comfortable I mean how much comfortable we can name you are and also it should be the meaningful it should not be like something else then offloading talk learning should be learning component now seeing we can give Peter none and initial route name that should be the oath because if the user is opening one page I mean the app first after that user will see the authentication screen first then the user should have to login and then you will see the after login pages then if the user is again this user is just closing the app and again you opening the app that time it will be the after login page so only so that checking will be the inside hot load loading screen now I will export this one export export default not create app container and I'll pass [Music] we'll see you okay but the problem is the navigation or the hitter if you see the screen there is a is line there's a heater but Waitangi day is not going well where is that login screens well if I click on the login then drops not navigation maybe ish my forward syntax moving between screens yeah so this these talks are very very cool so if you go through the docs you will need to see lot of things so I actually take a hill from this doxology was its if I click on that login button it will go to the dashboard screen we can keep we can just call this name also yeah it's going to the dashboard screen now same thing if I click on log in log out then we'll go to the [Music] login screen yeah now the problem is let's say I'm clicking on sign and I mean dashboard page you know just close the app I'll totally remove the catch a now the Epis and the first screen is not the low res but screen but it should not be like that it should be I mean the screen should be de signing peace only because I was logged in earlier okay now I have to build that functionality so first we built a login login functionality like calling the API username initiate some state change so on change of using a password I will set the username password okay state this said state so I'll I'll just want is Chuck shirring the state here like username and password this dot state and here bag should be okay now the state should be use the name and value should be okay done same thing for past photos should be passed it's a mistake to go to react native website I have to see the text input what wrong I am doing dogs sting one change text change done now I will write the login EPA come in and just all the I play and I will pass this values to take place so for API is I've used I mean I'll be using decrease so it's a it's a good way I'm collection of a case you will get list of users and killing sirs I mean using this API only you can build one application now I'll be also useful then blocking also is there so I'll use this login successfully play yeah is the request and this is the response you will get you will get token and you have to say save this token essing storage and then every time you have to check that token is there in the icing storage alone whenever the application will be opened okay now the the URL will be wreck restored in / API slash login okay it's under the EPA so I have used X I mean I will be using excuse because I feel it really easy to use feature also we can use it does not need any import in that case I mean in external barrier third product package is not I mean required for that case but I will be using excuse know [Music] you start do logging copy this one and see us dot post save to pass the UL fast so you should pick this one then I will build the request and request and request should be squarest request okay I'll pass this request here is check that what is the response must be yeah status code 400 I think because no is not correct the England password is not right I'll use this one only Eve older you hold you don't hold F regress dot in and password see it is change this to small e ya see the data is coming token is coming okay now I have to handle that error message what it a message is that I'll do something wrong and if the response is coming then this [Music] yeah Ehlert is coming at Christine yeah it's going to log out I mean dashboard page and we can show you that now we have to disable the button after clicking on login [Music] [Music] loading loading otherwise signing ok I will change the color also so for changing color I will use spread rest operator speed I don't remember right now softening you can use it for add adding some some extra style properties color it can be [Music] now make this team opacity to 0.8 so that they pass it will not be very less I'm clicking on that button 0.8 make it to log in log out button also increasing okay now now the log in screen is almost if not hold at breakfast loading and safeties yeah yeah we can show some alert also that login successful oh we have forgot to add the token in now as in storage so for that case I have to import and storage processing [Music] seems to each the correct that's what you see username and password to log sticking going again and again request yeah this is correct we can do this operation inside after setting the storage I mean sitting talking city slicker done now we'll go to login screen and we will check that user is logged in or not so first for checking will create one function so first we leave out the since today's here also we check token okay I think method because it will be go I think storage checking I mean yeah so the code here this will be silly wait until this line in ZZZ operation [Music] deviation of do we get taught navigation valuing the bietak token is there an exit to leave it to app on the dashboard yes maybe or maybe to the first screen routes have to check both and this cheap token may third should we should call it inside constructor done this is done now I'll close that remove it from catchy okay which come to me login old at reckless loading and paso should be know this to eat indicate I mean the author oven screen is not working with a belly you see what is happening in the outside Oh it should be the or clogging loading screen okay yeah same lakhtin that's why it's showing the he user otherwise it will look in the login screen screen what is that yeah searching protesting storage storage sings too much remove item should pitch should go to the - good X can I mean the login screen okay now I'll just totally close that once then I logged out and I'm just totally closed that remove it from catchy also open there and I'll login first so I think all the code is done test at regress Eevee is now closed also and yeah it's opening the test put spin only logout login page yeah so the login screen is coming in so this is how you can develop the simple login authentication and react native application so whatever I shown you it's very simple there is nothing complicated the design is very simple we can focus on the design later told you so this the code base I'll add in the description the video description you can just check the code base the beat of Churchill code this so I think I hope you have liked the video so if you have liked the video just press like and do subscribe press the be like and also thank you bye

Channel: Kishore Patra

Views: 13,017

Keywords:

Id: 2fJF5RSTT8Y

Length: 60min 44sec (3644 seconds)

Published: Sun Oct 27 2019