JWT, EXPRESS and COOKIES — Part 2

as a second part to the JWT cookies series I'm going to do the front end and I'm gonna go with the basic built-in fetch for the browsers rather than Axios and just to show the simplicity of it and also without having to add an extra framework to do the same thing in Axios is not much more work in fact it's even easier but I want to show how to do it without having to use a third by the library case you choose to go with something other than X years so to start off with we're gonna make a new project which is gonna be the front ends so three outs and city into that they're gonna create an index.html file be our login and you know the console log the response we get back I'm also going to create a Java Script so that we can do all the code so we'll open it up now NBS code you'll see here we go to you next on HTML 15 dextran so we're gonna start for the next to HTML that's the easy part so I'm just going to use some HTML here the size so to start off with I'm going to import the JavaScript and the way we could do that is we can simply put it in a script on top here I have the this is important to have defer here and this means tells the browser to wait and here we can say we want the index is now if you're going for all the browsers what obviously put your JavaScript at the bottom inside the body so you would move this down to the bottom here but if you not worry about that you want to use the modern tools and you can use the fur and that means equivalent don't let a lug in some we putting h1 looking in and we'll add a form so to be form here do that an action I'm going to ever move that give it an ID of login and here we're gonna have a few different things so first one will be a label nobody for the email there are different ways you can do labels however I like to have my labels on top and then put the input view email do the same for the password so this is where our was going to go if you add the type of password it'll just hide when somebody types in the passwords have been extra security there and finally we'll have a another input which would be a submit give it about your login so now we've got a button for the login we've got two fields one for password one for email so this is a standard login form and we've given the form and ID so we can find it in the JavaScript so let's have a look at that so far on the page and to do that we're actually going to use a tool called live reload so to get that you just need to get the extension server install that but what this will do is imitate a server so you don't have to set up server just to try this out great know we've got that there as long as we're open in the project we should see the init script here in HTML we can just hit down the bottom here and be scared going live open up our browser and we've got a login page here prefilled with some information from my autofill he put in an email and a password and when you look in at the moment it's refreshing a page it's because it's submitting we're gonna stop that and but you can see at the top here we've got the email and the pasta being sent through I've got this possibly here from the last series website so now I'm gonna do is create the JavaScript side things so as long as you've got this here will now be able to open up here the JavaScript and we can start bringing in some things so I'm gonna go Const ready not the form which is going to be women bomb do select are this will be the ID for today I get the login form I'm going to create a function that is going to be logging I go keep this as simple as I can have to add in this function log in to when somebody submits the ball so to do that we're going to say login form listen up you bet we're listening to is going to be submit so that's the submit action so whatever somebody submits that form and when somebody does submit that we're gonna give it this function here which is going to take an event which is actually going to be this login so let's replace this function here with login that's the function it's going to use and this login function is now going to receive an event and so here we can access all the details from the form so I probably want to say prevent default first so it doesn't refresh the page and say they in turn the information also want to get the data from there so I say close in articles get the email and the value from that there are other ways to do this but this is the most well-known way I guess and once we've done receiving that information we also want to take D form and reset that form so clears out those fields so that's good out we're just going to check that out see if that worker if we come in here there's our log in log in you can see it clears it there and it hasn't refreshed the page so just to make sure you can see don't see what's up here again and there you go and you don't see that pop up here so that's working as a shape now that we've got that happening we can also check out our we can send the information to our back-end and when we receive that information we need to receive it Jake over to you back do that I'm gonna go to the backend and open this up going back from the last video now we want to add instead of the localhost 3000 we want to add this address here so live reload uses a particular address and that's the one so we're going to copy and paste what I've got here to here so if you're a local host or your IP is different you'll need to change it in the origin of your Express app now of course this would be an environment variable in production but for now we're just gonna hard-coded it's also gonna scroll down to the back set age of the cookie so we're gonna change that from just being a thousand - yeah normally you wouldn't do this in production because you don't want a JWT to survive for it yeah but depending on what you're doing you may want to do that so this is just a way an easy way to do that that should be everything that we need to do so now we can go back to our front-end so I can close this now we can do an HTTP POST to that server so we're gonna go use fetch gonna take a URL and it's gonna take some options let's set those up so I'm gonna say the Klumps the URL is our back-end so there's gonna be KC speed localhost 3,000 there we go auth login and then our options I'm gonna say what kind of faces if he method is this we're gonna say it's a post basically posting information just say the data which is going to be the body is it going to be a Jason and dot stringify then we get a posse in the email and password that's going to be as an object so that's now going to send a post with the data another thing we want to add is the headers it's going to be an object several headers and we want to send the content type as they should Jason that should be everything we need now we're going to start the server up so just hide this bring in now serve it here and run that APM start so that's now listening on port 3000 we go that looks like here just inspect and check our network we can look in you can see here we get that 2 or 4 or a 200 so if we look at those we get an OK trigger which is what we expected the only thing is now we just don't have a cookie if you have a look here we don't actually have a stored cookie and the whole purpose of doing this was we want to log in and receive a cookie hold on to that cookie and then every time we send or request information we send that cookie automatically to the server and the server then verifies that cookie so in order to do that we need to do something over on the front end so everything else is set up on the back end so if we have a look here we need to do credentials include now when we log in we should see that we get the access token cookie and it'll last for the life span of that cookie so you can have it last for a day an hour a year it's really up to you and then of course I can delete that cookie but that's not what we're going to do we now want to send a get request and see if we can get deeper me using this cookie now this cookie is not accessible by the JavaScript so I've going to the JavaScript and say document dot cookie it's a secure cookie we do not see the cookie here and this is why I choose not to do the JSON web token in the local storage it's now not able to be accessed by JavaScript so you're not going to get that sort of attack now server can still use the jadibooti to verify the user back and forth so the first few things I want to do is I want to go fetch some users and I also want to log those users and while that's happening I also want to remove the login let's start with the removing the lug in Forbes or have a function here it's simply going to go to the form which we've got login form up here so I'll use that you probably won't do this in production the same way but I'm just keeping this as simple as possible just to show you how it all works set the skal display to none and I'll just hide it for us we're also going to fetch muses so let's try that so fish users and here we're going to fetch maybe your elephant there's motions now since this is going to be get the URL is about all we need so post the API uses you know options are going to be you can't put your options straight in here but I like to keep those separate option option object credentials as include your as well now once we've received them we're just simply gonna return them and whenever we receive information we have to take the response is partly fetched and take the information from Jason what it's going to do is going to fetch some users this route once we've received them we're going to pass them so that we can view them in console welcome so now we can do that so let's try that out so we're basically going to then you know once we fetch the users take the console.log and lock them so that we can see them and then finally we're going to remove the blocking you can choose the order that you want to do things so once that's done usually it's a good practice that when you actually write a promise that you have a catch as well so you can do something like this you want to handle it in production a lot better and I'll add one to the bottom one as well just to keep it consistent that's pretty much all we need for that so we come back here and login if we do delete this cookie there's free refresh if we try to log in without setting these credentials here take that out comment it out you can see the difference that it makes let's try and log in now you can see here we don't get a cookie obviously the action still works for that but we don't get the information instead of getting information we get back the server error so we're saying table 2 must be provided so we don't get access to the users information which is a sensitive stuff so now that we're holding on to that cookie yeah they were holding on to that cookie we can see we get the information back no problems so that that wraps it up and in general what you want to be aware of this is this could be done a lot easier in production with Axios this whole setup with the URL and the options and the credentials that can be done once instead of in several places through its axial setup so what I mean Exia so I mean this library here and you can scroll down to a certain section in the setup as to creating the instance so here you can actually set up the base URL and that way you don't have to fill out the whole entire URL just the path that you want but if you look down the bottom here you can see there there is a with credentials and this indicates whether or not the cross side access requests should be made using credentials so that's the equivalent thing to what we've done before except here with this one you do these credentials and that of leave credentials and we've got the keyword we include there are the options of course to be read about in the Mozilla specifications you could use the same process for this when you're using a framework such as react or Angela there really isn't too much of a difference I thought I'd showed him the be just a JavaScript vanilla sort of way to doing it without any extras and that way you can follow on from there later

Channel: ruegen

Views: 3,634

Rating: 4.8383837 out of 5

Keywords: JavaScript, JWT, fetch, cookies, secure

Id: XMt1uvKfj9g

Length: 15min 19sec (919 seconds)

Published: Fri Apr 05 2019