Copy Byline Authorization with airSlate SignNow

Copy byline authorization

until we're back I found our little issue so users API this is an async and a wait so eight sync basis says this full function is going to be an asynchronous Paul and I'm not going to move on to the next line it's he'll I'm going to await the results of this fetch before I before I move forward so I've said let response equal be a wait and then at the end after we get something back from dispensers fetch request I'm going to turn the responses the JSON instead of our login page right over here this is also being asynchronous this is also gonna be an asynchronous fault and prevent the default from happening I'm going to wait the result of this and then once I got that back if I just do John and Oh calm and I do Open Sesame you'll notice that what I get back here is not a promise but the resolved JSON that comes back from the server from the API server that's built into new safe the main thing we need to keep track of is this ID right over here but for now why don't we just store the entire thing we just forgot to put the attorney you can yeah so this was firing off prior to this so this one basically just says wait just wait for the response of this before you before okay so we've got the response right over here at this pole yeah at this particular point we've got the actual response itself which is the result of the login which was this thing over here how do I pass that up to app that J s so we went from users API to login page and now we need to move up to F IJ s we will set it as a state actually we do it right over here do it right over here but how do I pass that up I've called a method it's called the handle login method member who task handle login from app that chest into login page so that we could run this props because it's passed in handle login I'm gonna pass in response to go back yep no it's set over here so let's just verify that so inside of my render I'm just gonna do console dialogue this state hmm clear this real quick there is nothing there right now I'm gonna actually just put something above it this console about log look here all right so I've got look here and user is equal to know when I log in with Jonathan calm I have look here and then I have user as this giant object so now I do have the user object set inside of app that J is the state right here at the bottom let's take a look at what we have to do next so we've done most of the morning was spent on how to set up the logging in and setting it inside of state now we need to basically start adding authentication to articles API that jeaious so we try to submit an article before without the actual user token and it returned to 401 to us let's let's see that happened one more time sorry add an article there's no user right now what if I do I hit submit does it 401 unauthorized because we didn't we don't have that user saved all the way in so what we need to do is we need to add update the add article method inside of the articles API to also take in a token it looks like we need to pass that token in using a header called authorization and the valid about you is going to be the token there's also a unit test that that tests whether or not this works so we can first kill the server go to article a P IJ s it looks like there is outlook looks like we have a powerful object and passing a token I believe the instructions said that we have to have an authorization key and the value is going to be token and there should be a unit test that tests whether or not this will work so I'm going to run npm run test and source API articles api i got tests that j s no no okay okay let's see it submits an article by calling articles api add article thought I fix this test yesterday where does this one failed let me just comment about every single test except for this last one water this blows up object / API and slash articles let's see it's yeah I just articles we're gonna remove this EPS no it's just sorry it's just the way that the Christian set up the the the method that does it is not congruent with this so it looks like this one did work so we passed in a token we added it to the headers as an authorization and it does pass the tests that we that we did so we jump back we know that this section is complete so we just needed an article at the authorization header saying that we're sending over some credentials and the credentials that were passing over is the entire token itself let's move on to this section that says authenticated article submission all right now we need the user object specifically the token in order to submit the article and we need to provide this data to add article page JSP so what did we learn earlier if we need to pass in some sort of properties into a particular page we need to create another method for it and use render instead of component so inside of add article here I'm just going to get rid of this and do render and I'm going to call this render add article page article and I'm going to essentially copy and paste this with a few extra things so this is going to be called and instead of login page it's going to be at article home page and I'm going to be passing in some sort of token the token is going to be let's just call this token it's gonna be this that state user ID because that entire user object does have an ID on it so I should be passing that in all right so let's read this a little bit more we need to modify the add article route to use the render properly did that create a function similar to lock render login page we did that we called it at article page I'm just gonna pass in this that state that user that's okay so it says it doesn't want that he wants user as this state that you set this function to I believe we did this one already and in add article page add a second parameter to articles API to add article that uses the users token which is this process that user that ID I'm just going to grab this whole thing and go into add article hjs where am i calling out to the articles API right over here this stuff if wait this is not state okay sorry it's okay this stuff props not user that ID hopefully this one works and I wouldn't use location window location I'd probably puts this into props that history actually this stuff let's see if this works so I'm gonna log in John Doe Open Sesame submit I'm logged in go to the add article page might do I still have okay I don't have that user anymore I did then submit I have a mmm this stuff pop stuff user ID but I am passing it down no I'm not logged in anymore because I'm not redirecting this stuff topside history Doug push that login right now users nothing submit takes me back to the main page look here I still have the user that makes sense enough a hit add article list I'm losing the user right Hannibal so if I click that let's take a look so I have a year of an application navigation that's probably why it's probably that's likely why that's happening so I think watch this I do login I do John and DOE and Open Sesame I login it takes me back to the to the main page the way that I added that was I have this extra line that says this stuff props that history Douglas and I'm pushed over to the main page here so if I actually I think if I just type in an article I think it keeps this it actually it doesn't even stick so you read through jatropha history it's been me Emmys like we haven't done burrowsfamily sorry it's a link component wait where's the oh it's an HR normal okay that's that's okay we can just grab this whole thing and just get rid of this together so we will link to slash at article C let's see if this makes a difference gross all right much much better but kind of ugly here at article though I saw the user yeah so it looks like when you have link you do keep track of State when you when you have links using the link class over here that's coming in from react router Dom you keep track of State for you but when you have a tags it does actually take you because we like overwrite State so at this point maybe I can do F and hopefully I won't get a 401 it's clear the console and find out you added an article great redirects me to the home page go down to the very bottom and those that have that I created a little bit earlier instead of it being I might try saying instead of it being 401 so we took care of authenticated article submission and we're going to take care of the last few things we're going to have a logging in and log out button based on whether or not you're logged in for your logged out and we're also going to have this render log outs who basically I've set the state of the user feet enough so we'll start off with this one we need to create two extra links so if you are logged in you should see logout if you're logged out you should see login that makes sense also only a happy add an article button when it's appropriate so if you're logged in then you see add an article if you're not logged in that should not show up any thoughts on where that should go Arnie yeah let's maybe what about the links course of the links go probably well I do want them in all the pages so I wanted at the very top so in app that J as we start there it looks like there's a navigation bar at the very top that's gonna show up on every page so probably a nap-nap Jaffna contains all of this I'm gonna actually change all of this sorry I'm going to do instead of all the a tags here and change this to a link this is to let's see what this looks like it's a little probably a little uglier it's a little uglier but at least it's all here so where do you think I should do this like how do i how do i add in a logging in and logging out functionality i got rid of it you do you have user that you're passing into that you're passing into well you're not asking it application navigation but you need to keep track yep alright so I like that so if user is null but login otherwise show logout all right so I don't know how to do that above the render this is a functional component not above return create a create like a function you said okay that's display log in or out I think these all have to be functions in so you're saying if this props user is equal to null then it returned the logout login otherwise return logout something like that yeah okay let's see probably return you're gonna couple e create a link link to slash if you're not logged in so slash login otherwise logout probably something like that so let me just get rid of the log out route because I don't think we have it yet I'm just gonna take it to the slash here but it's just gonna say log le and since I've got this I'm going to actually just put in I'll just put it right over here leave its just display login around well goes well everything dies cannot read property process of undefined capacity I never pass them props and it's a function of the book so it's not this stuff cross it's just props looks like we got the log out okay did that work already we have user user is no wait a sec can we do this backwards if used is no go to login otherwise go to logout gin the same login logout and the user is no well there's a few things that are wrong one is that we didn't actually pass in the user so we should probably do that so I think app now since it's just a functional based component and not actually a route you can actually just pass it directly in so we just say user equals this state user and let's see hopefully this will change in login user is null so undefined does not actually equal null which is why show dog yeah we're just going to keep going with this / - all right so we've got the log in you don't have any user right now so I could hit the login page and I can log in over here see we also need to only show add an article when it's appropriate so we added the logging in and log out links and we need to display the appropriate line in the solution so let's let's just see if this will toggle to log out first come Open Sesame we eat and okay and it's got the logout right here so I'm logged in successfully and knows that I'm the user past it into half nap and I got the ability to log out now doesn't go anywhere actually doesn't really do anything cuz it's just going to slash but doesn't display the correct word find out I don't know how to lock I'll click on this one I think I lose the so I logged in with just jhana email comm one two three one two three it's a 401 user to err yeah that's probably an important thing to to use not mister this if user what was it before and user is null and then login with John email comm great login user user is an error if user has an error key then then don't don't do anything so if user error it's not equal undefined okay if if there isn't in there how's that happening if there isn't an error then set the state let's see if this works so I am not logged in there's no user right now if I try to log in with John and email calm I'm two three one two three submit it's a four and user is okay and it still is logging so that's who we almost love anybody into our website alright so we only want to show the add an article if they are logged in any thoughts on how to do that same thing yeah we could do that let's just do this one okay I heard something great from Kali you say can't just do it all in one line answer is yes so I'm just gonna actually do that real quick I think I can just do props user and that's it this one will evaluate to true or false so if there's no user evaluates to false in the whole line exits if there's something here then evaluates to true and it returns the second half so if I go over here you'll see that there's a login but no add article once I actually log in there's a logout and an add article that only shows up if you are logged in oh that's a great point maybe that's the next thing that we're doing down yeah let's see where's the next one the redirect oh right here yeah if the users not logged in it attempts to go to the add article page they should be redirected that's the back to the login page so like Nick noticed I can actually even even if I log out and I just go to this one I lose State I can still go to /add article which is a bit of a security concern because you shouldn't be able to get this unless you are actually logged in so when I have this particular this when I go to this route if I'm not logged in I should not be able to do it I have no idea how to do that tertiary ternary ternary in the app going through this this thing okay this state that user and question mark I'm not sure that you are correct I'll find out let's just actually just redirect them I believe there's a redirect library redirect react router looks like there is a redirect somewhere down over here it looks like you can just redirect 200 looks like this a logged in that's interesting I'm just gonna grab this I don't think we have logged in as a function yeah but we have something else that's very similar so I'm going to just throw this in the middle here okay redirect exact to slash an article okay they're equals okay we've got logged in which is basically this state that user I'm gonna make this all online okay let's test a user redirect to slash login otherwise take them render I don't believe so this might work the leading towards probably not but yep looks you you know you're right you're right okay this does state that user not this dusty that user okay great everything redirect is not defined that's pretty easy to have a time about redoing it I'll be very surprised if this works alright if so I'm not logged in because healthy to login so if we go to add article okay I'm happy with that sorry last thing the last thing let's take a look right now we don't have a logout rep it looks like when you do logout you do actually need to set the state equal to the user back to nothing so I'm just going to copy this probably create myself a new function this class seems to enjoy doing that I'm gonna render logout it's going to take in some props that I'm not going to use and it put it underscore in the front you'll notice that changed from grey to black when you put the underscore in the front you're saying you have access to this rich you're probably not going to use it some it says state equal to no and redirect them back to the login eight alright I think we're okay there and I'm just gonna add in one last route down at the bottom which I get for free right over here I believe it's this stop render logout as we've created a method for it I think this should take us to the end of new site six all right so let me go to the main page I'm going to log in right here John at dota open sesame' submit this logout doesn't work yet because a nap-nap I have just going to slash hopefully this will refresh and I need to log in once more because it's reloaded all right so I can log in at article finally shows up the add new article oh boy let's take a look at add article some of this will go back to the way things work I don't know this render article change oh you're right way that you have you know no there's the render equals here and then it's equal to that yeah I think we have to go back to the way things were okay I have a different slightly different way and I'll just bring it in here so you can see it just render an article change then inside of the add article page itself my extra thing called redirect is false this time article words slightly different let's see if this works before I explain it redirect is not defined let's see if this works alright so we try to go to slash at article we had before it redirects me to the home page okay that's the way that I set mine up I log in here both of them submit an article yep you had an article great it's not here this all right so the way that I set it up is in side of Appius I created a the same thing that we had before which is at article with render article page inside the navigation I have I just had yeah I just had if the user exists then display this and then instead of had article page I've had a redirect key inside of the state called just equal to false to begin with so I'm saying I'm not going to redirect you after I add an article I'm going to I can redirect you I will set say to redirect and then over here it's basically gonna say if you have if you're telling me to redirect inside the state or if there's no user being passed in I'm going to redirect you to all page this is another way of doing the exact same thing and we also have this ability to log out now I think oh it's freedom it's good stuff that's my login and logout and was brought back to the login page so we are fully logged out at this point you'll notice that had articles disappear so we know that we're not actually in there lonna concepts being covered today specifically we are able to hit a user's API we're able to change the payload that's being passed in we get the token returned to us we store it at fjs and then we pass it into the components that needs to know about it the components that need to know about it the pages that needs to know about it no longer use the component argument but instead the render the render you're using when you need to render the the page itself but you also need to pass in certain properties like history or user or something to determine whether or not you're logged in or you're out we took care of logging in and logging out and we're all we have conditional logic to show whether or not something if you're logged in or if you're logged out so if your user is being passed into half now Jas then create this add article link otherwise don't display it at all and finally after we submit something we're going to redirect them to the flash page any questions