‫So we learned in the last lecture
‫that the JSON web token should be stored
‫in a secure HTTP-only cookie.
‫But right now, we're only sending the token
‫as a simple string in our JSON response.
‫So in this video, let's also send the token as a cookie,
‫so that the browser can then save it
‫in this more secure way.
‫So we're in our code.
‫Do we actually send the token to the client?
‫Well, remember, that's in the authController
‫and right here in the createSendToken function.
‫So before, we had basically all this code
‫in many different places, but then we refactored all of that
‫just into this createSendToken function.
‫All right, and so this is where we're gonna work now.
‫Now, I'm sure you are familiar
‫with the way cookies work in general,
‫but just to make sure we're all on the same page here,
‫let's talk a little bit about cookies.
‫So first of all, a cookie is basically just
‫a small piece of text that a server can send to clients.
‫Then when the client receives a cookie,
‫it will automatically store it
‫and then automatically send it back
‫along with all future requests to the same server.
‫All right, so again, a browser automatically stores
‫a cookie that it receives and sends it back
‫in all future requests to that server where it came from.
‫Okay, now, for now, this is not gonna be
‫really important for us
‫as we're only testing the API using Postman.
‫But a bit later, when we're gonna render dynamic webpages
‫and really interact with the browser,
‫then it will become really important
‫that the browser sends back the token basically
‫automatically in each request.
‫Okay, and by then, of course, we will talk more about that.
‫But anyway, let's now learn how to actually create
‫and send a cookie.
‫So in order to send a cookie, it's actually very easy.
‫All we have to do is to basically attach it
‫to the response object.
‫So we say res.cookie and then all we have to do
‫is to specify the name of the cookie,
‫and I'm calling it JSON web token,
‫then the data that we actually want to send in the cookie,
‫and so that's of course gonna be the token variable
‫and then after that, a couple of options for the cookie.
‫And the first option that we're gonna specify
‫is the expires property.
‫Okay, so basically, this expires property
‫will make it so that the browser or the client in general
‫will delete the cookie after it has expired.
‫Okay, and so we set the expiration date
‫similar to the one that we set in the JSON web token, okay.
‫So let's actually create a new variable for that,
‫okay, because the JSON web token package
‫can then work with this format.
‫Okay, but in JavaScript, this is kind of meaningless
‫and so instead, let's create a variable with a real number.
‫So let's call it still JWT,
‫then cookie,
‫expires in, and we still set it to 90, so 90 days,
‫but again, without the D.
‫Okay, so that now we can make actually operations with it
‫because we will need to convert it to milliseconds, okay.
‫So when should this cookie expire?
‫It should expire at a new date.
‫So in JavaScript, when specifying dates,
‫we always need to say new Date
‫and then it should expire at right now, plus these 90 days.
‫Okay, so now, like this of course.
‫And then process.env,
‫and now, let's use this one and then
‫simply put the cookie in there, okay.
‫But now, of course, we need to convert that to milliseconds.
‫So we have 90 days right now.
‫So two hours, it's times 24.
‫Two minutes, it's times 60.
‫Two seconds, it's times 60 again.
‫And then to milliseconds, times a thousand, okay.
‫And of course, I could do it all in one go,
‫but this is just to specify what exactly we're doing.
‫So to show that we're actually
‫converting it to milliseconds.
‫The next option is gonna be the secure option.
‫And so we're gonna set this one to true
‫and so like this, the cookie will only be sent
‫on an encrypted connection.
‫So basically, we're only using HTTPS, all right.
‫And then finally, it's that httpOnly option
‫that we've talked about before.
‫Okay, so we set this one to true
‫and so this will make it so that the cookie
‫cannot be accessed or modified in any way by the browser.
‫Okay, and so this is important in order to prevent
‫those cross-site scripting attacks.
‫All right, so all the browser is gonna do
‫when we set httpOnly to true is to basically
‫receive the cookie, store it,
‫and then send it automatically along with every request.
‫Okay, and that's actually it.
‫So this is how we basically define the cookie,
‫so let's say this part,
‫and then we send it using res.cookie.
‫Now, if we wanted to test this right now, it wouldn't work
‫because right now, we're actually not using HTTPS.
‫And so because of this secure: true,
‫the cookie would not be created
‫and not be sent to the client.
‫All right, and so basically,
‫we only want to activate this part here in production.
‫So what I'm gonna do is to basically export
‫this entire object here into a separate variable.
‫Okay, so let me show that to you.
‫So const
‫cookieOptions
‫should be equal to this and then here, we pass that in.
‫All right.
‫Now, of course, we then don't want this part here,
‫but only when we are in production.
‫So let's say
‫if process.env.NODE_ENV,
‫remember that's where it's stored
‫if we're in production or not.
‫So if that's equal to production,
‫then set cookieOptions.secure
‫equal to true.
‫Okay, and now, we can remove it from here.
‫Yeah, so now, only when we're in production,
‫we will get the secure options set to true.
‫And otherwise, it will only be sent like this,
‫so just with the expiration date and httpOnly.
‫Okay, and so let's now actually test this.
‫And I'm gonna test it with creating a new user.
‫So here in Sign Up actually
‫and let's call this one
‫user@jonas.io.
‫Always with the same password.
‫I'm gonna call him User as well
‫and let's say that the role here is a guide,
‫so just so that we have some different roles here as well.
‫Give it some more space.
‫And now, let's try it actually.
‫And response is just as we expected
‫with the difference that now,
‫we get one cookie here in this Cookie tab.
‫And so indeed, here, we get
‫the name of the cookie, the value.
‫We also have the expiration date,
‫which is exactly 90 days from right now.
‫We have httpOnly set to true and also, secure set to false.
‫All right.
‫Great, we can also see all the cookies that we have
‫here in this Cookie tab.
‫And so again, we see that one cookie that we received
‫from this domain, all right.
‫Now, just one last thing that I actually want to change
‫in that function that we're just working on,
‫so the createSendToken,
‫is to basically get rid of this password here in the output.
‫Okay, so in our schema, we actually have it set
‫to select false, so that it doesn't show up
‫when we query for all the users.
‫But in this case, it comes from creating a new document
‫and so that's different and so that's why we see it here.
‫Okay, but we can actually very easily fix this.
‫Okay, so all we need to do actually is to set
‫user.password
‫to undefined.
‫All right, and so that should
‫remove the passwords
‫from the output.
‫Okay.
‫So let's just delete this user here that we just created.
‫And try it again
‫just to see if the password doesn't show up anymore.
‫And yeah, indeed now, it is gone.
‫And still, our cookie, of course, is here.
‫And when we now come here to our Cookies tab,
‫well, then you still have only one cookie
‫because the old one was now basically overwritten
‫by this new one
‫and that's because they have the same name.
‫So the name is like the unique identifier for a cookie.
‫And so if we receive one with the a name
‫that was already given,
‫well, then the old one is simply replaced.
‫Okay, and that's actually it.
‫So this is how we send an HTTP-only cookie
‫and again, we will talk more about this
‫when we build our dynamic website.