Build a Complete Register/Login System on AWS with React.js and a Serverless API - Part 2 (frontend)

what's up everyone welcome back to another episode of aws tutorial this video is part two of the tutorial that i talk about how to build a complete register and login system on aws if you haven't seen part one of it make sure you check that out first i'll include a link down below and in today's video i'm going to show you how to build out the front end with react.js and host that on an s3 bucket so at the end of the tutorial you're going to be able to build a system that looks like this where you have the home page that you can access with or without authentication and then you can register for an account and then you can log in with credentials and then for the premium page you can only access that after you log in and if you're not logged in and try to access it it will just direct you back to the login page so right now if i just log in with my account and this is the premium content page it's able to get my name from the database and then telling me that it's logged in and if i log out it just direct me back to the login page so i did the minimum amount of css for this tutorial but if you want to learn the css styling to make the forms look pretty comment down below if there's enough interest i can make a separate video for that but this tutorial is going to focus on the functionality of the login system so without further ado let's get to it all right so before we get to the coding part let's have a quick refresher on how the backend api looks like so we basically have three endpoints that we're gonna use the first one is the register that we're gonna use to register a new account and then we have the login endpoint that we're gonna use to authenticate our users and then finally we have the verified endpoint that we're going to use to check the user's token to see if it's valid and not expired to create a react.js app you have to have node.js installed in your machine and if you don't have that yet you can just go to the website and follow the instructions to download that and now let's create a react.js app together so what i'm going to do is i'll open terminal and then navigate to the directory where you want to save your project and then we're going to use npx to create the react.js app and if you don't have that installed you can do npm installed mpx so what i would do is npx create react app i'll just call it front end okay seems like it's done and i think there's an error permission denied when opening the package locked json that is fine we don't need this file okay so what i'm going to do next is i'm going to use vs code to open the front-end project okay so now i have vs code open the end project that we just created and now let's start the app to make sure that it's working first so open terminal to npm start all right so seems like it's working now let's go back to vs code ctrl c and now let's remove some of the files that we don't need for simplicity so we don't need these three we don't need this id we don't need this and inside app.js we're going to remove this and then remove that as well and then just say something like hello and then inside index.js we're going to remove this and then remove that and now let's test it again okay it's still working now let's go back to vs code ctrl c first thing first we're going to add some libraries to the package.json file so the first one is axio that we're going to use to call the api that's the latest version and then we're going to use react router dom 5.2.0 and i think that's all we need you can install them one by one as we go but i already know what we need so i'm going to install them all at once i just do npm install it will install everything here alright so it's done and now let's go to the app.js file and let's define the ui first we're gonna have a browser router it does the auto import and then inside we're gonna have a header tag have a class name i'll just call it header and then i'm gonna have nav link for the home page and then the next one is register that should be class name register and then two more we're gonna have a login page that says log in and then we're gonna have a premium content page and then we're gonna have a content div i'll just call it content inside we're gonna have a switch and then inside we're gonna have four routes that points to four components hum register login and premium content let's create those components first so inside source i do hum.js register.js login.js and then premium content and then inside home let's do import return let's just do a div for now and then we're gonna export default as um and then do the same thing for the other three components okay let's get back to the app.js file and use them so inside the switch tag we're gonna have route and it doesn't do the import for us so let me just do it myself import home from home and then let's do it for audis as well okay and then next we have loud okay so this skeleton is done let's test it out all right beautiful let's do some basic css to make it more legible so we define the class name to be header and content so let's go to the index.c file so the first one is header uh let's do a margin of 2 a.m 0 2 am and two in and then add some padding just to the bottom one em should be good and then let's add the border line to the bottom to be one pixel and then solid line and then for the anchor tag let's do some small margins 0 1 am and then 0 1 am just for the left and right and then find size let's make it bigger 1.2 yeah should do it and then finally text decoration we're going to have none and then for the content margin 2em and then fun size let's do 1.5 okay let's see how it looks like now all right perfect and now it seems like we have the routing working correctly now let's go back to vs code all right so the home page is basically done we don't need anything else now let's work on the register page let's build a form for user input so we're going to do a form and then the callback function is going to be submit handler and then inside let's have a h5 header that tells us what this page is and then we have a name input type text and then value we're going to set it to just name on change we're going to have a function inside that's gonna called set name even target.value we're gonna define this later you may see this is striking a line here but after we defined that that's gonna be gone and then we're gonna close it and then start a new line and then the next input is gonna be email the next one is username and then the last one is password and then we're gonna have a submit button type this submit and then value is register all right now let's define these attributes and functions so we're going to use something called use state from react and then inside here on top we're going to define some constants so the first one this name set name use state initialize it as an empty string and then we're going to define this function as a constant right now you can see that the striking line is gone we're gonna do event prevent default and then for now we're just gonna console.log it to see if it's working all right let's test it out use date is not defined let's see what happens use the uh use date that uses date okay it's working now register all right we see our form and let's inspect that okay so okay semi button is working and now let's go back and make all the fields required so we're gonna do if username trim let's define a message to show the user what's going on we are going to set message and say all fields are required and then we're gonna return and then under the form we're gonna use that message we're gonna do if it's defined and then we're gonna have a paragraph let's do a class name of message and then the message to display is the message okay npm start and now if i just press register it's gonna say all fields are required let's make it red so message css i'm going to do color to be red and then the font size we want it to be smaller let's do 0.7 okay okay to register now looks good but then if i fill them out nice now let's go back to the register component and in here we're going to call the api to register api to register our user and we're going to use axio so i'm going to import that first and now we can take the register url from our backend api let's go to stages pride and then copy this i'm just going to define it as a constant here the url register url but you may want to put that as a environment variable or something to register and then inside this function i'm going to define a request config that contains the header or headers because we need to give it the api key otherwise it's not going to allow us to call the api so do x api key and then go back to the aws console scroll down api key general is the client and that is our api key and same thing for this you may want to store that in your environment variable i'll just put it here for simplicity's sake and then we're going to define the request body username email name and then password and then we're gonna use the axios clients to do a post request register url request body and then request config if it's successful we are gonna set the message to be registration successful but then if it's an error what we're gonna do is if the error the status code it's for one that means is a user error we're going to set the message to be whatever the arrow returns if it's something else that means the server has an error in the back end we're just gonna say sorry the back and server is down please try again later okay that is it let's test it out okay register let's say name is test name email test and email.com and then username let's say test user password abc hit register all right registration successful now i have a typo here but whatever and now let's go back to the dynamodb to make sure that the user is actually there open that into a new tab table item alright so test user is there and then the name is test name password okay it seems like it's working and now let's do this one more time and it's going to tell us that the user already exists it's a fault user already exist please choose a different username okay cool this is working let's move on to the login page okay so the same thing we're going to have a form and then this first one is username and then the next one is password type this password as well and then do the same thing here and then lastly we're going to have a submit button value that is going to say login and now we're going to define these things so the first one is username use state except it doesn't import that automatically next one is password and then let's also have a message because if the password is wrong we want to tell the user let's call it error message this time let's set it to no let's also change the message for that to be known in the register and then after the form we're gonna do message and a paragraph the class name let's use the same class for simplicity and then the error message okay so it's done and now let's define this function that is also a constant submit handler equal to events do the same thing here prevent the font we also going to check if the username is empty or the password is empty and then we're going to tell the user we're going to set the error message to be and then return and then if the user enters them let's just log it out for now all right let's test it and see if it's working message is not defined 26 error message how about that okay all right both username and password are required same thing all right let's reset that if it's there we can do something like set error message back to normal let's do this and then we enter something all right so it's working and now let's configure that to call the api all right let's have this in the register.js as well before we call the api it's a message we know okay the same thing we're gonna define the api key i'm just gonna copy that paste it here and then we're gonna get the endpoint url for the login so i go back here copy this i'll just change that to login that should do it and then we're going to define the request body username let's see username and then password is password simple and then we're going to use the axio client to login what's called a url and then response and now we're going to set the user sessions but let's define the method in a separate file so go back to source and then new folder i will just call it service and then inside here we are going gonna do auth service dot js we're gonna do module exports so in here i'm just gonna define all the authentication related functions that we're going to use throughout the tutorial so that we don't have to come back here again so the first one is get user which is a function that is to check if we currently have a user stored in our session storage and if we do which we can just get it there user and then let's say if we don't have a user we're going to return no one thing i found that is weird is sometimes if it's undefined it's going to return a string undefined i don't know if it's just my browser or is consistent throughout so i'm going to check if the string is equal to undefined as well if not that means we can just return the json object of user okay and then the second function we're gonna define is get token and let's come through this and then set user session which is a function as well and simply we're just gonna set the user to be the stringify version of the user i'm gonna pass that in as a parameter the same thing for the token token is just a string then finally we're gonna have a reset user session that is also a function we're gonna remove item user and the token okay now let's go back to the login component and we're gonna import the set user session from the file we just defined we need to import the axio as well okay so in here we can just say set user session and then we're gonna get the user item and the token from the response body so response dot data dot user and then response.data.token and then we're going to direct the user to the premium content page so we're going to use the props here and then we're going to do products.history.push that is the ui endpoint but then if we have an error and if the error if the status is 401 or if it's 403 that means if it's the username or the password is incorrect we're gonna show the user the message we're gonna show whatever the response says and then if it's something else that means the server is down so we're gonna say that should be everything now let's test it out okay register login i forget what the username is so let's go back here test user test user abc nice so it's working and now let's enter the wrong password that's user abcd it's going to say password is incorrect or if we do this it's going to say username does not exist all right cool and now let's build out the premium content page premium content first thing we're gonna add is we're gonna add a log out button for the user to use after the login okay so that is done and let's change the text a little bit we say hello someone we're gonna get the name from the database and in order to get the name we need to get a user first we're going to see if the user exists in our system currently from the session token so we're going to use const user get user and then we're going to get a username from the user object we have to check if it's not undefined and not know and then we're going to get it or we're just going to set it to be an empty string and then now we're going to define the logout and delay function reset user session and then we are going to direct the user to the login page if they log out because we don't want to show them the premium content page if they're not logged in okay so it's done let's test it out props is not defined line ten of course all right home page premium content now let's change that to be a new line okay so since we're not logged in so it doesn't have any username to display so let's login test user abc all right nice seems like it's working but the last thing that we have to do is that we want to prevent the user from accessing this page when they're not logged in so log out but now i can still access it without any problem so let's fix that so we're gonna create a new folder called route and inside we're gonna have a public route and then we are going to have a private route and obviously this is the route that we only want the user to access if they're not locked into the system and that is going to be used for the routes but the user are logged in so let's define this first so first we're going to import i'm going to do const public route let's do component component rest and then i'm going to return a route and then rest render callback function that says prompt return um we're gonna do we're gonna check if the token is not exist we're gonna allow that to access whatever the public component is otherwise if the token exists we're going to redirect the user to a path name equal to the premium content okay and then finally we're going to export default public about it and now let's do the same thing for the private route except the logic is up it's the opposite we're gonna do the opposite here and then we're gonna direct that to the login page i think i may say slash in here okay okay so it's done let's use them okay so in our app.js let's import them first do that and then the premium content page is gonna be a private route and the register and login page is gonna be public routes because after the user is logged in we don't want them to log in again or create a new user and the home page is a normal one that you can access with or without authentication all right now let's test it okay so now is not logged in i'm able to access register login but not the premium content page it just directs me to the locking page even if i type in premium content it's not gonna let me get there and now let us login test user okay now it's the premium content i'm able to access it and it's able to get my name from the database and if i hit login it's not gonna let me get there if i hit login it's gonna direct me to the premium content page same thing for the register okay seems like it's working okay so one last thing that we have to do is that we need to check if the token is expired because we don't want the user to stay locked in forever we want it to be locked out after the expiration time is up and we're going to use the verify endpoint to do that so let's get back to vs code and we're going to do url we're gonna copy that phone let's see the register one and change that to verify and then we're gonna use the special hook called used effect and we're gonna import some auth functions we're gonna import react as well so first we're gonna check if the token exists and if token it's undefined we're just gonna return otherwise we're gonna call the api to verify to see if the token is valid so we're going to do a request config and then request body user get user token token and then we can import axio and the axio it's a post that then i'm gonna set the user token a session and then if we have a [Music] an error we're just gonna do reset user session remember here in the closing tag i have an empty bracket seems like this may take maybe a split second let's define a loading page and then after this we're gonna do so if it's authenticating and we have a token that's being checked or being validated if that happens we're gonna return a div authenticating dot dot dot you're probably not gonna see this often because the authentication or the validation call is pretty quick so it should come back pretty fast and here if the token is validated we are going to set authenticating to be false and if there's an error uh we're also going to set it to be false because the authentication is complete and that is it let's test it out okay seems like it's working all right so let me login that's user abc and now if you refresh you could actually see that the authenticating page was popping up for like 0.1 seconds and now let me go back to the backend system and change the token timeout to be 30 seconds and see how the token exploration works here in the front end so go to aws type in lambda open that internal tab this is the api so under auth we have a expires in attribute current is set to one hour i don't think it works for seconds but if you don't specify a unit the default unit is milliseconds i'm going to do 30 000 so that means 30 seconds so hit deploy and then go back to our home page hit log out for now and then i'm going to log in again so i'm going to pause the video for 30 seconds and then come back all right so it's been 30 seconds if i refresh the page right now it's going to log me out and direct me back to the login page and yep seems like it's working all right so now is the last part of the tutorial we're going to create an s3 bucket and then host our website there and see everything working so i go to go back to the aws console type in s3 open in a new tab create bucket give it a name let's call it gene meister register login client we're gonna uncheck this because we wanted to have public access and then acknowledge you can also do this later after the bucket is created i'll just do it here so i don't have to do it later and then enable versioning enable server side encryption create bucket and then we're gonna get into the bucket do properties and then scroll all the way to the bottom under static website hosting we're gonna do enable here we're gonna do index index.html this one is also index.html save changes and then under permissions inside bucket policy we're going to hit edit and then we are going to copy over a policy so go to gmail.com which is my personal website that i post things about aws and algorithms so you can check it out if you're interested let's do individual services s3 and then scroll down we're going to copy this and then go back to s3 paste it here and then we're going to change the bucket name to be your bucket name and then hit save and then go to objects and now let's build our react.js app first and then upload the files so go back to vs code ctrl c and then do npm run builds so that builds the project for website hosting what it does is that it creates a built folder and then put all the necessary files in there all right so it's done that's how it looks like so we're gonna upload everything inside this build folder to s3 so hit upload add files and then navigate to that folder and then select everything it's not going to let you select a static folder but we're going to do it later so hit open and then now so we did add files before now we do add folder to add the static folder hit upload hit yes and then upload right so it's done let's close it and then properties scroll all the way down this is our website url so click on that hey this is our page where we have the home page register and then login and then premium content of course it's not going to let us get there and now let's create a new account and test the hub flow under felix test add email.com username stu felix abc all right let's do capitalize just to tell it apart hit register registration successful stick with the typo and then we're going to do login felix abc hit enter and it's able to get my name capitalized and then it's logged in now if we do log out it just directs us back to the login page and now let's log in again and then wait 30 seconds for that to expired no okay i'm going to pause the video and then come back in 30 seconds all right so it's been 30 seconds so if i refresh the page right now it's going to log me out and drag me back to the login page and it's working alright so this is it everyone 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: 2,922

Keywords: aws, serverless api, react.js, register, login, authentication, hwt, node, bcrypt, api gateway, lambda, dynamodb, s3, node.js, aws lambda nodejs, signin page, full stack, web app

Id: ReNkQ0Xkccw

Length: 44min 8sec (2648 seconds)

Published: Fri May 07 2021