How to create Login Authentication flow with Redux | React-Navigation v6/5 | Part-3

hey guys i hope you all good in last video tutorial we have implemented shared element transition today we'll implement authentication flow with redux so in this video we will create login stack and switch stack when user has logged in by checking user token so let's get started so till now we have created header and bottom bar hide animation on scroll and implemented shared element transition you can check out the playlist to watch those tutorial first we will create auth stack [Music] add stack dot navigator and then create login screen [Music] now add login screen into the odd stack so what we're doing we will create a state that changes when user logged in or out and because of that state changes user can switch between my stack or auth stack while login or logout i'll create separate root navigation component so you can see it working same as before now if i add auth stack in the root navigation it will show login screen it updates navigator immediately first we will install these dependencies so what is redux redux is a state management tool for react redux is a predictable state container for javascript apps basically it is store the data in redux store and then we can use it in any child component here you can see the flow diagram so whenever we display any action it goes to redux store then in that reducer it checks which type of action triggered and then it update the state and store in the redux store then screen render when state get updated if you want to read it more you can check out the official doc for implementation of redux we need to create actions reducer and store so let's create it [Music] files are created now run the app again now wrap root navigation by redux provider i can see we are getting this error so we need to pass a store into that provider so let's create a store go into the index file import create store and combine reducer from lux we have to create a root reducer by using combined reducer combine reducer combine all the reducer which we want to use in the app here we have to specify reducer key and its value which is reducer file now add export cons store using create store method and pass root reducer as a parameter now we let this store into providers store property yeah it produce warning again we didn't create reducer yet now let's create reducer export default comma action now add switch we will check action type like this case will be login then return [Music] now add initial state what token which is initially none so in the return we will add hot token and pass action dot payload then return default state and then update current or token state here before changing the or token state we need to copy all the previous states like this spread operator and then state so all previous change data copied again in the store and we didn't lose it if you not copy all the state then it store initial state in the redux store so if you have some other states such as user data or any type of data then if in this state some data is stored then if you would not copy previous states then the old data will remove any initial data stored in this states now come into actions let's create login function return type which is login and payload is token for now i'll create dummy token using username and password it is a function which calls when we trigger the action then it will check the action type and then change the state of store with whatever we pass from actions payload we have created reducer now add this reducer into store informed reducer you can change its name it is a queue repair now go to app.js file we have to get our token from redux store to use it here so for that we are going to use use selector hook which return whole redux state import use selector from react redux so return required state from the alt reducer we need all token so it is like that state dot or producer dot org token now elect ternary operator to check if token is null then all the stack navigator appear otherwise my stack appear if token is not null then my stack feeds screen appeared else or token login screen appeared yeah you can see in the log it immediately re-enters when i change its value it is working now i will create login page add text input imported from react native paper its mode will be outlined create username and password state using use stat first we will add some styling for view so it looks better [Music] and then set value and text inputs then add on change text and set return text value into username and then do same for password text input alright now create submit button [Music] then create submit function add some margin around submit button now i'll call login action on submit method for that we have to call this page function into sublet method first add this page from used page hook and import it from direct redux and inside of dispatch function we'll call login action then pass username and password into login action alright let's test it yeah it works as we got token stack changed and fade screen appear so now i will explain you how it works so when we submit username and password then login action triggered and it goes to reducer and check the action type it matches with login then it update the or token and store it and then tells the ui that its state is changed and as it immediately get updated in the ui now let's create logout action change type which is now logout and payload will be null and in logout action no need of username and password so remove it now go to reducer create new outputs now return same as login we can make it better in the action no need to pass payload so if type is logout it directly set or token to null from reducer you also can copy initial state when user logout so that all data will become empty i'll you or token to null logged in now let's create logo functionality google profile screen i just copy button from login screen change its title to logout yeah submit method is not here copy submit and dispatch from login screen into profile screen and change login function to logout and import it from actions import used specific let's log out yeah it works now we have another problem when the app is killed from background then the redux store got empty so we don't want to login all time when we open the app so we need to store our token in the phone cache first we will add restriction for user check if username equal equal to vishal and password equals to 4234 then only set token and set null or initially we can make it null and if condition matches then it's set token okay let's start it is not logged in when inputs are empty and when inputs are wrong all right working now store token into phone cache then await passing storage dot set item then key will be token and pass token value so it is stored token into phone cache so console log token stored so it produce error because you can see we are displacing asynchronous method as action so for that we need to add middleware to perform async action and we have already installed redux thumb which is used as a middleware in a redux for handling acid methods let's add middleware in the store add middleware on create store method as a second parameter import thumb from redux thumb and pass third into middleware function now here we cannot use as ink right here return async disk page and move that code inside this disk page change this return to dispatch let's try to login all right it is working now token is stored now let's create a method which call when app first time loads so the app automatically switched to my stack when we open the app here we get to confronting storage no need of username and password here change this to get item [Music] and remove token value remove username and password connection and add token not equal equal to null alright console.log will be token faced move space into if condition now move to app.js file copy this from login screen and paste this submit method import used facebook change its name to any and in the dispatch remove login and call any direction import it from actions now add use effect hook and then call this init method into user packed right it called init method when app first time logs so let's test it close the app and restart it okay i can see token automatically fetched and we logged in successfully now let's log it out we logged out but token is present in the phone cache so it again fades token so we need to clear the async storage move to logout method on actions here return as sync dispatch arrow then curly braces and dispatch type logout and then await async storage dot clear it will erase all the sim storage data if you want to clear a specific value then use async storage dot remove item and pass key which you want to remove i leave it clear for now save it and try to log out it yeah token removed login it again [Music] now we will show activity indicator when it faced user token promising storage so add state variable loading and set loading set loading initial to true so when token paste we will set loading to false in init function add async await now add condition when loading is true then return activity indicator view its size will be large and color will be primary add styles to parent view flex v1 and justify content to center alright save it yeah you can see activity indicator appears now log it out now we'll add some installs on login screen add image component edit style stylesheet.fill absolute object now at sourceuary it will be loginbg which is the image url now save it add blur radius to 20 change little bit now better now add styles or login title now put this inputs into surface and import it from react native paper add view component for text inputs add boxes style now create a style for title in box [Music] border radius will be 10 elevation is 5 padding will be 20 and its height will be around 225 it title style font size will be 40 text align to center and its color will be white margin bottom will be 20 and font weight will be bold increase container padding to 28 okay it looks great [Music] so login is completed i hope you enjoy and learn something new from this tutorial so see ya until the next video and don't forget to like and subscribe the channel take care and bye you

Channel: Vishal Pawar

Views: 19,195

Keywords: redux, authentication flow, login, flow, auth, authentication, react, react-redux, reducer, token, signup, signin, switch navigator, navigator, react-navigation, loader, begginer, React native, navigation, screen, how to, v5.x, app, ios, android, custom, stack navigator, card animation, navigation container, create navigation, component, react component, animated, beginner, expo, social, mobile app, move, shared, element, react-navigation-shared-element

Id: cm1oJ7JmW6c

Length: 20min 52sec (1252 seconds)

Published: Sat Oct 30 2021