How to Create an Authenticated REST API on AWS with API Gateway, Lambda, Cognito, & AWS Amplify

all right so in this video we're going to use aws amplify with amazon api gateway aws lambda and amazon cognito to build an authenticated api gateway into a lambda function using a cognito authorizer now essentially what we want to accomplish here is we want to make it to where when we make a request to a certain path that we check to see if that user is signed in and if they are signed in we authorize that request but we also want to make it to where the identity of the user or the identity of the caller is available in the lambda function in a secure fashion we do that because we want to a authenticate the user before they're able to access the function and b we want to be able to do stuff like find grain access control and authorization within that function um in a database or however a way you might be implementing that so that's what we're going to be doing in this video and we're going to be kind of creating a brand new project from scratch we're going to be you know configuring the project to enable this we're going to log out the user in cloudwatch and then that'll be it we're not going to really actually go into working with the database or anything like that i think the main concern here is how to create this authorizer and how to do it with api gateway and lambda and how we can kind of get the project going with amplify so that's we're going to cover and i hope you learned something this was a topic that i had to dive into a little bit to kind of learn how to do myself so i thought this would be a good video to kind of show other people how to do so with that being said i'm going to go ahead and get started by creating a new react project so to get started we will use npx to use mpx create react app and we'll call this something like react rest off something like that and while that's being created while the react app is being created we'll change into the new directory and we'll just initialize a new amplifier back in i'll just kind of take a lot of the defaults here and i'll choose react and i will choose my default iam user or aws profile which is for me usc 1 and this is going to you know initialize our amplify app and what we're going to next do is go into our front end code install a couple of indep npm dependencies and then in our amplify backend we're going to add authentication we're going to add a function and we're going to add the api so we'll change into this new project and we'll just use yarn or something like that i'll yarn or npm and we'll add aws amplify and at aws amplify slash ui reacts all right and once the dependencies are installed we'll just open up our project in our text editor and get ready to start writing some code so i think i'm going to open app.js and index.js those are going to be the two frontend files we're going to be working in next i'm going to go into my cli and i'll run amplify add auth and we'll just take the default settings to add authentication so i'll say default configuration username and then no i'm done no more advanced settings so we've added authentication now i'm going to run amplify add a function and we're going to add a new lambda function for the function name just kind of start with the same name as our projects i will choose node.js i'm going to choose a hello world function and i don't need any advanced settings and i don't i'm not going to edit it just yet we'll go back and edit it in just a moment so we've added off we've added the function now we're going to add the api to do that i'll run amplify add api and i will choose rest give the api a name and for the path you know this can be whatever you'd like i'm going to call this something like basic slash hello and i'm going to choose a lambda function that is our react rest auth function um for restricting api access for our example this actually doesn't matter a whole lot because basically the whole idea here is we're going to be overriding this this api access by enabling a cognito authorizer so i'm going to just choose yes i'll choose authenticated and guest users i'll give authenticated users like all access and guest users maybe like read access but this doesn't really uh matter but um you know we're gonna be overriding it anyway but figure we just go ahead and set something up um what we want to go ahead and do now is we don't need any more paths we have all of our back-end stuff set up now we need to do a couple of things we want to go into our back-end function code and kind of write a console.log so we can log out the identity of the caller and that's kind of going to be kind of how we're testing this out we're just going to log it out and view it in cloudwatch logs so to do that i can go into the function code itself and amplify backend function and the src slash index the first thing i'll do is i'll uncomment the headers and i want to do this because we want to enable course and then the next thing we want to do is we basically need the event that conte request context so i might say if event.requestcontext.authorizer and what we want to do is check if this authorizer is there and if it is we're going to log out the claims which is basically the user information and either way we just want to return like a response so we're just going to return whatever the default response is hello from lambda we enable cores with these headers and we're kind of good to go so i can go ahead and save that and i will run amplify push to go ahead and deploy our back in and while that's deploying we'll jump back into our front end and in index.js we want to configure amplify so to do that we import amplify from aws amplify we import the configuration created by the cli at aws exports and then we call amplify.configure passing in the config um the next thing we'll do is we'll go into app.js and we'll create some api call from the client to call the api we also need to be authenticated so we're going to set up an authentication flow using the with authenticator component from ui react so let's go ahead and import api in auth categories whoops from aws amplify we're going to also import the with authenticator from aws amplify ui react and then for the default export we'll just make this the with authenticator wrapping the app component so this is going to put that authentication flow in front of our component the next thing we might want to do is update our component we need a function to call the api and i will connect this function to like a button or something like that okay the next thing we want to do is we need to get the identity of the caller so that is the sound and user so i might say const user is equal to awaits off dot current authenticated user okay so now that we have the user what we what we want to do next is create some headers and then we're going to say you know const data is equal to awaits api.get and we're going to pass in the api name the path which is like slash hello and then we will need to pass in some some request information which is basically the headers and stuff like that and then we will console.log this data and if this comes through that means our authorizer is working and you know we made the request and it successfully ran so what we now need to do is get the id token off of this user so i might say cons token is equal to user dots i think it's ap i'm sorry it's a sign in user session and then we're going to get the id token and then the jwt token and then we'll just log out this token to make sure that's where it's at but you could also log out the user to get to the get to where this token is if you've never done this before so we'll log out the token just to make sure it's there um and then what we want to do is have some request info or request data whatever you want to call this could be anything we want to put some headers and we want to set the authorization header and the authorization header just needs to contain the token and then we pass in this request info as the third argument to our api request and now we are making an authenticated api call from our client app so um let me go ahead and maybe minimize this a little bit so we can fit a little bit more on the screen and the last thing we want to do is just pass in the api name so we should be able to go to aws exports see the name of our api in this configuration file under the aws cloud logic custom paste that there and now we're ready to go on the front end the next thing we're going to do is go into the aws management console so to do that i will just go to console.aws.amazon.com and we're going to go configure our api gateway configuration and to find api gateway you can just type in api gateway into the search bar shows up and then you should be able to click on the api we just created a moment ago so what we want to do here is click on authorizers in the left-hand menu and we're going to click create new authorizer we'll give the authorizer a name i'll call this something like hello auth since we're working with that slash hello path we want to set the cognito as the authorizer type and we want to pass in you know our cognito user pool and it should be something along the lines of the name of your project your front end project so react i think rest off is what we called it and it would be the name of whatever you called yours appended with um some unique identifiers and then for the token source we want to set this as authorization because basically this is going to be where this is coming from in the header so we're going to be passing an authorization header so we'll we'll use authorization and we'll click create so now our author authorizer is created and we're going to configure it with our actual endpoint so click on resources and then click on any under hello and then click on method request and under the authorization configuration we're going to add our authorization authorizer here but when we click on this pencil button you notice that it might not show up yet you might need to go ahead and refresh to kind of make it show up so i'm going to do that and now when i click on authorization we should see that it shows up here so i'll click hello auth and now we have our settings configured so i can click the check mark and now we have our author authorizer configured as the authorization mechanism and it's going to be applied to all of these paths so slash any is or slash hello any is basically going to be applied to any request so get put post delete if you wanted to define a specific action you could kind of create an action and do all this for just that route if you would like to do that so um to deploy this i can go ahead and click under actions and click deploy api and we'll choose the dev uh you know stage for dev and deploy and now we should be good to go and the next thing we can now do is test this thing out so what i'm going to do is i'm going to go to type in npm start and when our app starts we should now see our sign in screen so i'm going to click create an account go ahead and create a new account and check my confirmation code all right now we're signed up and signed in so i'm going to go ahead and inspect and what we should be able to do now is make this authenticated api request so i'm going to go ahead and click call api and we see that we have data hello from lam to come back now this is great that means that nothing is broken so hopefully what we can now do is look in our logs and see the identity of the color so to do that i'm going to go and i'm going to run amplify console and i'm going to choose amplify console here and this is going to open our project up in the amplify console and if i click on functions i should see a link to view in cloudwatch um but we but we're also but we're actually already seeing the logging here um we have this claims object and it has all the information but let's maybe view it in cloudwatch as well just to kind of get an idea of how this works if i click on the log stream and we go down to maybe the second or third piece of information here we see that we have the claims and now we have all of the information about the user so we have their sub which is like their subject and it equals their unique identifier for this user we have their cognito username debit five we have the phone number for them and we have their email address so we have all of that information here and we are good to go now let's try something else let's delete this log stream and let's now make this api call without passing in this request info and just see what happens we see that now we are not able to do this because what we just set up is we're basically saying this user needs to be authorized and we need to pass an id token or else this is going to fail so if we go back and we uncomment that we pass that id token back in there and we try this again then it works so everything is working as expected and that's kind of how you set up an authorizer with api gateway cognito lambda and aws amplify now i hope you learned a little bit about how this works and i hope you kind of understand how api gateway kind of does a lot of the stuff around cognito authorizers because to me it was kind of you know a topic that was really hard for me to get up and running with and confusing so hopefully this kind of boiled it down into something you know understandable and you learned a little bit so thank you for watching i hope you enjoyed it please subscribe to my youtube channel if you're not already and look out for more videos coming soon thank you

Channel: Nader Dabit

Views: 7,909

Rating: 4.9534883 out of 5

Keywords: aws lambda, serverless, amazon api gateway, aws amplify, react, javascript, cloud

Id: fs9HfYbWjXQ

Length: 16min 34sec (994 seconds)

Published: Tue Dec 22 2020