Adding Cognito Signup and Login to your React App with AWS Amplify

do you want to learn how you can deploy a react app with user authentication without loads of hassle in this video that is exactly what i'm going to teach you how to do [Music] hi guys my name is sam with complete coding where our aim is to make you into the best developer that you can be in this video we're going to be looking at how we can use aws amplify to set up a new react app and have authentication automatically handled for us by amplify and amazon cognito now that we're in the code we can look at setting up this react app with aws amplify the first thing that we need to do is actually install the aws amplify cli so what i'm going to do is go into a terminal now this terminal could be inside vs code like me or it could just be a normal terminal and we're going to do npm install minus g aws amplify cli and this is the cli that will allow us to interact with aws amplify for creating certain things that we need for this process once this has finished updating then we can move on to creating our react app now that has finished installing we can install react and create a react app so i already have create react app installed so i can run npx create dash react app and then the file name for my new react repo and i'm going to call this amplify dash react dash app and what this is going to do is create the folder download a react template and set up everything we need this takes a little bit of time as well so i'll get back to you when that is done so now our amplify app has been created we can open it up in vs code i'm going to click on open which is fire and open and then find that so amplify react app inside here we can get rid of the welcome page and we see we have all of the files we need including all of the source so the next thing we need to do is open up the terminal again and in here we need to set up our amplify to work with our aws account so the way that we do that is to use amplify which is using the amplify cli and then it's configured and what this is going to do is it's going to guide us through the setup process to get a new amplify setup that is going to open up a new aws console tab and you need to make sure that you're logged into the right account with the right permissions to be able to do things such as setting up i am roles so it's best to be logged in as an administrator if we go back to here that is exactly what it's telling us to do and as we are logged in as that we can hit enter we then need to select the region that we're going to be deploying to i'm going to go with euwest 2 and then we can specify the name of our new i am user in this case i'm going to call it serverless dash amplify and again it's going to open up a new tab and it's going to go through the process of setting up this serverless amplify user it needs to use programmatic access so we hit next they've already automatically set the administrator access so all we need to do is hit next and get through to the review process now we can click create user and it's generated our serverless amplifier user we need to copy our access key id and head back to our terminal where it's telling us to set up the user and then press enter so the first thing we need to do is paste in our access key which we've just copied then copy our secret key so in here we need to click show and copy that across so i've just copied my secret key i can go back into here paste that in and hit enter so now we've pasted that in we get to choose the profile name again i'm going to go with serverless amplify and that has set up our new user so the last thing that we need to set up is we need to initialize amplify on this repo we do that with saying in our terminal amplify init and we'll go through some extra steps to set up this project we need to enter a name an environment and for these i'm going with the default we can choose our editor and i'm going to use vs code because that is what i'm using we're developing a javascript app so we can hit enter and then we need to specify the framework here we're using react so just hit enter again the directory path is source which is true for us and the distribution path is also going to be build the commands are going to be defaults so all of this is really nice as it is automatically set up for us this then uses some aws cloud formation to set some extra things up and then it asks us if we want to use a profile we do and we want to use the profile that we set up in the last step so we need to say yes and we're going to be using serverless amplify now this is set up it takes a little bit of time to deploy all of this and get our serverless setup done so i'll get back to you when that is done so now that is all done we have now got an extra folder in here called amplify and a file in here called aws exports and we're going to be setting up some extra stuff which is going to configure this file a little bit more in our terminal we can now run amplify add auth and this is going to step by step guide us through the process of adding authentication to this react app so we're going to go with the default configuration we want the user to be able to log in with their email address and that is all we want to do we don't want to do any further and more advanced settings so now that is done we can get this pushed up to amplify we do that again with amplify push so when we are pushing we're asked if we want to create a new resource and we're going to click on yes this is going to update some resources and do some changes to our cognito usables on our account now that that has all updated if we have a look at our aws exports this has been updated to have a new identity pool and a user pool so now we can get on to the more interesting parts of this which is actually adding some code to our app where we're going to start is we're going to start inside app.js and to start with we're going to just rip out all of the content in the middle of here as this is where we're going to put our new we're then going to add a new component in here and call it amplify sign out like that and as well as a sign out we're gonna have the content for this i'm not gonna do anything fancy i'm just gonna do a h2 and in that h2 i'm going to say my app content in this place here you can do whatever you want this can be where you use react router or this is where any of your other single page app content could go now what we need to do is actually import this amplify sign out so we need to import a couple of things so import amplify from aws dash amplify and make sure we've spelt it all right as well as that we need to import our config so import aws config from dot slash aws exports and the final import that we need to do is we need to import and we're going to be importing the amplify sign out and also with authenticator and we're going to be importing those from at aws dash amplify slash ui dash react we can then set up our configuration so amplify dot configure and we're going to pass in our aws config and that is almost all of our app set up the last thing that we need to do is instead of exporting just the app we're going to wrap this app with the with authenticator just like this and that is going to add authentication to our system we now need to install those two packages so npm install dash dash save aws dash amplify and at aws amplify forward slash ui dash react and once these have installed that is everything we need to set up our app i'll get back to you once those have installed so that we can test out our new app so now that that has finished we can run npm start which will start up our app with our aws amplify setup so that didn't take as long as i expected and here we get a login page so this is the default login and signup page that you get from amplify which is really nice because i've not had to do any of this now what we can do is we can try on login if i try and use sam at complete coding dot io and a password of something secure and hit sign in obviously it doesn't work because the user doesn't exist so what we need to do is copy our email address and go to create account here we want to have our username there but we also want to set it as our email and then i'm also going to generate a random password of capitals and symbols and all sorts gonna copy that password and paste that in there if you want you can also add a phone number but it's not required for this we hit create account and in a second i should receive an email which will contain a verification code for me to prove that i have signed up and verified this account so my confirmation code is 060947 and if i hit confirm it takes us through to our home page which is the background with a sign out button and my app content which is exactly what we expect if you'd built out this app then you'd have that there and you can put this sign out component wherever you like whether it's in a navigation or on a sidebar somewhere if we actually click the sign out it takes us back to that home page but now this time i can do some at complete coding dot io use the same password and sign in and we get to our page which is exactly what we expect to happen in this video we looked at how we can set up a react app using aws amplify we went through all of the steps of configuring amplify initializing the app and then adding authentication and setting how it works we then made a slight modification to the code to add the sign out button and wrap the whole app in the with authenticator from aws amplify and that meant when we ran our app we were able to allow new users to sign up we were able to stop on signed up users from signing in and when we had signed up we could log in and get through to our app this now means you can create apps with authentication really quickly and easily which is a really cool and powerful thing to be able to do in the next video we're going to be checking out some more things that we can do with amplify so make sure that you've subscribed down here and turned on the bell notification to make sure you get notified when that video comes out thank you and i'll see you in that video

Channel: Complete Coding - Master AWS Serverless

Views: 104,383

Keywords: AWS, serverless, Serverless Framework, NodeJS, cognito, amplify, react, aws cognito, aws amplify, amazon cognito, react app tutorial, authentication

Id: g4qKydnd0vU

Length: 16min 45sec (1005 seconds)

Published: Mon Aug 10 2020