Video details

Learn How To Protect Your Routes, With React 18, Amplify, Lambda in 50 minutes!

React
04.10.2022
English

In this video we create a React 18 app with Amplify with protected routes, and a custom authenticator for a Lambda function. Stay all the way to the end to learn all about it!
👉Check out my last video on testing with Vitest https://youtu.be/FJRuG85tXV0
👉 Sign up and get free Vue cheat sheets and updates! https://www.vuecourse.tech
Need some mentoring, help with a project, get a career in tech, level up your skills? Check it out 👉https://mentorcruise.com/mentor/erikhanchett/
Need to Learn Vue or Nuxt? Check out my courses below!
http://bit.ly/2LalQka - Learn Nuxt.js Course! http://bit.ly/3aiYe8s - Quick Starter On Vue 3 https://bit.ly/2OETt0M - Full 6 Module course on vue!
0:00 Introduction 0:20 Demo of Application 01:04 Creatwing React 18 App 02:57 Adding new React 18 render engine 05:14 Setting up Ampllify Init, Auth, API, Function 09:24 Setting up Jokes API Lambda and Mock testing Then Pushing 15:06 Setting Up Custom Authorizer 17:02 Adding Dummy Components 19:07 Add Amplify Configure commands 20:10 Adding Routes and Setup of App.js 27:26 Adding Layout 34:00 Adding Authenticator to Login Route 40:28 Adding RequireAuth Guard 46:28 API to Lambda Function in Protected Route
Links https://github.com/ErikCH/protected-route-amplify-react

Transcript

Hey developers, today we're gonna create a new application using Amplify, and we're gonna look at how easy it is to add in protected routes, to add authentication, and to create a Lambda function that you can only use if you're an authenticated user. I'm going to go through step by step on how to create this application. I'm going to give you a quick demo of it. Let's take a look. Okay. So here's the app for first thing you can see is that we have this login page here. We can log in, which we also have a home route. Then we have these protected routes that automatically redirect to login if you log into one of them. Let's say I click on the second protected route and I log in, it's going to log in and it's going to redirect back to that second protected route. For example, this first protected route, this is backed by a Lambda function. So if I click this one, it's contacting a Lambda function and returning a joke back to the front end. You can see here. So this is all on AWS using AWS amplify. And it just takes a few moments to get set up. So let's take a look at how to create this app and how you too can protect your application using authentication. Okay, let's go ahead and begin. So we're going to set up this application. We're going to create and create all the offguards and all our Amplify stuff. So let's begin. So first we're going to use Create. React app to begin. So we'll do create React app. We're going to call it Whitey offguard and this will go ahead and create a React 18 package for us. It's okay to proceed. Okay, great. So I have that installed and now I want to go into the new folder that it just created. So I'll go into the white T Asgard and I want to install a few things. So we're going to install the AWS amplify UI react library, which is we're going to use to use for our visuals for our Authenticator. We're going to also install AWS amplify and we need React routerdom at six. And this will just take a moment. Okay, that's installed. And now I want to make sure that I have the latest version of the Amplify CLI. So from here I'm going to do Amplify. I'll do NPMI at Awsamplifyco and that will install it globally. And this will just make sure I have the latest version which as of this recording is eight. Okay. It's installed. If I do Amplify version, it should tell me I have the latest eight as of this recording. So always do that when you're working with Amplify, because they're always coming up with new versions of the Amplify CLI. It's a good idea to do it NPM run start. That is, this should create a development server. Cool. So it's up and running. This works. But if you look inside the console. It tells you that React Dom render is no longer supported in React 18. Use create root instead. As of this recording Create React app. We'll install React 18, but it doesn't configure it with the correct renderer. So we can quickly fix that. So let's go ahead and do that. Okay. So I have the app open up here in vs code that we just created. And to change that around, I'm just going to do the index JS. I'm just going to comment all this out right here. And the real new way to do it is we're going to use this create root. So I'm going to come down here, import create root and that's from React client. And then I need to create my container. So I'm going to do it like this. Just going to grab this one instead of root. Yeah. We'll leave it as root and then I'll do constroute equals create root which we just provided here. And actually this is actually capital R. Create root. And then we're going to pass in, we're going to pass in this container and then we can do root render and then we're going to pass in our app. And if we did that all correctly, it should work. Just saving. Cool. And I'm just going to delete some of this extra stuff we don't need and then we don't need this React Dom anymore. Cool. So let's take a look here. If we go back here, we're going to run let's see here. We're going to run NPM, run the start. If I can spell it right, it should run it. Starting the development server. Let's see if it loads. Cool. So now it loaded and if we go into the console. Cool. We don't get any messages anymore about not using the right render engine. So now we have essentially added in a React 18 app, but we haven't done much. Okay, let's see if we can set up some authentication in our app. So I have my server running. I'm going to go ahead and stop it. Let me make this a little bigger so everybody can see. And first thing you do is we're in the correct folder. We're in our app folder. I'm going to run amplify. Knit. Now if this is the first time running this, it may ask you to log into your console, make sure that you sign up for a free AWS account. There is an AWS free tier which is free for a whole year. If you don't know, you can sign up basically for free and it gives you tons of hours and compute stuff. And even if you are past that free year, it is very cheap for all of what I'm doing right here. So I would highly recommend doing that. And they actually have free tiers already in a lot of the stuff I'm showing you for. And so we're going to just start here. Enter name of the project. So I'm going to call it YT offguard. And yes, that looks good. Just going to leave the defaults there, use my profile, set new user. So it's going to log into my console here. So I'm going to do this on another page and I'll go ahead and do that. And let's take 1 second. Okay, I'm going to set this up in US West two. Yes, new username. Now on the other screen, it's going to ask me a few questions. I'll go and do that really quickly. Okay. So I went ahead and created all my account information. Perfect. So I went ahead and created basically the initialized this app as an amplify app, made me log in and everything. So now I should be able to add off. So I'm going to amplify add off. And so this is going to allow us to do authentication with our app. So I'm going to do default configuration, we're going to do email. No, I'm just going to leave all the default. And next thing I'm going to do is I'm going to add in a function. So I want to add in a Lambda function. So Lambda serverless, we're going to call YT offguard node, use hello world. And I'm not going to do any advanced configuration settings. I'm not going to edit the Lambda now. We'll edit it later. Great. And now I'm going to do amplify add API. So essentially what I'm doing is I'm going to have an authentication layer, I'm going to have a function and now I'm going to have an API which allows me to use it. I'm going to use Rest and we'll just call it Project API guard. And we're going to do Flashjokes. So we're going to create a Jokes API and we're going to create a new Lambda function. So now we're going to do amplify add API, we're going to use rest and we're going to call API Guard one. And I'm going to use Jokes as the path and use Atlanta function we already created, which is the one that I already did earlier, the YT offcard. And I want to restrict API access. Now I'm going to change this later on, I'm going to use my own authorizer. But just to show you guys I can do yes here. Essentially I only want authenticated users to be able to use it and they should be able to do everything, create, update, read or delete. And no, I don't want another path. Cool. So now I have in everything I want for the amplify. But what I want to do is I want to go and update that function really quickly and then we're going to be using it later on in this video. And of course, if this doesn't interest you, you can skip forward. But people always ask me after you create this authentication authorization, like how do you actually only go to protected routes and connect to like a protected Lambda function? So that's what I'm showing you here today. So you can see here there's this new folder called Amplify and inside this folder there's a back end folder and then there's an off folder. And then inside this off folder is some of the information about our authentication that we created. But we also have this function folder. And inside this function we have source and we have this index. Js. And essentially this is the Lambda function that we are going to be using today. What we want to do though is we want to create something very simple. I'm going to uncomment this out for Cores is we want to be able to create like a joke API. It just returns a simple joke. Now there's a lot of free APIs out there that we can use, but we'll just set one up through here. So we'll have our own Jokes API and it'll actually use another Jokes API to do it. So I'm going to create a new file in here called jokes. Mjs. And since we're using this is a node project with node and it supports this ESM versus CJS. I'm not going to get into it. Basically we can do equmuscript modules and do imports, but we have to put the MJS or we can use TypeScript as well. However though that's a little bit more set up. So I'm going to show you how I would do this. First I need to make sure I have Axios installed in a couple of places. So I'm going to install Axios in the root which I didn't do earlier. So this is a library that will help us do requests out. But I also need to actually go into this folder. So I'm going to go into amplify, back end, then function, then my team guard and then source and I want to make sure I have because there's a whole package JSON in here. I'm going to do an MPMI Axios. I'm going to use this Axios in the back end. You can see here. Now I have Axios as a dependency. Just perfect. And so let's go and write the code for that. So we're going to import Axios from Axios and I'm going to create a new Getjoke. Getjokes makes sense. Async is going to try. We're going to do a Const response and looks like our autocomplete can help us, but we're going to type this out. Axio get and I already looked this up before this video. But we're going to do joke.com and then to do this right we need to add in some headers because as I was testing this, I know it didn't work unless I added these headers. So I'm going to do accept it's going to be application. Json and then I have to add a user agent, otherwise it doesn't like it. Once again this is just a quirk of this API. Some do Axios and that should be it. And then if it works correctly. I'm going to console log received to check it out of the response data and then I'm going to return response data. I think that's all we need. And then we're going to have a catch here. So if we have any errors and this catch will just console log the error here. Cool. So here is our new jokes API. Just doing this Axios get has that joke and it's going to if everything goes well it will return back JSON and we'll have the information we need. So now inside the index. Js file you have the export handler. What we can do here is we'll do Const get joke. This will be equals await import. And if we did this right should be get. I think we called it jokes. Mjs. Now we should have the joke there because it'll get it. And now in our return statement we're just going to return joke joke. Okay, so if we did this right, we should have it. We can now test it real quickly. If we do amplify mock function, it's going to try to run the function, it asks me the source file. I'm not going to send it anything. So it says get joke is not a function. So maybe I did that wrong. Get jokes. That should be get with the s at the end. That's cool that you can kind of test it locally here. Mark it again. Enter. Okay, cool. Send the body of the message. My boss told me to attach two pieces of wood together. I totally nailed it. Nice. So the next thing we need to do is push this all up. So if we go amplify status it should tell us everything that we have to push up. So we have our auth, we have our function and our API. So I'm going to do amplify push and dash y and this should push it up to cloud and this will just take a moment. Okay. So everything has been uploaded to the cloud and we have one more step I want to do and that is to configure our authorizer. So only us logged in authenticated person will be able to see the Lambda information that we just created. So first bring the screen over here, log back into your Amazon console if your AWS console if you haven't already done so and then you just type in API gateway, go into your API gateway, click on the API that we created. This API guard one is it. Then we're going to click on authorizers. Create new authorizer. We're going to call this white tea guard authorizer. We're going to choose Cognito. It's going to ask us the user pool. So we're going to look at it. This is the one I know, I call it YT offguard. And for token source we're going to type in authorization and this allow us. So you have to have an authorized token create it. Cool. And now we're going to go back to our resources and you can see here, here's our jokes API that it just created. If I click on any here and I look at this method request right now, it said that Awsim, we really want to set it up to something else and we just created that authorizer and it's not showing. So we just have to do a quick refresh of the page. We're going to click Method request again down here. Cool. Now we have our Cognito user pull authorizers, which are going to do that one. We're going to save it. And one last thing we have to do is I always like to always double check after I do it to make sure it's still there. Yes, I go to Actions and then deploy API to our Dev. And this will just take a moment. Don't forget the deploy part or it will never work for you. So that's all we're going to do for configuration for right now. So let's deep dive into the code and see how we can set up our Authenticator. All right, so we have everything set up, but we need to jump into the React app and get that all taken care of. So I think what we're going to do first is we're going to add some CSS, just get that out of the way. So there's this app. Css file. We can go ahead and delete it all and we're just going to copy and paste our own CSS here. I'm just going to do this real quickly. It's just add some navigation, some basic flex, and just center everything on the screen. They'll make more sense once we get into the actual code. Let's create some components in our source. I'm going to create a components folder. What we want to do is we want to have several different routes, at least three routes, and then a bunch of components for those routes. So let's do that. We're going to have a home route and we're going to have a login and we're going to have a protected we're going to have this protected route. We'll call it protected first, and then we're going to have a second one new file. All right, so I have four different components here. And now let's see if we can just copy and paste some code. So export function home. Now we have several different components. Now let's work on creating our app. Js. Well, let's go into our index. Js first. So in our index. Js we need to set a few things up. First. We probably should do our Amplify. You can see we have this AWS exports file and we want to make sure that when the app loads that we set up Amplify. So I'm going to import in Amplify Shopify and then we can do an Amplify dot configure and import one more. We're going to import in AWS exports from AWS exports and we're going to use it here. This is all we need to do to configure amplify. At the beginning. It'll automatically look at this exports file that was generated when we did the amplify add off and amplify knit. And this will have all the configurations for our auth. Now the next thing we need to do is let's look at our app. Js file. And I think in this file, what we need to do is create our routes and also basically set everything the app here. So first I just want to delete all this and I'm just going to do a hello world, go back to my app here, refresh it. So now I need to start it again. All right, so our app loaded. Hello world. That's what we sort of expected here and we can move on. So I'm going to create some routes. I'm going to create a function to be called my routes, and we're going to return a few things. Now I'm going to have to do an import in here to get everything we need. Let's see here. We're going to need a browser router and I'm going to have to import that in. So import in browser router. And then inside this we have this route. And by the way, if you're confused on what these are, the official documentation for React router six has all this information, so I would look that up. You also need something called route. So now we can do some routes. So in each route we're going to have this layout route that's going to circle everything else. So we're going to put path equals that and element equals. And from here we want to import the layout route. So we're import in layout from and I believe it's on the components folder layout. And then we just put it in like this. There we go. Looks okay. There. And I'll just self close this. Well, this layout route actually is going to be the route that's kind of encompassing everything else. So let's actually not self close it. Okay. And then we'll just come here and then we're going to have another route and we'll have index element equals home. And this will be self closing. We don't have this home yet. So let's import in home from components home. So let's see if these two work. First thing I need to do real quickly is in our components layout, we need an outlet. Otherwise this doesn't make much sense. So let's add an outlet and that basically tells React router that this is going to need. This is where we're going to insert everything in in the route. So do something like this just for now, paste this here and we need to add in this outlet. So we're going to import outlet from. Cool. And we just have one more issue after we close this here. Okay. So let's take a look and see what it says. Module cannot find component. Oh, I misspelled home. So go back to app jazz component. And we'll see now, right now all we have is just returning the hello world. So let's change this up. We're going to delete this and let's see if you just have my routes. Save it back over. Okay, cool. We have a layout and a home. Just something really simple. Obviously nothing there yet, but we do see our home and layout, which is good and sad face. One thing we also need to do real quickly is for the Authenticator. Something you don't want to forget is there is this Authenticator component and this is some AWS, this should be AWS, amplify UI react and we need to surround since we're going to be using routes and we need to determine where everything is, we need to surround our app by Authenticator provider. Otherwise things will not work. Right. So let's do that. Cool. And if we come back over here, obviously nothing's changed. But now we have this authenticated provider and this is going to let us use the pattern later on where we're going to be able to grab the route. Basically we're going to be able to understand if the user is authenticated or not authenticated. Okay, I think we should continue on. So we have this route index for home. So we're going to have another route and this is going to be our protected route. We have protected here and that's going to be element equals. And for right now we'll just do protected, but we'll eventually create another component so we can actually protect this route and we want to do the same thing again. But this is going to be protected second. We'll do protected first, protected second, and then you need a login route. So I'm just going to copy and paste this and this is going to be a path here. It's going to be login and this is going to be login. So first we going to have to import all these in. So let's import them in. We got protected first from components. Protected first. We're going to have protected second and it's going to be protected second. Great. And then we need login. So we'll do one last one, import login from components login and we'll just put that right there. Okay, so no errors. But obviously we need to have some way to change between these different routes. But so far it looks okay minus a few extra problems. But let's see here. We know the home is the first route, but let's go to slash. We have protected, let's do protected two. I guess that should make more sense. So we're going to have login. Okay. Then we're going to have protected protected here's, protected first. And then if we go to protected two, protected second. Okay, so we have all our routes in minus an extra ending there. Okay. And then we also have one extra one there. So let's see here, with this layout, let's go into the layout and we also have one right there. Let's make the layout look a little bit nicer. So it makes more sense what we want to do here. So I'm going to add in a few things. First, I want to import in our Authenticator. This is a hook that we have that allows us to kind of find out with our Authenticator which we'll add in a second what it's doing, if it's authenticated or not authenticated and what route it's on. So I'm going to grab from here, I'm going to grab in route and sign out. I'm going to grab this use Authenticator hook and use Authenticator hook. You have to tell it the context. So we're going to have to tell it to context route. And this helps with rerenders and so context sign out. And by the way, if you're completely confused by this, if you go to the official documentation for the Amplify Authenticator, go to components Authenticator and go all the way to the bottom where this has full API. It'll explain to you how this works. You can see access authenticated user and you want to do context user. There's also accessing route contacts route. So that's how I got that from. So I'm grabbing the sign out and route from it and you can grab a bunch of things from this. Use Authenticator that helps you when you're using the Amplify UI. Great. And then so I want to also I'm going to grab this navigate and use this new use navigate and that is also going to be part of the React router domain. That's a hook that helps you with navigation for the react router. And we're going to do a log out and that's just going to call this sign out and it's going to navigate to the login page. Okay. So right now all we have is these two. So let's do this. Let's add a NAV and then inside the NAV we're going to add some buttons. So the first one we're going to add is home. We want a home button at the top and then when you want a different one that says first protected route and another one that says second protected route. And we also want a button that says log in or log out depending if the user is logged in or logged out. So first let's do this. This one we want to on click handler on this and we just want to go to navigate. So we're going to do there. So it navigates to the home. Then this one, this is going to navigate to protected and then this on click is going navigate to protected two and same thing. This is supposed to be like this. I'm going to create error function. Okay. And then this next one is going to be a little more tricky. But let's do this if route. So now we have this route that we got from this. Use Authenticator. We'll say if does not equal, equal authenticated. Then we want to show this button, which will be a button. It's going to have an on click handler too, which is going to equal navigate to the login. So it's going to say login. If you're not authenticated, you have this button here. You can click on it. It goes to login. However, if you are logged in, then we want to have another sort of button. This is for your logout. And this on click handler will work a little bit differently. It's going to go and run log out. I have a NAV here and then I'm going to have an H one that says welcome to this simple route app. And then I'm going to have a span and the span will say if once again we'll do another check. If route equal equals authenticated, then we're going to put you are logged in. Otherwise we want to put in please log in. And we just need to make sure that we close this and we use the proper there we go. Just had to fix some of that. And then at the bottom we'll have the outlet. Okay, so let's see what it looks like now. Cool. So now we have a home button. First hit home, goes to home. First protected route, second protected route. And then our login page. Awesome. So now we have all four buttons. But obviously we want to do a few more things here. So let's add a little bit to the home route. Let's take a look at the home route real quickly. The home component, and it just says home. But I think it probably should say a few other things. Let's make this an H three and I'm going to put in here. Please use the buttons at the top to test out protested routes. I refresh it from the home page. This is basically like the index. It says please use the buttons at the top to test out the protected routes. It says please log in. And right now we don't have any protection. So I think the next thing we want to do is just let's see if we can log in before we protect any of the routes or do anything like that. Let's see if we can just simply log in. So let's add a login feature. So here's our login. First we want to show the Authenticator. So once again, we're going to import it in. So we're going to import in Authenticator from AWS, Amplify, UI, React. And there's also thing called with Authenticator. We can actually surround our whole app, the Authenticator. But obviously I'm not going to do that here. Okay. It kind of looks ugly because we need to do one other thing. We can do this in a couple of different places, but let's just do it here. We're going to import in awsamplifyuireactstyles. Cssstyles. Now if we save that refresh it. Cool. So now we have like our modern looking Authenticator that allow us to log in and log out. This is completely customizable, by the way. If you go back to the Amplify UI dock site, you can change all the different variables. You can make it completely look a whole lot different if you wanted. I'm not going to get into that. But you can notice that this is customizable to the colors and themes of your application if you wanted and you didn't want to do it with this style. So we have the login, we have this a way to log in now. But what happens after you log in? Usually what happens anything between the upper in, between the opening and closing brackets? You would put things in here if you were logged in. But for the purpose of this, we're going to do things a little. We have to do it with routes. So we're going to change things up from what you might be doing if this is only one Authenticator that wraps your whole app. So I'm going to grab once again, I need the with Authenticator. Oops, not with Authenticator. Use Authenticator. And we're also going to grab in, I think from react. We're going to import in Use effect. And I'll show you how this works with react. And then we need a couple of things from the react router. So we're going to use navigate and use location from react router. Think that's all we need right here. So let's begin in this login here. I'm going to grab in that route again and from use Authenticator. And remember, we always have to put in this context to help prevent rerenders, just like the official documentation mentioned. And we also need a location. So we use this use location, we're going to use navigate. We're going to grab that from use navigate. And one thing we want to do too is that if someone goes to a protected route like this first protected route or a second protected route, I want to remember that redirect them to log in. And when they log in, have it go to that one of those protected routes. So this is a neat little trick. This was an official documentation from react router. So if you do let location and then we'll do let from and we'll have that equal location state from pathname or just the root. Now it'll know that we can use this from to look at the state of their last place they were at, essentially. So now we're going to use this use effect. And in this use effect, I want to say if the route equal equals authenticated, I spelled that right, authenticated, then we need to navigate to the from and we'll do replace equals true. And this will log it into the last place they were at. If they were one of those protected routes, otherwise it'll go to the route. And then for this use effect, we'll put in here route navigate and from and one thing also I want to do with this return statement is we have this, I'm going to put this wrapper around here that'll make it center it and everything from the CSS. We already created this Div. This Div will have class name of author wrapper. I'll put it in here and we'll make sure we close it. Now our login. Now we should be able to log in. So we haven't created any accounts or anything yet from this. What it should do though based on our code here is it should log us in to the app. Okay, let's try to log in. I'm going to create a login here. I'm going to [email protected] I'm going to click create account. Cool. It's going to ask me for a password using an old email address here. I'm checking my email now from my other screen, putting it in confirm. Cool. So it logged me in. It says now you're logged in here and it rerouted me to this home route. Now I can check. Obviously these aren't doing anything, but if I click log out, let's say I click second protected route. Well, I can't really do it right now because these aren't protected, but at least we have a way to log in and you can see it rerouted us to the home page essentially. All right, I click log out and it logs out. So the next thing we need to do is see if we can get some of these other routes working. So we did the home, we have the layout, we have the login, but we don't have any of these protected ones. To protect these routes, I'm going to put here in a second to grab stuff from our Lambda, but we need another component. So I'm going to create one. It's going to be called requireaut. So new file requireaut. Js and inside this required Auth. We are going to basically surround any component that we want to be protected. That only should work if they're logged in. So I'm going to grab use location and navigate from react router Dom. I'm going to grab use Authenticator once again in from the ads. Amplify UI react and we're going to export function require. Auth. And we'll assume one of the props will be children. So we're going to use this location here. This is going to grab us information about their obviously location and we need to grab the route again. And it's a little bit of writing, but we can do context, context route. And if route does not equally authenticated, then we want to do something. Then we want to return and then we have this navigate. So there's another way to do it. We'll do login and then we'll set the state from this location and we'll do replace. Otherwise, if everything is fine, we'll just return the children. So what this is saying here is that this require. Auth, it's going to surround a other component which is going to be basically the children. If it finds out that the route is not authenticated by using our use Authenticator method right here, it's going to navigate some of the login page. It's going to save the state and then replace it. So now we should be able to use this to be able to protect routes. Now there's another way to do this. If you were having problems this route, there is this off current authenticated user. You can grab that out of the AWS amplify library and use this instead instead of using this route if you have problems with the route. But from my testing, it seems to work okay with this authenticated user. So now we got to go back to the app. And so now for these two protected routes, we should be able to surround them inside this new require off. So I'm going to import in require require off from this one. I just put in require. Auth. I don't think I put it in the components folder. And then in this element right here, I'm just going to simply surround it by it. So it's another component to require. Auth. And I'm just going to move this over. There it is. And the second one, we're going to do the same thing. Do some copy and pasting here maybe. Let's see here, right here. Require auth and then I'm going to copy this, paste it. Okay, so now we have both protected and protected too, surrounded by require off. So let's see what it's doing here. I misspelled it. So yeah, this is misspelled right here. Sending an Educator this is the right spelling. So use on send too many ENS there. Okay, let's see if that worked. So if I click any of these, you can see here, it flashes for a second, but it's basically rerouting back to it. Now, normally if you were just you wouldn't have buttons to protected routes. It's kind of weird, but if you did it like this, it just instantly reroutes back to this login page. If you find that there's issues here, you could always in our protected route, we can add a little bit more safety on this. So I'll show you. So in this protected route here, we could check to see if the route is authenticated or not the same way we did before with using the use Authenticator and grabbing the route out of it and be like if it's authenticated, then send a message. Otherwise put a Loading screen so you can add like a Loading spinner. But for the sake of this demo, we're not going to do it. If you look at the code, it's up to you if you guys want to add that in or not. But I think for now, just with the testing, you can see here, I'm not really having any issues. It's not really displaying the text. It just works. So it's rerouting back to login. And by the way, if we click first protected route and we put in our email and we sign in. It went to the first protected route. But if I click second route, let's see this. If I click home and then second protected route and I log in same thing, it rerouted to the protected route. And if you refresh it, everything seems to be fine. It's showing protected second looks good. Everything's fine there. So now we have essentially protected routes, we have these protected routes, we have a login system. Everything seems to be working okay. So the last thing we want to do is that when you go to one of these protected routes, we want to actually see the Lambda function, talk to the Lambda function and actually get data out of it. So let's go ahead and do that. Next, let's take a look at this protected route. So it doesn't really do much now except it just shows protected. First. I want to add in a new function here. So first we're going to import in this new API. So you can import this in API. It's from AWS, amplify. And it's really a nice way to connect with APIs Lambda functions, things like that, using amplify, especially if they have their own if they have their own Lambda function you set up through the API gateway and everything. So what we're going to do is we're going to create a new we're also going to actually import one more thing, use Authenticator spelled right this time. And let's see if we can do this. So we're going to grab the user from equals, use Authenticator. Once again, we're going to grab the context. And if I did that right, we'd have a closing bracket and this is going to be contact user and we're going to grab some react stuff here. We're going to import in this used state from react. And so we're going to do jokes and then set jokes. That's going to be from this use state and we'll just have it have it empty. And I'm going to create this async function called Getjoke. What this is going to do, it's going to talk to our back end Lambda function that's protected through the authorizer that we just created. And we're going to see if we can get the information out of it. So we're going to request info and so we need to have some headers. So we're going to construct this authorization header and this is going to actually require a token that we need to get from user. So we don't need to put bear in front of it. But we do need to grab user. It's going to be sign in user, session ID token, JWT token. And now we're going to have some data. We're going to await API get. And first it's going to ask us a few things. And if you look at the API get, we need the API name, the path and the init. So we know that the first one is jokes. That's what we did it. And we know we're going to send this request info for the second one there. But we don't know the first, we don't know the first one. So let's check what it is. So I think I have this tab open up twice. If I do amplify status, it's going to give us the names of everything that we just created earlier in this video. This will just take a second. Okay, so what we need to do for this one is we need this API guard one is the name. So we're going to call this API Guard One. And that's because that's the name of the API that we set up. Okay, so if we did this all correctly, we should have some data coming back. So I'm going to console log the data and then also set jokes for data that's coming in. And then instead of just saying protected first here we're going to return a few things and then we also want a button and we want on click. We want every time it clicks we want it to hit that Lambda function that we created. And so they should hit Get joke and call this Get joke from the back end. And then we'll just put right here, we'll put it at the bottom, I guess we'll put it the jokes. Okay, so if I did that correctly now our protected route should be able to hit this API and return the information to us. So let's see what happens here. So we have to log in first. Login with my old email address. Okay, protect second, I'm going to protect it first, get Joe from back end and cool. Where do you cows eat lunch in the cafeteria? Get it? It's pretty funny. And then I guess we can add a break here. Obviously if we did this right, we'd probably use Flexor grid and make it look nice. So where do you get cast from in the cafeteria? Click it again. Why don't you find hippopotamus hiding in trees? They're really good at it. Where does Napoleon keep his armies in his sleeve? Ease. What do you do when your Bunny gets wet? You get your hair dryer. See, that's pretty funny. And now we have created a protected route. It's grabbing information from a Lambda function that we created earlier. And just to show you that it works, let's go back to our API and let's take this away from this first one. This protected first. So it's no longer protected. So if we come here and we go first protector route and I click this, it doesn't work. I didn't get any messages here. But if we look inside the console and they do it again, you can see here it's giving us a cannot read Properties Undefined reading sign in User session if you look at network. Well, the problem is right now is that it's not even doing the call because it's looking at this JWT token and it's not there so it can't do it. But if you were able to do it let's say we just get rid of this for a second. We just send no authorization header because we don't have one and we try it again. Now we get a 401 so the 401 you probably can't see it very well but essentially let's see here. The four one says it's unauthorized if you go to response and headers, let's see here response unauthorized. So it's definitely an authorized request because we don't have any of the tokens or anything set up correctly to do it. All right, so that's it. I hope you guys learned a lot. This was a lot of information but you could see how easy this was to create a simple authentication on our app. It didn't take too long. We have now a secure back end. We have some protected routes. It works great so let me know in the comments if you guys have any questions comments make sure if you guys like this you made it all the way to the end. Click that like button share it with your friends become a subscriber that would be really help me out and then give us feedback too. Thanks.