Using HttpOnly cookies in React & Node | Storing JWT Tokens or SessionID Securely

Подписаться 2,6 тыс.

Просмотров 65 тыс.

50% 1

In this video, I've explained about how can you use httpOnly cookie. What it means as for your project and how to use it to store your JWT Tokens or Sessions securely. We have used libraries like React, Express, axios, cookie-parser and universal-cookies to demo all of the functionality
🚨 Important announcement -
Hi, I just want to let you all know that my first course i.e
The Ultimate DynamoDB Course is now open for all. Make sure to take a free preview with 30 days money back guarantee.
rahulahire.thinkific.com/The-...
Additional stuffs:
Github Code : github.com/MeRahulAhire/httpO...
Stackoverflow - Make Axios send cookies in its requests automatically : stackoverflow.com/questions/4...
Cookie Priority : stackoverflow.com/questions/1...
The whole journey of making facemash: • Making of Facemash | F...
Checkout the other videos of DevTalks: • DevTalks
Timeline:
00:00 - Preface
03:55 - Cookies vs Local Storage vs Session Storage
04:43 - Why use cookies and its features
06:45 - Why HttpOnly Cookies?
08:45 - Demo time- creating cookies in browser
16:42 - Creating httpOnly cookie in backend
23:30 - Using axios to get httpOnly cookies from server
28:00 - How to delete httpOnly cookies?
31:15 - How to use JWT tokens and refresh them with this method
34:00 - Proof of security of HttpOnly cookies
34:50 - End word + your feedback. Like, Share and Subscribe
If you have any suggestions, Queries or any though just leave it in comment and I'll be happy to get back to you
#httpOnlyCookies #JWT #WebSecurity
FIND ME HERE:
facebook: / merahulahire
Instagram: / merahulahire
Twitter: / merahulahire
LinkedIn: / merahulahire

Наука

Опубликовано:

28 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 372

@RahulAhire 3 года назад

⚠️ In order to make your server read cookies, just use this property of req.cookies.cookieName 🗓️ 22 March 2022 : One more thing that I didn't mentioned in this video that if you're working on prod/deployment environment then in order to make httponly cookie work make sure the base domain of API and frontend are the same eg. Google.com, fb.com, etc. Rest for samesite and cors, you can choose whatever subdomain as you like to keep frontend and API seperate. I hope this clears up...

@imnishantsharma 3 года назад

how we use jwt token in cookies?

@RahulAhire 3 года назад

@@imnishantsharma it's exactly the same. Create token and wrap it inside cookie as I showed in the video

@imnishantsharma 3 года назад

@@RahulAhire okay i got it. Thanks

@anshulghogre4 Год назад

but what if it's diffrent then how I would access it? do I have to buy subdomain?

@RahulAhire Год назад

@@anshulghogre4 subdomain are free they don't cost anything additional. Watch this - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-iDtulezCYSc.html

@vinitgupta1648 10 месяцев назад

The 4-5 days you spent were really useful. I was looking for this kind of solution to my JWT problem but was not able to find anything so detailed like this. Thanks a lot.

@adrianrobertoaguilarsandic6999 2 года назад

Man thanks! I was searching a clear explanation like yours for days without any lucky and finally saw your video and it was exactly what I needed!.

@RahulAhire 2 года назад

Thanks Adrian for your feedback. I'm glad that his was helpful and did worked for you.

@josephpetrie3204 2 года назад

Thank you. Excellent tutorial, after about 3 days of reading docs, messing with code, and watching videos... yours finally helped me set cookies from the backend using Cors/Express/Axios.

@RahulAhire 2 года назад

Thankyou Joseph Really means a lot to me. This was something that too messed with my mind for 7 days. I hope it answered all your queries.

@anthonyezeh7511 2 года назад

I love you man! I've been trying to fix my code roughly and I failed; but with this video, I now understand perfectly. I'm now a subscriber!

@stanleyokonkwo2435 3 года назад

Thanks a lot, Rahul, searched everywhere for a comprehensive tutorial on Nodejs HttpOnly Cookies but I couldn't find any until I stumbled on your tutorial. This has helped me a great deal. Thanks once again, You've earned a fan from Nigeria.

@RahulAhire 3 года назад

Thanks Stanley ❤️. I'm glad I could helped you indirectly with this video..

@forinda 2 года назад

Very insightful content. Thank you for creating your time to share the knowledge

@yerson557 3 года назад

Great explanation about this complex topic, you help me to understand that very quickly, Thanks!

@RahulAhire 3 года назад

I'm really happy that you find it useful..

@focusiam2027 Год назад

Nice video Rahul, thank you so much!

@alejandrocoronado1131 Год назад

Thanks man great video!

@Allyourneedsmet 3 года назад

Very well explained and also answered my questions on same site, thanks

@elvissautet 2 года назад

Kind'a being honest here, you deserve all the views and likes, this video, that explanation, I have been looking for it for like a year, thank you so so much

@RahulAhire 2 года назад

I don't know what to say but thanks for your appreciation. Really means a lot 👊.

@jeisongarzon6066 2 года назад

Hey friend, thank you very much for making this video, it was very helpful and with the sources you shared about dummy cookies I was able to create validations for protected routes on the client side, again thank you very much, greetings from Colombia.

@RahulAhire 2 года назад

Thanks for the feedback, glad to hear that it worked for *your requirement.

@vigneshwaran1516 3 года назад

Nice explanation. Thanks ❤️

@SyntheticProgramming 3 года назад

Underrated video, deserves more attention. Nice job!

@RahulAhire 3 года назад

I'm happy you liked it

@coolemur976 2 года назад

Subscribed. I found the answer in your video for my particular problem. Thank you!

@RahulAhire 2 года назад

Thanks Coolemur, highly appreciated 🔥

@AlanFregtman 2 года назад

ha, I was the one who contributed the "fire" animation to the VScode "Power Mode" extension you're using. First time I stumbled on a tutorial with someone using it and it makes me smile. :) nice tutorial btw!

@RahulAhire 2 года назад

That's great. Thanks for your efforts, the open source spirit runs because of guys like you which makes our life easy.

@KojiKazama 2 года назад

Great video, thanks for taking the time to explain this in depth. I thought that http only cookies could still be accessed by the browser and couldn't understand why I would want to use it. But you cleared that up for me.

@RahulAhire 2 года назад

That's great, happy to hear that.

@Yourguru9 8 месяцев назад

Thanks a lot, brother, your all videos are informative.

@RahulAhire 8 месяцев назад

Thanks Yash, I appreciate your comment.

@Pizza872 2 года назад

Pretty good explained video helped so much thanks.

@essaadi_elmehdi6784 2 года назад

Big thanks Rahul, that was so helpful bro

@RahulAhire 2 года назад

Thanks for the feedback, good to hear that it helped you.

@tyronemguni3895 2 года назад

Great video mate. Lead me towards the right path. Hope you still making videos. Appreciate the banter too

@RahulAhire 2 года назад

How can I help you?

@wakengames2318 2 года назад

Thanks so much for this video, it really helped me understand the concept of cookies and the appropriate storage of information. I will credit your video in my project readme.

@RahulAhire 2 года назад

That's something new for me. Thanks - really appreciate it.

@techsamar 3 года назад

That was an awesome explanation. Keep it up

@RahulAhire 3 года назад

I'm really happy that my effort seemed useful for you. Thanks for feedback, I really appreciate it..

@BenElferink 3 года назад

This was really good, thank you! Would love to see how you use cookies with JWT tokens && refresh tokens!

@RahulAhire 3 года назад

Thanks Ben for waiting by and watching the video. I do have another video on actually using jwt with httpOnly cookie check this out : ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Rb05ioLMDtM.html

@ajitha.r3671 3 года назад

This was really good, thank you!

@RahulAhire 3 года назад

Thanks Ajith, I'm glad that you find it useful.

@udaym4204 5 месяцев назад

thank you very usefule video for learn http cookie in details .🙏

@MikliOktarianto 2 года назад

GG bro, i've been try learn this jwt and how to store it on httponly cookies, i've been confused by many sites and many videos, but this one really helpful, even your comments is also helping me to get through other problem on my production as well, thanks a lot keep going!

@RahulAhire 2 года назад

I'm glad it's helping you. Keep creating 💥 Thanks for watching this video.

@ejazulhaq3168 Год назад

Great Explanation,..... very clear and straight forward........ ❤

@RahulAhire Год назад

Thanks Ejaz, good to hear that it worked for you.

@danieladeneye4170 10 месяцев назад

Wonderful tutorial. Indepth, clear explanations👏🏾

@RahulAhire 10 месяцев назад

Thanks Daniel 🙏 I hope it helps you in your project.

@fidelisitor8953 10 месяцев назад

@@RahulAhire Clear, concise and simple to understand. I never got confused about anything in this video and it has really helped me in my current project. Just earned a subscriber!

@satyamrai4064 2 года назад

This saved my day thank you

@darshanmarathe6077 3 года назад

Loved the whole concept of explaination + demonstration, just like Hussein Nasser. Keep it up. Would like to visit your channel frequently.

@RahulAhire 3 года назад

Thanks Darshan for your words, really means a lot.. I really appreciate that you watched it and expressed your feedback. Hussain is really great in explaining and he's the only one right now who's explained actually deep topic used in production environment. Again thanks for subbing ❤️

@gayatridevigovindarajula6228 3 года назад

I skipped and skipped and skipped watching this video. And watched every other tutorial. Didn't get one bit. Finally gave in and watch this. Now things make sense and I actually understood how to implement it. Thank you.

@RahulAhire 3 года назад

Learning new things is always bit challenging and I can relate with you. I hope this video proved to be helpful for you. Thanks for watching this video and especially leaving your feedback here - highly appreciated.

@nishadsandilya6653 2 года назад

Boiii, you just saved me a hell lot of time! Thanks

@RahulAhire 2 года назад

Thanks Nishad, I'm glad I could help you.

@hassanmehmood8711 Год назад

You saved my day I was working on my first MERN project and was banging my head for 6 hours but you saved me Thank you

@RahulAhire Год назад

I'm grateful that it worked for you.

@waylag9144 2 года назад

Great tutorial thanks!

@prateeksharma9634 Год назад

This video has to be the best one out there solved allll my fuking doubts which no site, no other video could solve. Thanks a ton brother!!!!

@RahulAhire Год назад

Thanks for the appreciation, I'm glad it helped you

@Jobayer_Ahmed. Год назад

Well done, Bro

@alfianinda 2 года назад

thank you for the tutorial 🙏

@alexkey9372 3 года назад

great tutorial! i had to mess with it also 4-5 days and your tutorial helped me in adapting this with nextjs. initially i didn't care and had everything in localstorage but encrypted. i think that was also insecure compare to this approach you demonstrated.

@RahulAhire 3 года назад

I'm glad to know you're upgrading the security of your website. The developer's frustration is mutual 🙌🏻

@alexkey9372 3 года назад

@@RahulAhire exactly! 4 days of trying to fIgure something that can be done in 1min. In nextjs was slightly different but easier with the cookie module.

@faris.abuali 2 года назад

Thanks! 🧡

@microwavecoffee 3 года назад

thank you. really clear explanation.

@RahulAhire 3 года назад

Thanks nien for watching this video. I'm happy that you find it helpful...

@michaeltruong405 Год назад

You just saved me from about 8 hours of debugging hell, I couldn’t figure out why the HTTPonly cookie wasn’t sending to the backend was because the cookie wasn’t being set in the first place in the browser. Thank you 🙏🏻

@RahulAhire Год назад

Thanks for coming up here, I'm glad to know that it helped you. Even I had spent many days to understand this and it's good to see it's helping many people to cut their learning time.

@zeeu 3 года назад

Thanks Bro very useful video

@zidnawildanalfain1228 2 года назад

BIG THANKS!!

@sugengutomo9147 2 года назад

Awesome!!

@hrutvikmalshikare8531 2 года назад

Thx It was really helpful video

@RahulAhire 2 года назад

Thanks hrutvik 👍🏻

@jvalleybootcamp7095 2 года назад

Thanks Rahul

@vyshnavchikku1475 2 года назад

thank you so much sir

@Zzzz-iy9of 3 года назад

thank you. this is really helpme

@RahulAhire 3 года назад

I'm glad you find it useful..

@joseluisperez5137 3 года назад

Muchas gracias, he podido implementar un jwt gracias a tu video, saludos desde mexico!

@RahulAhire 3 года назад

Me alegro de poder compartir algo valioso. Gracias por venir y ver este video.

@mypd4937 2 года назад

You the man!

@alkas7366 3 года назад

Great work keep going.

@RahulAhire 3 года назад

Thanks 👍🏻

@Cdswjp 2 года назад

appreciate u bro

@t-dz6271 2 года назад

Nice job

@skhobbies5 2 года назад

Great Tutorial....

@RahulAhire 2 года назад

Thanks

@tudang8892 2 года назад

Thanks a lot

@garbjorn1757 2 года назад

Thank you

@TashriqueAhmed 4 месяца назад

Good stuff

@mrvinaygupta 2 года назад

I have created HTTP only and Secure cookie but still burp suite can access it and manipulate the API calls. How can I ensure that burp suite should not able able to access the Cookie from response/request header ?

@RahulAhire 2 года назад

Can you please elaborate on what exactly are you trying to do?

@8fed 2 года назад

Epic vid, epic accent, epic info, thank you

@RahulAhire 2 года назад

Sorry for late response. Do you have any suggestions that I can improve upon? I'd love to hear about it. For accent, I'm sorry I can't change it even if I want to.

@8fed 2 года назад

@@RahulAhire Your English is easy to understand do not worry about it :) As for tips, maybe get a better webcam, your current one looks a bit grainy, or better yet when you are explaining something, instead of recording yourself, draw the concept on a whiteboard (virtual) and show yourself in a corner of the video, something like this: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-tPYj3fFJGjk.html (an example).

@DanielSilver-vu4mi 3 года назад

Do httponly cookies work in microservice architecture? lets say I have a gateway that proxies requests to a login service. Can i store the jwt token in the httponly cookie and later use it in different service like so. after they login they make a request to gateway to different service, will the other service receive the cookie to validate login?

@RahulAhire 3 года назад

Yeah you can store jwt in http cookie. You can use with credentials property in axios for frontend to attach those http cookie every time you make a request. flaviocopes.com/axios-credentials I assume by validation you mean authorisation to every private route. In that case you can receive cookies easily. The only thing you need to see is how can you parse the cookie because every stack has it's own way eg. Aws lambda and express.js

@brijeshrawat8474 2 года назад

Thanks it help me

@uktraveller Год назад

awesome tutorial..

@RahulAhire Год назад

Thanks 🙏🏻

@mitesh5189 Год назад

i have one question kind of non related to this in postman req in object null is it due to js doesn`t have access to ?

@RahulAhire Год назад

Can you please elaborate your question, I didn't understood it.

@criscosmoes5745 3 года назад

Hi, thank you for your video and clear explanation. I'm still new to backend. Just one question. After we have created a cookie in the backend, how can we let our front end know about this cookie? I am trying to make a login/logout. I want users that are logged in, to only be able to access protected pages. How can I let my front end know that the user is logged in? Thanks Rahul

@RahulAhire 3 года назад

Create a fake dummy token with no httpOnly but with same expiry For more information : dev.to/petrussola/today-s-rabbit-hole-jwts-in-httponly-cookies-csrf-tokens-secrets-more-1jbp

@nalcapital 2 года назад

Thank you! Its fine

@RahulAhire 2 года назад

Anything wrong about me or factual errors? I'd love to know more about it to improve upon it.

@nalcapital 2 года назад

@@RahulAhire All right. That's what I was looking for

@RahulAhire 2 года назад

@@nalcapital I didn't got what you want, could you please elaborate??

@investmentideas5101 3 года назад

good tutorial "as well" :)

@kazimahin9137 3 года назад

thank you vhai

@creepyvlogs6885 2 года назад

hello Rahul Ahire, very good video, I wanted to ask you how do you have that cursor while you write a fire effect is added while you write

@RahulAhire 2 года назад

It's an vscode extension - power mode

@creepyvlogs6885 2 года назад

@@RahulAhire thanks you

@timotiusanrez9492 2 года назад

love how you said, we are going to shamelesly copy this like every programmer do, gotta love honest people.😁

@RahulAhire 2 года назад

Thanks Timotius 👍🏻

@codinghustler6771 3 года назад

Hello sir, can u please tell me about express-session in production because it is working in development but in production sessions are not accessible and showing undefine

@RahulAhire 3 года назад

I think you should check your configuration. If it's working in dev then also should work in prod if everything is right

@jeelpatel6375 2 года назад

hi cookie send from backend but it did not store in cookie or may be it's secure so how can i get that cookie

@RahulAhire 2 года назад

I didn't got what you meant to say.

@tonyriddle7646 3 года назад

do express js needs to be installed to work this properly?? I dont have express js in my project, I use npm start...to run (i am a beginner)

@RahulAhire 3 года назад

As a backend you'll need express to work with http cookie

@RahulBhardwaj099 Год назад

hii i have got the concept but, if we want to use httpOnly for JwtToken then how can we sent it in every apis ?? and do we need to deploy the node project also ??

@RahulAhire Год назад

I've explained that in this video. Please do watch the demo part.

@shortalien9714 2 года назад

I really apprecciate your work. I have understood many things from you. Thank you so much and continue this kind of work. 31/01/2022 [ITALY] work as charm

@RahulAhire 2 года назад

Thanks 🙏

@NguyenLe-nw2uj 10 месяцев назад

why are you able to view the httponly cookies inside the chrome dev tool? As far as I know you can't view or modify the value inside chrome

@RahulAhire 10 месяцев назад

Yes you can, it's local to you. If you own a key to your house it doesn't mean you've broke into house. It's still accessible to yourself. The whole reason of http cookie is it cannot be accessed by javascript XSS attack. That's why it's secure.

@user-dc8dz1oi2v 7 месяцев назад

To read JWT token from do we need implement the Backend for Frontend BFF server, means token save as Httponly but BFF can initiated session with Frontend like React so that the token can read by react but only bff, both react and bff should be in same session. If can make video this it would be great. 🙏

@RahulAhire 7 месяцев назад

Well it depends on how you deploy your micro services but fundamental are still the same. You can have unique subdomain for each bff and set the httpcookie to LAX.

@s.hariharanreddy5439 Год назад

Brother, I'm sending as well as receiving the cookies, in the request and response headers at the networks tab. But, the browser is not setting the cookie in the application localhost. My express server has been hosted on vercel. And my react frontend is localhost. I have tried all possible ways.

@RahulAhire Год назад

Please see my pinned comment. You should have a common root domain for your backend and frontend app in order to get the http cookies

@abdelfatahashour 3 года назад

i have 2 domains , first A.com and second B.com A.com send cookie to B.com but when go to B.com to get data from A.com cookie don't send with request from B.com ! how can i fix it ?!

@RahulAhire 3 года назад

Unless you are using http cookie, you can only use those cookie across subdomain not cross domain. In that case you'll need backend to send to both different site.

@vinujoy4311 2 года назад

This was really Excellent tutorial, Your channel is very underrated Would love to see how you use cookies with JWT tokens & refresh tokens!

@RahulAhire 2 года назад

Thanks Vinu for kind words. I'm glad you found it useful. By the way I do have a tutorial based on it. You can check it right here : ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Rb05ioLMDtM.html Tldr, it's 2 hrs long. So, if you want, you could directly skip for code in GitHub repo. One more thing that I didn't mentioned in this video that if you're working on prod/deployment environment then in order to make httponly cookie work make sure the base domain of API and frontend are the same eg. Google.com, fb.com, etc. Rest for samesite and cors, you can choose whatever subdomain as you like to keep frontend and API seperate. I hope this clears up...

@vinujoy4311 2 года назад

@@RahulAhire thanks man

@veldasrdurai 3 года назад

In this we are setting samesite as strict ; but in case of production we have to make it none right. Instead it will not be sent. But in my case I'm setting same site as none and secure as true with my https domain the cookies are not showing up in the browser. When I examine the application tab no cookies are there. But when I search this domains site setting they are showing that these cookies are available. How can I overcome this situation ?

@RahulAhire 3 года назад

You are contradicting the purpose of http cookie by doing so. http cookie says you cant access me. But, the sameSite: none says use me as you want and I showed in the video that if there's any contradicting pattern, browser will not accept the cookie. Either you can make your sameSite to Lax if you're using sub domains or disable http cookie (which I don't suggest in case of storing credential) if you aren't storing any critical data.

@aakashrana1524 2 года назад

Great work Rahul. Your channel is very underrated. I have watched some of your videos, will try to be more consistent. By looking at the comments section i can see you reply to everyone and take feedbacks positively , which is a great thing Just wanna give a advice Try to create more presentation work, like the things you explain, define. Or go through the definitions while explaining It will really help for Indian students, to understand better, got words correctly, read at their own pace (Just my Opinion :)

@RahulAhire 2 года назад

Thanks Aakash for you kind words, really appreciate it. I've been working on a project that's taking some time so I couldn't be consistent but I'll surely try to get on track. The new video should come out today and that's about money and tech. It'll will be part 1 of 3 video of my blockchain series. I think it'll be the same what you're hinting. I take the later part into consideration for my future video for sure.

@dewanmizanurrahman194 Год назад

Though I'm not getting access of http only cookies with js, how do I verify user dara or any data? Give a proper solution or a suggestion video

@RahulAhire Год назад

That's the whole point of http cookie. Don't trust javascript in browser. But let's say you want to read it then send a blank request to server with access credentials to true in axios and return cookie value as a json response back. Also create a dummy non http cookie with same expiry as http cookie to verify that they exist on browser as you can fetch it with js. dev.to/petrussola/today-s-rabbit-hole-jwts-in-httponly-cookies-csrf-tokens-secrets-more-1jbp flaviocopes.com/axios-credentials/

@Ghizlanetech 3 года назад

pleese heelp i'v been trying to login in my localbitcoins acount and they tell me csrf cookie not set WHAt this does meaan please need you help and explanation

@RahulAhire 3 года назад

To prevent CSRF (cross side request forgery) you need to implement an anti CSRF token that's generated from server to identify the client and confirm that it isn't malicious user. In case of httpOnly cookie I'm not sure whether we need this or not but I've personally not worked with it so can't tell you how it's implementation looks like You can check this out blog.rahulbhutani.com/how-to-implement-csrf-tokens-in-express-node-js/

@rikipebrianto560 3 года назад

very helpful for me when i confused to store my token in browser. keep up with ur new video

@RahulAhire 3 года назад

Thanks Riki, I'm glad to hear that it helped you. More such videos are surely coming up

@rikipebrianto560 3 года назад

@@RahulAhire but how to access in react when httpOnly is true? i want to send my token to server to validate token

@RahulAhire 3 года назад

You'll need a fake token with a jwt token to know the expiry of the token. You can see my SMS OTP video where I have demonstrated this but if you want a quick demo then check this dev.to blog : dev.to/petrussola/today-s-rabbit-hole-jwts-in-httponly-cookies-csrf-tokens-secrets-more-1jbp

@rikipebrianto560 3 года назад

@@RahulAhire ooh, i see. u save my time. thanks a lot.

@suatbayrak2703 3 года назад

Hello, i didnt really understand the implementation with JWT token and refresh them

@RahulAhire 3 года назад

Check this article dev.to/petrussola/today-s-rabbit-hole-jwts-in-httponly-cookies-csrf-tokens-secrets-more-1jbp

@HimasRafeek 10 месяцев назад

Can you please make a tutorial to setup wordpress JWT Authentication for WP REST API, and create a secure auth system with httponly cookie?

@khurshidmalik565 3 года назад

Ya it's really very nice demonstration👌. But I have a question is that if cookies is disabled then how to handle?

@RahulAhire 3 года назад

Then you can try indexeddb but I don't know about it's security.

@j2etech602 5 месяцев назад

Ahh bro, Really thanks a lot. I did it finally 😢

@RahulAhire 5 месяцев назад

Good 👍🏻, I hope it helps you to build secure apps.

@arpitkumarmishra6220 3 года назад

Awesome video Rahul, also by using httponly how can one secure the routes in react app. I created a Protected route parent component to check isAuthenticate, which earlier use to aceess key from localstrorage or cookie. But now with HttpOnly how can we handle this use case ?

@RahulAhire 3 года назад

To know the whether isAuthenticated is true or false create a exact dummy access token without any JWT token as a value. Like true or false. Here's an detailed article about checking authentication for private routes : dev.to/petrussola/today-s-rabbit-hole-jwts-in-httponly-cookies-csrf-tokens-secrets-more-1jbp and also my GitHub repo for code sample github.com/MeRahulAhire/React-Node-Passwordless-Auth/blob/a251fcc21b76d4136ad62ac8430077240c5b3b7f/server.js#L66 also see the auth.js file in my repo for the usage of fake access token with same expiry date

@bakrsalem2624 3 года назад

I need example for refresh token

@RahulAhire 3 года назад

you can check this code github.com/MeRahulAhire/React-Node-Passwordless-Auth/blob/master/server.js#L113

@prasoonrajpoot4077 2 года назад

so You want to say that, if we want to use the data stored in this cookie in the react app we need to turn off the httpOnly flag, Is there any way around??

@RahulAhire 2 года назад

Http cookie are generally used to store jwt and credentials but I'm not sure why you want to do that but anyway one way is to send the blank request to server with with credentials property and get cookie as a json response from server.

@abhishekmagar9843 Год назад

why, axios not sending cookies info in my https api server?

@RahulAhire Год назад

Use this flaviocopes.com/axios-credentials/

@FrTormod 3 года назад

great video. Still didn't solve my problem. For some reason the cookie appears for me when testing the endpoint in postman. But the cookie does not appear in chrome when I invoke it through axios. Any ideas?

@FrTormod 3 года назад

Disabling these "flags" in chrome helped. But the cookie still disappears upon refresh. Cookies without SameSite must be secure Enable removing SameSite=None cookies SameSite by default cookies

@RahulAhire 3 года назад

Have you setup cors correctly?

@RahulAhire 3 года назад

@@FrTormod are you trying to use httpOnly and samesite to none? If that's the case then actually it's contradicting the purpose Checkout here to know more about samesite: developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite Ideally you should only use lax or strict in samesite

@saurabh9446 Год назад

What should I do if I want to use lax cookie but frontend and back-end deployed on different domains? Any idea, how can I store token on nextjs site so that I can access it for both SSR and csr ?

@RahulAhire Год назад

lax is used for subdomain. In that case you can indeed use http cookie. secure cookie does work on cross domain. If your architecture is complex, maybe you can add a sub domain proxy in between.

@saurabh9446 Год назад

@@RahulAhire cool. Any suggestions on follow up question

@RahulAhire Год назад

@@saurabh9446 sure token will be stored on browser as cookie and that happens automatically if you have configured it properly. Just search for axios withCredentials when you want to send cookie for authentication on private route.

@nikhilthadani4131 2 года назад

Hi. Thank you for the tutorial. But how can we find out that which user has sent the token through the browser and how can we check the token which we received and authorize that specific user? I mean which user has sent the access token back to the server with axios withCredentials. I need to verify it in my backend application and authorize the user. I am little bit confused. Any help would be appreciated so much.

@RahulAhire 2 года назад

That's super simple. While creating jwt token, you're essentially writing some details or payload while encoding it. During verification all you need to do *is to decode the information with the private key. More info : www.npmjs.com/package/jwt-decode

@nikhilthadani4131 2 года назад

@@RahulAhire Thank you so much for the fast reply. Yes we can decode the token to get details we encoded. But how to get the token that we received through axios request. Here's what I'm trying to do is, I'm setting the token in http only cookie after login. Now I want to verify the token and I have tokens of couple of users in my cookies but I need that token which was currently sent through axios to verify and authorize the specific user. Please reply again.

@RahulAhire 2 года назад

@@nikhilthadani4131 use withcredential property to attach the token with every request flaviocopes.com/axios-credentials If you are using httponly cookie make sure you've set the cors correctly and during deployment the url(root domain) of frontend and backend should remain the same, subdomain can be anything.

@sudha123ist Год назад

hey man, thanks it helps a lot. But how to spin up the cookie rest server? I build react app and spin it up with a nginx server, so where does this express service run?

@RahulAhire Год назад

You can run your backend anywhere you want just make sure same origin is configured properly.

@sudha123ist Год назад

@@RahulAhire alright, got you. The same can be configured for a spring boot application also right?

@RahulAhire Год назад

@@sudha123ist Yeah that's true. Since I knew nodejs I proceeded with it but these concepts are valid across all the backend stack. Make sure you've a subdomain to your attached to your backend API. Please see my pinned comment for more information.

@sudha123ist Год назад

@@RahulAhire thanks a lot man! appreciate your video!

@matatixx 3 года назад

Great video, it helped me to get my head around topic, but i still have a problem. The thing is I'm able to successfully login to API and I'm getting JSESSIONID cookie which is http only, but i cannot pass it to another request so at url "/items" where I' sending GET request i'm getting 401 despite credentials: "include" in fetch. Any help (react)? I do not have acces to Api configuration.

@RahulAhire 3 года назад

Set credentials include to true as I mentioned in the video. If you can't seem to accept cookies then use req.cookie.'yourCookieName' as mentioned in the pinned comment. Is this the actual issue?

@matatixx 3 года назад

@@RahulAhire Problem solved, pro tip for everyone, if you're working with cookies, remember to allow cookies in your browser. Yes, I wasted a significant amount of time because of that....

@daviddoyle7580 Месяц назад

Great video Rahul, one question, if I'm using react aws cognito to supply my access tokens on the client, is there a way to pass them securely to my API call on the backend in a http only cookies, it's my understanding that local storage and non http only cookies are vulnerable to xss attacks but http only means that I can't pass the token as the JavaScript on my front end can't see them ?

@RahulAhire Месяц назад

In production, have a common base domain for eg. the frontend is google.com and the backend might be api.google.com and rest all the principles follows the same as I've shown in the video. How to send them? - if you are using axios then use the with credentials settings to attach the http cookie on each request you send to the server. flaviocopes.com/axios-credentials/ Edit - you're right http cookie are not accessible by javascript. You can still view them in cookie tab in dev tools only for yourself just like how you own the keys of your home.

@daviddoyle7580 Месяц назад

Thanks for the reply, I think my problem is that I'm using amplify authenticator which gives the tokens to the client and I can't create them server side as this library is client side only.

@RahulAhire Месяц назад

@@daviddoyle7580 well see if you can send those token from backend sort of proxy via set cookie method. Other than that, I don't know how cognito specifically works so can't tell anything about it.

@daviddoyle7580 Месяц назад

@@RahulAhire Thanks for the reply, I think the tokens should just always be received initally on the serverside for safety, I dont even understand why AWS made this Amplify client side library in such a way that its xss vulnerable.