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

[@RahulAhire]

⚠️ 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]

how we use jwt token in cookies?

[@RahulAhire]

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

[@imnishantsharma]

@@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 - kzbin.info/www/bejne/n3XXpp-br6iMicU

[@vinitgupta1648]

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]

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]

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

[@gayatridevigovindarajula6228]

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]

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.

[@josephpetrie3204]

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]

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.

[@AlanFregtman]

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]

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

[@elvissautet]

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]

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

[@stanleyokonkwo2435]

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]

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

[@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.

[@BenElferink]

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

[@RahulAhire]

Thanks Ben for waiting by and watching the video. I do have another video on actually using jwt with httpOnly cookie check this out : kzbin.info/www/bejne/iJOTZpylgbJ3qq8

[@SyntheticProgramming]

Underrated video, deserves more attention. Nice job!

[@RahulAhire]

I'm happy you liked it

[@anthonyezeh7511]

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!

[@jeisongarzon6066]

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]

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

[@danieladeneye4170]

Wonderful tutorial. Indepth, clear explanations👏🏾

[@RahulAhire]

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

[@fidelisitor8953]

@@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!

[@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.

[@KojiKazama]

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]

That's great, happy to hear that.

[@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

[@forinda]

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

[@yerson557]

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

[@RahulAhire]

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

[@MikliOktarianto]

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]

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

[@tyronemguni3895]

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

[@RahulAhire]

How can I help you?

[@aakashrana1524]

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]

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.

[@timotiusanrez9492]

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

[@RahulAhire]

Thanks Timotius 👍🏻

[@ejazulhaq3168]

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

[@RahulAhire]

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

[@Yourguru9]

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

[@RahulAhire]

Thanks Yash, I appreciate your comment.

[@essaadi_elmehdi6784]

Big thanks Rahul, that was so helpful bro

[@RahulAhire]

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

[@Pizza872]

Pretty good explained video helped so much thanks.

[@nishadsandilya6653]

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

[@RahulAhire]

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

[@alejandrocoronado1131]

Thanks man great video!

[@focusiam2027]

Nice video Rahul, thank you so much!

[@vinujoy4311]

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

[@RahulAhire]

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 : kzbin.info/www/bejne/iJOTZpylgbJ3qq8 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]

@@RahulAhire thanks man

[@Allyourneedsmet]

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

[@creepyvlogs6885]

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]

It's an vscode extension - power mode

[@creepyvlogs6885]

@@RahulAhire thanks you

[@istiakalimran8199]

bro 21:45 was epic thank you for helping

[@techsamar]

That was an awesome explanation. Keep it up

[@RahulAhire]

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

[@darshanmarathe6077]

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

[@RahulAhire]

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 ❤️

[@udaym4204]

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

[@wakengames2318]

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]

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

[@coolemur976]

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

[@RahulAhire]

Thanks Coolemur, highly appreciated 🔥

[@Jobayer_Ahmed.]

Well done, Bro

[@faris.abuali]

Thanks! 🧡

[@vigneshwaran1516]

Nice explanation. Thanks ❤️

[@alexkey9372]

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]

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

[@alexkey9372]

@@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.

[@satyamrai4064]

This saved my day thank you

[@rikipebrianto560]

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

[@RahulAhire]

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

[@rikipebrianto560]

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

[@RahulAhire]

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]

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

[@8fed]

Epic vid, epic accent, epic info, thank you

[@RahulAhire]

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]

@@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: kzbin.info/www/bejne/qoG8m2ace696oM0 (an example).

[@mrvinaygupta]

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]

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

[@ajitha.r3671]

This was really good, thank you!

[@RahulAhire]

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

[@user-dc8dz1oi2v]

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]

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.

[@ruthvik_4737]

Great. Awesome explanation, got a clear idea. PS: Please stop using "as well" at the end of every statement. :)

[@RahulAhire]

Yeah even I realized that later. I'll make sure it won't happen from now onwards. I think it happens if I'm not sure what to speak next or my mind just goes blank for a blink of eye. But yeah from next time I'll be more prepared and aware in giving my presentation. Thanks for pointing that out 😊

[@ruthvik_4737]

@@RahulAhire great content man , your content is exactly what I need now 😂 Watched you Aws lamda export.handler video. Great work 👍👍

[@RahulAhire]

Thanks @@ruthvik_4737, I really appreciate your kind words. Between let me know if there was the problem of speaking too many "as well" in my lambda video. If it's there I'll sort it out in the next one

[@ruthvik_4737]

@@RahulAhire Can we use httpOnly cookie to implement "KEEP ME LOGGED IN" feature on website ?

[@ruthvik_4737]

@@RahulAhire Just refer to this thread and share you views please stackoverflow.com/questions/1354999/keep-me-logged-in-the-best-approach

[@HimasRafeek]

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

[@waylag9144]

Great tutorial thanks!

[@zidnawildanalfain1228]

BIG THANKS!!

[@investmentideas5101]

good tutorial "as well" :)

[@vladosononame6376]

this typing fire effect is awesome)

[@vladosononame6376]

aslo i want to thank you, you helped me to understand alot, i solve some of my proplems with cookies, i watched alot of different videos but they wasnt as helpful, all i want to say i got same resoults using react, proxy and fetch

[@RahulAhire]

@@vladosononame6376 you learnt to bake http cookie and will use it to make your app more robust, that's what I want from all. Thanks for coming by.. Glad I could share something...

[@vladosononame6376]

@@RahulAhire thank you, you are beautiful person, im subscribing

[@RahulAhire]

@@vladosononame6376 🙏🏻

[@vladosononame6376]

@@RahulAhire 🙏🏻

[@sugengutomo9147]

Awesome!!

[@joseluisperez5137]

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

[@RahulAhire]

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

[@jvalleybootcamp7095]

Thanks Rahul

[@alfianinda]

thank you for the tutorial 🙏

[@microwavecoffee]

thank you. really clear explanation.

[@RahulAhire]

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

[@alkas7366]

Great work keep going.

[@RahulAhire]

Thanks 👍🏻

[@nalcapital]

Thank you! Its fine

[@RahulAhire]

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

[@nalcapital]

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

[@RahulAhire]

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

[@mypd4937]

You the man!

[@TashriqueAhmed]

Good stuff

[@criscosmoes5745]

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]

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

[@FrTormod]

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]

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]

Have you setup cors correctly?

[@RahulAhire]

@@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

[@jervx829]

Same, I've been stuck for weeks because my cookie gets deleted every time i realoded, so i make self signed certificate for both my react front end & backend so i can test this. And it works, it doesn't get deleted.

[@RahulAhire]

Good to hear that

[@hrutvikmalshikare8531]

Thx It was really helpful video

[@RahulAhire]

Thanks hrutvik 👍🏻

[@zeeu]

Thanks Bro very useful video

[@t-dz6271]

Nice job

[@haha7836hahah]

Hi can you pls tell me if I deploy the frontend separately from the server then do i need to change the localhost cors origin in the server with the new deployed origin that i will get?? And what if i deploy react and server together on heroku for example . What should i put in origin then? Amazing explanation 💯💯

[@RahulAhire]

Atleast that's what the theory says so it should work. Edit: you should set the cors to the domain name of react frontend and you don't need to deploy your react in heroku. It can be anywhere eg. Cloudflare or netlify.

[@haha7836hahah]

@@RahulAhire thanks 👍👍 was searching about this for quite some time now!! But if i host my frontend and backend on the same domain then what will be the value of origin or is it that because the domain is same for both server and frontend i will not get a cors error?

[@RahulAhire]

If I'm assuming you're running react within express then set the cors to the localhost of the machine otherwise try the previous one which I suggested.

[@haha7836hahah]

@@RahulAhire thanks !! Got everything working now . The first method worked for me.

[@RahulAhire]

@@haha7836hahah great 👍🏻

[@vyshnavchikku1475]

thank you so much sir

[@Zzzz-iy9of]

thank you. this is really helpme

[@RahulAhire]

I'm glad you find it useful..

[@Cdswjp]

appreciate u bro

[@skhobbies5]

Great Tutorial....

[@RahulAhire]

Thanks

[@j2etech602]

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

[@RahulAhire]

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

[@nishitbirade7609]

The cookie is op bro

[@RahulAhire]

Oh thanks..

[@uktraveller]

awesome tutorial..

[@RahulAhire]

Thanks 🙏🏻

[@sourabhkulkarni1731]

Hey Rahul, good informative video....you didn't give example for Local storage...What practical example is there for local storage ?

[@RahulAhire]

I didn't quite got your question? Can you please elaborate more on what would you like to know more about local storage?

[@sourabhkulkarni1731]

@@RahulAhire you gave example for session storage with KZbin speed running from 2x to normal 1x on change of tab in chrome.... Similarly what is the example for local storage usage?

[@RahulAhire]

@@sourabhkulkarni1731 session and local storage are almost same only the difference being if you want to store any value for longer you can use local storage for it. If you have theme switcher then most site uses local storage to remember whether you chose dark or light mode and there can be numerous examples for it.

[@sourabhkulkarni1731]

@@RahulAhire Thanks for answering.

[@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

[@NguyenLe-nw2uj]

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]

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.

[@arpitkumarmishra6220]

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]

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

[@garbjorn1757]

Thank you

[@bunnybloods768]

I will try this tomorrow, actually i got a bug similar to react and cookie. I will definitely comment again❤️

[@RahulAhire]

Sure no worries 🙂

[@bunnybloods768]

@@RahulAhire hey it worked.thanks man. My four day struggle just gone thank you so much❤️❤️❤️. now another problem is how it remebers the cookies if i open the same link in another tab

[@RahulAhire]

@@bunnybloods768 I can relate with you. Even this video took me a week of hit and trial. I don't know what you are making but for that second part, you can use websockets

[@bunnybloods768]

@@RahulAhire i making a login auth with jwt, when the user successful logs in its send a jwt as a token, so if the user open another tab, it should remembers the cookies and logs in directly without asking any log in credentials

[@RahulAhire]

@@bunnybloods768 that's easy. See this article dev.to/petrussola/today-s-rabbit-hole-jwts-in-httponly-cookies-csrf-tokens-secrets-more-1jbp or I have a video on otp based login on my channel, feel free to watch it.

[@b2c205]

this is what a benchmark to indian youtube video should look like, not breaking down shi***y salaries, or package CTC and this nonsense crap they tell!

[@RahulAhire]

Kafi rich complement 😂, Thanks for watching. I'm glad you liked it. Between there are indeed new channel that are rising which does have unique perspective that we all need in software. You can also search for them.

[@tudang8892]

Thanks a lot

[@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.

[@veldasrdurai]

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]

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.

[@tonyriddle7646]

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]

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

[@brijeshrawat8474]

Thanks it help me

[@khurshidmalik565]

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

[@RahulAhire]

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

[@Ghizlanetech]

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]

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/

[@codecombination9337]

Hey Rahul, really nice video. I am unable to set cookies in browser it doesn't set them i found your video because i didn't wanted to use proxy field in package.json file such that i will be able to store cookies on frontend Is there something i am missing UPDATE: It is working for localhost but i am unable to set cookies for live my backend is on heroku

[@RahulAhire]

httpcookie requires samesite:true I think you should check that config and let me know what happens.

[@codecombination9337]

@@RahulAhire I did set the value for samesite when set cookie I set it sameSite:'strict' also want to mention that it is working on localhost but when i do same thing on heroku on my node app It doesnt set cookie in browser but i am getting it in response and front end app is on localhost:3000

[@codecombination9337]

anyone who is facing the same issue, as secure isn't visible on live, so it wasn't being shown in tab(application->cookies) also check that origin and credentials check.

[@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.

[@prasoonrajpoot4077]

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]

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.

[@abdelfatahashour]

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]

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.

[@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.

[@nikhilthadani4131]

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]

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]

@@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]

@@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.

[@jeelpatel6375]

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]

I didn't got what you meant to say.

[@trodoumanian5135]

Hey Rahul, very good video, thank you. I have a question: When using http only cookies, how can we give authentication to users for accessing specific routes only when the cookie is present?

[@RahulAhire]

I'm assuming by private routes is you want to it in frontend framework like react and next or any other as with backend, without any jwt token the private route api won't respond. So what you can do it when sending a http cookie that contains jwt token, also send an additional cookie which isn't http and has same expiration timestamp as the http ones. Now call that non-http cookie with javascript to check if it exists. By knowing it's existence, you can also define the existence of http cookie indirectly. Now if are paranoid about what if it doesn't work then you can always fire that cookie on a specific API route that just validates the https and send the JSON response whether it's true or false, valid or invalid, etc. Based on any above mentioned two methods you can implement conditional rendering to open the private routes. I hope this clears up. If you have any questions please let me know...

[@trodoumanian5135]

@@RahulAhire Thank You very much, I understood both of the solutions. Regarding the first solution, the hacker can have access to the non-http cookie, and because everything depends to that non-http cookie, then the hacker can have access to the protected routes. Am I right ?

[@RahulAhire]

@@trodoumanian5135 what do you mean by private routes? Is it on frontend or backend? First of all as safety measures you *shouldn't write the jwt token or session cookie into non-http cookie. Just give name and value as cookiePresent=true/false with some additional details as required for your application. And yeah specify CORS correctly. Modern browser are smart enough to prevent XSS attack by default so you don't need to worry about it. But do make sure on backend that you're verifying the input data before it gets nears to DB.

[@trodoumanian5135]

@@RahulAhire first of all Thank you very much for your collaboration. On the backend(graphql) I am verifying the data before getting to the DB. Now my problem is with the frontend(react). I am making a chat application, once a user is logged In, he/she will have access to /chatRooms route and hence enter or create a chat room. Now this is my issue: how to give access to the user that is logged In, using http-cookies. Thank you for your time, I really appreciate it.

[@RahulAhire]

@@trodoumanian5135 I appreciate all your kind words. 1. How to create private routes in react - please have a look at this video: kzbin.info/www/bejne/aJybf5-be896bas 2. How to verify http Cookie - dev.to/petrussola/today-s-rabbit-hole-jwts-in-httponly-cookies-csrf-tokens-secrets-more-1jbp If you have any confusion in these let me know...