Copy Initial Authorization with airSlate SignNow

Copy initial authorization

all right so we've reached the end of react even though I feel like I just taught you at the beginning of react yesterday and we're on to news site number six so we've learned quite a bit so far we talked about class face and functional based components we didn't know anything about state now we know a little bit about state we talked about render and props and component lifecycle ISM passing stuff down from one component into another and we're gonna finish up today with new site number six there's three high-level objectives one of them is that we're gonna wire up the login page so yesterday we created a login page it was just static and didn't do anything we're actually going to use that login page today we're gonna have a navigation bar it's gonna either show a login link if you're logged in if you're not logged in and if you're logged in then you have a log alpha and then finally we've when we run NPM update app today it's actually going to protect the add an article link so you can't actually add an article without like a token so people who are not logged in who are authorized aren't allowed to actually use your application so what I've done so far just to get us started a little bit faster is that I've cloned down new site five I've used Christians solution and I've just dragged it into new site number six and I've also cloned down number six and I ran NPM install otherwise we'd be here for half an hour so this is kind of like when we're talking about single page applications this is a little bit of power work so you as a user you go into some sort of logging page you hit you enter your credentials and you can submit and it's sent to some sort of service that validates whether or not you are logged in or you're not you either your valid or you're not if your valid they return you an access token so when you sign into like Google they send you back an access token that says that expires after a certain amount of time so whenever you make a subsequent request that they you send over the access token which says like it's some sort of unique identifier a bunch of letters and numbers that are nonsensical to you but essentially it's like it's attached to the particular user and this is valid until two weeks from now four weeks from now two months from now so every single request that you make it's an authenticated request because that access token that you're sending over if you make a request to a protected endpoint like a protective URL like I can't be able to see my bank account information unless I'm logged in those require a user token if it's not required if it's not included we're gonna return a 401 which is an unauthorized response so we talked about status codes we're gonna need to memorize those for abuse to understand so it is good 300 is redirect yeah I mean introducing my friend 400 is no and 500 is some sort of server error it's not you it's me when you make an API request with some sort of valid token the exploration is extended again because generally speaking why I think for me I don't actually have to log into Google maybe like once every six weeks or so once every four to six weeks and that just keeps extending until the very end and then they will say as expired and yet the sign it again will send you in your token so we to set this one up we've got new site number five we've just copied and pasted at the entire source folder I don't know if it works because I copied over somebody's and I'm going to paste it directly in the repo so I clogged it down and I just took all of Christians source file and just threw it right over here right after we copy over the source directory we're gonna run npm run update app it's a good question so I'm just gonna run this real quick and I don't know what happens but if you take a look my run update apps there's a package that Jason there's a package such a sound file has the name of everything a bunch of dependencies that you're going to need maybe jump down to scripts there's an update app and basically what this is doing it's gonna see it says CP which stands for what so I'm copying a file from API 1056 news articles API tjs to this file over here and copy and copy that it looks like I'm updating the tests but instead of you know having you clone it down and everything I we created a quick script called update app so it goes inside of here goes the side of temp goes inside of six it grabs the new tests that we wrote ourselves and then it copies it into yours so that you're able to run the tests and make sure that everything about specific expected alright so i've run npm update app and then we're going to install and we're gonna start think we did the yesterday did we do okay all right so it says failed compile and gives us a reason module not found can't resolve we extract any ideas and what we can do to solve this that's all we got to do so let me kill the server and him install react stress well if the only said react strep so i but i'm gonna assume that it's okay until then and he and that and then it game start oh right wow this is actually really like pretty neat okay so we got a new site for we got an app bar at the very top got the ad article page and actually to a b and c unauthorized that's the new thing so when we did the update app right there we're only allowing you to actually add an article if you are an authorized user if you are logged in at all but we're able to go see all the articles related to opinion world national and business and I believe that on one point we're supposed to have a search functionality so let's look for the second one prae thankful and if I delete I get all of them right back and there's that PRA PRA II as the second one I think everything operates the way that we're supposed to if we go to login page we just have like I actually email and password so let's clear down we're going to submit right over there so we have email jhana code comm password is one two three one two three so we are capturing the things in there all right so let's see did we do all this initial setup we copied everything over we're an update app everything functions as we expect so we can move on sure let's let's take a look at that so the question for the video was where is the all right so the idea is the question was where is the is the login page how are we capturing the email in the password so we all know that the entry point into every single app is at that Jayant so I'm going to start there and there's a home my gosh as everything so that we're bringing in a bunch of stuff well I'm looking specifically for the router right down over here because it's when when I that page that I'm going to is slash login so I'm looking for my looking for the exact path with slash login and it's right down over here on line 22 once I get to slash login I'm noticing that there's a component called login page I don't know what that means so I'm gonna go that's the very top all right says import login page from pages login page is all right so it looks like relative to this file there's a folder called pages right there and within there there's a file called login pages double click right this looks like it's a class-based component that has some sort of state in it so we have state equals email is equal to empty string and password is equal to an empty string there's an on submit there's an unchanged I don't know what any of this means but if I go down to if I go down to this react fragment there is a there's an on change on change all I know is that there is an on submit so I type in all of my information I hit the submit button and if something happens so this on simit here goes this consummate I fill out the idea is I feel all my stuff and I hit the submit button and then something happens when I hit the consummate looks like it's part of this particular class the login page that J is class I'm going to pass in something called consummate right so it looks like it takes in an event because it's an event handler so when I hit submit is actually an event that happens in JavaScript and I'm going to prevent the default from happening and console.log the state hmm okay so it looks like there's a non change that's a little bit more useful and it's found down over here I'll guy C so he's got an input whenever anything changes that's the on change event I'm going to fire off this con change so every single time that I type something in it's going to set the state to of eda target that name either target up name so it's event target dot email so it's gonna say email is equal to whatever I typed in and the second time is password is equal to whatever architect in Deming you could do that yeah so this is I mean could do you want to talk through your thought process of why you decided to do it this way it's not wrong or right it's just it seems like a popular way to do a lot of forms for this you can have constant say that are based off your input but I guess it's hard to think of things like the actual password and username password entry but when you're creating a password by saying stay on change and say password is not greater than four characters password does not have two special characters a lot easier you're changing stages rather than you having it go all the ways to resume it and then to tell them that it's wrong yeah and something you could play as they're typing say all these are all of these are this doing it this way is fine if you wanted to do it the other way where you're able to just set state directly for ambience submit that's also okay and the way that one would look would be prevent default from happening and I do this set state I believe it's email would be either target value at zero or something like that either target up I'll use that name something and then the password would be the second thing in there eat a target value so I didn't have to write out both ones of the state so that punch award cuz it's the change state of the email and the password he's saying it I think this all makes sense the eat a target dot name is event target dot this is the name portion of the input but why did you put it in square brackets and not just like that other than the fact that it was squiggly line so make sense all right so we've got this login page and let's take a look so right now we've only utilized a single type of object model from the API at the article and today we're going to be dealing with the new model but useful so if you take a look inside of our source API before we only have the articles API this is the stuff that we were that we were using and then right now we're gonna add in something new called the users API so we've only dealt with things related to the article and articles API and we're only going to be dealing with things related to the users and the users API okay so as such let's create an API J's module it's actually it's actually here already when we ran update app it actually copied it into our into this since into our API folders I don't remember so I think your variable it needs to be directed like basically when we go back over here if you were you would think that you can just do this but then you can kind of see there's already a squiggly line it's like what does that actually mean and it turns out you two need the square brackets around it in order to substitute it so let's take a look in the users API j/s module we should create a function called login which takes a credentials object the credentials object is the parameter that's being passed in as you can see right over here and the structure should look something like this it's going to have a it just gave me an object with the email and the password currently right now the way that the API is set up is there's only one email and one password that will work for today it sort of has to be John at.com and the password has to be Open Sesame but when we started using like Google and we start creating our own users and stuff like that you can obviously change the email but for today the way that we box it out we just have John Doe calm and Open Sesame we're not trying to teach as much about the login here as more of like how do we once we get a response back from the server with an ID token how do we store that in state and then how do we keep track of that so that you can only make requests if you're logged in and have you conditionally show it else logic with the logging in and log out at the very top so luckily it says this function should create a request that's almost identical to that articles API add article function and when you call this the request should be made to this URL and the credential object should be stringify dand passed in so let's take a look I'm just gonna copy this entire paragraph go over to the users API dump this at the bottom so I have access to it so it should be the same as add article okay jump back go to add article and copy and paste this entire thing I'm going to dump it right over here I'm going to just more or less copy this whole thing so I'm going to put an async in the front grab this whole thing cut it and paste it right over there so let response equal a weight fish to this URL but it looks like I need to change it to this URL so I'm just gonna copy it all right it looks like I'm passing in some JSON it's gonna be a post I'm going to stringify the credentials object set of the article object and if the response is not okay I'm gonna alert did you put this in there right yeah else returns true so now my yeah I might get rid of this one for this one I might get rid of this block for this particular thing so let's kind of response so let's take a look what we've got we've got a login function which is an asynchronous function we talked about async versus sync yesterday so asynchronous it's the drycleaner example you walk up to the dry cleaner you've given them your clothes and then if you're doing a synchronous call you just wait there imagine that you're gonna drop your clothes in the morning you're just gonna sit at the dry cleaners all day long that's what's ugly synchronous mod requests you're waiting for something to finish completely before you move on to the next thing now that's highly inefficient because if you were to place an order to here to place an order on Amazon and you just waited there like you would just be wait like your website would just hold there until they can finish completing the order but what they do is they aged synchronous asynchronously say you're good to go we created an order for you and in the backend we're gonna actually like yeah we're gonna we're gonna actually gonna fill it just do people watch family got here okay alright so in Family Guy remember when Stewie goes up to Lois and goes do you just sit here and watch the laundry the entire time that's the that's the like a synchronous call so she is literally sitting in front of the laundry machine and just like waiting for the laundry to finish and nobody will actually do that in real life because it's ridiculous that's synchronously waiting for your laundry to finish versus asynchronous which is I'm gonna go to the dry cleaner I'm gonna give them the flows to give me receipt and I walk away something else happens in the background and at one point it's gonna be done same thing with laundry I put the laundry in I walk away and so at some point in the future if the laundry machine will ring and tell me that it's finished they can do the do-it stuff in the background so we're making an asynchronous call meaning that I'm going to make this call in the background and so at one point it's gonna be finished a Cinco 8 is built into JavaScript so we're gonna have a response if we're going to wait for this to finish we're gonna make a request first to this particular URL it's just local 3001 its operating the background there's a little bit of magic here and but we're gonna send over some headers saying this is what we're sending over we're sending over some JSON it's a post request instead of a get request and the body of what we're sending over is a chase on a string a fide json credential object once that's finished i'm going to return the response so async/await basically means that I'm just not gonna execute the next line of code until this line is finished but it's still running in the background I'm not causing the entire app for this there is I believe the API in the background this takes care of that for you I think it gives you the response code if it's not correct pretty much yeah so it you would grab the it's so base it this is kind of where it would be but essentially there would be like a little widget that shows up you know you know when you go to like you're gonna airbnb.com and you say like slight login in their system that little rectangle this is log sign it with Google at that point is actually all Google's like doing this one diva is this yeah okay let's see if this one works let's see there's a unit test that verifies the expected behavior if this succeeds you may proceed to the next section okay let's see it I'm gonna run npm run tests specifically source API users API to test j/s so this is the way that I run one particular test rather than every single festival eight games they would just be up higher be our pleading no man can be here and my expert default login login so these are these are API calls that are that we're creating ourselves so like we know that this particular URL exists and we're gonna be sending over some information this is something that is like if we're making requests to external services it generally goes inside the API folder Google and Facebook and Twitter loggin is a little bit different because oftentimes there are NPM like modules that will do all that for you so underneath the hood it's probably something like this but it's you could also just do like I think it's like and like Google OAuth like dot logging and that's just a method but it's a underneath the hood it's probably something simple a house all right so I'm gonna run these tests hopefully they pass please okay I saw something I saw green I'm happy with that alright so we've set it up correctly because we have a test that's found right over here basically seeing if if you log in correctly it should work so if we hooked it up correctly your test will pass and I think we're good to move on to the next section so at this point we're able to log in but when so when valid credentials are sent to this particular endpoint you're gonna get a response that looks something like this we really want to keep track of this ID number this is that token that it's being sent back from the server so it says we want to call users API dot log and from this particular page but we need to store the response object inside of the state I don't even know what that means any anybody oh why why do you think so that's that's true we want we're going to be calling the users API from this page which makes sense the page that logs then is going to call the API so why are we storing it inside an app that jss state and not in the login pages state the next line yeah yeah pretty much because your app that J is just like the top level and you need to know whether or not you're logged in for many other portions of your particular application so just storing it inside of login page it isn't terribly useful you need to store it at the top level to say like I'm logged in let's show me all these other things in order to be in order to store the user object Natha Jaya State we need to a create a class method analogous that accepts the user object as a parameter and sets it into state and then be passed that method into login page the jeaious okay so for item a let's create a method called handle login it's gonna take a user and then set the state equal to user okay so I'm going to grab this whole thing go to app j/s and then outside of the render function I'm gonna create a handle login I'm gonna create a handle login method the handle Beth login method is going to take in a user and then set the state of this particular apps this particular state of this component to user which means that we need one more thing before I do anything else because currently at that J's only has a handle login function and a render function and as state is equal to user created State user is equal to nothing to begin with so app that is when it first loads up has state and it has a user key and is equal to nothing which is just equal to nothing so that we know that we're not logged in right now once the handle user and a login fires off hopefully we'll get back at user ever to overwrite the user from nothing into that user that we received yep yeah we can do it we can do both if you wanted to do we could do constructor props and then a super cross so yeah you could you could do it this is happening underneath the hood this is just a shorthand way of writing when you're dingy and props say is not in it constructor is this is and that's actually the next line that I didn't type so this I don't think that's accurate there's no strong constructor is a I believe constructor is its own life cycle method so are you saying once you oh you're saying you can have this and then the interest problem is probably probably will go with the other [Music] yeah just like this right yeah so that's why I use this why it's shorthand for what we had before it's just fewer lines of code so I'm saying state is a you can think of it like it as an instance variable too that jeaious and it's just a dick and object of stuff that you might need to each other so right when app is first created the state has user equal to nothing I've got this random method that readme provided it says we need to pass this method into the login component so that we have so if we take a look at all of our routes so far we're not actually passing anything in we need to pass in the handle login method from app into login page j/s and if you look at everything that we have so far for all of our routes we're not passing anything in we're just saying the exact path is going to be this is the route that you're going to go to and the component that's gonna handle that is some sort of component so we're not actually passing any anything in I need to pass in and a login into this route but that's not unfortunately that not Holly routes would so if you need to pass something in you need to run something that looks like this you need to pass in something called render so instead of just component which component is handling this there's a new method called render so what I'm gonna do is I'm gonna take this I'm gonna move it outside of my rent outside of my return so what I've done is remember you can do any JavaScript that you want between the render and the return this is just like empty space for JavaScript stuff once you hit the return that's the stuff that's getting returned outside the screen that's the thing that's gonna show up so line 23 I've got what render login page is just equal to a constant so this is a this is a this is a function it's gonna take in the props from fjs that's something that we get for free and then we're gonna return login page with the history of prop spot history so we can keep this particular age knows where we've been so far at he's type of ball like it's able to update where you're going into you in the browser as well and it also has this handle login method that we created it read up here so again if your route needs to do pretty much anything besides just render you're going to have anyone to pass in some sort of props you're gonna to follow what I'm about to do so let me just get rid of this render I would do it there yep so all of these aren't doing anything other than rendering the page so that's why we just showing the page that's what we have the exact path equal to this particular URL the component that handles that is this particular component now when you take a look at line 40 it's slightly different I still have the exact that equal to log in but when I render it I need to render it with certain properties that passing down from app that jeaious into the page itself so when I render it I'm going to run the render login page function which is found up here so this render login page takes in some props that it steals from fjs and then it returns the login page with the history and analog I don't see why not we can do either one I was just going to dump them on here and then refactor later but we can refactor now yeah maybe I'll do render login page and I believe it now has to just be this table render login page I think you still do because they you still need to name it otherwise it's so that's what we were doing earlier we were doing that right yep I don't because it's actually a method now that's part of the class so when I yeah so just to reiterate that question when when it's within a function yeah that's legitimate thing so I'll just explain that one more time so I just took what the what the curriculum said and I just dumped it in between render and return again this area between the render and the return is you can run anything that you like and also log anything you can do any sort of JavaScript calculations I put in here just just just to be super simple and if I wanted to just keep it like this to just be render log in page render log in page we call it because we've created a constant on line 25 it's part of the same method so the render method has a consequent early login page which is at that arrow function but what Narayan notice was that you know you're kind of creating this giant you're trying creating this function every single time that you re render the entire when you render the entire app which is kind of useless so I'm gonna he wanted to say why don't we move it outside so when I put it outside you'll notice that there is a squiggly line we don't need this constant more because it's just another method that's part of a CAS so when I create it as just another method in here I'm just gonna do this render login page to reiterate one last time if you're not if you're not passing down any sort of props you can just do component if you need to pass in props you need to do the render with this fancy it is it is a route that I'm registering without that yes I actually did set it up to show up this that remember it's just this login page over here but it's taking in two extra things not yet we haven't set that up yet we're just right now we're just saying we need to pass in this handle login method into line into the login page itself okay this is a giant this is a giant write-up of what I'm about to do so if we pass in handle login into the login page let's first find the login page login pages right there let's go to the screen smaller actually no so we have the handle login which is going to set state of user being user so why don't we comment this out for right now and just say console.log hello so whenever your handle login is fired off from the child component into the parent it's just kind of call to log hello right now then we'll console.log user and then we'll actually set the table so I have access to the handle login where do you think that should go all right somehow that's correct so I'm inside of login page at what point inside of this code musically this is at what point do you think I should act what method should actually fire this off in on what on submit right now we're just console.log so then prevent default and how do I actually I guess how do I actually fire that off this is a class based this props that and Oh login there seems a long we we don't need to because we passed it in so we created an app that J s we passed it down over here let's just say we're gonna actually throw in this state hopefully this works let's find out so if all goes well I should whenever I submit the function here it should say hello to me so let me just refresh the page we're on the server no it's not just you Donna email comm one two three one to create my password again if all goes well I hit the submit button it'll say hello please nice great let's chase this from bottom all the way to the top we've got a form on the login page that says whenever I submit it it's gonna fire this on submit this refers to login page guess login page so jess has an on submit function the on submit takes an event we prevent that from happening because when you press submit on something it usually redirects you somewhere else so it's gonna say I'm just think don't do that prevent your default behavior from happening whenever I hit this it fires off this stock drops the handle login so this stock drops we know is passed in from one component into another so handle login doesn't exist within login page it's something that's passed down fjs about that login page and I'm passing in Vista and a login and then it's just been a console log hello let's change this hello to the excellent user that's coming back I go back into this I do Johnna email comm one two three one two three clear this hit submit I've get email and password right over here perfectly we're missing one thing I don't really care about email and password I care about this giant this giant credential is coming back and I think whoops I know we forgot to use the users API login from the login page so let's do that first let's say let response equal users API then I login with this dot state it's just users API it's not define makes sense so I'm going to import users API from API users API see if this works so if this works correctly I'll be surprised oh my god ah email comm one two three one two three submit 401 unauthorized actually a good thing so let's try it again with the actual one which is John Doe calm and the password is Open Sesame you're eight okay let's find out what what responses also the long response and we'll just console okay so it looks like we are returned a promise that we need to resolve that promise all right so that's two let's Jason stuff so we've got that form whenever we submit it it fires off on submit on submit already has the email password I'm passing that into the users API and I'm console logging the response which is a promise oh it looks I think I forgot one thing biggest response that JSON submit a simple lead so we have let response equal the weight of this we take something that they see find out if this works still a promise resolve promise they sing wait I think this might be the answer right here yeah so like they're saying you ponies rate law that's been acing Guzman so then in canto I was wrong with you Reina see here thank you do I need to change anything with users it yet we'll take a break right after this oh my god let's see