Creating a custom authentication flow from scratch with AWS Amplify and React

all right so hello everyone today i'm going to be doing a live stream i'm going to be uh creating an amplify project in react and i'm going to be adding a custom authentication flow from scratch so let's go ahead and get started and not waste any time so the first thing i'm going to do is create a new react app using npx create react app and i'll call this amplify react off or something like that and we'll wait for this to go ahead and and install or create that new that new react project and while that's installing the rest of the node modules and stuff we'll go ahead and initialize an amplify project in this react app so we'll run amplify and knit and here we're just going to walk through the project environment name then the project name the text editor and then we're in a react project so we should be able to just choose the rest of the default options for things like the distribution directory and the scripts and things like that and then next we're gonna be prompted for our aws profile so by default if you've run amplify configure you should have a couple of profiles already set up so i'm going to go ahead and just choose my default profile which is used one so i'll go ahead and change into this new amplify react auth directory and i'll go ahead and install aws amplify that's going to be really the only npm dependency i think that we're going to need for this project we're going to be kind of writing everything from scratch as far as forums and styling and stuff like that are concerned there's not going to be really a lot of styling i think it's more about understanding how to do stuff like state management and things like that so i'll go ahead and open this project in my text editor i'll try that again and there we go okay so we have our react project we've installed aws amplify the next thing i want to do is amplify off go ahead and add the authentication to the app and during this setup process we're just going to take the default configuration which is going to allow us to sign up using a username and we're going to choose username as the sign in and we're going to just choose no for any advanced settings and to deploy we'll be running amplify push so we will let that run in the background and we'll jump back into the client side projects and the first thing i'll do is i'll go in to index.js and um it looks like my shortcut isn't working so we'll go ahead and import amplify from aws amplify we'll import the configuration that's located at aws exports this is created for you by the cli when you run amplify and knits and then we'll just call amplify dot configure passing in the config and now that we have that set up i'm going to go into app.js and we're going to start writing some code so this is going to be pretty much where everything lives this is going to be where we have all of our forums and everything for the app so the first thing we might want to do is import some state management hooks so use state and use effect from react and then from amplify we're going to import the auth class and we'll import the hub class as well just in case we want to to use that um the next thing we'd like to do is i guess we can delete some of this boilerplate that we have here we'll go ahead and create a couple of pieces of state so we'll have a form state and we'll pass in some initial form state there and for the initial form state we'll go ahead and create that variable here and from here we'll set stuff like username password will sets their email and the auth code and in addition to that we we might also want to think of the form itself so which form are we showing and by default we might want to show maybe the sign up form first or something like that so to do that we might say something like form type and we'll say sign up and this is going to let us toggle multiple types of forms so that's the initial state and then we have this function that's going to allow us to update the state so what we're going to need to attach to any input handlers so when the user is typing we need an own change so let's go ahead and create an own change handler and this is going to gets receive an event and what we're going to then do here is we're going to call update form state and what we'll do i guess for now is we will go ahead and return the existing form state and then we're going to pass in like a key value pair of the dot event.target.name in the event dot target dot value so the events name is going to be like the name of course of the input and the value is going to be the value of them typing so for example what we can do now using what we have now is we can destructure the form type and we can basically now say if the form type is sign up then we can show the sign up form so we'll do that here and the signup form is just going to be a couple of inputs and a cup and a button i guess so we'll have an input for user name we'll also have an input for the password and we might set this to be type of password and the last one we're going to do is email and then we're going to have a button that says sign up what we want to do now is basically we can duplicate this form across sign in and let me make sure that sign up is proper it looks like we need to be an uppercase u and i'll continue that here with an uppercase n so to sign in all we're going to need is the username and the password so we don't need email there but we will set this to sign in and we also need to confirm sign in or confirm sign up i'm sorry so when they sign up we're gonna need to do an mfa like a multi-factor authentication and all they need here is the auth code and i think that's yeah that's the value that we use auth code and we'll call this confirmation code or something like that so and this is going to be confirm sign up and then the last form state that we're going to have is going to be if the user is signed in and there are they are authenticated so this is going to assume like the user is signed in we might just say hello world welcome user so we have four main pieces of state uh forum state we have when they are signing up so we're showing the sign up form when we're showing the sign in form and the confirm sign up and we might even place the confirm sign up under the sign up just to kind of be you know in the right order where they're signing up then they're confirming then they're signing in and then they are signed in so it's going to kind of like waterfall from the top to the bottom of our code and then what we need to do is create some functions to actually attach to those buttons so we need a sign in or sign up let's start off with we need to sign up we need a confirm sign up and we need to sign in so for sign up what we want to do is we want to use that form state and we want to destructure the username email and password and we're going to await off dot sign up we'll pass in the username password and then we pass in attributes actually this needs to be like this and in the attributes we're going to pass in the email and then what we want to do is update the form state to toggle from sign up to confirm sign up so we might say we want the form type to now be confirm sign up so that if that makes sense we're going to be signing up and then we're going to be toggling the form state once they've successfully signed up and then we're going to say confirm and here we're going to be taking in the email i mean by the username and the auth code and we're going to call auth.confirmsignup passing in the username and the auth code and i'm actually going to double check the documentation to make sure i have this this api right so i'm gonna go to authentication yeah it looks like username and then code okay perfect so we have confirm sign up and the next step is we want to sign them in so we'll create one last function and we can maybe copy a couple of these lines of code actually and modify them here so here we need the auth code and the password i'm sorry we need the username and the password and we're going to call auth.sign in passing in the username and the password and for the forum type we want to say signed in if this is successful and just um just to double check that i got all this rights go ahead and pull up the docs again and look at sign up so username password attributes email confirm signup we got that sign in we're passing in the username and the password okay cool it looks like we we got all this right so now we can attach the methods to the buttons so we can say on click and we're going to update this form state to be signed in and we are good to try to test this out i believe we're not really using use effect right now but we will in just a moment okay let's go ahead and try this out and see what happens i'm going to run npm start gotta check twitter you know what i'm saying since we have all this time sent out some really funny tweets today you should check them out today being everyday all right so our react app finally loads and i'll go ahead and inspect to kind of see if we have any errors or anything we don't have any errors yet so let's go ahead and try this out so i'm going to sign up and i'm going to check my email to see if my confirmation code came in and it looks like i've signed up successfully so we're gonna go ahead and try to sign in and there we go we're signed in so we went through this whole authentication flow our user information is actually stored in the locals in the local storage but if we refresh we're going to be signed out again so let's try that out looks like we're signed back out so let's persist that user information and the way that we're going to do that is uh we are going to create a user state in our in our app so we're going to say const user update user it's equal to use states and we're going to just pass in null for now and we're going to use the use effect hook here and here we're going to call a function called check user that will create next and here we'll throw in like a try catch block and what i want to do is i want to go ahead and say constant user is equal to awaits auth.current authenticated user and then i'm going to update user passing in the user and then in the catch block i'm going to say update user null we don't really have to do anything there though we could just actually leave that empty if we want so let's go ahead and save this and refresh and let me log out this user looks like we're signed in so all we have to do at this point is we will call update form state because we know that we have that user and i can actually just copy this line of code from sign in because it's going to be the same so if we if we save that then we see that we're we're signed in the next thing we might want to do is add a sign out button so in our in our main ui where we're already signed in let's make this a div say sign outs and what we're going to do is call all dot sign out but what you're going to notice is that this is not going to change the form state because at least my guess isn't because we we're not really changing anything we're just signing the user out so we'll have to refresh again for this to work so we sign out but we're still there if we refresh the the user now is signed out um another thing we might want to do is have a button to toggle between signing up and signing in because we might want to say okay if we're if we see the sign up form we might want to just be able to sign in if we're already user so in this function we're going to just say update form state and what we want to do is set the form type sign in so now we can go ahead and sign in and now we're here we have our whole flow going but i just wanted to go back to this code because i kind of toggled away from it too quickly but all we're doing is just updating the forum state manually to kind of show that sign in um button and allow us to do that so what we need to do now to finish this off is we need to connect the sign out or all of these different events essentially into maybe some listener so we don't actually have to manage all of this ourselves we can just have a listener that will do everything for us so for example um when we when we do this call here even we might be able to handle that in the listener so in the use effect hook we might have a function called like set off listener or something like that and what we're going to do in this auth listener function is i'm going to go to the amplify guides under authentication and listing for authentication events i'm just going to kind of copy this code here and then i'll kind of walk through some of what's going on but what we're going to be doing is listening for this auth event by calling hub.listen and the two that we're going to be looking for are sign in and i guess sign out so sign out so let's just go ahead and save those and what we want to do in this sign out method is uh we basically want to update the form state so i might copy and paste this and say something like update form state signed out and i might take this code well actually that's not going to be an event because they're already signed in so we're going to have to leave it leave that there to continue working but for the sign out button we'll just use that for the listener for now and for the default case i'll just throw something there i'm not sure if i kind of miss that syntax up a little bit but anyway what should happen now is uh when we sign out this listener should uh trigger and maybe we can even console.log the data from event take a look at that data go ahead to this clear it out and sign out and now we see the data from the event and i have a bug somewhere because it just cleared up all the state so i'm guessing i i misspelled something here but um oh i need to yeah signed out is not a state that we're handling i need to set it to sun to sign up yeah so let's try that one more time sign in refresh we're still signed in sign out we get back to the forum that's it that's all we had to go over today that's all i kind of want to cover that's really uh the bread and butter to kind of getting up and running with a custom authentication flow of course you want to take this design that we have and make it look nicer but as far as the actual logic is concerned the functionality handling user state user management all that stuff form state we did all of that within a fairly short amount of time starting from scratch so i would say that if you're interested in creating like a more sophisticated user interface or design you have all this functionality ready to roll and you can then take this and kind of do what you'd like with it and probably have something decent looking within a few hours which is pretty powerful so i hope you enjoyed this stream and follow me on twitter at debit three if you're interested in seeing more of these types of things and follow me on youtube thank you so much

Channel: Nader Dabit

Views: 16,949

Rating: 4.9680853 out of 5

Keywords: aws, amazon cognito, javascript, react, aws amplify

Id: JaVu-sS3ixg

Length: 26min 16sec (1576 seconds)

Published: Tue Jul 21 2020