Free Next.js Course: 29 / HttpOnly Cookie Authentication

our app is done but we're going to do a bonus video here where we increase the security of our application now when we authenticated the user we stored their token inside of a cookie but we did it client-side so if i just open up the inspect and go over to application tab into cookies and then i filter it for token we can see here we've got our our token available and it's on the our domain which is just localhost here but see this column here http only so it's it's got a it's false it's got no value here so what this means is it's a client-side cookie and the problem or the potential problem with that is that if somebody can inject and run javascript like rogue javascript on your page they can then just add and ask for the um the value of the token so with that value of the token they could post it to to their own server and now they can log in as you because they have access to your token so we're going to fix that and remedy that by moving this token to the server so making it http only so to do that we're going to need to install a new package so go to your terminal and we're going to add a package called cookie and then after that we're going to add a dev package for the type definitions of the cookie package so we're going to say yarn add dash dash dev types slash cookie so just let those two install and then restart your application if you have it running in another tab so i'm just going to get out of out of this and i'm going to say yarn dev again to boot this back up so to move our cookie from client side into http only cookies and what that means is that javascript can't read the value of this cookie it can only be read on the server and the person the rogue hacker doesn't have access to your server hopefully so they won't be able to ever read your um token so the first thing we are going to do i'm just going to close everything out is we're going to create two additional endpoints and these are server-side endpoints so we're going to put them inside of api the first is going to be login and then we're going to create log out so login will be called from the front end giving us the token for us to set in an http only cookie so the first thing we're going to do are add two imports next api request and next api response and these come from next.js itself and we also need to import cookie from cookie and cookie just gives us the ability to to set server-side cookies so now all of these api pages basically are expected to export a function that's going to receive the request which is typed next api request and the response which is next api response like this okay so what do we want to do in here we've received the request and this may contain information like about the what is the token itself that we want to put into a cookie and then response so we actually use the response to set a header cookies are set in the header so the first thing we need to do is what's the name of the header we're setting and it's actually called set dash cookie so what's the value of this header that we're going to be setting we're going to use the cookie package and we're going to serialize a new cookie so serialize what does that mean it basically just means putting it into the right format for setting a cookie via the response header so we have to give it a name it's going to be called token we have to give it a value so here's where we're going to put the value of the cookie so in our case here if we were to go back into application filter to token it's this crazy token in here so where is that going to come from that's going to come up from the client they're going to tell us what the token is so we're going to go into the request and the request has a body and the body is going to give us the value of the token so next we're going to set a whole bunch of different options for the cookie and we want to make it as secure as possible so first we're going to say http only true so client javascript cannot read the value of this cookie should this value should this cookie only be available on secure connections well yes but locally i don't have a secure connection so i'm going to say where the process process.ns.nodenv is not equal to development so if it's anything other than development yes it needs to be secure how long should this cookie live for we'll do that with the max age we want it to live for an hour because that's how long the cookies or that's how long the cookies are the tokens by default from firebase authentication last for so here we're going to do 60 seconds times 60 minutes that will give us one hour so the same site policy so there's a number of options here we're going to go for the most strict option so you can only use this when the domain is the same same site we are going to say strict like this and what path is this cookie available on we're going to say slash meaning it's available on any path within our website so i'm going to hit save that's going to reformat all of my code and now i'm going to move over to the log out dot ts and log out is going to be so similar to login i'm actually just going to copy and paste all of this over so if logging in means receiving the token from the browser and putting it into uh into a cookie with this request.body.token log out means unsetting this value deleting it but you know what before we move into log out my apologies we have to finish this response cycle we have to we have to return with a success and end this thing so we're going to say it's a status of 200 and json which will also end the request i'm sorry end the response and send this over to the browser we're just going to say success true like that so that one extra line um finish off the response to the browser we're going to come and put that into log out as well so logging out if logging in is setting this value in the token logging out means unsetting it so we're actually just going to set it to an empty string and we're going to swap out this max age value or property of the cookie because we we want it to be deleted by the browser and the way you do that is you can set you can set a date in the past you can say that this cookie expires sometime in the past so one way you can get a date that expires in the past is to just say new date with a value of zero so this means zero seconds from the unit e posh date basically it sets the date back to 1969 definitely in the past and that will trigger the browser to say hey this this cookie's in the past it's expired let's let's delete it so what we're going to do is replace this max age with expires and we're going to say that it expires back in 1969 cool so the only two differences between this um login means set the token logout means set it to empty string logout means expire it login means set it to be one hour in the future so those are the two endpoints but where are these actually called from the front end so if you remember one of the earlier videos we had use auth now in use off somewhere around in the beginning or in the middle of this we set up this firebase.auth.on id token changed where firebase basically tells us hey the user either logged in or they logged out so if there's a user that means they log in and we call this function set cookie token otherwise they log out meaning remove cookie token so we're going to go modify these two functions where instead of setting a cookie client side so that's what it does here set token cookie creates a cookie and ex and and sets it client-side and then remove deletes it instead what we're going to do is we're going to call those two endpoints that we set up which will do the same thing but it will do it on the server and make an http only cookie so we can actually delete this import and it turns out we never actually used to get cookie get token cookie so go ahead delete that too and we're going to be left with just these two functions where we can replace setting the cookie client side with making a fetch call to set it on the server so we can say make a fetch call to api login and then we're going to pass it a whole bunch of options we're going to make this a post request we're going to make it so that the type of request is a json request so we're going to say the content type of this request is application json and then below headers what's the body of this request we are going to jason stringify an object that has the token so this token that was passed in with set token cookie we're going to pass up to the server which will be received and written to this http only cookie so back here we're going to convert this into a normal arrow function and we're basically going to do the same thing so we'll just do a copy paste except we're going to make the call to api log out and log out doesn't need anything so we can just send up an empty json body okay so everything else hopefully will work the same what i'm going to do to begin with is i'm just going to log out let's make sure there's no token cookie so we're good there and what i'm going to do is i'm going to log in through firebase so i'm going to call do that put in my password and what it's going to do this time is it's going to have posted that token to my back end so we'll go we'll look at the network request in a second but you can see here we still have a token cookie that's great but this time it's http only and it's got a strict same site policy so we've sort of got the exact same functionality but it's a lot more secure now because you can't read this from javascript so if somebody can inject javascript on your page who cares it does nothing so let's just go into the network request instead of looking at this we'll look for um this is probably in the past so i'm going to clear this why don't we log out again so there we've got the log out request i wanted log in okay so we're going to log in go here log in so i don't know why this one was canceled but this one is looks like it worked so here we've got a post to login so what was posted our token was posted to the server now the key is the response so you can see here the response has a set cookie header and in here we're setting the token but it is http only so it's a lot more secure and our response from the server was just success so if you were to log out clear these i don't know why login's showing up but anyways we'll click log out so here we have a call to log out and you can see the response set the token to an empty value and it expired it for some reason this one's in 1970 not 1969 but anyways the cookie is gone because if we were to go back here there's no token cookie okay so we've just made our site more secure we can go in here and commit those changes so we did tweak a few files we added cookie and the types for that we modified the token cookies file to post it to the server and then we created these two new api endpoints log in and log out thanks for sticking around for this bonus video to add more security to our site hope you enjoyed it bye

Channel: Leigh Halliday

Views: 6,103

Keywords:

Id: lmEXWPDSKl0

Length: 14min 26sec (866 seconds)

Published: Mon Jul 25 2022