Authentication in React Native using AWS Amplify V6 | DEVember Day 9

what's up not just developers welcome back to demember a month-long marathon of reck native tutorials today is day nine and the topic of today's video is going to be authentication flow and specifically we're going to learn how to implement authentication flow using AWS amplify version 6 uh and what exactly you're going to learn in this tutorial you're going to learn how to set up an amplify project connected with your Rec native application uh we're going to learn how to add the authentication flow to our application we're going to start by the using the built-in authentication screen provided by amplify and later we're going to also see how we can customly build some of the screens ourself and how we can directly call the authentication API for sign up sign in and other off methods before we get started I want to uh tell a couple of words about demember as I said this is a monthlong um marathon of react native tutorials and every single day we're doing a separate project a separate uh we cover a separate feature or topic uh and everything is happening here on YouTube all the videos are on the channel so check out the other videos as well if you're interested in learning and becoming a better R native developer if you have ideas make sure to share them in our idea board uh on GitHub uh the link is here and uh actually the idea of today's topic I saw a lot of people mentioning in the idea board about the authentication in amplify V6 so I decided we we we we've got to cover this I also know that a couple of people from the course asked me about the authentication in version six so let's have a look at what changed from the previous version into this one and how we can Implement how can we can use the the new version in R native demember is not only about education it's also about giving back that's why during this month we have started a fundraiser called education for children and during this fundraiser we are uh trying to support the efforts of organization save the children to provide uh education to every children in the world if you want to support this C make sure to find the Donate uh pop up somewhere here on YouTube and we also have some incentives for for your donations I want to say big thank you to roio Sagar Val Travis for for your donation and for everyone else who also donated during December we are also going to donate $100 to this cause for every 1,000 subscribers so by simply pressing that subscribe button you're contributing to to the cause anyway let's get started hello uh roel hello Stuart how are you doing guys are you ready for this one I see that roel has been waiting for for this tutorial for a long time perfect hello from Somali hello anyway here is our application uh the git repository you'll find also in the link in the description below and I'm keeping a branch I mean two branches for every single day so what we have to do is clone the repository and then switch to Day N start here is our day n start give me just one sec and so after you clone the repository switch to the day - start and install the dependences with npm install after that run the server and here we should have it let's restart so yeah we already have eight projects here are some interesting ones for example in day six we have implemented the Tinder swipe animation uh so you can do that as well then in uh yesterday we have actually implemented yesterday was day eight we have implemented this we application that is fetching data based on the current location of a device so go through offer some of the project you'll find a lot of interesting stuff but today we're going to focus on Day N which doesn't have anything yet so let's go ahead and create a folder we're using export router so to create some screens for today's tutorial we are going to Simply create a folder Day N and I'm going to copy the index from day8 to our day n in order to do authentication AWS amplify V6 Authentication and here the title and the name now when there is a button on that page so when we click on that we are going to go to the um let's go to the I don't know protected to a protected uh screen and that protected screen we would like to uh protect with the authentication flow so first of all we're going to create that um that protected file so let's go ahead and create protected. TSX let's create a fun a simple functional component I'm going to Simply give it a font family now let's see if we have these screens correctly created I'm going to go to Day N and here we see authentication and I can press on the button we still let's do go to protected page if I press here go to protected page we see here hello there uh you should see this page only if you are authenticated all right so in a moment we're going to protect this page nice okay so at the moment the page is not protected uh anyone can go there but our goal in this tutorial is to add the authentication flow before we reach this page so yeah the rest of our application will be open to public but some parts of our application will be protected by authentication flow so uh for that what we will have to do is of course we're going to go ahead and open the AWS amplify documentation because we are going to use amplify for for the authentication uh let's go ahead to open the documentation where is it I need amplify docs not this one the documentation so amplify is a set of tools and services from AWS that makes it easier for frent developers to build full stack application so it's really easy to add things like authentications storage data uh API and more uh in this video we're only going to focus on the authentication so let's open docs. amplified. AWS let's select version six here the latest version and let's go ahead and switch our framework to react native um here we're going to go to the start uh let's open the getting started and let's go ahead in the introduction to see what do we have to do so amplify is made up of a lot of other services like amplify CLI that allows us to configure our backend from the command line some amplify libraries uh that will help us Implement authentication data and so on the amplify Studio this is the visual uh application that lets us manage our backend and some other stuff like UI components that we will need for out of a box authentication screens hosting is not for us hosting is mostly for web applications now let's go ahead and set up uh amplify CLI on our system for that all we need is no GS and npm and also git but because we already are building our re native application we should already have this installed uh it supports Expos CLI so let's go ahead and follow the documentation we will need a uh AWS account so if you don't have one yet you can create one by pressing this button uh it's free to to create the account but you'll have to provide your uh credit card um anyway for the things that we're going to use today like the authentication uh it will be covered by the AWS fre tier so you're not going to be charged anything unless you I don't know do some mistakes but I'm going to show you everything so you don't have to worry about that all right next steps we need to install amplify CLI globally so let's do that using npm install DG it stands for glob Global I'm going to open a new terminal here and let's install amplify CLI roel is saying I think I read that version six is not compatible with Expo uh we're we're going to see that in today's tutorial there is no such thing as not compatible with Expo it's either it works out a box with Expo go or if it doesn't work with Expo go we have to create a development build which is not nothing impossible we just have to build our native side um by creating a development build so we're going to see today if we need to do that but I believe should work out of a box but we'll see yeah so we have nbm install DG that means that now we have access to amplify so if I do amplify version here we're going to see that amplify is at 12. .8 let's go ahead and the next step is going to be to call amplify configure I already have this one configured but um yeah if it's the first time you're working with amplify run this command in order to configure some uh properties of your amplify for example you're going to be asked about the region so select one that is closer to either you or the end users of your application uh then it will automatically open the a window in your AWS console to create a user that will manage the key the the key to give access from your CLI to your AWS account uh here is all the details that you need to do you're going to have to attach this administrator access amplify policy after that review click create user open that user under security and credentials you're going to have to create an access key press create access key choose uh the CLI you're going to want to you we need this access key for the CLI after that press the button next and you're going to retrieve a access key make sure to copy them and uh we're going to need them back in our CLI to enter the access key that you're are going to receive here and the secret access key that is hidden here you can leave a profile name to default and just continue um click next after that your uh amplify CLI is going to be configured and we can all continue to the next step to set up a full stack project to do that we're going to follow the next documentation set up fullstack project actually we don't have to create a project because we already have one but we need to create an amplify project an amplify backend to do that we are going to Simply have to run the amplify init command in our root Pro in the root of our project let's go to our project and let's do amplify in it let me zoom in a bit I'm going to make it full screen um what the the name of a project I'm going to leave it as demember and it shows me what configuration it will apply the name environment then it detected that I'm using visual studio code it's going to be JavaScript react native Source everything is good let's just press let's type y for yes press enter and here you're going to um be asked to authenticate we're going to authenticate with AWS profile and if you created the previous step in the previous step you created a profile called default so simply choose that one here and we are seeing that adding back an environment Dev to a amplify application that's all we had to do to initialize our amplify project now what amplify is doing is it's configuring our blank project inside AWS Cloud for that it's creating some uh resources like a cloud formation stack some yam rules in order for to give it proper access to different services to communicate between each other in your AWS account like an sree bucket which is for storing the Cod code the the code for your backend um an un authentication role for allowing unauthenticated users to to to do some calls to our backend depending on the um policies that we will provide later for for example for data or for files some applications have unauthenticated access to them to some some things for example Tik Tok if you're sending a Tik Tok to someone they can open it in browser and you don't have to authenticate in order to see that content so yeah anyway here help improve amplify by sharing uh I will do no and and we see that our backend has been initialized successfully and everything is perfect what happened during this process let's have a look I'm going to do git status to see what folders did we did it create first of all it modified the git ignore which probably added some files that should be ignored yeah the amplify part this is not very important but the next important part is the amplifi directory if we look in the root directory we see the new folder called amplify here in the amplify is where we will create our back end then the types and so on so we're going to work with Pro we're not going to work a lot today but just for you to know this is where the code for our backend leaves okay now that we have initialized the next step is going to be to install the Amplified libraries uh let's select XI here and let's copy the command for all the JavaScript libraries that we're going to need so npm install that's going to be a amplify the a amplify react native and some other dependencies like net info a sync storage okay I need to do a leg c p here deps because I have a dependencies that the the markdown dependency from previous videos is not happy with the react version that I have so I have to do that but anyway uh at this step my AWS configuration does not get created only creates the AWS exports file uh Source a in the source directory we also have a new file called AWS exports this this one was added right now when initializing our project why it's not here a exp sport give me just one second to to see if everything is going fine is the AWS export file added to GE ignore let's check that yes the a exports for some reason is added to G ignore so in in the past the ads export was not added to the G ignore because this one contains just some links and configurations on of the actual services that our back is connecting to at the moment it doesn't have a loot but as we add like the API it will have links to Cognito user pool and so on but but roel is saying that in his case the Els configuration Json file is not created and you mean it should be created where um when initializing a new project a few things happen it creates a top level amplify during the tutorial it creates a file configuration in your designated Source directory well that's the thing so this amplify configuration Json for me was called AWS exports as it was called before I'm not sure why it's not created with I I guess they just simply change the name of a file in the new version I'm not sure why I don't get it why it's still AWS exports but the name of a file is not that important it can be anything the content of a file is what's important this file we are going to use it in the next step to configure amplify so it we will just simply have to to properly access it using it its name so what I'm trying to say the name of the a export file or a config is not that important the content is so we're going to continue we installed the dependencies of XO CLI and in the next step we have to configure amplify we need to configure amplify and we are going to do that um well as as soon as possible in our application three uh in order for for the screens that depend on amplify when being rendered to already have amplify configured a place where we do all of this configuration usually is the root layout because this is a layout file that will be wrapped around any screen in our application it's the root layout and this is the entry point as you see that's where we load fonts and more so let's go ahead and configure amplify in this file so all we have to do here is import amplify amplify from AWS amplify now we need to import the configuration file that was generated in our source directory in my case it's called A6 port in your case it might called a configuration let's call the variable amplify config as it is in the documentation config from uh why do you think it's amplifi configuration oh no wait a second I'm I'm um I didn't see that one it actually has an amplifi configuration Json file but it still has v sport so now that uh that's a bit confusing previously I thought that that's the same file but they look a bit different not sure why they not sure why they generate both of them because if you decided to switch to ajacent file for the configuration just keep the Json file with no longer need V exports but maybe V exports is still generated to support older versions so anyway that means that we're simply going to ignore a exports for now and only work with a Json file which has the same property now in the layout we imported the amplify config from our source directory amplify configuration. Json and now that we have both amplify and amplify config we're going to put them together and say amplify dot configure and we're going to set send the configuration object just like that our application when amplify should be configured the package aw amplify R native does not seem to be linked oh that's where we probably will get into into errors um you rebuild the app after installing the package you are not using probably that means that at this moment the library AWS amplify react native does not support Expo go it has some custom code that is not available in Expo go so that will mean that well we are not stuck all we have to do is we have to create a development build I didn't think we're going we are going to get into the development build that early uh but it seems that we are forced to do that let me just check a couple of things um so in the documentation we say that AWS amplifier R native AWS amplify react native let me copy the name of this to see to to look at their npm page to see what do they say about this if they have anything it's not this one or is it this is no has been relas anyway let's go ahead and as I the as I understand from the error message it says that a simplifi re native does not seem to be linked which means that it's some uh problems with unexisting native side code that this Library depends on and it recommends us to do pod install install but we are using Expo so we don't we cannot do pod install what we can do is also we see that uh make sure you are not using Expo go what does that mean that means that instead of using the expoo application to run our application we need to build the a custom development build to do that let's go ahead and stop the development server and let's go ahead and run npx Expo run iOS what that will do is it will um it will build the native side project first of all it will ask me to give iOS bundle I'm going to give give press enter here it created the native project uh that means that it created the iOS directory here it updated package.json and added index as entry point for iOS where is it package.json and what you don't like about npm roel is asking in your opinion are there any drawbacks in using version five the drawback is that um yeah you're you're in a way being left behind because they keep adding new features bug fixes uh and all the improvements to to the latest versions so I would recommend following and trying to use the latest the latest um stable version of libraries you would like to use a older version uh as long as like the the newer one is not maybe stable enough or it's still under development so after running one more time it seems that it started uh installing the pods planning the build anyway what's happening when I do this npx run IOS as I said it builds the project it builds a custom development build uh and it does it locally for this to work I have to have uh additional things on my computer to to make it possible for example run iOS will build it for iOS and for that I need to have a code installed uh on my computer you're not going to be able to run on iOS on a Windows machine only on a m OS because you depend on X code to do run Android that will generate the Android side Android native side project for that you need Android studio and Android SDK setup uh for the build to go for Android we can build on Windows Linux and Ma OS systems uh another thing is that if you don't have this Android Studio or X code on your system you still can build it you still can create a development build by using yes and by building it in Cloud so yes here in the Expo pre-build we see that we can do that locally and we can also do that with Y and the this Android and iOS directories that we are building right now you might think that this looks like a ejecting from expo well that's not the case there is no ejecting from Expo any longer anymore a couple of years ago there was this concept of ejecting from Expo and when doing that you would generate Vios and Android folders but you you would not be able to go back to have Expo manage your native side projects so you would basically take over managing the native side project projects with Expo pre-building these folders IOS and Android they are safe to be deleted at any point in time and based on the configuration from up. Json and from all the config plugins that we we we we add here we can run again the pre-build command to generate them on the fly so that means that IOS and Android they are not a source of Truth they are they can be regenerated and that also means that it it's advisable not to go inside this project and do any changes try to do the changes from your JavaScript side from your Expo application and in order to make this to to enforce this rule that IOS and Android folders they should be able to be generated at at any time what we can do or and what is recommended to do is to add these IOS and Android folders in our git ignore so we can add them the because right now if I'm going to do git status the iOS folder will be added to our git repository but as I said I don't want that I want them to be a to be built on any machine based on the code that we have here on the expa side so let's add iOS directory here and Android as well think we are directory so we can do it like this now if I'm going to do do npm status again we see that we are will not publish the iOS directory to our GitHub so our application will be able to be uh run if you have a development build downloaded from somewhere for example from es or if you would build it locally on your machine using npx run iOS we see that the application has finished building successfully it's running already here and if I will uh open it up like this you see that the the native side application is already not expoo it's called demember using our the name of our project from ab. Json here uh and yeah basically that's a custom development build and it wasn't that complicated to do it might sound complicated like what's a custom development build what what's that it's simply running npx export run iOS and that will create the iOS directory here and we'll create a build specifically for our project containing only the code the native code that our project depend depends on and in fact like our demember application will be much smaller than the Expo go because Expo go has to have a lot more native side code pre pre-installed there so back to our demember we see that in running our application in Expo go I can still do that but uh I would need to be to make sure that the packages that it depends on they are I either you are either handling this error yourself or yeah basically it works as you can see on Expo go but it will not have the native side cic the native side logic of of um the the amplify libraries so if we need the native side of amplify we're going to use the de the development build that we just created here the fonts are actually also loaded correctly there is something weird at the top with the the header bar but I'm not sure maybe that's because of the temp the dark them that I'm using yeah yeah yeah yeah now that I switch to light mode for better and now I can go to page n for the authentication everything is still working so probably for everyone else who had issues with uh using amplify version six in Expo the solution is to Simply create a custom development build using npx run iOS or npx run Android and in that situation you will be able to continue now going back to the documentation uh let's see what we have to do we have configured we installed we configured our amplify we ran our project it still runs correctly and we can go to the next step The Next Step here in the documentation is about API but we're not going to do that we're going to go right away to them adding authentication so to do that using amplify when adding a service uh from the CLI it's as simple as calling amplify add and the name of a service so let's go ahead and add authentication let me actually do get checkout minus b day / end and let me commit the current changes for you to have like multiple commits to to be able to look through them uh set up setup amplify I can also do a g push origin what's going on there not sure if you can hear it but there's some weird noises okay so what else want you to do is to start adding the amplify uh authentication Service to do that ify add off and here it asks us do you want to use the default authentication and security configuration yes I will use the default one how do you want your how do you want your users to be able to sign in using username email phone number I think I will go with email let's go ahead with email do you want to configure advanced settings h do we or should we keep it simple let's do now I'm done let's keep it simple for now successfully added of resources and we need to do amplify push in order to create these resources on our AWS account let's see first of all what changed and I'm going to look at that by simply doing uh yeah the team Prov Ider file here added a new category off and that's it yeah as you can see in our amplify configuration nothing changed yet because amplify configuration is about connecting with services that are already connected in order to create them we need to run amplify push what this will do is we'll take the changes that we created right now with amplify we'll uh will'll use these changes to create new services in AWS as we can see the next step is going to be to create the authentication if that's what we intend to do we're going to press enter here and we're going to wait for amplify to set up very require services on AWS to start managing our users creating them and so on uh we're going to have to wait a bit for for V services to be created uh let me actually maybe open AWS console so that we can also see what's happening what's being created behind the scenes even though that's not very that's not very important I believe that knowing what's happening there in our account what services are being used behind the scenes can help you understand better what's going on and yeah how to how to manage it or how to solve some issues if you're going to have them let's me come on okay here it is my AWS console I can go now to AWS amplify and here we should see our project if you don't see it yet that means that you're looking at a different region go ahead and open a the amplify configuration file in here you should see the the project region which is Us East one back in our fold back in our uh amplify here we see that we are currently in EU West one so if I want to see the newly created project I need to switch to the US East one Us East one I think it's this one uh because yeah we only see projects from the region we are currently um that is currently selected here so yes we see the project demember let's go ahead and open it up and demember has a backend environment it doesn't have any hosting because it's not a web application but it has the back end uh and the back end has the authentication category let me check what's going on in my terminal in the terminal I see that the deployment was created correct was successful uh and I believe it's a bit faster than than usual because all these deployment take forever but now it was quite fast and on our AWS um on our AWS side if we look at the backend environment we can go ahead and press on this authentication to see them information about it it will open also in this amplify View and by pressing here view in cognito it will open up the AWS Cognito service which is responsible for the authentication again amplify is nothing new amplify is just a way uh a tool that helps us in with other existing services on AWS and instead of us having to create and configure and apply of the security measures ourself ampli amplify has a lot of these default configuration files and an easy way to to create them and configure the way um it's best suited for most use cases so that means that amplify when we add authentication it creates and sets up an AWS cogn Cito service the Cognito has its own documentation so you can really get into depth in what's possible here but Cognito is made up of user pools uh where we keep or yeah where we manage our users so if I'm going to look for something like demember here we will find a user pool with the name demember and this user pool was created today that means that this is the one that I am looking at and it has zero users at the moment later we're going to see like as we add users we're going to see them here try not to change a lot of things from this dashboard because if you change it from here you're not going to have that changes in your amplify configuration files and the next time you're going to uh deploy um the user pool will reset to the settings that you have here in amplify so every set every change that you have to do or most of the changes that you have to do you will have to do with amplify update off for example and by doing that uh you we will be able to for example create or update user pool groups we can create uh we we can add social providers like sign in with Google and uh Facebook and yeah that's the way to update settings about our um our back end anyway um don't want to get even more into depth not to confuse you I just wanted to show you a couple of things in order to create like the visual map of what's happening out there as we implement it uh but after doing the amplify push back in our amplify documentation yeah it actually says if we run in cons amplify console it will open up in AWS without us having to to navigate there so you can do em ify console here it should open the AWS and actually it does automatically here so that's easier way to to find it anyway okay creating the login UI there are a couple of ways to create the login the login UI we can use pre-build components that are coming from amplify that would be the easiest way because we don't have to code anything we don't have to create any UI it's a very simple hook uh higher worder component that we can add and get all of the screens out of a box or we can set up custom screens and simply call them some methods like off sign up sign in reset password and so on we're going to try to cover both of these scenarios and we're going to start by using the pre-built or the the user interface for the login and authentication screens coming from amplify UI library now that let let me read a couple of things to see if anything else changed to your angular application that's interesting install amplify config package includes yeah this package uh includes react native specific user interface components that we will be able to use use let's go ahead and install them in our Expo CLI so let's go ahead and run npm install all of them and then Legacy perer depths uh so so question if you do the prebuild and inject native side code to you do you still upload to Expo where where to upload to Expo do you mean if you can use y yes to to build in the cloud your application and maybe also submit if v a question yes even with custom builds you can use y yes and you can even use y yes to create a custom build if you don't have like for example xh hold on your system if you're working on Windows and you need to do a custom build for iOS um that means that you cannot do it locally on your machine you can use yes to create the development build in the cloud then download it on your iOS device and start your development server on a Windows machine from the development build that you downloaded um scan the QR code and continue working with within native build with a custom development build do you intend to use it in the off interface following uh solid what what exactly so we have installed these libraries let add the amplify UI authenticator component after installing some additional libraries we might need to rebuild our application we're going to see if we need to do that right now but let's go ahead and follow it Expo CLI we're going to need to import we indicator from UI rect native let's use them now what and where do we use this with authenticator hook well in some applications where you want to protect the whole application with your authentication screens in that case you would go ahead and wrap your root layout inside the W Authenticator because you say that any screen in my application needs to be protected by authentication well in some cases that's not the case at least you might have a couple of onboarding screens that you don't want to protect with authentication flow you want anyone to be able to see onboarding screens maybe some also public screens and only protect a part of your application that's the most common uh situation uh that you going to get into so for that reason we not going to wrap our root layout but we're going to also we are going to wrap a layout that contains all the screens that has to be protected we might if we want all the days to be protected we we will have to create a layout here in the days and use the whff authenticator in that layout what I'm going to do is I want only the day nine and actually not the whole day nine I want the day n uh index to be accessible by anyone because this looks like a onboarding screen we only want the protected one to be protected so how do we do that well we could add here with authenticator but that will mean that only this screen is going to be protected if we want to have like more screens in the protected application of course we want in that case uh this is not the solution so we don't protect a screen we should protect a layout a group of screens let's go ahead and create a folder here called protected where we will keep all the protected routes I'm going to move this file there with renaming it to index in order to still have the same URL SL protected uh and I'm going to go here to the nine go to protected page I still I cannot go there come on I should be able let me restart maybe when renaming the screens sometimes this can happen so let's go to Day N Go to authentication hello V perfect now our protected is uh a folder a simple folder it does not mean a separate Navigator because without a layout file inside the folder the screen index will be part of this layout of the parent layout so it will check okay protected doesn't have a layout I'm going to go to check if D9 has a layout well Day N also doesn't have a layout I'm going to check if days has a layout it doesn't have so it will go all the way in B part of the root layout here now in order to create a nested um Navigator let's go ahead and create here an underscore l layout. TSX in the protected let's export default uh function protected layout and it will simply return um slot returning a slot means that we are not adding like additional Navigators but we are simply rendering the stuff that we want to the screens so if I go to nine go to page doesn't work for some reason protected layout slot nine if I go here yes I I'm navigated here and in fact I'm going to separate this declaration of function with exporting it protected route layout if I'm going to do here console war protected we're going to see that we don't see this console warrant unless we go to the go to protected page we see this console log protected so any file from this from any files that are uh any screens inside protected folder now we'll go through this protected layout so by applying some configuration to this layout all the screens below will contain like that a piece of code so that means that we will use the whff authenticator here let's go ahead and import with authenticator from AWS amplify react native how is it called this one and now if we simply wrap around our protected route when exporting this with authenticator higher order component what it will do is it will make sure that the user first creates and signs in and only then we'll go into the protected route and render the screens that it should render so let's go to nine if I go to go to protected route boom we are uh on the signin screen because we authenticator is the first one and only when we authenticator decides that it's time to show the protected layout including the protected routes then it will render it so now in this page we can go ahead uh to to sign in or we can go ahead and create an account I'm going to go ahead and try to sign in with my personal account my personal email create account after that we are redirected to the confirm your account all accounts uh this is the configuration you can also have um you can also configure Cognito not to have to confirm your email but this is something useful and I automatically received a confirmation code a six-digit confirmation code on my email that I can use here to confirm my account if I press confirm account boom we are here in the hello ve and now if I go back and go back to protected page I no longer see the authentication screens because I'm authenticated the application knows about that and it will also persists over application closes so the caching the tokens and uh re refreshing the tokens all of this is handled by the with authenticator now as you can see it's automatically magically going there the next step is how can we go ahead and sign out from this page well you would have a settings page or a profile page inside your protected uh folder or inside your protected application and let's say that you have here a button that will say sign out so where is the button come on I need to see the button nine go to protected page sign out when I press on this button I want to sign out so to do that we're showing here how we can create a sign out button we need the user authenticator hook uh and a selector I'm not sure what's the selector doing but first we need to do import use authenticator from AWS amplify UI react native Now using this user authenticator we can get access to things like it's need a selector but it's it's optional so I believe that now it's it shouldn't be so using the with indicator we can get access to different functions like sign out when calling this sign out and I'm going to call it when we press on the sign out button sign out then uh amplify will sign out the user will refresh all the tokens we'll clean the the cash of it and let's let's let's have it let's check it out if I press sign out we are automatically redirected to the sign in how did that happen well that happened because back in layout we have this with authenticator it's saw that it uh signed out the user and instead of rendering the protected routes the protected layout it will render the signin screen that it has by default like there so now if I even refresh the application and we'll try to go there we're still going to be gred with a signin screen perfect now I can go ahead and sign in here with a account that I already created and it should work by default sign in perfect now hello you should see this page only if you are authenticated and just like that we saw how easy it is to use this built-in predefined uh authenticator UI coming from edible samplify UI react native there is also things that you can adjust in terms of styles um but yeah uh let's see let's see we don't need this one in authentication let's see what else is important for me to to explain to you let's go ahead at the UI Library I'm going to click on UI Library here at the top it's a completely different website which is a bit confusing uh but here we can look at the rec native components for the UI library and we can look at the connected components here we see authenticator am I looking at the correct stuff yeah it's it's not the with authenticator it's authenticator why don't we have a documentation for with authenticator hook yeah this documentation is lacking like it can be so much better I understand what where the the confusion is coming from yeah I don't even show them uh feing overview so let's try to adjust some of the styles using this uh fing and let's see if it will work we need to provide this Fe provider with a custom fee so let's go ahead and import F provided from UI re native and we're going to do that in our protected layout so let's import here the theme provider but actually it shouldn't be here because if I'm going to add the F provider here the F provider will be inside with authenticator but with authenticator depends on the theme so for that reason I'm not going to add it here but maybe I'm going to add it at the root layout where we uh set up amplify so I can import F Provider from awsi R native uh I can Define the F here at the top and I can rub it maybe around the stack here now let's see let's press sign out and see if anything changed I'm going to maybe restart the application or refresh at least let's press R to reload I go to nine go to protected routes doesn't seem to have changed anything tokens colors font primary black tokens color if they would provide the type that would be easier to style it let's look at the theme provider and see the theme what type it is theme components tokens if our theme we will type it with the theme import it from here will it work fee with whole properties optional okay okay so maybe f red will it change yes it changes for the header Here theme structure design tokens amplify UI uses design tokens for storing so it has primary 10 20 40 and so on a full theme would look like this tokens colors and font size colors white black background yeah that's just guessing how to for example if we would Target links right how we would do that link no colors border with font sizes space yeah tokens does it have a button design tokens yeah that's not very useful to be honest have no idea uh colors has a brand property and here primary red it will not work yeah I found how we can change the the primary color of the background so as you can see um yeah it's a bit challenging to to design it's possible to add theming and to change like the colors the Border sizes the font weights and so on but it's and not really possible to change a lot about the the structure of this um of this screen sometimes you need different uh user interfaces for your screens and sometimes you need to to customly build them so what's going to be the next step we saw how we can use the pre-built components and this is great for getting started really fast it will take you probably 10 to 20 minutes to set everything up and to have a full authentication flow and it not only has like sign in and sign out but also like forget password flow uh resetting confirming account so all these screens that a proper authentication flow needs however once you get to a point where you say like okay I need some custom screens for my flow uh to to customize them to to make them work and look uh based on my design in that case you can do that as well you're not limited and to do that we simply have to build the screens ourself and call a proper function from amplify we already saw in the day9 protected index by calling this sign out from user authenticator we can sign out but the user authenticated has more functions it has side in maybe not from here maybe from a different place imported but we have access to the sign in we have access to the sign up uh methods sign up imported from amplify off yes by simply importing from AWS amplify SL off we can import functions like sign up sign in for forget device uh reset remember device resent sign up code reset password and a lot more functions that we can use to create all of these flows ourself very customly built by simply calling a function when something happens when a user presses a button so let's create a very simple signin screen in our in Day N besides protected I'm going to have another folder called off inside off I'm going to have a sign sign in dot TSX let's here create react native function export sign in let me see if we have any questions hello Daniel how are you doing yes uh Daniel uh I'm doing this tutorial specifically for for you and other people from the course that had questions about version six we need a session with lucus with Lucas Lucas where are you Lucas can we add a custom attribute and access them in the database from amplify yes we can do that okay so we have this page sign in screen that we can access by maybe on our onboarding screen here let's add another button for now come on for slash off slash sign in so let's go to sign in I'm going to go here and we have we are displayed with this signin page I'm not going to spend a lot of time on the design of this page um and then like 3 hours later here is how we can add animations uh no uh really let's just simply add uh two inputs I'm going to right away set up the some styles for our container maybe title why do you need a title input and that's it so here is the title sign in the style for our container and the style for our title now let's add on this page two text inputs from rect native using a text input from react native we can get inputs from user keyboard uh what it needs it's it needs a placeholder just for us to see it on the screen so it's going to be a dummy uh placeholder I will also give it a style styles. input and I'm going to create a new uh another one the second one will the placeholder will be password so probably it's not going to even have a placeholder is going only going to have the Styles let's go ahead and style some of these things for example I'm going to start with the input itself in order to see it I'm going to add a border border with one border color against Bor a very light gray um and let's do some padding inside the uh the the input and maybe some margin vertical t as well I'm going to do on the container let's do pling here as well the input will have background color white and we'll have a border radius of 10 maybe five yes the title font family inter semi and font size 24 and maybe okay uh now the container to put everything in the center I can simply do justify content Center no I need align items Center no to justify content Center but the container itself needs to expand the whole screen so with a flex one yes now it works well I don't think I want it but it's okay it's fine it's fine uh I will simply add at the end here a button from react native with title sign in nice so when I press on the button we're going to call a function const sign in or on sign in press equal we're going to execute something for now let's just simply console warn sign in if I assign this function to the onpress event of our button and if I press we're going to see the console war at the bottom how can we get access to the things that the user writes in the input because when we press on the button we're going to need the the username or the email and the password for that we need us to keep track of these values in state so we need to at the moment our text inputs are not controlled they are managing the data on their own and there is no way for us to get the data from it what we have to do is to make them controlled uh text inputs meaning that the value and uh is going to be passed by us so let's create the value for our email set email equal to use State it's going to be an empty string initially and with same for our password password and set password empty string now as I said we need to send the value from our state in the first one is going to be email uh and now if I'm going to try to type it will reset to empty string because the value of a text input will always be the one from the state and we never updated it in order to update it we're going to listen to an event called on change text from the text input and when that happens we're going to set the email with a new value passed by the text input and now if I'm going to type something the set email will be triggered it will update the state variable email and email will be passed down to the value back to the text input to display it so now the source of Truth for the data that we are writing is this one this state variable if I'm going to do the same name for uh the password value password onchange text set password then we're going to have access to this data Here sign in and I can say email and then and then that's it I don't want to show the password maybe let's go to sign in if I write something here at gmail.com I can press sign in and I have access to this email that I'm going to use later to use to to send it to amplify for the password I want to hide the password uh so for that I'm going to have how is it called I always forget it's not password it's hidden where uh Rec native password input it's a property called where is it password secure text entry secure text entry and now the password is protected with this secure text entry what's going on here all right so what should happen when we press on this sign in we should call a simple function from a simplify and send there the email and password first let's import this sign in function from add amplify slash off is it called sign yes sign in now when we press on the button we want to call sign in and here as we see it needs an input the input will be an object most probably the object with with what sign in input username and password so username is going to be our email and password is going to be our password let's actually go ahead in our documentation to see the sign in here so you pass a username and password to sign in API to sign in your end users handle sign in next tab okay okay okay await username and password so what we have to do is do here a wait and the result I'm going to make the function a sync and this execution this sign in will return an object with some information like is signed in and we can do console log and maybe also the next step but we don't need it for now does it have an error oh the error if it happens it will be thrown so I will add everything into a try catch catch and let's do console log the error that we will receive here so what we have we are doing now is we are calling sign in with username password and let's see if it will work sign in it's different uh username and password so we see a console log user does not exist and this is coming from our console log error if we want to properly show the errors we're going to have to add a constant here error set error use State initially it's empty and what we can do here is we can set error with maybe I will call this one e e do message and the error that we have in state I can render it maybe below the button with a text and inside here the error but I want to only display it if the error is not an empty string so let's do it conditionally and I will simply add a style color red let's go to page nine let's go to sign in and here if I'm going to do ABC sign in I see user does not exist if I'm going to do uh it still user does not exist when I press the signning button I think a good way is to reset the error in order to allow a new error to to be written there or if there will be no error later I don't want to see the the old old error so now if I do sign in there is already signed in user which means that now if I'm going to go to protected page I'm going to be signed in so that means that our sign in worked because without being signed in we cannot reach that page so here in the console log probably we saw a true value and when that happens what I want to do is I want to redirect him to the to the protected page you can do that using for example uh router in dot push and we want to go to um to the homepage of our protected route in our case that's slash maybe days slash day9 slash protected if I remember correctly slash it should be just protected days day nine protected and only if is signed in because if not if there was an error I don't want to do router. push I don't want to navigate there so now if I'm going to do de at not Dev and provide the wrong password sign in incor it username or password if I'm going to provide a proper password I will be automatically redirected because this is sign in return through and now if I will for example go to the protected page I see that I land here which means that the user is signed in when reaching here so just like that we have created a custom signin page and you can do the same for the other Pages for example sign up um forget password reset password and so on all you have to do is design the screen the way you want it to look you'll need like some text inputs and import the function from a amplify slof that you need for example sign in sign up uh reset resent sign up code or reset password there is a lot of functions you have access V um I think like the signup screen and Val are very similar to to be created so I don't want to spend a lot of time doing them what I believe is going to be challenging is handling the the flow basically when opening application I want to automatically go to this signin screen and if I'm on the sign in another way um the challenging part is going to be handling the user flow in the application if a user is not authenticated he cannot go on protected routes he can only be redirected to the offscreen if a user is authenticated he shouldn't be able to see the off screens he should only be redirected to the protected screens so to do that we're going to have to first um handle this somewhere somewhere above as you can see we have authenticated routes and the protected routes now somewhere above them we need to handle the flow where should we redir to off or to protect it I'm not going to go as high as the root layout because there is too much information there instead I'm going to create another layout inside Day N this layout will be responsible of redirecting to the correct to the correct route TSX no because in that case our index that has this one no it's okay I think it should be okay yeah yeah yeah yeah let's create a new file here uncore layout. TSX this one will be day9 layout if it simply returns a slot everything is going to work as it was working before export default function and don't mess the arrow functions with normal functions slot should be imported from export router now if I go here to day n come on what's going on eight Works nine doesn't because I created this layout and I need to restart reload the application Day N yes we are here in Day N what we will need here is we will need to know if a user is authenticated or not to do that we are going to access the St status of a user and let's look in the Amplified documentation manage user session and credential get current user is a function that will return us information about the current user let's import that here and let's do const user get current user and it should be a weight does it have a hook I would prefer a hook here instead of waiting and doing this yeah this get current user would really be useful it would be if it would be a hook because right now it's a function and we need to do a weight and we cannot do that in the body of a component we would have to put it into a function and then call it when it loads so it's a bit more challenging like let me see if there is a hook there it's not documented but use use use what doesn't seem to have maybe it's not from amplify maybe we can find it somewhere in the a a amplifier re native use use what it doesn't have proper typings or what maybe in the UI use authenticator use authenticator that's something interesting use authenticator let's see what that will give us because I remember it also has a selector and what's that selector doing use authentic Ator selector let's look at the docs context context. user so it has a context and if we select only context. user let's see what information we will have about the user here so if I go to nine must be used inside authenticator provider and it's not because the authenticator no that means I'm not going to be able to do that probably so I'm going to stick to with this con user await get current user so as I said let's do a fetch user equal to an a sync function that will do this one and the user will be set in in state user set user equal use State initially undefined but the type of it will be off user let's see if it will be able to import it properly from amplify off okay so let's uh let's do set user response now we need to call this function where do we call it when the components when this layout mounts so in a use effect let's do it like this and fetch user now we can console log the user to know if information about the currently signed in user if he's if he is signed in if I go to n9th we see user information has signed in details uh it has user ID and it has username perfect if I go to our protected page and then press sign out uh and if I now go to n9th we see that the user is undefined which means that based on this user that we now fetched from get current user we can decide if a user has access to some pages or no uh how we will do that uh let's add h inside our index where we have these buttons well um in the in now that we are moving to customly managing the authentication state I'm going to have to remove the whff authenticator that uh is displaying the sign in that the built-in signin pages so from the protected layout I'm going to comment out this with authenticator and I'm going to Simply export default uh default our protected layout uh because we want to to handle this protected layout ourself not the we authenticator we have custom screens now if I go to protected page I'm going to go there but uh as you can see hm well use authenticator so anyway if I don't have a whff authenticator hook uh in order to be able to use the use authenticator from UI react native we would have to wrap a parent component inside the authenticator provider so let's uh do that right now authenticator needs a provider so the authenticator provider where is it configuration authenticator do provider yes so let's go ahead in our day n layout it should be given above Day N layout it should be in our application where we where we set up amplify configuration so besides this let's also import authenticator from AWS amplify UI react native and let's wrap our components in the off authenticator do provider authenticator do provider now if I go to nine here and if I go to protected page yes it works even though uh the user is not yet authenticated we still are able to go here because in the protected route right now we remove this with authenticator so in fact at the moment it's not protected at all but we're going to uh figure this out in a moment so we have a layout we have in this layout we have a fetch user but now that we have a provider I think it will be easier if we use the import uh we uh use authenticator from AWS amplify UI ra native let's try use authenticator and here for the selector we're going to have context and we want to get only the context dot oh there is off status what's going to be this off status nine QR Fields [Music] what of status unauthenticated so if our off status is unauthenticated and somehow we got on the protected uh page we need to redirect away from there how can we do that we're going to take uh request the off status in our protected layout here let's import use authenticator from here and yes this protected route is supposed to protect our screen so we can check if of status is equal to uh maybe we can do off status let's see if we can import a value from there dot no we can I don't want to have a hardcoded here or maybe I will unauthenticated if the off status is unauthenticated what we have to do is we have to redirect we can return a redirect here to the page of our authentication so that page is called days let's try Day N slash off slash sign in so what we are doing here is in the protected route before rendering the content of the pages or of the child components we first check the authentication status and if it not authenticated we're going to redirect to the sign-in screen so now if I'm going to go here and I'm going to try to go to the protected page I'm going to be automatically redirected to the custom signin page that we created here now in the sign in page I can go ahead and actually log in viim at not just dodev sign in we are redirected to the protect to the protected index which means that we have went past this check and the slot was rendered in the layout that's how our screen from index is rendered and now if I'm going to go here to to by pressing on the go to protected page again we are able to go here because we um we protected it here with the authenticated check our user is in fact authenticated that's how instead of being redirected we are simply rendering the slot which is the in this case the index but we also need to protect the authenticated Pages for example if a user is already authenticated I don't want him to land on the sign in or sign up page uh accidentally because if I'm going to try to sign in again I'm actually going to get a an error seeing that I'm already signed in the you the the there is already a signed in user so the logic is to never allow users to go to the off screens unless they are uh unauthenticated to do that we would need to protect all the pages from the off screen not only the signin because there will be others like sign up forget password and so on to do the logic for all the screens in the off directory we're going to add a lay out here where we will put the logic that is shared among all the screens let's export default function of layout and it will initially return the slot basically return the component from from the page below now everything is going to work as it was working before I can go to sign in well no because I have to reload let's try hey Anonymous uh Anonymous donated $50 to save a children organization thank you very much for your help in this cause it means a lot to us let us know if you want to to appear on our screen let us know your your name you can send us um the the receipt that you're going to receive from YouTube send it to us and we can add you to to our slide with thank you notes thank you very much appreciate it so as I was saying uh let's try the the the newly added layout inside our off screens go to sign in yes we are still here but in this P Plage similarly how we had checked the off status and redirected if it's not the correct one in the protected route the same way I'm going to do in our off routes but in this situation let's import use UI re native uh and we're redir from exper router but in this case I'm going to do the redir only if the status is something else than unauthenticated so if it's authenticated or something else we are going to direct to the day n protected because we want to redirect him to the home screen right if he tried to go to the signin page now if I go to our day nine and if I try to not sure if you could see the buttons below let me try to make this smaller so now I'm authenticated I can go to protected screen without any problems but if I'm going to try to go go to sign in I'm redirected again to the protected because I should not be able to go to sign in if I want if I go to the protected page and press sign out in this situation by pressing go to protected page I'm redirected to the sign in in fact because I'm not authenticated and if I press go to sign in I'm allowed on this page because this check uh doesn't redirect us to protect it so in fact all the logic that we have right now on this button go to protected or go to sign in can be put into one single button go to protected application and we could actually yeah redirect to the protected always because the protected itself will not allow users to go there unless they are authenticated maybe here I can do if it's not if it's not authenticated I think that's a better approach if it's not authenticated go away in our authentication if it's not unauthenticated go [Music] away so now if I press on this button it will work properly based on the status if I'm going to go ahead and do not sign in I'm going to go here perfect so that's how you create the flow of authenticated how you can also protect different parts of your application inside an expo router um yeah using export router and we do that by protecting layouts that should be authenticated and if it's not redirecting to somewhere where the user can authenticate and the authenticating authenticated screens as well protecting them to only allow users who are not authenticated we are in this case we are using the use authenticator Hook from a samplify in some other cases you might use a hook to get like the off status uh um or some data from from a re context provider uh but yeah um if you're using amplify that should be fine and now all you have to do is duplicate the signin screen make a sign up screen as well for example sign up here in the sign up uh we're going to have email password let's call this sign up uh I'm not going to do any router push here but I'm going to call the sign up method that is imported from sign up from amplify the sign up needs username and password as well it will not give us is signed in what it will give what do we need here I don't know maybe we don't need anything we'll see here email password and the button will be called sign up on sign up I'm going to add another button here to go from sign up back to sign in but instead I'm not going to add a button I'm going to add a link a link from Expo router have an account sign in and the HRA of this account is going to be our signin URL so it's day9 slof SL sign in I'm going to copy this link from here back in our signin screen I'm going to add it at the end after the error in order to allow users to to create an account new here sign up let's import the link and when we press on it we want to redirect to sign up screen now if I'm going to go to Day N I can go to go to protected application we are logged in let's sign out we're going to be redirected to sign in but there will be a button here that we can press and we're going to go to sign up I don't think so off sign up oh sign up should be exported and the title should be create an account so now if I go to nine go to protected app we go to the sign in I can press on this button we go to create an account and uh I will check only some additional information about the sign up inside the documentation so sign up it can have username password email phone number it will give us back is sign up complete the user ID in Next Step yeah there are different next steps like if the user need to confirm sign up or uh and this will depend on your amplify configuration so after creating an account you can either redirect him to confirm sign up or if you don't need to confirm his account you can simply red him back to to to the protected route there is also Auto sign in what's going on with this Auto sign in this was something that was missing for a very long time in amplify because you always have to create an account then go back to sign in and sign in Theo in API will automatically sign in a user when it was previously enabled by sign up can we enable it somehow in the sign up yes in the sign up configuration there is options and there is auto sign in so there is options and there is auto sign in true if I provide options I also need user attributes but I don't have any user attributes so just like that and what will happen let's try to create an account with another email sign up nothing will probably happen and in order to see if something happened we can go ahead in our dashboard we can go to authentication press view in cognito and under user pools if I search demember we're going to see two users being created one of them is the first one which is also confirmed the second one is not yet confirmed the email is not verified verified so I will probably yeah like basically need another screen to confirm account um because I don't think I'll will be able to sign in with this account support sign in what's going on sign in it doesn't give me an error in the sign in error maybe it's not an error but maybe here it's not something went wrong so if I press sign in right now something went wrong but what went wrong can I I understand here uh maybe next step what will be next step something went wrong Next Step Next Step Dot sign in Step what confirm sign up yeah it's it uh it contains that we cannot it says that we cannot sign in because this user is not yet confirmed so you'll have to create another page where you will call not the signin function not the sign up but the confirm sign up confirm sign up and the confirm sign up you'll call with that code that you will receive on the email and the user will type in the input box I'm going to go ahead and probably manually confirm this account that was just created or yeah I'm I'm not going to do that uh let me just we saw that our custom create account is working properly uh to to sign up and we can go back to sign in only thing that we need yeah basically is to D DC at the signup screen to with another screen to confirm an account or you can do the same logic here by swapping like what user input you're you're displaying okay so that is everything about managing and implementing an authentication flow in using AWS amplify version 6 there are a couple of changes and differences between version six and version five one of them is that we had to create a custom development build because the AWS amplifier re native package depends on some custom native code that wasn't a big problem all we have to do is build it locally or we could use yes to create a custom development build in the cloud after that we can either use the with authenticator uh the with authenticator where is it in the protected layout we can either use the wh authenticator higher worder component to protect a a group of routes in our application and this will use a default authentication uh user interface or we can manually uh or we can handle that ourself by creating custom screens and by properly uh protecting them reading the status and navigating a way if it the user is not intend it to be on that uh on that screens so just like that we implemented it and hopefully you're going to be able to use it in your application for easy and scalable authentications in rack native uh Steward is saying I think you changed the equal sign unauthenticated to not equal unauthenticated on first check where is the first check uh we have two checks one of them I don't even need anything here I don't even need the layout at this moment here I need only off layout and protected layout so inside the protected I'm redirecting away if the status is something else then authenticated if it's not authenticated go away and here if it's and here in fact what I'm going to do I'm going to say not if it's not authenticated but if it is if it is our authenticated go away because there there can be other statuses as well but I want to navigate to the protected only when the status is authenticated and I want to navigate away when it's not authenticated so as simple as that roel you're welcome I did V6 without environment uh it works fine for me do do you have the AWS amplifier react native because I think this package is the one that has native code anyway guys thank you very much for being here with me till the end I hope you enjoyed this one and if you did if you learn something new make sure to subscribe to the channel uh not to miss our future videos during December we're going live every single day with a re native tutorial so yeah that's a lot of educational content for this month anyway I'm going to see you tomorrow with a new

Channel: notJust․dev

Views: 9,613

Keywords: vadim savin, not just development, notjust.dev, react native live coding, live coding, javascript, react tutorial, react native tutorial, javascript tutorial, react native ui, react native for beginners, React Native, mobile development, DEVember, fundraiser, Authentication Flow, AWS Amplify, AWS Amplify Auth, Cognito, Sign In Screen, AWS Services, Secure Login, withAuthenticator, AWS Cognito, Authentication Screens, Amplify v6, User Interface Design, Sign Up Screen

Id: BGtVw_EEKZ8

Length: 118min 30sec (7110 seconds)

Published: Sun Dec 10 2023