Learn JWT in 10 Minutes with Express, Node, and Cookie Parser

[@WebDevCody]

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.

[@Dylan-yc9qs]

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!

[@velara314]

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?

[@wiktorwachowski6291]

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

[@James-g9n5e]

awesome dude....in 10 minutes you covered something that troubled me for hours...thank you.

[@MMH94MMH]

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.

[@fullstackmarketing247]

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

[@gavinv.4872]

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😆

[@duygukocar7623]

Amazing! I spent 2 hours trying to understand this simple thing from other videos. Thank you !

[@WewCode]

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!

[@WebDevCody]

Glad to hear it! I sometimes think those old videos become useless after some time.

[@Nick232u2]

You saved my brain from burning out! Thank you for explaining what JWT does!

[@SlainR2]

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?

[@WebDevCody]

Yeah that’s probably a good idea. A lot of people seem confused about auth / authorization / jwt in general

[@leonardoveque7157]

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

[@WebDevCody]

😂

[@zyrcon176]

Wonderfully clarified. Much appreciated!

[@mohitpal1505]

cookieParser is not for putting jwt in the users' cookie, but instead to read the cookie from incoming users requests for authorizing. When it comes to setting up the cookie initially by the server, that can be done without the cookieParser too

[@pedromora3520]

Wondeful! The content was clear and very informative. It helped me figure things out. Thank you a lot!

[@rotivanov]

Dude you are AWESOME! You are helping me to achieve so much! I love your work mate!

[@Kyle-wc6so]

I like the way you explain this. thorough and effective. thank you

[@israelruas948]

Thank you so much. Your video saved my application

[@slimyelow]

Chome will not set the cookie. It is received in 'Network' but in the 'Application' Tab it does not.

[@deepanshukant392]

You found any fix to it?

[@newtonw.1937]

I have the same problem....did you find a fix??

[@krishnakanthati8510]

Did you find anything?

[@Howtoclaim101]

Did you find anything?

[@liveupdate6467]

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

[@githmin]

Best explanation on JWT. TYSM!

[@KashanPardesi]

That was awesome, quick and to the point! Thanks!

[@shahrozabbas228]

Thank you, you made the things too easy.

[@planetmall2]

This is an amazing example and explanation. Thank you.

[@DalisYn]

this was such a clear explanation

[@AliAliOxenFree]

Nice explanation! Earned yourself a sub with this banger

[@rodrigocasarinperea4422]

Thanks broo! This is exactly what I was looking for

[@hemersonallan]

1 million likes !!!! tnx

[@mgnfy-view]

Well made video. Got it down instantly!

[@GarmrZero13]

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

[@WebDevCody]

I could do that next probably. Idk if I’ll do it in react since the concepts I cover apply to all frameworks basically

[@emiremark2889]

fantastic explanation

[@asfandiyar5829]

Exactly what I wanted. Thanks

[@piegpa]

Nice one, good overview, thanks!

[@WebDevCody]

Glad you liked it!

[@unitybr3222]

Thanks, you saved my world!

[@DaviMartins99]

Such a great lesson!

[@manzelo9855]

Really good work man :D

[@daredevil5186]

Amazing video man!

[@aniketbhalla1521]

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.

[@piotrjasiulewicz408]

god tier tutorial

[@darkfoxwillie]

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 :)

[@WebDevCody]

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

[@압둘하미드이드리스]

How did you implement this: could you share link to learn this and the basics too?

[@gonzalorobledo9947]

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?

[@WebDevCody]

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

[@gonzalorobledo9947]

Ok, thanks!

[@soundarTech]

Iam facing same issue , but in my case cookies come to frontend, but it doesn't set into every request to backend . Can you help me bro ?

[@sede189]

Nice job. May be you can add another section to use an actual oauth issuer like okta

[@neoTriny]

Thank you sir, its awesome 🤝

[@egeozel80]

Very nice, thanks and good job.

[@hoanglongluong4355]

With your doing, I wonder if two different account logins are on the same device. How did the server return and manage their cookie & token? Can you explain this situation, many thanks

[@ares5751]

im a student and i am only developing on localhost at the moment. could you please explain if this requires an actual extablished connection (which i dont know how to yet) or if i can slap this on my project and will work on localhost without issues? i saw you have declared a variable for a port, but thats where my knowledge about connections ends

[@brunonery8098]

Thk bro! Thats a great video!

[@andylib]

This was great, thank you!

[@RatherBeCancelledThanHandled]

Well explained :)

[@awaraamin6850]

Great input, thank you

[@SeibertSwirl]

Good job babe!

[@tunaalkan5407]

Thank you do you have the full tutorial?

[@RaviKumar-wx1yt]

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

[@whiteknife5993]

same problem. Did you solve it?

[@germanoller4418]

thanks mate, raelly helpful

[@7906jun]

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.

[@WebDevCody]

You would use the req.user.id to fetch data from the database that belongs to that id.

[@MrMome1612]

Your hand is freakishly huge😱

[@Yusuf-ok5rk]

best comment ever

[@sharathkk1807]

very useful tnq

[@chel3391]

Great job, thanks!

[@Robin-os1os]

Thanks cookie parser !

[@roebienarnaiz]

Great Video!

[@fluttterdev1k]

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?

[@ramiworkstation]

Thank you 💌

[@ruhitbaidya9910]

Pretty explain ❤️❤️❤️

[@nqssss]

THANK YOU SO MUCH

[@vaisakhgopinath3346]

Nice explanation

[@WebDevCody]

Thanks for liking

[@myke6972]

Hello, Im having an issue where there''s a response header for set-cookies, but no cookies ion the application storage, why is that?

[@myke6972]

please answer D: i literally keep searching for 5hours now, ofcourse i have breaks but its been 5hours, and im just a abeginner

[@VayunEkbote]

I can see the set-cookie in the response headers but cannot see the cookie in the application tab. Why is it so?

[@newcode7847]

Hi, did you find any solution ?

[@VayunEkbote]

@@newcode7847 you need to set the secure to true

[@TyquanWorldNN]

@@newcode7847 You have to set the domain value to "localhost" when your making a res.cookie([nameofcookie], [value], {domain: "localhost", path:"/"})

[@bamideleprecious3481]

​@@VayunEkbotestill not working

[@haritpatel5001]

we gotta send the withCredentials: true, in axios while making a request, it should resolve your problem.

[@justine_chang39]

awesome video

[@soduno596]

What is going through my head is if the user guess the secret thats on the server, then they can easilly manipulate the JWT? Would it be valid to use secrets rotation for this purpose?

[@WebDevCody]

Yes but how would a user guess the secret? If it’s 32 characters long it would take way over a trillion years to brute force. But yes you should rotate secrets every so often in case you leak one

[@sabuein]

Thank you.

[@velara314]

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

[@ashith-m3e]

why the application tab cookie not setting can you explain

[@iiinicky6224]

Thanks!

[@shahidabbas2932]

Sir setting req.user = user not working in typescript ? const user = jwt.verify........... how it extract user from jwt automatically?

[@mjylove2]

awesome

[@rjwhite4424]

so every 15 minutes I have to log back in?

[@notfadeaway6617]

nice video.

[@vladislavivanov1546]

Hey man, what's the name of the theme you are using? It looks smooth

[@WebDevCody]

shades of purple

[@rajendraraj8810]

Subscribed!..

[@mrlectus]

does this also keep the user logged in?

[@seanfrancisco76]

Do you have a file that works for aptopayments specifically? thanks!

[@CansinLale]

Cookies header is full but cookie is not stored

[@naufalnasrullah6965]

3:53 Is it the backend, not the frontend, that set cookies on the user's browser? pls answer me :(

[@WebDevCody]

The backend sets a response header which tells a browser to store a cookie

[@naufalnasrullah6965]

@@WebDevCody in other word, frontend don't need to set the cookie again right?

[@WebDevCody]

@@naufalnasrullah6965 correct

[@naufalnasrullah6965]

@@WebDevCody is it best practices that used by industries/developer? I'm still student so i confused..

[@blazi_0]

​@@naufalnasrullah6965 yeah bro absolutely, also you need a route to refreshing tokens so when token expires on front end you his this route to get and set new token in the cookies

[@r0bits593]

I dont understand how does your browser know on how to save the received cookie in the Application -> Cookies tab

[@WebDevCody]

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

[@r0bits593]

@@WebDevCody Done! Thanks, its working now

[@FirstLast-rp7jq]

can you make a tutorial with refresh token?

[@satorugojo7140]

can you help me with authorisation through headers

[@tibz9257]

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?

[@WebDevCody]

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

[@eyaouni-vg4ji]

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

[@tfandrad3]

​@@eyaouni-vg4ji help me bro

[@henriqueb5637]

@@eyaouni-vg4ji Could you please share how you managed to solve this problem?

[@henriqueb5637]

@@tfandrad3 I have the same issue. Did you find the cause? Please share it

[@smitagravat1063]

I am getting token in postmen but it is not being saved in cookies in chrome

[@deepanshukant392]

You found any fix to it?

[@tfandrad3]

Me too, anyone fix this?

[@whiteknife5993]

Did you fix it?????????????😭😭😭😭😭😭😭😭

[@smitagravat1063]

I fixed it like a year ago and now forget what was the problem

[@dkkprajapati]

cookie-parser is not working on production this is working only in local

[@sekarana9865]

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

[@WebDevCody]

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.

[@sekarana9865]

@@WebDevCody Thanks for prompt update..keep up the good work..

[@georgeomara]

💯

[@Robert-3691]

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

[@dorianmayamba6177]

Question why can we still access it in the browser if it’s in http only?

[@WebDevCody]

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

[@dorianmayamba6177]

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

[@newtonw.1937]

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

[@luciusjackson3399]

same problem too

[@luciusjackson3399]

input this code in your cors middleware const allowedOrigins = ['localhost:5173']; // Add your frontend's origin app.use(cors({ origin: (origin, callback) => { if (!origin || allowedOrigins.includes(origin)) { callback(null, true); } else { callback(new Error('Not allowed by CORS')); } }, credentials: true, // Allow credentials (cookies) })); and when fetching data with the fetch api add this options const options = { method: 'POST', credentials: "include", };

[@ammarys9980]

quick note, YOU DON"T NEED cookie-pareser anymore.

[@pareshgupta3288]

Chrome is not able to fetch Api but Postman can fetch it easily, Can anyone help with this error 😢😢😢😢😢😢😢😢😢😢😢😢😢😢?????

[@learncomputer8526]

My jwt token not store in cookie

[@learncomputer8526]

Solution kha ha

[@armankazi1799]

Vs code theme name?

[@DollyCleveland-l1f]

Jones Nancy Lee Kenneth Garcia Cynthia

[@WalterWilliamse-i3s]

Davis Matthew Harris Steven Brown Angela

[@graphiclife5416]

expiration 1 hour, that is so unrealistic. So person needs to login every hour. Come on don't just copy paste tutorials from other people.

[@WebDevCody]

It’s calling teaching. If you want production quality get a job

[@abulsyed4851]

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.

[@WebDevCody]

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.

[@abulsyed4851]

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

[@WebDevCody]

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

[@jotaroisdarius1918]

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

[@AhmedHuzain]

Very useful. Thanks!