Learn JWT in 10 Minutes with Express, Node, and Cookie Parser
Vložit
- čas přidán 30. 03. 2021
- I give a quick overview of how to sign/verify JWT tokens and place them inside a cookie to do authentication on your secured express API routes.
Btw, you'd want to learn more about using refresh tokens so that a user can refresh their short-lived JWT tokens. I may make a part 2 for this video to talk about that topic.
------------
🔔 Newsletter eepurl.com/hnderP
🤓 ES6 Udemy Course tinyurl.com/yxdvf2zl
🐦 Twitter / thewebdevjunkie
📷 Instagram / thewebdevjunkie
💬 Discord / discord
📁. GitHub github.com/codyseibert/youtube
If there is anything you were disappointed I didn’t talk about in this video, let me know and I’ll make another video to cover it. Maybe refresh tokens is something I could have covered.
Great video man this helped me a lot. Can I just make one tiny suggestion for future videos? So ive used JWT without cookie parser so im familiar with how JWT works. I think it would be more helpful to a wider audience of people if you coded some of the stuff in the video. Just a tiny suggestion because I believe you are really good at explaining these things.
Anyways thank you for the video!
If the user interacts with the site then the timeout resets correct? Is JWT a library on npm or an approach for authentication? Have you thought about creating a basic register/ login site?
Yes, exactly that's what I thought. You should have at least mentioned them even if you didn't plan to go deeper so others could get to know that this thing exists
Amazing! I spent 2 hours trying to understand this simple thing from other videos. Thank you !
You are a legend! After combing through videos with people never quite explaining how to generate/store JWT tokens (securely), this was the video that put it all together. Thanks! My login portal will be built in your honor😆
I'm a PHP developer and this topic was one of the most confusing parts for me and I was looking for a simple explanation to understand this concept and you did very well, thank you very much.
You saved my brain from burning out! Thank you for explaining what JWT does!
This is an amazing example and explanation. Thank you.
That was awesome, quick and to the point! Thanks!
hey man long term viewer here! i just wanna say even your old videos really help me out i was trying to get my jwt to work for the last 3 days and i finally got it thanks to you and another youtube ben awad! just wanted to say thank you!
Glad to hear it! I sometimes think those old videos become useless after some time.
Dude you are AWESOME! You are helping me to achieve so much! I love your work mate!
Best explanation on JWT. TYSM!
this was such a clear explanation
I really like your videos, the manner you present the content always catchs my attention. Great work!
Could you do a full youtubes series about Authentication/Authorization?
Yeah that’s probably a good idea. A lot of people seem confused about auth / authorization / jwt in general
simple explanation for such an confusing topic, Thank you
Thank you so much. Your video saved my application
Nice explanation! Earned yourself a sub with this banger
Thanks broo! This is exactly what I was looking for
Lol I was literally 30 seconds and I had to stop and subscribe to this guy. I already know he's going to be excellent at explaining
Thanks, you saved my world!
Such a great lesson!
This was great, thank you!
Exactly what I wanted. Thanks
Very useful. Thanks!
Nice one, good overview, thanks!
Glad you liked it!
Very nice, thanks and good job.
Great input, thank you
fantastic explanation
Thk bro! Thats a great video!
Thank you sir, its awesome 🤝
Well made video. Got it down instantly!
Great job, thanks!
very useful tnq
Nice job. May be you can add another section to use an actual oauth issuer like okta
thanks mate, raelly helpful
THANK YOU SO MUCH
I wont watch your video because in the title has 10 minutes but actually have 10 minutes and 19 seconds. Great video my friend, merry christmas
😂
Really good work man :D
1 million likes !!!! tnx
Amazing video man!
Nice explanation
Thanks for liking
Thanks cookie parser !
Well explained :)
Hello bro! Good video in fact it was for a video of tokens that a subscribed to your channel jeje.
A question my bro, how should I store the token? Also why and how I need to use refresh tokens.
Thank you very much for your videos they are really useful :)
People say to store the token in a cookie similar to how I did in this video. I personally think you can store it in local storage just fine if needed
Thank you.
Pretty explain ❤️❤️❤️
Great video!
Great Video!
I think refresh tokens would be cool to go over. Ive been fiddling with them but have not yet figured a 'good' way to refresh a jwt with react
I could do that next probably. Idk if I’ll do it in react since the concepts I cover apply to all frameworks basically
Good job babe!
Thanks!
god tier tutorial
FIrstly, thank you so much for this video. It helped me so much. I hope you reach your subscribers goal. But I have one question. So, I noticed that you did "req.user". The user contains id, iat, and exp. But you never used this "user" you sent to the request object. So my question is, how and when would you need to use this "user" ?
Thank you for your time.
You would use the req.user.id to fetch data from the database that belongs to that id.
awesome video
Please do the same video video by setting the http only cookie at the frontend in a react app, making the SPA app's routes protected with each request. And also with sameSite set to strict. I'll be thankful.
Thank you do you have the full tutorial?
Your hand is freakishly huge😱
best comment ever
nice video.
Do we need to do anything on UI for setting up the cookie? I am receiving the Set-Cookie header but not seeing in the browser
same problem. Did you solve it?
Hey man, what's the name of the theme you are using? It looks smooth
shades of purple
Chome will not set the cookie. It is received in 'Network' but in the 'Application' Tab it does not.
You found any fix to it?
I have the same problem....did you find a fix??
Did you find anything?
Did you find anything?
You have to set the 'Access-Control-Allow-Credentials' header by the server and if you are using axios or fetch, the add a 'withCredentials' option and set it to true
💯
Do you have a file that works for aptopayments specifically? thanks!
Excellent explanation, one question, in localhost everything works fine when connecting frontend with backend, but in production (backend in railway and frontend in vercel) the cookies never arrive to the front and therefore does not start the session, what can I do?
I’d probably get your api hosted as a sub domain and setup the policy to allow wildcard certs so the same cookie will be forwarded on both the ui and api requests. If you put something in front such as cloudflare, it’s possible to make rewrite rules do your api can be accessed with a /api subdomain path I think
Ok, thanks!
Subscribed!..
Sir setting req.user = user not working in typescript ? const user = jwt.verify........... how it extract user from jwt automatically?
does this also keep the user logged in?
can you make a tutorial with refresh token?
In my code, I store the refresh token inside an HttpOnly cookie. Every time a user wants to open the website, it checks if the refresh token cookie is expired. If it is expired, the user is logged out and asked to log in again. If it is not expired, a new access token is created and the user is taken to the homepage without being asked to log in. The access token expires after 15 minutes, and at that point, the refresh token inside the cookie is checked again. If the refresh token is still valid, a new access token is created automatically, and the API request is made. Is there a problem with this approach?
can you help me with authorisation through headers
Thanks for this tutorial! Was really helpful but I can't get the "Token" Cookie in the "Application" tab even if I have the "Set-Cookie" in the Network response Headers...
I'm looking at some forums but it looks like Chrome don't want to set cookies on URL with port since a few version.. Any idea?
Double check secure is not set, and you have an expires value set? You also might need to set withCredentials: true if you’re using axios
@@WebDevCody thank you very muck i was searching for solving this problem for 7 days and u have help me i'm so thankfull for u ..Big respect
@@eyaouni-vg4ji help me bro
@@eyaouni-vg4ji Could you please share how you managed to solve this problem?
@@tarcisioandrade9816 I have the same issue. Did you find the cause? Please share it
I can see the set-cookie in the response headers but cannot see the cookie in the application tab. Why is it so?
Hi, did you find any solution ?
@@newcode7847 you need to set the secure to true
@@newcode7847 You have to set the domain value to "localhost" when your making a res.cookie([nameofcookie], [value], {domain: "localhost", path:"/"})
@@VayunEkbotestill not working
we gotta send the withCredentials: true, in axios while making a request, it should resolve your problem.
The set cookie is received in 'Network-(response header )' but in the 'Application-(cookie storage)' the cookie is not saved by the browser😔😔 ----help?? anyone??
Hello, Im having an issue where there''s a response header for set-cookies, but no cookies ion the application storage, why is that?
please answer D: i literally keep searching for 5hours now, ofcourse i have breaks but its been 5hours, and im just a abeginner
I'm in love with this content. I recently read a similar book, and I was completely in love with it. "Mastering AWS: A Software Engineers Guide" by Nathan Vale
Hi could you please clarify my doubt if some one steal a valid JWT token and send behalf of us , how it should be validated in this case..
if someone steals your token there isn't much you can do, and it would probably be hard to know if your token was stolen in the first place. You could try implementing some type of blacklist to check if the token should be considered "invalid", but at that point, you are defeating the purpose of using JWT for stateless requests.
@@WebDevCody Thanks for prompt update..keep up the good work..
so every 15 minutes I have to log back in?
Cookies header is full but cookie is not stored
I am getting token in postmen but it is not being saved in cookies in chrome
You found any fix to it?
Me too, anyone fix this?
Did you fix it?????????????😭😭😭😭😭😭😭😭
I fixed it like a year ago and now forget what was the problem
I dont understand how does your browser know on how to save the received cookie in the Application -> Cookies tab
the browser inspects your headers for the Set-Cookie response header, and if it sees it, it'll store the cookie in the browser's cookie storage
@@WebDevCody Done! Thanks, its working now
Question why can we still access it in the browser if it’s in http only?
Like access it in dev tools? Http only just means you can’t access it from javascript, this prevents any malicious script from reading your cooking and then forwarding them to the hacker. I think they keep all cookies visible in the browser so that users can see and delete cookies; you wouldn’t want a browser storing tons of cookies users don’t even know about
Alright so Chatgpt could be wrong 😂😂 I mean it makes sense because I saw that when the user tries to access it by the key it returns an empty string
Vs code theme name?
quick note, YOU DON"T NEED cookie-pareser anymore.
Just started this video and at 1:28 you have at line 8 you are destructuring the request body into an object. but what is the variable name!?!? …nevermind. i see. it’s not destructuring into an object but two variables. 🙄
My jwt token not store in cookie
Solution kha ha
Hi when I use local storage to save my jwt, I can easily check if the jwt exists in local storage and protect my SPA pages - if the jwt is in local storage. But when I try check if the httpOnly cookie exists using Cookies.get('myCookie'); I get undefined. But I can see the cookie in the chrome dev tools. I noticed the only work around was to set the httpOnly to false and then I could see my cookie. So yeah my question is if I wanna store as httpOnly: true. How can I access the cookie so I can protect my SPA pages.
The cookie will be sent on your http requests automatically. Usually you add withCredentials: true for axios and credentials: “include” for fetch and it’ll attach the cookie on the request.
@@WebDevCody no I mean how can I protect my react pages? Usually I would check if a jwt is stored in local storage and if it is, I will allow users to access the authenticated pages and vice verse if the the jwt doesn't exist in local storage. But with httpOnly cookie I'm unable to check in my react app if the cookie exists. I've tried for example but this only works when the cookie httpOnly is set to false. Can't I see if the httpOnly cookie exists from my react app? Since I want to check if it does - so then I can protect my pages.
@@abulsyed4851 oh you’d need to hit an endpoint on the backend such as /api/me to see if you’re authenticated or not. If it returns 200 status, keep a Boolean like isAuthenticated true stored in global state somewhere. When a route load, check for that Boolean and redirect if it is false
@@abulsyed4851 your react app can't check it but your server can since it's httpOnly, so you'd have to create an endpoint to check if you have that cookie and then you'd handle things according to the response