[Music] Amazon Cognito offers authentication and authorization features for your web and mobile application authentication is who the user is it's the part where the application tries to figure out who you are authorization on the other hand is what the user has access to as in certain users might only have access to specific AWS resources in your environment to put it briefly Cognito safeguards our web applications but why do we need Cognito we can just manually Safeguard our web sites too right if you try to manually authenticate users to your website you'll have to manage a lot of things including storing all the user credentials encrypting the password securing the communication lines implementing MFA or multiactor authentication account recovery password resets and so much more worst part this data is going to pile up eventually and soon you will be buried in a pool of unmanaged data but don't worry cuz this is where Amazon Cognito or the gatekeeper comes to your res but before I tell you more about Cognito make sure to subscribe to intellipath YouTube channel and click on the Bell icon to never miss out on any updates from us also if you want to learn more about AWS from industry experts check out intellipath AWS Solutions architect course from the link in the description down below so this right here is going to be our agenda for this video so let's start things off with what is Amazon Cognito Cognito can quite easily solve our earlier dilemma by offering security features to protect user data password words are securely hashed using strong algorithms to prevent unauthorized access user data is encrypted and transmitted securely over the internet using SSL TLS protocol SSL or secure sockets layer and TLS or transport layer Security provide secure communication over a computer network usually between a client and a server for now all you need to know is we need SSL and TLS to ensure that our sensitive information such as passwords Financial transactions and personal data remain protected from various cyber attacks coming back to our topic to provide another layer of security Cognito also supports MFA account recovery and password resets if you have explored the user authentication area before on AWS you must have come across I am or identity and access management at least once I am is also a way of authenticating users so why do we need Cognito this brings us to our next topic Cognito handles the user related aspect of our application such as user registration signin sign up MFA Etc and the management of users whereas IM am is used for setting and managing permissions for various AWS resources ensuring your applications' backend components have the necessary permissions to function securely in an Rell you should choose Cognito if your application primarily deals with user authentication and management as Cognito naturally becomes a better choice due to its build-in features for user management and integration with various identity providers whereas you should choose I am when you need to manage permissions for AWS resources and services especially in scenarios involving internal users such as employees and administrators now let's understand some of the key components of Amazon Cognito namely user pool identity pool and sync user pool is a user directory think of it as a register that contains all the user credentials such as the username password Etc user pool managers us a registry sign in sign out verifying email or phone numbers by sending verification code handling forgotten passwords and changing existing passwords additionally it also secures and encrypts passwords supports features like MFA and capture and provides password policies and token based authentication password policies refer to the set of rules that a user must follow while creating or updating a password such as the minimum length use of alpha numeric characters requiring lower case or upper case or numbers Etc use user pool also supports identity Federation meaning you can combine user pool with thirdparty authentication services such as Google Amazon Facebook and apple identity pools in AWS Cognito allows you to Grant your users access to other AWS Services by providing temporary AWS credentials consider a situation where you're getting authenticated from one of the identity providers once you get authenticated you will get an authorization token from the provider which you can send to the Cognito identity pool the identity pool will verify the token with the identity provider and issue you temporary AWS credentials which you can use to access the desired resources then comes sync which allows you to sync user data across multiple devices all right now that you have a basic understanding of Amazon Cognito let's move on to the Hands-On part for this Hands-On demonstration we'll be creating a react web application and we are going to use amplify amplify allows you to build and manage web applications with backend services such as storage and authentication we will be using Amplified to integrate Cognito into our website there are some more of Cognito features that we'll be discussing during the Hands-On so with that let's Jump Right In okay now let's proceed on to the Hands-On part so for this Hands-On part we'll be creating a react app into inside of which we're going to integrate amplify and Cognito so to start with I've given the link to my GitHub account in the description you can go there click on commands for react we're going to run all of these commands in our react file let's create a folder react Cognito create a new terminal here you can go to terminal new terminal we don't need Powershell we need command prompt all right now let's run our codes one by one we just need to copy from here and paste the code over there all right so right now let me just tell you this is going to take some time to install meanwhile let me tell you what we are doing right here we're basically importing all the tools that we need from the amplifier amplifier is basically a service that AWS provides which offers you tools you to tool so that you can create your websites your full stack websites It offers you tools so that you can facilitate backend and like backend with your storage and authentication services so so you can like integrate it with S3 buckets and such for storage but in our case we need authentication so we'll be integrating it with Cognito it provides us tools so that it integrates directly with Cognito okay now let's just configure our amplifier it's going to open my AWS account okay now I have already logged in so that I don't have to log in again if you haven't you can go right here and log in but now that you're here on the console check one thing that it's your region for me it's Us East one because it's going to ask you right now let's click enter There It Is Us East one okay now it's going to ask us to create create a user in the IM am console and it's also providing you the documentation as to how to create the user okay so let's just create going to call it react user okay let's just call something else um Cognito user let's just attach policies directly and if you come to the documentation also you can see it here the administrator /axis amplify and it's right here if you can't find it just go and search for amplify and there it is click on next okay create user and now if we go to this Cognito user security credentials we need access keys because if you come back to vs code you will enter and you need access keys where will you get access keys you need to create them command line interface because we are using vs code go next we don't need a description access key here it is copy paste secret access key there it is again copy paste profile name let's just go with Cognito user itself okay so user is set up now we can safely close this we don't need that now we can create our react app I'm going to go with the standard my app let's just wait for it to get installed okay so now that our inst uh react app is installed let's just navigate to our folder my app now we need to initialize amplify copy that command paste it here name let's just go with my app yes the information is correct AWS profile Cognito user so no let's just go with no it's a small project okay now let's just add Cognito this amplify ad o is basically amplify ad authentication okay so the social provider is basically your this Google or Facebook or Amazon if you want to integrate third party like if you want to sign in using a third party website like Google or something if you want to authenticate through there then you can go with a social provider but right now let's just create a very simple project but in the same project itself I will show you how to do it but for now let's just make it quite simple default configuration let's just take email yes we're done okay now the next steps is amplify push all right so this step is basically you know like you told amplify your requirements that okay I don't want a social provider I want the default configurations so there are certain default configurations that you can see when you create user pool from the UI itself so it's going to just like whatever okay let's just click on yes H so whatever configurations that you gave right here the default configurations now amplifier is going to go to the AWS cloud and it's going to develop all those applications for you okay so now let's install all the UI components that we're going to need for react now before we move on to the next command which is npm start we need to make a few changes in our code because right now in react it's going to just run the default code we don't want that we need the code for um so we need the code for our Cognito so that's why we need to modify this code you see here this authenticator this is going to provide you with a default template for your code so that it's going to provide you the default login sign up page so you don't have to do anything about it but for for the homepage you need so that's why you need to copy the app. CSS as well okay now that everything's set let's just start our app okay yeah so here we are we need to create an account this is the default page which has been provided to us by Cognito itself using amplify now let's just navigate to our AWS dashboard again there's the pool that we just created and right here you can see that there are no users created yet that's because we haven't created any so let's just create one now it's going to send you a verification code to the email ID that you provided you need to go to your mail and take that from there put the confirmation code click on confirm and we are logged in now if you come back here reload this there is our user that we just created okay now this was a very simple way of doing this things but now if you want to integrate the third party provider such as Google Facebook or Amazon that is going to be a bit more complicated than this so if you want to tag along let's go to start with we need to go to Google cloud service providers now why do we need to go here because if you come back sign in experience this identity provider click on that here you can see all of these identity providers that you can add in your project we're going to choose Google for this demonstration here we need client ID client secret we need to set up Google Federation with this pool now if you want more information there's a documentation regarding this amplify itself provided it this is a documentation I'll leave the link in the description down below so if you want to you can go and have a read through it but I'm just going to show you how to do it so firstly you need to create a project you need to navigate to API and services right here you need to go to o o consent screen external create app name okay example app supported email I'm going to copy that because we need to use it down below as well authorized domain you need to give something like Amazon Cognito tocom email address add save and continue we don't need any Scopes here no test users okay back to dashboard okay now let's just go to credentials now we need to create our client ID let's create it o o client ID our application is a web application let's just again go with example app authorized JavaScript Origins will add later and this is going to give you with your client ID and your client secret copy that put it here we have the client secret as well now this particular part you need to be very very aware of so in the code that I am giving you there are three Scopes that are mentioned profile email and open ID this is very crucial because if any of this is wrong it won't work so please be very sure that profile email open ID keep that keep that in your mind let's just give email right here add entity provider okay now before this we didn't give a domain so let's just create a domain first create a cognito domain I'm just going to call this intellipath Cognito let's just create okay it's already there two okay this is there Cog okay this is there okay so that's our domain name now let's just add the uh um call back okay call back URL you need to take from here your Local Host paste it here sign out also you need this this is the re this is redirecting basically identity providers let's just select both o o okay what is oo 2.0 now oo is basically a protocol which masks your credentials it's like you're providing your credentials to it it masks it so that the websites who are accessing your credentials they don't see your actual credentials like when you're logging in they don't see your actual credentials it masks it so there are two types of it authorized and implicit so the basic difference between both of them is that um you know in authorized in implicit one the aess token it's visible inside the IP address itself but if you take authorized one then it's like it masks the access tokens so that's why let's just go with authorization code Grant open ID Scopes let's just leave it there save changes if you scroll down no we need to come back first there are two right so we need to configure the same for both of them again same process call back sign out identity Cognito and Google Au is authorization YDC open ID okay save changes now I believe all right but now there's a problem if you directly click on continue with Google it is going to show you blocked why because if you remember I told you we will fill these authorized JavaScript Origins form later which we haven't filled till now so let's just go write around and fill it so for that we need our domain name let's just go and get our domain name first there's our domain name copy it from there authorized job JavaScript let's add first okay for this one you need to make sure that o o 2/ IP response you need to add this click on Save okay saved um let's just go back let me just select any one of them okay are we redirected back here we're not logging in because if you remember in our code we have not yet provided that okay when the Google is like when you authenticate from Google you can go to the login page we haven't provided it in the vs code yet that's why we're getting redirected to our Local Host page only but if you go back in here you can see the email has not been verified yet because it's not integrated in our code yet but this is an external provider so let it be now let's just add it to our code as well so that it can be reflected on both the places okay so for the code again you need to modify it and again I've provided the code in the GitHub repository itself you can copy it from there and add it here and then there's another file you can locate it AWS exports. JS in here there are a few modifications that you need to make in this o o client okay now the domain name we just copied so believe it should be there somewhere I'll just go and take it from there okay so the domain name we know where to get it from there's the domain name paste it here make sure the https you need to you don't need it there the open ID profile email make very very sure it's there your um redirect we need Local Host here here as well okay your client ID we need to take it from Google there it is still some error in our code yeah there's another one you need to also change the app.js code from this Federated ID okay it's showing here but if you click on that it's not going to take you there because there are multiple problems right here we didn't add Local Host so let's just add that first here we specified for Cognito but we didn't specify for Local Host that's why we're getting the error and again you need this o to to IDP response Okay click on Save let me start it again let's now try to sign in with Google still not working invalid scope again let's just go and double check if our scope is correctly written here or not email and profile let me just double check that again email and profile okay yeah save changes okay hm now if you click on sign in let me just take one of my accounts and we are logged in okay let's just log out and if you come back here in the users you can see the external provider that we just Google like we use Google to sign in you can see it right here so that's about it if you made this far congratulations you now have the required knowledge about Amazon Cognito once again if you found this video helpful consider liking this video and subscribing to intellipath YouTube channel that's all for the day thank you and see you next time [Music]