All language subtitles for 019 Sending JWT via Cookie_Downloadly.ir_en

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.