Copy Initials Authentication with airSlate SignNow

Copy initials authentication

[Music] all right welcome back so in the last video we handled routing um using react router in our app and in this one we're gonna want to add a login and sign up so kind of a some basic authentication so let's take a look at our mutation here and this is our mutation type here and this is our sign up mutation right here so let's come down and take a look at what we're doing so we're going to pass in a name and email and a password which is going to be hashed here um this is what we're getting we're going to get back the token which is going to be signed using jwt and our app secret and also our user and then what we do with this token is up to us so i thought a few different ways um we might want to do this so in the past i've used cookies and stuff but i haven't done uh much local storage for this so i thought let's go ahead and try that out so that's what we're gonna be doing for this um so let's get right into the actual uh coding here so let's come back over to our app here um and we are actually gonna need to handle um our client our apollo client a little bit differently in order to uh make sure we are getting the token so uh let's go ahead and uh change a few things up so we're gonna need to add one package here so come down i have my servers running here but we are gonna go and cd into our web right here and then we're gonna go yarn add and we're gonna add a package and that package is called apollo link context okay and you're gonna see why we're gonna need this but it's going to be used to kind of create the context that we're gonna use to get that token and pass it along for each each request so otherwise we're going to be getting a chord there and stuff if we continue uh with this here so let's just go ahead that looks like it's done so let's go ahead and get rid of uh this right here um then we can come down and let's uh kind of start over again so the first thing we're going to want to do is we're going to want to bring that in so let's come here and we're going to go import and that's gonna be called set context there and that's gonna be from um this package here and it is going to be called apollo link context there great and then we are going to want to do a few things right here all right so the first thing we want to do here is come and go const and we're going to go http link and this is going to be to our url so it's going to go equal new http link and that's going to be auto imported so that's coming from our apollo client right there which is good and then we're going to come in here and we're going to create an object here we're going to have a uri okay and that's just going to be our uh http colon access backslash local hosts 4000 so that's our previous uh url that we are using all right so once we have that we're going to come down here and we're going to create our auth link all right so let's go const off link and that's going to be equal to set set context there and then we're going to have an async function and that is going to have a request and then we're going to pass in the headers here because we want to pass along that token into our headers with every single request in order to determine if we're authenticated if we're not authenticated that sort of thing and then we're just going to go const token and this is where we're going to get our from our local storage right all right so let's go const token there and that's going to be equal to local storage dot get item and we're gonna pass and we're just gonna call it token in our local storage we're gonna store it as token here okay so that's good and then come down below here and we're gonna go return and again we wanna return and we're gonna uh spread in here our headers and then we're gonna go headers and open this up and then here we're gonna go authorization and then we're going to go token and if there's a token we're going to go some backticks and we're going to go bare and then some curly braces passing token here and then if there's not we're just gonna uh set it to null there okay so let's save that it'll reformat a bit okay i think that's looking okay let's get rid of this down here all right so that's looking good now below this we also need to create our actual client still so let's go const and we'll go link and that is going to be equal to the auth uh link that we created up there and then we're gonna concat onto there we're gonna the http link okay and then we're gonna go const finally here uh lowercase client and finally here we're gonna actually create our client so new apollo client okay and then open up our object here and we're gonna go link here and we're gonna pass in uh actually we don't need to pass in anything there and we're gonna have a cache and then again we're just gonna pass in like what we had before our uh in uh memory cache there and called that all right so we got a little error here oh it must have erased make sure we auto import that now we're getting a couple errors here these are looking like typescript errors uh so i'm not too sure how well uh that's being typed but let's just cast that as any for now that should take care of that and we'll just go link uh we'll go link as any okay that should take care of those errors okay so obviously a little more complex than we had before but this is gonna be necessary in order to uh set our headers which we need to do in order to tell if uh we're authenticated or not so that's gonna be necessary but uh yeah that's about it so let's get out of here for now and then we're gonna come in let's actually create our uh we'll go our sign up first but first actually let's go in here and let's create a new folder and we're gonna structure this as pages okay and then inside of the pages where we're going to want to actually do our um sign up component dot tsx so to start off give us some structure let's come into our components and let's just copy over our user's component that we have and we'll just adjust accordingly because there will be a few things similar that we need so we're going to come over here and let's get rid of this and let's go use mutation because that's what we're going to need for that then come down here and we're going to use a form called a form component library called formic and if we come over to here you'll see this is a library that we're going to use um it's just going to handle some validation for us stuff like that so uh yeah i think that will be useful and that's what we're going to do because it's uh my video all right so let's come down here open up our terminal again and let's go yarn install formic and then we also want a library called yup which is going to be helpful for our form validation so let's run those two not yarn install yarn add all right that is good and i think what we actually might need to is the types for uh yep form is written in typescript so that'll be fine but yup um i don't think is so yarn ad dash d at types slash yup should do it all right so that is good let's get that out of here and now we can actually start with our form so come below here just a little room and import some stuff here so we're going to import first a bunch of stuff from formic so we're gonna go error uh message we're gonna go uh field we're gonna go form and we are gonna go for mc okay and all that's gonna be from uh formic good and then below that we are gonna also bring in uh we'll just bring it in now but uh actually yup so import uh we'll go everything as yup and that's gonna be from yep okay and the last thing we want to do is we're gonna want to redirect after we log in so we can do that by going import and we can import uh use history and this is just from react router dom and that is yeah like i said from uh react router dom right there all right so now this is being used right now so now we've done queries like this before but we are going to change this to a mutation so let's actually let's just get rid of all this right now we don't need any of this get it out of there we're going to change this here to uh sign up and i actually like to add uh this stuff at the bottom here so let's go export default uh sign up um i don't know it's just a style choice there but whatever you choose all right so we have our sign up here now let's go ahead and actually create our mutation so we're gonna go const and we'll go sign up uh under no sign up underscore mutation and that's gonna be equal to gql and then we do our backticks here and we're going to go mutation and that's going to be called sign up as you can see in our mutations that we had before and then we're going to pass in the values so dollar sign names our first one and that's going to be string and that is also going to be uh maybe i don't think it's required in our back end but uh we'll see anyways uh then email and that's gonna be a string and that's gonna be required and then we're gonna have a password password and that's going to be also a string and that is also going to be required all right come down here we'll call sign up here and then we're going to get the name and that's gonna be the name we're gonna get the email and that's gonna be the email and we are gonna get the password and that's gonna be the password so that stuff's gonna get pretty repetitive i think um so you get used to it but this is gonna be the structure for basically any mutation that we want to do going forward all right come in here open this up and what do we wanna get back well all we wanna get back is this token which then we're going to take here and we're going to set into our local storage okay so that's basically all that is make sure we close off our backticks there and that is what we have so how are we going to do this well let's come and get our a little bit of structure here all right so let's come in here and actually get rid of all this here um okay so that's good so the first thing let's just give us a little bit of a title here so we got a h1 and we're just going to call that sign up okay and below that we're gonna go formic here and in this we're gonna have a bunch of different values so come down here and the first thing you wanna pass in is an initial values okay and that's going to be equal to uh initial values which we're going to create above so don't worry about that yet and then we're also going to want a validation schema so we can validate whether the input we're assigning is actually correct or not so validation schema okay and that is going to be equal to again same thing validation schema here and then give us a little room here and we're going to want to come in and we're going to have an on submit here so on submit and then this is going to be equal to an async function here and then we're going to pass in the values that's the values of these forms here and we're going to have a set submitting okay and come over here and do an arrow function and open up some brackets here and then on our in our on submit here we're going to start by setting uh submitting so set submitting and we're going to set that to true and then we're going to go const and we're going to have a response okay and that's going to be equal to await and we're going to call sign up and in this sign up we're going to pass our variables from our actual form and that's just going to be the values so the sign up is what we're actually calling this is our mutation and we're passing in the values that we're getting from this formic form here okay so once that's going to be done we're going to come down here and we'll go local storage dot set item and this is where we're going to actually set our item so we want to we say we're going to call it token here and then we're going to get the response dot token or dot data rather dot dot sign up dot token okay so you can see this is what we're setting into our local storage we're gonna save it under the name token and we're gonna get the response that we get from this mutation which will as we saw in our mutation which will be the actual token okay so that's great then below here we want to go set submitting okay and we'll set that back to false and then finally once that's all done we want to go history dot push here and we want to push to uh what should we go well they're going to be logged in at this point so we'll do a protected route at that user's row we have so let's go slash users okay so that is all good and well and then we want to make sure we close off here our form here so in here come down here and we want to bring in some of these things so we're going to go form okay and we're going to have a field okay and that can be self-closing and then in this field we're going to have a name and that's going to be email okay and then we're gonna have a type and that's gonna be equal to text okay and then we are gonna have a placeholder okay and that's going to be equal to email all right so that's good for the first one so that's how the fields are going to work you're just going to give it a name and a type a placeholder and then formix is going to handle all the rest so then we're also going to have an error message okay and that's going to be in here and in this error message this is going to be if everything goes wrong or if the validation fails or whatever so let's go email okay that's good for that and then you're gonna pass it a component um here and for us we're just gonna go it's just we're just gonna add a div component but you could add some sort of custom component if you had some error message uh handling there so let's go here and let's just copy this down a couple times and we can just change these values around so here we have email but our next thing is what uh we'll go name and we can just pass this name okay and then same for this and yeah that's it all right so here we're gonna have password here so let's come over here change these over to uh password here and also we want this one to be password as well okay and then we actually have to do this another time because we have a confirm password don't want to forget about that so let's come down here and let's go uh confirmed confirm password this is going to make sure our passwords are the same or we know the password and then here again let's go confirm uh password all right so i think that is all we need for this so let's go ahead and save that okay and the last thing we want to add into our component here is we want to come over and let's add a button so we're just gonna have a regular button right now no styling or anything we're gonna have a type and that's gonna be equal to submit and that is going to be it for that close that off and let's go sign up and add that to there go ahead and save that okay so that's kind of the the format our form is gonna look like let's uh go ahead and add this to our app and see if it's even uh coming up or whatever so let's come in here and come down here to our routes and let's just come in and we'll just copy this up here and we'll change this to sign up and we'll pass in our actual sign up uh auto import that okay now hopefully that works so come over to our app let's go to slash sign up and we got something broken here and we haven't brought in use history or anything yet so let's go ahead and do that and i guess at the same time we might as well finish off our sign up uh all the things we're gonna need so let's come in here and first we can just bring in use history like this so let's go history it's equal to use history okay so that will handle that error and let's come in and create our actual uh mutation here so instead use query we're gonna go use mutation and then instead of user's query here we're just gonna go sign up mutation which we have right here okay and we created above and instead of the all this stuff we're just going to come in here let's get rid of this here and open up some square brackets not some curly brackets and then go sign up which is our mutation that we're calling and then we want to return the data from from that that we're going to get back in the form of a token and then we don't need any of this either so get rid of that now we haven't done this initial values or this validate schema yet so i say we might as well uh go ahead and do that i don't know why that's giving us an error i guess we got to bring it in again okay auto import that okay so let's come down here all right so let's come here and go const initial uh values okay so let's come we got email and that's gonna be uh empty string and then we're gonna have a password we have a password then we're gonna have a password and that's gonna be an empty string and then we're gonna have a confirm password and that again is going to be an empty string and then we're just going to have the name here and again empty string now what we want to do here is actually create an interface for all this so let's come up here because we want to do some typing here we haven't really done much of that so let's go interface and we're going to call it sign up values and then here we're gonna have email and that's just gonna be a string we're gonna have a password and that's gonna also be a string and then we're gonna have confirm and that's going to be a string you're getting the point here everything's going to be a string string's for everyone and that's name and that's going to be a string okay and then if we come down here to our initial values we just want to pass that in as our types sign up values right there okay so now that's nicely typed there and the last thing we want to do i think in this file here is we want to use uh yup to do some validation so come down here and let's go const validate validation schema okay and that's going to be equal to yup and then we're going to say dot object okay and then open up our object here and these are all the things we're going to want to pass in so let's go email and that's going to be yup dot oh that's not it that's gonna be yup dot string and then it's gonna say dot email and it's gonna say invalid email address so this is going to be what we're going to return if the uh if the email is not valid and then you can just kind of chain on different things so there's also a dot required okay and that's gonna be uh here and that's gonna say email uh we'll just say email required okay so the two things it's gonna have to be a valid email which yup will address for us and it also has to be required so that's how you do that looks like we're not bringing in you up here let's see see if we can auto bring that in nope let's come back up here and bring in yup so let's go import uh we'll just go i think it was everything as yup from see if that handles it for us i think it does so validation schema uh which valid day make sure we change this to validation these two have to match of course all right so that's how you're gonna handle this now i don't want you to have to watch me uh type everything out here because that's gonna be pretty boring so i'm just gonna paste this rest of this uh validation in here so this is what we're gonna have uh we're gonna have a password you have there's a max function here so it has a max 20 characters and it's also required and that confirmed password and this will show that these have to match and then a yap dot string for name with at least less than 15 characters okay so that is going to be all we have for this now our values we have to actually pass those in um so make sure you didn't if you had value here make sure that's values so we need to pass that into our variables and that looks like we're not getting well no errors there we'll see this is uh a lot of typing to not have any errors for me so let's go over to our uh component actually take a look here and we're having something here with this here so we're having a yup air let's come back all right this is giving us an error i don't know if we need this let's actually just go ahead and get rid of that there okay so go ahead and save that now let's come over again okay and we look like we are working well here now let's uh maybe give this a try um so let's maybe bump this up so you can see a little bit better uh let's go so you can see if i click away from the email it actually gives us our email required and that's that yap informix stuff password so let's come in here and they're gonna all do the same thing so come in here and our email let's just create something so darwin at test dot com the name we're going to have here is darwin our password is going to be password and our confirm password is also going to be password now you can see we're actually showing here that uh is something we definitely do not want to do so when we come into our field it's because uh we come over here we come down into our form here and you can see for our confirm password and our password we have uh not done our types correctly so these should all be type of password not uh otherwise we're gonna be showing our text for our password which is not what you want okay so we come back here you can see that that does that now before we have signed up here i'll let's inspect this and see what we're actually doing so we want to be setting a token because that's what we're doing in our file so come over here and go to application i don't know if you can see this very well so we're in our local host there's nothing set here and when we press sign up we're hoping that this uh signs us up so you can see the token comes in and we get redirected here and these i think are just our test users from our user component so that looks like it's working fantastic let's come over and do a little more work so we also need a login component now we're just going to do that we're just going to copy over this whole thing because it's going to be very similar all right so we got to create that so let's create a new page a new file and we'll just call it login.tsx and we can just paste this whole thing in here and we want to change we'll just go from the top and just change what we need to so instead of signup mutation uh let's highlight all those here and get rid of that and we're going to add a login underscore mutation mutation all right that's good and then here anywhere we have that we want to change that to let's just go through them all and get rid of that and say lowercase login okay and all we need for our login we don't need this here so we get rid of that and we don't need this down here we don't need our names for that so that's good and we're going to the same thing as token back so that's all fine now our login values we can capitalize that and all we need is the email password so that's good we need to capitalize this here we need to do what uh login that's actually good login values capitalize that get rid of these here basically just change everything to login that we need again don't need name or confirm password get rid of those that's good uh what else we got initial values that's all good that's all good login that's great local storage we still want to do the same thing there and we're setting the local storage uh and then we're still gonna push to users so that's all good we don't need any of this uh we only need oh we do need we don't need confirmed passwords so get rid of that we do need password but we don't need name and uh yeah so just email and password that's good let's change this to login for our button okay and again this needs to be login so if we go ahead and save that i think that might be good for us so let's come back over to our app and again we will need to just copy over this copy down this route and let's go log in and log log in auto import that okay we go ahead save and let's come back over all right sorry about that there it looks like my obs just crashed real quick but let's test this out here so we got darwin at test.com is what we signed up with earlier and then we're just gonna go uh password for our password and when we click when we click login here we want to see our token show up which will show that we are logged in and we get redirected there which is good and our token shows up which shows that we are logged in so that is basically some authentication um in the next video we're going to go over how we can do protected routes basically uh so if you are logged in you'll only be able to see certain routes and if you're not maybe i'll go to the landing page or something like that but uh yeah we'll get to that in the next one this one's going on quite long uh but yeah thanks for watching see you in the next one