Client and Server Side Cookies in Next.js

hey it's lee halliday and this video is all about cookies we're going to cover cookies in react on the client side and we're also going to cover cookies on the server side and how to set them and delete them in both scenarios and why you would choose one over the other we're doing this within a next gs application that i'm going to pull up now but we're keeping the code nice and simple we've got a button here that should simulate a login so we're going to be setting a cookie called token and then we've got another one called log out so we're first going to start client side where our javascript within the browser is going to be setting and removing cookies so to get started i've got this jscookie library that's pretty easy to work with and when you click the login button what we're going to do is we're going to say cookie.set and you're asked to give it a name so we're going to say token our value will be abcd so you would get this through your actual authentication service whether it be firebase auth or whatever and the last one is uh is an object where we can set some values like when it expires so we're going to say that this expires one divided by 24 which is basically just one hour long so we do this and we go into the browser we click login refresh and we should have our our token show up here so our token cookie with abcd so now we're going to click log out and that should remove this token this token cookie okay so we're in here we're in log out and we're going to say cookie.remove and then we just have to tell it the the name of the the name of the cookie we want to remove so token just like this come back we click log out just click refresh and you can see that it's gone so set remove so this is great it's really easy to work with it actually does get submitted to the server and we can prove this by recreating the token and then i've got down in here a get server-side props um export function that's uh nexjs specific this runs on the server so basically what we can do is we can access the request dot cookies dot token so we're gonna take that and we're gonna pass this as a prop to our component so when you return props this returns the token so we have to receive the props token and why don't we just put this in an h2 here so our token is token like this so because this is worked right away actually so there we go so we read it on the server side which passed it as a prop to our react component so when it rendered we filled in this value so if we were to log out um it's not state so it doesn't automatically refresh here so if we refresh okay undefined cannot be serialized so this was undefined it had issues with that so we'll just do the old or empty string refresh that now we're logged out click this refresh we're logged in so this works great except what we've got is a is a non-http only uh cookie basically javascript on the client can read it that's really easy to work with but it's not the most secure thing because if you have another script running on your page or somebody does an xss attack cross-site scripting basically what they can do is if they have javascript that can run on your page they can read your token which basically gives them access to your account that's no good so what i would use client-side cookies for is remembering stuff like uh do you want dark mode or light mode do you want english or french do you want cad or usd currency stuff that's that doesn't really matter it doesn't have to be secure when you do want it to be secure you want cookies that are not available to read in javascript on the client in the browser and what that is it's called an http only cookie so we're going to go do that now and in order to do that we actually have to implement setting and unsetting the cookie on the server so inside of pages api i'm going to implement the login endpoint and what this will do is it will receive the token and then it will write it to a cookie that is http only meaning it's only available on the server so no javascript will be able to read this this um cookie that um and that sort of control structure is handled by the browser um themselves so anyways we're in here we receive a request so they're gonna post the token to us so what we'll do is we'll access the token inside of rec dot body dot token so this here will give us the token and the way you set it set a cookie is you do it by setting a header so what we're going to do is we're going to say set header and we have to give it the name of this this header that we're setting in our http response back to the browser and what this is is set cookie so that's how you set a cookie on the server side in the http response and the way this works is we have a different package this one's just called cookie so the front end one was called jscookie back in one is called cookie and we call a function called serialize and serialize wants to know the name of the cookie so we're calling it token it wants to know the value so we're going to pass in the value that's being read from the incoming request that's going to send us the token and now we have to set all of the options but we're going to set a heck of a lot more options when we're on the server side to make it more secure so the first one is http only to true meaning no javascript running in the browser will be able to read this cookie at all it will sort of be invisible to them secure what this means is only send this cookie over https connections i don't have https running locally so what you can do is you can say where the process dot end.node end is not development so when you're running on production it should be secure how long is this cookie going to last for we'll set it a max age this one wants it in seconds so we'll do 60 seconds times 60 minutes to get us to that hour mark so there's a new property that you can attach to cookies called same site and this sort of controls which sites have access to read this this cookie so say it was requesting a script on your page from a different domain or it was requesting an image or something like that this controls whether it's going to send the cookie up with that request i've got a website right here that i'm going to link to and it's going to go into a lot more detail of what this same site means but the value we're going to give it is strict so we want the most secure right now and what path on our website is this cookie going to be available on you do slash for everywhere so i'm just going to pause it for one sec because i wanted to just mention that i launched a course i launched a course where we are going to be building a next js application front end to back end start to finish we use typescript graphql type graphql on the server apollo client and apollo server we're going to use prisma to get our data from postgres authentication with firebase mapbox we're going to deploy it we're going to have image uploads to cloudnary so it's going to do a lot of stuff it's 50 bucks please check it out i would appreciate it this is the app we're going to be building where it's sort of like um like airbnb where as you zoom in the map it updates over here on the left it's just taken a sec because my server's loading and it will show you only the houses that are on the page so there we go we have the other one zoom into this one you can go in view the details about this house you can add new ones by clicking the add house but you can only do that when you're authenticated so it's going to cover a lot of functionality i think it's a really sweet course please check it out all right back to our program here so we've implemented the login functionality i'm going to copy and paste this and go over here to log out and just paste this in so logging out we want to basically remove this cookie so we're going to do two changes first change we're going to set the value of the cookie to an empty string second one we're going to get rid of max age and we're going to use one called expires and we're going to say that it expires a new date zero this means zero seconds from the unit eposh start date basically it means back in 1970 is when this cookie expired so when the browser picks that up it's going to delete it so if we want to use these http only cookies we have to call the login and the out endpoints and we're going to do that back here on the client so i'm going to comment out the client side cookie code and instead i'm going to make a fetch request to api login we need to pass a few things to make this work so we are going to be posting the data to the server we're going to set some headers and this will be the content type header so that the server knows that it's json data when it receives that request and then the body of our request itself is going to be json.stringify a token of abcd so we're going to post this token back to the server it's going to receive the request and then respond immediately and in the response it will pass this set cookie header to set the token cookie with this value that we posted up perfect so we're just going to go down to the log out and we're going to copy and paste this because it's mostly the same the only changes is that we're going to post to log out and we don't need to pass anything up so you can just pass up an empty object because we don't need anything to log out the server is just going to take care of that for us so if we go back to the browser i'm just going to delete this to start fresh so we have no token right now if i click login it immediately you see the cookie pop open here but now we have http only so this you can't read it from from the browser log out removes it login adds it back in and if we were to go to the network requests we can see that it's calling login it's passing up our token and in the response headers you can see here this header being passed back set cookie token is abcd max age is 3600 which is one hour http only same site strict so this is the response coming back versus the log out the response coming back sets the value to empty and it expired back in 1970 so that the browser picks that up oh it's expired i'm going to delete it that's what i wanted to cover here you would use http only cookies when you want to be more secure when you don't want any javascript in the browser to be able to read it so this is a great place for authentication tokens and things that are more private i will paste the link for both the starter code and the finish code up to github and and post it below in this video so you can follow along if you'd like thank you very much take care bye

Channel: Leigh Halliday

Views: 19,722

Keywords: nextjs, react, cookies, httponly

Id: w8n7Soz7khw

Length: 12min 44sec (764 seconds)

Published: Thu Jan 14 2021