Use JWT Authorizers with Amazon Cognito and API Gateway

hello and welcome back everybody my name is michael liendo and in today's focus otter episode i'm going to be showing you how you can use a jwt that came from amazon cognito and hook that up with api gateway so that way you can access protected resources in your lambda function it's a lot involved it sounds a lot more complicated than it is thanks to some of the cool things that have been happening with the http api but uh let's go ahead and check that out special shout out as we get going to i guess eric johnson for pushing me to do this uh cloudbar you can follow him on youtube uh bart's an awesome person and he is the one that came up with this challenge i was trying to develop technical content while um i guess while while still just putting it out there on a single take so you're gonna hear some flubs maybe some goofs but let's go ahead and jump into things uh first things first i'm going to start up in the aws lambda service here and i'm going to go and create a new function and we're just going to call this pets the runtime of node.js 14 is perfectly fine with me and keep in mind that what we're trying to do here is just have this typically open api they're pretty much open by default and we want to go ahead and protect that so that way the only person who can log into your application and grab those resources are going to be authenticated users so let's see here let's say okay and right now we have this uh function here hello from lambda let's change this from hello from protected resources awesome deploy that and i could add a trigger here but i'm actually going to go ahead and head over to api gateway directly i just find it a little bit easier and let's go ahead and get started here i'm going to build our api it's going to be integrated with lambda us ease 2 perfect and we'll just call this our pets api whoa it's api awesome next up i want to make sure that the method is just going to be for slash pets whenever you want to get and having default with auto deploy is perfect for me great so i can go ahead and create that now it's going to give me this end point here and i'm going to go ahead and copy this and let's head over to postman can i bump this up oh i can okay so um our endpoint is slash pets and if i go ahead and send this off great i get hello from protected resources so we know that that part is good but again we want to go ahead and sort of nail this down so that way only authenticated users can can hop in there so what i'm going to do is duplicate this tab and we're going to switch gears and hop over to cognito so cognito is going to be our service to authenticate our users and we're going to do so by having a user pool we can call this pets pool works for me um let's go ahead and review the defaults and notice that we have just email being verified should pump that up email being verified um no mfa none of that good stuff and we're going to create the pool awesome now there's a couple of things that we do want to tweak and one of them is going to be having an app client we're going to call this our pets client and this is going to be used to configure our hosted ui that we're going to set up in a little bit so all these defaults are fine but we don't want to generate a client secret because this is a hosted ui we don't obviously want to be passing around client secrets on the front end so from there we can go ahead and click on create the client verify that yep there is no client secret being involved and now we can go ahead and hop into our client settings so enable cognito identity providers it is going to be with cognito user pools as far as our callback urls let's do http colon slash uh localhost 3000 and i think it's already yelling at me like hey uh you're in localhost land make sure you're not doing this in prod i'm gonna use that also for my sign out url and let's go ahead and do an implicit grant so that way we get the jwt it's gonna switch things over to response type equal to token and then from here you can grant as many of these as you want um but i think all it's really gonna give us is the email because that's how our users are verifying now as far as the hosted ui we need to set up our domain so let's go ahead and save these changes and then do just that here's our domain name we'll call this pets domain service i don't think it matters too much as long as it is unique and then let's save those changes so now if we hop back uh we should be able to launch the hosted ui just like so so the cool thing about this is it's completely hosted this is something a site that you can stick in your front-end applications and then direct your users to when they hit that login button is pretty cool and it comes with all the things if you use like aws amplify before all the same features it's just not customized which of course you can customize if you wanted to so this is cool i'm going to go ahead and sign in though and let's do a couple things here go get my email nice and big for all of you got it um oh wait i forgot my password okay yeah that's good um sign up everybody wants to save my credentials for me let's not um and then the verification code let me go ahead and check my email real quick should have popped in there and [Music] maybe maybe did i put in my email this is the like if this is the pain point okay i got it oh i was like this is the pain point i guess i'm doing okay six three five eight zero one whoops that's the fat finger something six three five eight zero one cool now it says um like something weird happened right and it redirected us to our um local host area so a couple things that we can do here um one all we really care about like if you're running your front end application um all we really care about is just grabbing this id token from here and we're going to get this as a callback i mean that's what we specified over incognito right we said when they get done signing in send me here and that's just what it did so this part is all we care about now i'm going to leave you because i hate it and folks don't give you like all the little details that you might need to do this on your own um if you did want to grab that id token then if you type in here we go um so like location.href that's going to give you the url it's not going to work because we don't have anything on localhost but location.href is going to give you the url you want to go ahead and split it by the equal sign that way we get an array split by the equal sign and then everything after this for the most part is going to be your jwt and then from there you're just sort of parsing it along but from here let me actually go ahead and grab that except i'm going to stop right here and i just want to show you what's in this jwt so i'm going to head to jwc.io and this is honestly one of the flubs that i did which is why it took me an hour and a half to do this um i pasted that value in there and i got pretty much all the good stuff that i want to know right it knows that it came from cognito it knows uh my username and all this good stuff that is really nice except what threw me off is that it has this access token stuck in there too and my first clue would have been that the signature is invalid and that's because i have my jwt and that access token so i'm going to remove this bit signatures verified and this is the actual jwt that i care about so um don't make that mistake when you're doing this alright so i have my cognitopool set up and in fact i have a user in there myself if i were to refresh this then i'm confirmed and i'm good to go but i haven't tied the two together i have a user pool with carnito but i don't have anything with api gateway and this is where authorization comes in so over in api gateway i'm going to head to my routes there's my get route and you notice that it's just wide open there's no authorization set for it let's go ahead and attach one so we can go ahead and click on create it is with jwt you can also do it with lambda which is cool but jwt is really cool and then for the name we'll just call this um like our cognito needle auth and then this part uh request.header.authorization this is essentially saying where like how is api gateway going to find this jwg is it going to be in the body in the url and we're saying it's going to be as an authorization header the issuer url this is going to be the url for our cognito user pool and the format for it i'm going to paste it in here is as such so this beginning part and then the region that your cognitive pool lives in so us east 2 for me and then the region with your user pool id now i need to grab that one and that can be found over here in general settings right alongside here great paste that over in our url there i got an extra u awesome and then the identity well that's going to be our client id so um or i'm sorry our audience so over here i'm going to grab the app client nope try again [Music] right here so app client settings there's our id and then the cool thing is that if you were to mess this up it'll tell you it'd be like hey we tried looking this up and we found nothing so we got that taken care of and now let's go ahead and create and attach and you notice that now it says hey we have this jwt service with auth so if i were to head over to postman and try to hit up this endpoint again it's like um sorry you're not authorized to be doing all this stuff so let's fix that now we have that jwt from beforehand so i'm going to head over to jwc.io this is just where i pasted it at copy that over and back in postman as a header i'm going to say the authorization i think postman will give it to us yeah authorization and then paste that in now this is one way to do it and you notice that if i click send tada we get access to our resources but what i'll say is that you probably want to go ahead and stick and bearer with a space inside of here as well just because a lot of different services even though cognito doesn't require it a lot of different services like off0 will and that's another benefit of using this service here is that you can integrate it with cognito you can do all zero but uh with that out of the way i think we got everything set up so now uh the only thing left to do is just fill out the business logic in your application because all that security for a lot of the ways is taken care of and there's a couple more things that you can do but i'm going to go ahead and cut things here i hope you enjoyed the video and thanks again to cloudbar and to eric johnson for helping me out appreciate it peace oh i can't cut it yet actually shout out to uh uh marcia alba she's on youtube and definitely follow her content because she um her video has an example with off zero and it helped me out a ton so aside from that thanks everybody and i'll check you all next time bye

Channel: Focus Otter

Views: 29,015

Keywords: jwt, cognito, api gateway, serverless

Id: o7OHogUcRmI

Length: 13min 48sec (828 seconds)

Published: Tue Apr 06 2021