How to use AWS Cognito to build an Authentication / Login System

[Music] what's up everyone welcome back to another episode of aws tutorial and today i'm going to show you how to use aws cognito in an authentication or login system and i'm going to show you how to do the routing between pages after you authenticate it i also have a different video where i talked about how to build a complete register and login system from scratch from backend to front end i'll include a link down below so you can check that out if you're interested and before we get to today's tutorial let's talk about what exactly aws cognito is so it's basically a service that provides the capability for you to control access to your application out of the box so that saves you a lot of the work from building out the backend and integrate that with a database and be more specifically what we're going to use today is the user pool so user pool is like a database that saves all the user credentials such as username email address password and things in that nature and it also provides a pre-built ui for you to log in and register so it's very convenient so without further ado let's get to the demo okay so step one of the process is to create a very simple website for our application for logins and logouts and now i have vs code open an empty folder called tutorial and we're going to create three files that we need it's very simple the first one is index.html and then we're gonna need a login html and then finally we're gonna have a logout dot html and in the index.html we're going to have something very simple we're going to have a body tag and inside that let's have a h3 tag that says welcome to my website and then we have a paragraph that contains a anchor tag that have the href we're not gonna direct that to anything yet but we will fill that later on and inside the anchor tag we're just gonna do register or login something like that and then in the login page we're gonna have a body tag as well and then we have a h1 tag that says congratulations you are logged in and then the same thing here we're going to have a anchor tag that gives the user an option to log out and then finally in our lockdown page we're going to say something like you are locked out and then the same thing we're going to have a anchor tag that gives the user an option to log back in okay this is pretty much it and now let's test our website locally to see if it's working first and we're going to use python to create a web server so if you don't have python you should install that first so i'm going to go to terminal open a new terminal so i have python 3 installed in my machine so i'm going to type in python3 dash m http dot server okay so it's running on port 8000 so i'm going to go to this port so i'm going to type in okay so seems like it's working locally and now we're ready to move on to step number two which is to configure our user pool on aws account needle okay so right now i'm on the homepage of the aws console and now we're going to go to the clock needle page so i'm going to type in cognito here and we're going to choose manage user ports and seems like we don't have any user ports here so i'm going to create one give it a name i'll just call it demo app usable and then i'm going to do step through everything and here's where you choose your settings for your login system i'm going to choose the email or phone numbers or just choose the email address for logins and you can choose username if you want to leave that as default and for the required attributes obviously email is one of them let's say name as well and you can choose other things if you want to to add to your registration page and then hit next and then for password minimum length i'll leave it as eight and for simplicity i'm just going to require numbers and lowercase but you can choose whatever setting you want to for your application allow users to sign up by themselves and then hit next leave it as default and how you want them to be verified i'm going to choose email and then i just let it create a row hit next and in here you can oh you have the option to customize your uh your message i'm just gonna use d4 here and then hit next next next next next okay and then i'm gonna hit create pull okay so now it's done and then what we're going to do next is to create a app client so i'm going to hit add and appliance give it a name demo app client name but you can give it whatever name you want to i'll leave everything as default hit create and then the next thing we're going to do is to change some of the settings for the app client so i'm going to hit app client settings enable identity provider obviously we're going to check this and we need to enter two urls here the first one is what do you want app to route it to after the user is successfully signed in or logged in and then the second one is after the user logged out what page do you want to direct that to so for that we're gonna do locally so we're gonna do this and i believe we call it logged in html and unlock.html and same thing for here except it's locked.html and oauth2 we're gonna check this and you can check them all but uh for the demo i think we just need email and open id hit save changes and then next we need to add the domain name for the ui to show up here so i'm going to click on domain names here and the domain name here can be anything as long as it's unique and it's not taken by anyone i'm just going to call it gene meister oauth check availability okay so it's available so i'm going to save change and then when we go back to the client setting scroll down we should see the message was gone and then we can launch the ui to see how it looks like so when i click on it i can see the uh the sign in page right here and now we are ready to connect our local app to our needle and all we need to do here is copy this url here go back to the code in our index.html in the href we are going to replace this with the one that we just copied and then the same thing in the log out page if we want to log back in we need to direct that to the same login page and then finally in the login page if we want to log out we need to direct the user to a different url and we are going to remove some of the attributes here so the first thing we need to change here is we're going to change login to log out and then it doesn't need the response type or scope so we're going to remove it and then instead of the redirect url here we are going to change that to log out ui and instead of logged in here we are going to do locked out so that is it let me kill the server and start it again and now if i go to my local page right here to refresh and it's still working and if i do register a login you should be able to see a pop-up window here and since we don't have any account signed in or registered yet we need to sign up for one and let me show you one thing before we get to it if i hit user right now we don't have any users in our system yet so this is what we selected as required fields so email name and password so i'm gonna type in my email address felix and then password i'm just gonna do test one two three four something like that and all the requirements for the passwords were met and then i hit sign up and two seconds later i just get the verification code on my phone so i'm just gonna enter that oh before i hit confirm let me go back to cognito and hit refresh now we have one user signed up but it's unconfirmed but after i hit this button i was successfully logged in to the login page and if i go back here and hit refresh again and the status was changed to confirm with my email and the date and time and now let's go back to the page if i hit log out and it directed me to the logout page and if i hit log back in again enter my email address and then the password hit login and i'm logged back in again so it seems like it's working and this is it everyone this is a pretty simple tutorial i hope you have learned something and if you like this video i hope you can give it a thumbs up and i'll see you in the next video

Channel: Felix Yu

Views: 71,931

Keywords: aws, cognito, authentication, login, authentication system, login system

Id: 8a0vtkWJIA4

Length: 11min 2sec (662 seconds)

Published: Sat Mar 05 2022