Using HttpOnly cookies in React & Node | Storing JWT Tokens or SessionID Securely
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.thi...
Additional stuffs:
Github Code : github.com/MeR...
Stackoverflow - Make Axios send cookies in its requests automatically : stackoverflow....
Cookie Priority : stackoverflow....
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
Пікірлер: 372
⚠️ 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 - kzread.info/dash/bejne/m3io186eqqa_g8Y.html
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.
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.
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.
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.
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.
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..
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
3 жыл бұрын
I don't know what to say but thanks for your appreciation. Really means a lot 👊.
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 : kzread.info/dash/bejne/hJZkl8uofLCqpLA.html
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!
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.
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.
Wonderful tutorial. Indepth, clear explanations👏🏾
@RahulAhire
11 ай бұрын
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!
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.
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.
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.
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?
Underrated video, deserves more attention. Nice job!
@RahulAhire
3 жыл бұрын
I'm happy you liked it
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
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..
Very insightful content. Thank you for creating your time to share the knowledge
Great Explanation,..... very clear and straight forward........ ❤
@RahulAhire
Жыл бұрын
Thanks Ejaz, good to hear that it worked for you.
Thanks a lot, brother, your all videos are informative.
@RahulAhire
9 ай бұрын
Thanks Yash, I appreciate your comment.
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 ❤️
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 : kzread.info/dash/bejne/hJZkl8uofLCqpLA.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
love how you said, we are going to shamelesly copy this like every programmer do, gotta love honest people.😁
@RahulAhire
2 жыл бұрын
Thanks Timotius 👍🏻
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.
Big thanks Rahul, that was so helpful bro
@RahulAhire
2 жыл бұрын
Thanks for the feedback, good to hear that it helped you.
thank you very usefule video for learn http cookie in details .🙏
Pretty good explained video helped so much thanks.
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.
Subscribed. I found the answer in your video for my particular problem. Thank you!
@RahulAhire
3 жыл бұрын
Thanks Coolemur, highly appreciated 🔥
Thanks man great video!
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.
bro 21:45 was epic thank you for helping
Nice video Rahul, thank you so much!
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.
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.
Very well explained and also answered my questions on same site, thanks
Boiii, you just saved me a hell lot of time! Thanks
@RahulAhire
2 жыл бұрын
Thanks Nishad, I'm glad I could help you.
This saved my day thank you
Thanks! 🧡
Nice explanation. Thanks ❤️
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
Well done, Bro
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..
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: kzread.info/dash/bejne/poSNzJWfdq2tms4.html (an example).
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.
Can you please make a tutorial to setup wordpress JWT Authentication for WP REST API, and create a secure auth system with httponly cookie?
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?
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
11 ай бұрын
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.
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
Thanks Rahul
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
this typing fire effect is awesome)
@vladosononame6376
3 жыл бұрын
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
3 жыл бұрын
@@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
3 жыл бұрын
@@RahulAhire thank you, you are beautiful person, im subscribing
@RahulAhire
3 жыл бұрын
@@vladosononame6376 🙏🏻
@vladosononame6376
3 жыл бұрын
@@RahulAhire 🙏🏻
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
2 жыл бұрын
Good to hear that
This was really good, thank you!
@RahulAhire
3 жыл бұрын
Thanks Ajith, I'm glad that you find it useful.
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.
BIG THANKS!!
Awesome!!
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??
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
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.
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
Ahh bro, Really thanks a lot. I did it finally 😢
@RahulAhire
6 ай бұрын
Good 👍🏻, I hope it helps you to build secure apps.
Great. Awesome explanation, got a clear idea. PS: Please stop using "as well" at the end of every statement. :)
@RahulAhire
3 жыл бұрын
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
3 жыл бұрын
@@RahulAhire great content man , your content is exactly what I need now 😂 Watched you Aws lamda export.handler video. Great work 👍👍
@RahulAhire
3 жыл бұрын
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
3 жыл бұрын
@@RahulAhire Can we use httpOnly cookie to implement "KEEP ME LOGGED IN" feature on website ?
@ruthvik_4737
3 жыл бұрын
@@RahulAhire Just refer to this thread and share you views please stackoverflow.com/questions/1354999/keep-me-logged-in-the-best-approach
I will try this tomorrow, actually i got a bug similar to react and cookie. I will definitely comment again❤️
@RahulAhire
3 жыл бұрын
Sure no worries 🙂
@bunnybloods768
3 жыл бұрын
@@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
3 жыл бұрын
@@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
3 жыл бұрын
@@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
3 жыл бұрын
@@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.
Nice job
Good stuff
thank you. really clear explanation.
@RahulAhire
3 жыл бұрын
Thanks nien for watching this video. I'm happy that you find it helpful...
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/
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
2 ай бұрын
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
2 ай бұрын
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
2 ай бұрын
@@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
2 ай бұрын
@@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.
Great tutorial thanks!
good tutorial "as well" :)
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.
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.
Thx It was really helpful video
@RahulAhire
2 жыл бұрын
Thanks hrutvik 👍🏻
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
2 жыл бұрын
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.
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.
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.
thank you for the tutorial 🙏
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
2 жыл бұрын
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
2 жыл бұрын
@@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
2 жыл бұрын
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
2 жыл бұрын
@@RahulAhire thanks !! Got everything working now . The first method worked for me.
@RahulAhire
2 жыл бұрын
@@haha7836hahah great 👍🏻
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
Great Tutorial....
@RahulAhire
2 жыл бұрын
Thanks
You the man!
Hey Rahul, good informative video....you didn't give example for Local storage...What practical example is there for local storage ?
@RahulAhire
2 жыл бұрын
I didn't quite got your question? Can you please elaborate more on what would you like to know more about local storage?
@sourabhkulkarni1731
2 жыл бұрын
@@RahulAhire you gave example for session storage with KZread speed running from 2x to normal 1x on change of tab in chrome.... Similarly what is the example for local storage usage?
@RahulAhire
2 жыл бұрын
@@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
2 жыл бұрын
@@RahulAhire Thanks for answering.
appreciate u bro
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.
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.
thank you. this is really helpme
@RahulAhire
3 жыл бұрын
I'm glad you find it useful..
thank you so much sir
If the domain name for frontend and backend are not the same, then what should we do. Bcoz in my case, the domain or subdomain are different. My frontend is on local host but backend is hosted on a remote linux server
@RahulAhire
Жыл бұрын
Http cookie work do work on subdomain where the base domain should be same.
@YashodanandanRadhaMadhavDas
Жыл бұрын
@@RahulAhire Thanks for reaching back. So just to confirm if both back and frontend are on lets say localhost or any custom domain name but are hosted on different ports, thats not an issue right? And secondly, lets assume worst case senario that i cant get same domains. Is there a soution or a way around for that?
@RahulAhire
Жыл бұрын
No, for hosting it'll only work with one domain and all its subdomain.
@YashodanandanRadhaMadhavDas
Жыл бұрын
@@RahulAhire Ok thank you very much and thank you for saving me a ton of time. I had already wasted 3 days on this before this video.
@RahulAhire
Жыл бұрын
@@YashodanandanRadhaMadhavDas just make sure you configure the samesite and cors properly for subdomain on backend code to make it properly.
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 🙏
video starts at 16:43
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!
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
Thanks Bro very useful video
awesome tutorial..
@RahulAhire
Жыл бұрын
Thanks 🙏🏻
Great work keep going.
@RahulAhire
3 жыл бұрын
Thanks 👍🏻
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.