Although JWT is a very popular authentication method and is loved by many. Most people end up storing it at localstorage. I am not going to create ...
For further actions, you may consider blocking this person and/or reporting abuse
Very helpful blog.
Nice job again . Thank you.
Why would I use cookie based JWT authentication?
Thanks for the feedback! 😊 I usually keep the JWT on localstorage. But I know a lot of people who prefer to keep it in cookies. 😉
According to my research, storing auth tokens in
localStorageandsessionStorageis insecure because the token can be retrieved from the browser store in an XSS attack. Cookies with thehttpOnlyflag set are not accessible to clientside JS and therefore aren't subject to XSS attacks.After learning this, I tried implementing an
Authorization: Bearer XXXXXXXXXrequest header, but keeping the token stored safely in the cookie. Then I realized I won't be able to copy the token from the cookie to the request header if I can't access it with clientside JS (httpOnly, remember?)I've therefore come to conclude that saving the token in an httpOnly cookie and sending it to the server as a request cookie is the only secure way of using JWT.
Wow, I didn't know that!
Sure, I'm just curious to know what is the benefit of using JWT inside cookies? Thanks.
The biggest difference when saving the JWT in a cookie would be the fact that when making an http request, the cookie would be sent with the request. But if you store the JWT in localstorage, you would have to send it explicitly with each http request. 🧐
Ahan, I understand. I wasn't sure if this was for a server-side website. Meaning, we don't have to use packages like Passport.js with this approach.
Exactly. If you do it this way you end up with less boilerplate in your Api. The use of Passport.js is not incorrect, I just like to show that we can make simple and functional implementations. 🥸
please can you tell me what is the exact role of passport strategy next to the normal jwt?
Passport is a middleware with a good level of abstraction, for example, with jwt you wouldn't have to write that much code. In addition to being faster to implement, it is also the simplest. However, business rules can change from project to project so I advise people to know how to do a simple setup.
then you don't need to read the localstorage each time and manually send the token alongside every request from the client .
Awesome, thanks for this! Saved me a massive headache
I'm glad you liked it! 💪
I am very confident this is open to CSRF attack. The attacker simply needs to host another site B and then a user with the cookie will end up sending the encrypted token to the main site A where they can /login and then /protected. Recommend using a combination of SameSite (stops CSRF for browsers that respect sameSite) and Synchronizer Token Pattern (stops Cross site same origin attacks). Both should be used since SameSite is still vulnerable to cross site same origin. Also there is a major flaw in using GET since SameSite wont be applied. Also you mention because its less work to use Cookies vs Localstorage - and that you are using HttpOnly flag to prevent XSS - good - but it should be made clear Localstorage is never an option for JWT, not because its just more work but XSS attackable.
Thanks for your feedback! 😊 Yes, with the setup I share in this article it is possible to suffer a CSRF attack 🧐. However, the purpose of this article was not to provide a completely secure solution, but rather to create a simple authentication and authorization strategy that can be implemented in small personal projects (done for fun).
Authentication and authorization is not an area that I like to discuss, because there are a thousand strategies that can be implemented. But regarding the discussion of Cookies vs Local Storage, in my opinion, let the devil come and choose, each one has its disadvantages and advantages and it only depends on the programmer to choose which risks to take. These days, to be honest, I'm indifferent.
Hope you have a great day! 🙏
Yes it works. So you mean it's working with other http methods? Do you have the authorization middleware on the route?
Do you have cors installed in your Api project?
Hi. How to setup cookie parser options in one place? like this one?
const cookieOptions = {
httpOnly: true,
secure: true,
sameSite: true
}
app.use(cookieParser(cookieOptions))
so you only need to write:
.cookie('access_token', token)
it's annoying you have to write the options every time you use it. is this right? thanks
Weird, are you sure you're sending the cookie?
All My Doubt And Question Cleared Through This Blog And Thank You @FranciscoMendes .
I had a problem following up, when I used the authorization middelware in the Logout route, I got the forbidden message in Insomnia.
Do you have know the reason behind it ?
that was great