AWS Amplify Authentication in React Native (Full tutorial)

what's up nudges developers how's it going in today's video we're going to implement a full authentication flow with sign in sign up email confirmation and password reset screens we're gonna do that with the help of aws amplify inside the react native project this video is going to be a little bit longer but i want to get into as many details as possible and to cover everything when it comes to implementing an authentication flow with aws amplify we will start by implementing the basic authentication that takes around two minutes to implement and that some of you are already familiar with and after that we're gonna take it to the next level and implement authentication with our custom ui with our custom screens and without further ado let's jump straight into it for this tutorial we are going to use the ui screens that we have built during the past videos and if you haven't checked that out check them out in the link in the description below i highly recommend going through that as well because we build everything from scratch however if you are interested in implementing only the backhand side i got you covered and you can download the asset bundle also in the description down below and after that you will see a couple of folders there one of which is the authentication ui and after you unzip it open this project inside vs code and let's start it from here so let's open a terminal and first of all install the npm dependencies and after that is done if you are on a mac os system you will also need to run npx pod install to install the native ios dependencies i'm working on a windows machine and i don't need to do that so i'm gonna go ahead and start the development server by running npm start in this terminal this will run the development server and we will open a new terminal to run our project on emulator in my case i'm gonna run it on an android device so i'm gonna do npm run android if you are on a mac os as well you can do npm run ios to run it on your ios simulator and here we have it here is the project that we are gonna use for today's tutorial this is the sign-in screen with a form for the username and the password on the bottom we see a link don't have an account create one and here is a form for signing up and after you fill in this form you're gonna be redirected to confirming your account which is another form we're gonna get there soon and the last screens are the forgot password screen and here you just send your username and after that you are redirected to a new screen where you will input your new password and the code that you should receive on email we're gonna put everything together today and make sure that everything is working with aws amplify and for that let's get into the first step of our tutorial and we need to create our aws amplify project using the aws studio for that let's open up aws console let's sign in in our account if you don't have an account you can create one for free and here in the search bar let's search amplify on the amplify page if you have our project you will see something similar to what i see right now or you will see a welcome message and a new application button if you don't have any application yet so let's press on the new application and let's select build an application because that's what we are trying to do we are not trying to host a web application for our application name let's say authentication and let's press confirm deployment then let's wait until amplify sets up our project and then we will be able to open it up in amplify studio this should take around two or three minutes after amplify finishes setting up we should see a similar page where we will see a button launch studio let's press on this and we should be redirected to amplify studio page of our project and here is where we can manage the backend infrastructure and also the data about our project so what we're interested to do next is to set up our authentication for our backend so let's go to the side menu here and if you scroll down a bit under setup we should see data and the second option should be authentication let's set up our authentication and let's follow this form to set it up in the first tab here we need to select one login mechanism by default it is selected by email one to log in with your email and password in our case we designed the application to login with username so that's how we are going to design our backend as well so let's remove the email login mechanism and add username email mechanism here this will enable users to sign in with their username and their password now let's scroll down and in the second step we need to configure the sign up and here we need to specify what additional data do we need to collect from the users and save in our cognito to know about that user so in our case if i go to the signup page here we have username email this is one attribute that we will need email and also let's ask for the full name or just name then under the password protection settings here you can specify the rules that you want to apply for passwords like what is the minimum size in characters if it should include lowercase uppercase and so on in my case for the sake of this tutorial i'm going to make it a bit easier so that i don't have to write it every time below here you can also adjust the email message and subject that the user will receive whenever he will uh initialize a forget password flow so if you want to add more things here like a greetings a thank you note and so on you can do that as well i'm gonna leave it by default and i'm gonna press deploy confirm deployment and now in the top right corner we see here deploying and we should wait until the deployment finishes and amplify finishes setting up all these resources behind the scenes for us it usually takes around two minutes to do that after the deployment is successful we need to click here to see the next steps and the next steps is to pull the back-end changes in our react native project to do that we simply have to execute this command that we are providing in the terminal of our project by doing this and while this is pulling if you do not have amplify already set up i highly recommend following the tutorial on amplify docs and i'm gonna leave a link in the description to see the prerequisites how to sign up for an aws account and also how to install and configure amplify cli after that is done you will be able to run this amplify pull command and now i'm gonna wait a couple of seconds until amplify pulls our back end after a couple of seconds amplify automatically open applications in order for us to give permission to login and let's just press yes and get back in our terminal to follow along them setting up so the first thing is uh to choose our default editor i'm gonna stay with visual studio code type of application is javascript and it's react native so directory i'm gonna leave source by default default default enter enter enter and lastly when we are asked if we plan on modifying this backend just write y and press enter and we are good to go all right so i see the successful pulled back environment from the staging environment and what vet created that created an amplified folder in our project and also in the source we see aws exports.js this aws export.js is an important file for us because it contains a configuration on how this project should connect to our backend and where to connect and we are going to need this in the next step but before that we will need to install some npm libraries related to amplify and i'm gonna take them from the getting started guide from the amplified docs if we go to the setup full stack project here we should see install amplify libraries and let's choose react native cli now let's copy the npm install command go back to our terminal and paste it here and once that's done if you are on a mac os don't forget to install the pod dependencies by running npx pod install again i'm not going to do that and yeah the next steps is to import and configure amplify inside our project we're gonna do that in the app.js from the root folder of our project because this is the entry point of our application so here let's import amplify from aws amplify then let's import our configuration from aws exports and check out if it's uh in the source directory or it if it was generated in the root folder because for some people it is generated in the root folder and yeah it is important to know the path when you import it so in my case this is dash source and then aws export now with amplify and this config file we can configure amplify by running amplify dot configure and to pass there our config that's it we have configured amplify and to test if everything is working as it was working before let's rerun our project on our device npm run android in order to include all the new packages that we have just added to our project all right and after the build is successful we should see back our application up and running and without any errors if that is the case for you congrats so far so good let's go into the next step and the next step is to implement the basic authentication that is coming out of a box with amplify and with amplifier rack native libraries it is super simple to implement this authentication it's quite flexible and you can adjust a lot of things yourself and we're gonna see what we can adjust in a moment and to do that we will import a higher order component called with authenticator from aws amplify react native now we take this with authenticator and we rub our application inside this higher water component with authenticator and how do we do that we simply wrap where we export the application we export a wrapped version of the application inside the authenticator and what will that do it will add an authentication flow before rendering our application in our case our application is that login screen but after the reload we should see the login screen and all the screens provided by amplify and provided by this with authenticator uh higher water component here it is that's it that is everything we need to do to have a fully functional authentication flow with a sign-in screen then the sign up screen here and also that forgot password flow so at the moment we will not be able to sign in because we do not have an account so let's try to sign up real quick and here i'm gonna fill in this form and then let's press sign up and we will see an error the error is saying that the attributes did not conform to the schema name attribute is required so what does that mean it means that in amplify when we set up authentication we have added some extra fields that we need to require and when we need to take from the user the thing is that this form did not include automatically those fields for the full name and yeah only for the full name because email it is here in case you do not have any additional fields this with authenticator hook should work everything by default and you should not see this error but what happens if we need these additional fields well we have an option to adjust exactly what fields to show in this form by providing some configuration to the with authenticator component to save you some time i prepare the configuration and you can open it also from the assets that you can get in the description below and the file is signup config.js let's open it up and let's copy this sign up config let's go back to our app.js and we will paste it here before exporting so let's have a quick look at this signup config here you can see that we have ability to override the header to the my customized sign up screen first of all we are hiding all the default fields because we specify them in the order that we want here in the sign up fields array and for every field we provide a label a key whether it's required or not and the display worder to know where to display it on the page then we can take this sign up config and send in the options object here as also sign up config if i do that and save and if i go to the sign up right now i will see all the fields that we need starting with a full name email username and password now if i fill all the form in and press sign up we are redirected to the confirm sign up page and here we will need to write our username and on our email we should receive a code that we need to type here and if i press confirm i should be able to confirm my account and here we are we have been redirected to the login screen that we have created from our navigation basically we have went through the whole process of signing up creating an account registering up till the application if you want to sign up and to try it again we're going to get there a little bit later but i'm going to show you how you can do that so here besides importing amplify we will also import the off module and inside the application let's call off dot sign out this is a method to sign out and it will be executed when the application mounts and now we see back the login screen from amplify and after that let's comment it out in order not to sign out always when we open the application you can also try the forgot password flow and here you'll put your username then you'll receive again a code on your email and on the next page you put the code you put a new password and that's how you change your password so as you can see implementing basic authentication is very very easy and uh it can be done in a couple of lines of code yeah right now here we have some config because we have custom attributes but if you don't have them if you need only like username and password or email and password you can do that just with a line of code with this with authenticator higher order component now i want to show you where you can find the details about your users and for that we will open our amplify studio and here under user management you will see all the users that were registered and here i can see one of them is confirmed and two of them are not also if you go to your aws account you can uh search here cognito and cognito is best service that is managing authentication behind the scenes for aws amplify here in cognito you can search the name of your application and in my case that's authentication authentication staging and here you will see information about your users you can see all of them you can see the number of users you can create groups and you can adjust some of the settings but be careful do only if you know what you are doing here before moving to the custom authentication screens i would like to show you a way that it is possible to adjust the styles and how the aws sign up screen and sign-in screens look using this with authenticator because i really think that for a lot of application where you do not need some very custom ui screens going with them with authenticator hook is the best approach because everything is managed behind the scenes and you don't have to take care of these edge cases and yeah the benefit of this is that it is flexible and you can adjust some of the things from this design in order to do that we will adjust the theme of the authenticator and the first thing is to import the theme that it is actually using in order to not overwrite it but only to modify some of the settings from that theme so that is inside this aws amplifier react native and it is called amplify theme let's import it now we can take this amplify theme scroll down a bit before exporting the component and let's define our custom theme so custom theme our custom theme by default will contain everything from amplify theme and we will take this custom theme and we'll send it to the options of a with authenticator component as a property theme so theme double dots custom theme save now everything looks as it was looking before because we haven't override anything from there but in order to override we need to know what is already there and you can find the theming here under customization in the ui components and press on this amplify theme i'm gonna try to leave a link in the description below of this video so you can see this file this is the default amplify theme that is applied to the whole authentication flow here you can see all the styles for containers sections headers and so on so let's have a look and try to scroll down and see here we have a button the button have a background color specified but i want to adjust it in order to adjust it let's add here an override for the button style and the first step here if you don't want to override everything about the button because as you can see right now it disappeared we want to keep the button styles from the amplify theme dot button and only override one property called background color so background color we can say blue and all of a sudden our button has a background color of blue and this way you would style any react native component you can style these components that are used inside the amplify authentication flow by providing any kind of styles for for example if we want to have round corners we can say border radius tan boom we have round corners and so on and so forth we can either override everything from here where you can only override some specific parameters about the button button text inputs and so on this is very powerful because it gives you the flexibility to adjust the looks and feels of this basic authentication flow and as i said before i highly encourage you to first consider this option of adjusting the styles and if that is not the case for your application then continue watching this video and we will implement the same flow in our custom design and custom build screens so let's start implementing everything in our custom screens so for that we will need to get rid of this with auth indicator because we will implement everything ourself amplify we do not need your help no actually we will need it but we can do some of the things ourselves as well so let's uh delete this as well and also let's delete the import from here we do not need it and yeah that's it we should be back to beginning and we should see our custom sign-in screen at the same time let's uh open it up in our vs code by opening source screens and here we have a sign-in screen so let's open sign in screen dodge yes because here we will have to work with v-screen and call amplify api in order to send the data here and to actually sign the user in whenever the user will press on this sign in button this method will be called on signin press so let's comment out everything from here and start implementing our calls so first of all yeah let's get the response and we will get it by calling off dot sign in let's make sure to import off from aws amplify okay and the sign-in function from the off model expects two parameters one of them is the username and the username we will get it from the data dot username and the second parameter is the password and as well we will get it from data.password the only thing that we need to do is to make sure that we make this function async because we are calling an asynchronous function so let's do async here and after we receive a response let's console.log response to see what do we get back so here if i write my username and password and if i press sign in after a couple of seconds we see the response being locked in our console here and the response is a cognito user containing all the information about the user and that session that was created for that user and this means that it successfully logged in uh to my account yeah if i'm gonna try to write a wrong password i will see an exception yes we see the exception possible and a promise rejection and this is how we will handle the case when the user types a wrong username and password we know that when doing that amplify is throwing an error so to handle that error correctly we will put this call inside the try catch method and inside the catch here we will get the error and using an alert component from react native we can simply show to the user that hey there was a issue alert dot alert and for the message of alert we will take the message from the error that was thrown here so let's save and let's try right now once again to login with wrong credentials oops pending sign in attempt already in progress this is actually another error the second one oops incorrect username or password this is the error that i was hoping to receive from the first time so that means that everything is okay right now with uh handling the situation when the user submits wrong credentials and also we handle correctly the situation when the user types in his normal credentials because we see the user being logged here in the console that's good so you would expect that after logging in the user here we would do the navigation navigate home this is one way but i'm not gonna go this route because i'm gonna show you at the end of a video a better way to actually navigate to the home page whenever the user signs in so for that reason i'm not gonna do it right now here what i'm gonna show you as a bonus is how to handle the error that i got a couple of seconds ago if i double press or if i multiple time press on this sign in we see an error that there is a panning sign in attempt already in progress and what does that mean it means that we call this method on sign-in press multiple times without waiting to receive a result back and these triggers that error this is a very common use case and that's why i want to show you in this video how you can manage to solve this and to solve such errors we usually have a state variable for well loading state we need to know if at the moment we are waiting for something so let's create a state variable for loading and set loading use state and initially it's going to be false because we are not loading initially after that when we execute this function basically when we press on the button the first thing that we want to check if it's not already loading if loading we want to return we want to stop the execution because we already pressed a couple of seconds ago and we just wait for the response to reach back to us however if it is not loading we let the function execute till the end but the first thing that we do is we set the loading variable to true because we start executing this function also very important at the end of a function after we receive a result and after we decide what to do we will do set loading to false again to say that yeah we finished executing we finished loading you can call again this function if you want to and the last thing that we we can do in order to give user more feedback about what's happening is based on that loading state to display different text messages in the custom button so instead of simply rendering sign in we will conditionally render the text based on the loading and if loading is true we're gonna display loading dot dot dot otherwise we'll display sign in this way the user will know what's happening and what he should do and right now if i write my credentials and after i will press sign in the label pay attention that is going to transform to loading and while it is loading i will try to press again but that function is not going to be executed because that's how we program it to do so let's press sign in loading and now if i press multiple times i will not see that alert that was seeing that there is a pending request after the button finished loading it's back to sign in and we can again press sign in so pay attention at this loading state because in the next screens you're gonna have to do it yourself but we can move on to the next step and the next screen and let's tackle the sign up screen right because this is uh the screen with the most amount of fields and yeah let's go scroll up on the on register pressed this is the function that is getting executed when we press register and the first thing that i see there is that we have username email but we do not have the full name input so for that i'm gonna copy something for what the custom input for the username and i'm gonna put it before the username as name placeholder name name is required and by doing that we now have also the name field here so in valen register press let's implement the actual logic of communicating with amplify api so for that again we need to make this a sync function we need the try catch block try catch exception and the exception we will right away alert to the user and then inside the trike block we will do following so const response equal await similar to previously auf dot sign up the method right now is sign up let's also make sure to import of from aws amplify and the alert from react native okay so in the sign up in comparison with a sign in where we have two parameters one for username the second one for the password the signup expects only one parameter which is going to be an object which should contain the username password and also additional attributes that we want to set to the user so where do we get all this information we will get them as data in the on register press function and we can probably right away destructure it so username password email and name yeah username we send here password we send here and the email and the name we will send to the attributes so email and name all right after that let's console.log their response to see if everything is working oh but before that i forgot to get this username from the data save so let's fill in this form and at the end let's press register and see if we didn't make any mistakes and we see an error attributes did not conform to the schema preferred username attribute is required which means that we need to duplicate our username in the attributes and forgot to do that as preferred underscore username and we will assign back the same username there so let's save and after doing this we see that cognitive user here which means that it was successfully created and to confirm that we can check the cognito and under users here we will see the user one that was registered but is not confirmed yet alright so this brings us to the next step confirming a user that was just created to do that after our user is successfully created instead of console logging we will navigate navigation actually i'm going to copy it from here navigation navigate confirm email because we need to redirect to that page to confirm user's email in this case we also don't need various pawns here and let's press register but i'm going to have to change the username to user2 register and we are redirected to confirming your email let's first of all open this page confirm email screen confirm email screen and here besides the code we will also need the username of a user because that's the data that we need for the api the good thing is that if you want you can automate this by sending the username from the sign up screen through the navigation parameters here as username and actually i can do that as well like username i'm gonna send it as username and here in the confirmation screen i can take it from the route and let's import user route from react navigation native and then in the form i'm gonna provide default values and i'm gonna provide the default value for our user name to the dot programs dot username save and i'm gonna have to go through this flow again and whenever i press register right now this page will take the username user 5 and it will send to the next page here in the form and i have a mistake here it's not param it's it's params and if i save right now i'm gonna sign up a new account register and i see the username automatically filled because we are sending it from the previous screen through vapor rams awesome so let's implement this on confirm press and i'm gonna start by commenting out everything and we will start by doing try and then catch and then let's uh import the alert and also let's import them off import off from aws amplify so the method here is going to be a weight off dot confirm sign up and here we should send two things username and the code that we receive on email the username we will take it from data.username because it's also inside the form and the password is data dot code we can as well get the response equal and console.log to see what do we get back response and also make sure to make this function a sync save let's give it a try right now username and let me check the code that i received on my email and if i press confirm and open the debugger i should see here success which means that my user with a username username was confirmed by providing the code from the email let's double check it here in amazon cognito and we see this username with status confirmed perfect this user will be able to already login in them account so after this is done where should we redirect the user we will redirect him to the login screen so navigation navigate not home but sign in and we don't need the response we don't need to cancel log because we know that if this didn't throw an error and if this didn't go here it means that it's successfully confirmed account and we can safely navigate to the sign-in page as well on this page we have this recent code button that we can use whenever we didn't receive a code and we want to try to resend it once again so let's implement that as well here resend press i'm going to copy the try catch from the previous block and the only thing that we need we do not need to navigate anywhere and the method is called recent signup code and the method expects only one parameter for the username so we do not need the code here and let's not forget to make the function a sync if i'll try to press now resend i will see an error oops data is not defined because we do not have a data here the data in the previous function we receive as a parameter because that's how use form works but in the on recent press we do not have access to that data to get the username of a user one solution for that is going to be to watch the username field from the use form and by watching it means to create a variable where we will keep the username like a copy of a username where we will need it so yeah let's disrupt your watch function from use form and we will say call user name equal watch and we will watch the field with the user name name now we have this username that we can simply use here without the data in the on resend press let's try it again resend user is already confirmed because yes this user already is confirmed so we do not need it however if i will use another username for an unconfirmed user such as user 1 i resend and i don't see any errors which means that it was resent successfully what we can do is we can provide another alert so the user knows that something happened and for the message we can say say that code was resent to your email let's press resend success codes are sent to your email probably you will find better text than me but you get the point so we are done with this confirm email flow the last flow that we have to implement is the forgot password so let's quickly go there as well screens for good password screen let's open it up let's right away import alert and also import them authentication import authentication from aws amplify in the one send press we will do the try catch block and i'm gonna actually copy it from somewhere here because i'm already lazy to do the same thing over and over and the method that we will call here on the authentication is the forgot password this method expects only one parameter username and we will get it from a data dot username like this and let's make this function a sync as well after it successfully does this we will navigate him to the new password screen so let's do that as well and if i say here that i want to reset the password for username because that is the user that is confirmed here press send i'm redirected to reset your password screen and on my email i received a code now let's implement as well the reset password the new password screen which is this one and besides the code and the password that we have here we will also need the username so that amplify knows for what user we are trying to reset the password so let's do username placeholder username here and username is required okay so let's go in there on submit press and let's bring the try catch block here as well let's bring it here and the method that we're gonna call is forgot password submit but before that we need to import authentication to get some import unexpected the weight that's because we need to make the function a sync save and here we need to finish implementing the function forgot it's forgot password submit and this method expects username then code then the new password so data dot username then data.code and then data dot i have a new password password after this is successful we will navigate to the not the new password but back to the sign in so uh username is username let me check the code and for the password i'm gonna say new password submit password cannot be empty because the name of our enter new password is name but it should be password and it was redirected home because we forgot these console worn data and navigation navigate home so let's remove these two lines as well let's retry the same flow again so let's press forward password let's request a password reset for the username send and after inputting the code that we received on email i'll write the new password new password submit and we're back to the login page and if i'm gonna try to log in with a new password new password sign in i don't see any errors which means that we have successfully signed in with a new password after we have reset it all right so we have implemented all the screens that we will need for managing this full authentication flow with our custom ui screens we have implemented the signing screen the sign up screen the forgot password confirmation of email and resetting the password we have done all the five screens and we done it with the authentication module that we imported from aws amplify the last step that we have to do is to properly navigate the user towards the screens that he should see so if he is not signed in we should uh resurrect him right away to the signing page however after he presses the sign in he should be redirected to the home page and take it from there to do that let's open our navigation index here and here we will conditionally render either the all the sign-in screens that we see here or we will render the home stack screen if the user is logged in but the question is how do we know if a user is signed it or not well we can do that by as well using the authentication of from aws amplify from react we will need use effect because we will check this when the component mounts so let's define this use effect which is going to be a function here and an empty dependency array and in this function what should we do we will call a function i don't know check user this check user function is going to be a simple check user function that will be also a sync because we will call some asynchronous functions from authentication and let's say const authentication user is equal to a weight authentication module dot current authenticated user current authenticated user is a function that will give us back the user that is currently authenticated and there is a parameter called bypass cache and if we set it to true this will make sure not to take the data from the cache but it will actually query cognito in order to understand if the user is logged in or not okay after we get this authentication of of user we will need to store it in state so for that let's create a use state hook and let's do user and set user use state and initially it's going to be undefined okay so with this properties let's also make sure that we set the user in state and we will set them user that we get from the current authenticated user function now we will have to conditionally render the parts of the application that actually needs to be possible to be rendered to the user so let's add the javascript operator here and let's check if user is defined then here we will render the home screen otherwise we will render all of these screens here save but we cannot render multiple screens in the same block so for that reason we will have to put them inside a fragment like this and that's it we already are redirected to the home suite home which is our home screen here a very simple very basic one and if i refresh initially i see the login screen but if i don't do anything we are automatically redirected to the home suite home and why does that happen it happens that by default user is undefined here and after that because it's undefined it will not render the home it will go straight into the second part and will render the sign in screen after a couple of seconds after we receive a response from a current authenticated user we set it back in state and then it's already not undefined but an actual user and it automatically switches to the home screen that's already good but i don't like that initially we see the login screen and after that we are redirected and for that reason i'm gonna provide a loading screen so i'm gonna check if user is equal to undefined then we will return simple view with an activity indicator let's make sure to import this activity indicator from react native and i'm gonna style their view to display it in the center and one more thing if a user is not authenticated this method will throw an error so we will put this in a try block and if execution reaches the catch block if this method through an error then we're gonna set our user not to undefine but to null because we know for sure that the user is not logged in and only if it's null it will reach the sign-in screen because if it's undefined it will reach this if statement will return our activity indicator and that's it okay let's try to press reload and instead of seeing the login screen we see this activity indicator but i made a mistake here i forgot the off user and to put it also inside the tri-catch here so save and right now home sweet home but we didn't see the login screen all right that's good let's now implement the sign out functionality and for that i'm going to go in the our home screen index and here i don't know i'm gonna add a simple text so after some very basic styling here we have our sign out button and to the sv sign out button i'm gonna attach a on press event called sign out now let's implement this function const sign out equal a function and what should happen here first we should import authentication and then we should simply call off dot sign out save and now if i press on the sign out nothing happens but if i refresh the application after the loading screen we are not redirected to the home screen but we are redirected to the login page so we see that that sign out function is working but our application is not responding to this event accordingly it's not responding in real time we had to refresh and the same issue will happen when we will try to log in right now we will not be redirected and after we refresh the application then we will be redirected so how do we solve this issue and why is it happening it's happening because our navigation here is rendered conditionally based on the user but this user is queried only when the component mounts here so when the application starts when the navigation mounts then we check the user we need a way to respond to sign-in events to the sign out events in order to re-fetch our user using current authenticated user how do we do that we do that by using the hub that we will import from aws amplify and this hub is a way to tap into the amplify events and to respond to them so amplify almost for everything that it is doing it's firing an event if it's a sign in it will say like hey hub there is a signing event sign out sign out and for other services as well so we will register a listener on that hub using the use effect and that listener as well is going to be registered at the beginning of when the component mounts and yeah let's define the listener first listener is a function that will receive some data and right away let's just simply console.log data now we will register this as a listener using the hub dot listen we will listen here to the channel what channel the channel is the name of the service that we are trying to listen to so it's authentication and then the callback is our listener that's it we have registered our function as a callback method whenever some events are happening in the authentication module also let's not forget to remove this listener whenever the component unmounts in order not to have memory leaks to do that we're gonna call hub.remove as well authentication and then listener save so let's open our debugger here after our login is successful we see here our data that was delivered using the hub that we were listening to so here we see that the channel is authentication and the payload here contains an event and sign in event this is the thing that we're interested in so data.payload.event is the variable and we can do here like if data.payload.event if this data is equal to sign in or if this data is equal to sign out what do we have to do we basically have to call this check user method again save okay we are on the home screen right now and if i will press sign out i'll be redirected here because our navigation is listening to authentication events and is properly responding to them by checking the user one more time and the same will go with login but not just now and if i press sign in loading and after that we are automatically redirected to our home page all right guys that was everything that i wanted to teach you one improvement that you can do is to extract everything related to the user and checking the user in a context that will wrap the whole application and here in the navigation you will just get the user from the context that is a better approach because at the moment we are dealing with a lot of authentication logic inside our navigation which doesn't make a lot of sense navigation is for navigation and authentication should be a separate thing all right thanks for watching till the end and please let me know down in the description in the comments below what other projects i should do in the next tutorials because i have a lot of plans for 2022 but i want also to make sure that what i am doing is something that you actually want and you want to learn if you enjoy this video smash the subscribe button somewhere in the description below and also check out this video or this video because they are also very good tutorials where you will learn a ton but for now take care stay hydrated and write clean code

Channel: notJust․dev

Views: 62,543

Keywords: vadim savin, notjustdev, not just development, react native, react, react native tutorial, auth flow react, authentication ui, login auth react, login auth flow react native, sign in react native, sign up react native, authentication, react native ui, react native live coding, react tutorial for beginners, aws, aws amplify, aws amplify authentication, aws amplify authentication react native, aws amplify reactjs, aws amplify react native, aws amplify tutorial, aws tutorial

Id: EvzLRCDe6VI

Length: 48min 39sec (2919 seconds)

Published: Tue Jan 25 2022