JWT Authentication Tutorial - Node.js and React

[@khalidrafi1111]

UPDATE: at 55:20 the correct import syntax would be "import { jwtDecode } from "jwt-decode";". Then also update the initialization of the decodedToken later on by replacing "const decodedToken = jwt_decode(user.accessToken);" with "const decodedToken = jwtDecode(user.accessToken);"

[@augustzilakovs3105]

After hours of googling and looking at other guides this is by far the best one. Straight to the point and covers exactly what you need to know about how to use JWT. Thank you.

[@jeminaldennis325]

you're the MAN... long live Lama Dev

[@javhaasuhochir8126]

You are the best teacher I ever seen In my school and KZbin. So easy, so clear. This is the best tutorial I ever seen in my life. thanks my friend. You really saved my life from struggling with jwt for months. Really THank you man.

[@Pareshbpatel]

A very easy-to-follow tutorial on JWT Authentication in Node/React. Thank you, Lama Dev {2023-03-22}

[@muhammadismail5342]

Best channel on KZbin for MERN stack mastery.

[@msunrl8577]

dude wtf, best tutorial of jwt, after checking like 10 Thanks!

[@mdbillalyasir]

YOU TOOK MY REQUEST THANKS, DUDE! ALWAYS WILL GET SUPPORT.

[@enriquealejand26]

Thanks Man, I am from Venezuela, I don't understand much English, but I can tell you that your video is the best, coz there are not videos in Spanish that explained as I can refresh the access tokken.

[@Jimmy-zt5io]

yo tmb soy de Venezuela bro, lo malo aqui es que si uno refresca la pagina se se cierra la sesion del usuario

[@wasteghost]

Really helpful tutorial, I couldn't find a good one for some time and yours is perfect!

[@papesonko]

Simple clear and concise, thank you very much lamadev !

[@RianY2K]

thank you for tutorial, JWT is mandatory nowadays.

[@shubhamdhumal6854]

best tutorial to learn understand and implement JWT. Great work!

[@izureki]

The only insightful video on jwt, THANKS!

[@haiphaminh1462]

Thank you ! I was waiting for the full reactjs+nodejs make e-commerce website

[@TomDoesTech]

Why is there a different endpoint to exchange the refresh token for a new access token? This seems like it would make building the UI very difficult as you need to try to hit the endpoint, see if the error is unauthorized, if it is, get a new access token and try again. I think this should be done automatically on every request. If the access token is expired, given them a new access token and continue processing the request.

[@saravanan925]

thats what he did right?

[@TomDoesTech]

@@saravanan925 He created an endpoint to exchange the refresh token for an access token. Is that what you're asking?

[@marcusaureliusregulus2833]

Did you watch till the end? There's a function on the frontend that automatically refreshes the access token if it is expired (No UI included)

[@TomDoesTech]

@@marcusaureliusregulus2833 yeah, why? why not do that on the backend?

[@marcusaureliusregulus2833]

@@TomDoesTech I guess it could work either way.

[@coder5336]

I was waiting for the jwt tutorial. It's the best as always

[@moshem4968]

5 Minutes in I knew it's gonna be a great tutorial. Was right. Thank you!

[@Matheus-lk9lh]

Your content is the best on internet, thank you very much

[@bingsenlim3121]

Hi I have a question. It seems like in this tutorial, you are always logged out after you refresh. In your React Social Media tutorial, you stored your user object in localStorage to let the user remain logged-in after page refresh. My question is, since you need accessToken to do stuff like delete posts etc, wouldn't you need to store accessToken in localStorage also? If you don't store accessToken in localStorage (only store in useState or useContext), after the user refresh the page he/she cannot delete post anymore since the accessToken state/context will be null. But if you store it in localStorage, doesn't this defeat the purpose of jwt, because hackers can see it from localStorage. So how do I use JWT, and at the same time, pass down this accessToken if my user refreshes the page?

[@developerbox3079]

same problem . did u solve it ?

[@bingsenlim3121]

@@developerbox3079 This is what I saw from someone's post from stack overflow: 1.When you do log in, api sends 2 tokens (Access token, Refresh token) in response to the client. 2.The access token will have less expiry time (may be 15min) and Refresh will have long expiry time (may be 7 or 60 days ) 3.The client (Front end) will store refresh token in his local storage and access token in cookies. 4.The client will use an access token for calling APIs. But when it expires, pick the refresh token from local storage and call auth server API to get the new token. 5.Your auth server will have an API exposed which will accept refresh token and checks for its validity and return a new access token. 6.Once the refresh token is expired, the User will be logged out.

[@developerbox3079]

@@bingsenlim3121 thank you! I will search more about it

[@SF-qf4fu]

that's because he is giving the token a expiration of 5 sec, put 1d or in miliseconds 86400

[@tusharverma2249]

Please can you tell at which section of social media tutorial he save user in localStorage. I want to see but unable to find that part.

[@SimpleCoding]

really awesome tutorial, love the way you explain things

[@next_codes]

Hi Lama, Thanks for this great Tutorial, I want to specially request if you'd explain how to store the refreshToken in real Mongodb Database and not locally as an Array. I also would love to see what the refreshToken model looks like. would you create a separate schema for the refreshToken or just add it to the existing user model as type "Array" Please anyone can help me in this area, it's really challenging me.

[@klhmia]

I think it's most secure to create the 'refreshToken' array as part of the User schema. This is what I've done. Then, instead of checking the local array as in this example, we would call an async method to find the user in our DB by Id (which we get after verifying token payload and returning the payload in the callback of 'jwt.verify()'), then check this User.refreshTokens array to see if it includes the refresh token and either add or remove depending on your action.

[@jimenakatu1178]

I would also like to see that and the other way that @Karsen LH said

[@next_codes]

I have been able able to resolve the challenge. Thanks

[@jimenakatu1178]

@@next_codes You did it by yourself or with help of other tutorial?

[@next_codes]

@@jimenakatu1178 I decided to try completing a full CRM /ERP project and along the Line I met more complex logics and situations. That exposed me to wider knowledge, turning back to check on this one, i found out it was just a walk over. I did it myself.

[@vivekchaturvedi3897]

i didn't understand "req.user = user", req.user stand for what? in 23:30

[@yash_______105]

here we have assigned new property to req as like req have body , header now req also have user property. I hope u got it

[@ryanpark3523]

You are the best Lama~!! The content is so informative!! Thank you so much~!

[@AdamElMou]

Thank you very much, I really love your videos, thank you for making us better everyday

[@luckylovely7782]

I love you so much. I want to support you but I lost my job for 4 months.

[@jaggyjut]

when do we use JWT over something like Auth0 or Google Firebase Authentication?

[@user-ul2mw6fu2e]

why you dont use refresh token in ecommerce project.I am little bit confuse with that

[@ianfrye8988]

I love your videos. Thank you for this!!

[@brianbg941]

I love your videos!. Thank you so much, greetings from Colombia

[@praveen_javali]

very well explained !! thank you for JWT tutorial

[@yasin_bhojani]

Thanks very much, tutorial was very helpful.

[@debajyotipila982]

It seemed really easy thanks for the tutorial.. Gonna revise again while making netflix clone (streaming platform) ☺️☺️

[@yashmadaan8067]

Thanks for your great tutorial

[@mohitagrawal1555]

i faced a problem in auth so i am writing this to help other : if your access token expire after some time then In axios Instance interceptor add "" config.headers["authorization"] = "Bearer " + accessToken; "" because after the token is refresh the axios instance headers will not update automatically . I Hope i was able to explain what i want to say.

[@klim5026]

Love your videos, thanks for the uploads

[@souravsarker3913]

Nice work. Just want to know why not making use of cookies ?

[@otubusinademuyiwa]

You are doiing an amazing Job. Thanks

[@amanagarwal8009]

i have a question. When i reload the page... it will ask for login credentials again and again.... How do i tackle that?

[@ananthac6472]

why should we use the word Bearer before the token? , thanks :)

[@okhunjongaybullaev2559]

Helpful information, thanks

[@shakthinaarayananr7639]

Why you are using state variable to store the user Data ? Can we store it in cookies/local storage ?

[@jellyfish1772]

Okay I have a question.anyone help ? When logging out why do I need to verify?I mean the goal is to delete the refresh token from the array.Its all about the refresh token! So why bother sending the access token as well?? We did not send the access token when refrshing,,because that was also about the refrsh token!

[@saulehuu5867]

Do you have a project to configure interceptors for the entire app?

[@thomasc2532]

How am I supposed to store the refresh token in my mongo database? should every user have their own refresh token so i call it like 'user.refreshToken' or should they be completely separate from users ?

[@saravanana5125]

You can add a new refresh token in users model.

[@siamahnaf6760]

But, we miss logout from react. How can we stay logged in. Should I store refresh token in browser cookies or local storage

[@javalover7570]

Abi videoların baya güzel yeni fark ettim kanalı. :) Teşekkürler videolar için.

[@birkbirk1204]

hocam selamlar, ben daha yeni başladım kodlamaya, videonuzu izledim teşekkür ederim sonra, uyguladım kendi uğraştığım bir siteye, access token ve refresh token elde ediyorum. refresh tokenları backende yönlendirdim orada tutuyorum. örneğin bir post atma işlemi yaparken kullanıcının access tokena erişimi olduğunu kontrol ediyor ekstra olarak, backende bakıp refresh tokenlede eşleşme şartı koydum. video başında dediğiniz gibi kullancı 2 nin sadece ismini bulup işlem yapamıyor. yeterli midir basit bir websitesi için

[@chilly2171]

Why did you have to put Bearer in the request header value? I don't understand. Why can't we just put the token there without the bearer.

[@lakshaythegupta]

What do delete user means? If the user is deleted how were we getting the access token with new refresh token even after deleting when we refresh?

[@islamicinterestofficial]

hi, I want that when a person reload page then it still logged in. How to implement this in jwt. I implemented in using local storage but its not good as discussed.

[@Ahmadavocado]

have you figured it out?

[@islamicinterestofficial]

@@Ahmadavocado yes. Just simply store the user id and jwt token in local storage. Then u are good to go

[@Ahmadavocado]

@@islamicinterestofficial why not store it in cookuies and enable httponly? localstorage is not so safe

[@islamicinterestofficial]

@@Ahmadavocado Its upto you. By the way cookies are also not safe. We're just storing which no one can understand because we only know the key not anybody

[@komalsethi3295]

Very helpful content thanks👍

[@marcusaureliusregulus2833]

I have a confusion. While logging out since we are only removing the refreshToken and not the accessToken, wouldn't they be technically logged in for the duration of the access token?

[@roshanparajuli]

yes they would! Thats why you don't keep the duration of accessToken for more than 10-15 mins.

[@muratkagan4260]

Thanks for your great tutorial Şafak. Should we use NextJs framework for fullstack javascript applications? what do you suggest ?

[@RiteshKumar-dx8wj]

you were ahead of your time when you asked this question XD

[@mauricenganga720]

Thank you Lama, you are the greatest

[@arumugamp3929]

Awesome explanation. Thanks.

[@chilly2171]

help, I'm doing this for my website but when user refreshes the page, the status is gone... wtf? Also, what's the point of a refresh token if you only bind it to a specific axios instance. So, if I go afk for 15 mins, I'll still get logged out, unless i delete a user.

[@aimoneyminded]

Lama we can't add new lines in the blog description. Can you please see to it?

[@sarwaranwar3485]

lama please make video on otp and email verification. You have helped us alot thank you so much

[@sede189]

super nicely done tutorial

[@codersdance]

So with refresh everything will be lost beacuse of the state?

[@adarsh-chakraborty]

Should i save refreshTokens in my User model on mongodb?

[@josealexisbetancurmira6058]

Thanks for this great Tutorial...

[@KazHachiOreki]

hey at 23:27 can you explain me what "req.user = user "doing ?

[@umargulzar2982]

Is it possible to store JWT token on Server side not on Client side Cookies???

[@kevinmaina5250]

Hi Lama, Thanks for the tutorial. I'm however stuck when logging out. I'm trying to log out by redirecting back to another page but it keeps failing. Kindly assist

[@thatsmeee111]

Who can tell me why we create a new instance axios please i can't understand that

[@mandayli9641]

so refresh token is only there for refreshing access tokens?

[@youhaveto2023]

Hi,i tried using it with the blog project i'm stuck. Could you do the jwt tutorial with the blog project please

[@alivelidurali]

you are my best teacher.

[@kemerios1]

23:42 what does next() does?

[@newtechnology5941]

After function verify() is finished, next() came into the picture to move into the new function (in this example we move on to arrow function (req,res) )

[@kemerios1]

@@newtechnology5941 Understood, thank you.

[@ahamek]

what keyboard you are using?

[@dijiflex]

Shouldn't the access tokens be stored in a HTTP only cookie?

[@profitmasterynow]

Yes they should you should use jwt and cookie-parser with httpOnly and secure if you have HTTPS

[@noyou174]

my brain explode XD ,ty for the great content

[@henrymou8128]

It would be wonderful if you could use this tutorial on blog project. I really confessed. I can do only Auth . But i can not implement on blog project.

[@benbenpigpig]

This is a really straightforward tutorial. Thanks Lama. Is there a reason why we must include "Bearer" in the authorization string?

[@oscargm1979]

Is "Bearer "

[@iamshivarth]

You can add anything before the access token but it should be separated by space. eg: BeN . The concept is to split the value of the key 'authorization' in 2 parts. So after splitting, 'BeN' & '' will come in an array. You have to take only the real token so that it can be verified with the generated one. That's why lama has used const token = authHeader.split(" ")[1] ;

[@themalelibrary5072]

could this also be implented into vue?

[@rajnarayan9558]

thank you sir i was wating for this

[@Corntrop]

Awesome JWT tutorial

[@didieroficialdev]

Perfect!!!!!! i will buy u a coofe! cheers from Perú btw you should make an example like Google auth i mean when you login from other country or device and google send you an alert if you are loggin from there... i hope you can understand thanks!

[@agustinpolegre7667]

the proxy doesn't work, any advice? :/

[@ucthainguyen289]

Please can some one tell me how to link backend with React?I tried to login many times but nothing happened :(

[@Harsh-eo7xo]

You are amazing. Love you.

[@unfortunately816]

How can I make the client part tho..

[@nuruhussen-wo9wg]

best explanation

[@shujathaliirfan2662]

You are just fantastic

[@GyaniTuber]

blog is responsive or not??

[@abelmarkos5753]

can you do some MERN Ecommerce tutorial with authenticatiom

[@aniltheblogger]

Thanks for this tutorial

[@ryansharpe903]

Really good tutorial although not all functions are then replicated on the front end, such as the Logout function. Is there a reason for this?

[@chilly2171]

It's quite a badly done tutorial. He even used refresh tokens wrongly, and login states are also saved wrongly. His methods won't work in practise, because if you refresh the page, you're logged out lol.

[@gennbinaku7656]

@@chilly2171 is there any tutorial how to stay logged in when you refresh the page using node js and express. 🙂

[@raymondqiu8202]

@@gennbinaku7656 u probs have found out by now but i think u do it by saving the data to localstorage, that way it persists i think

[@syed9846]

awesome tutorial

[@modambheema4620]

I'm beginner share command for creating api file ... Please

[@saravananr7203]

How to connect react js and node js?

[@benarbiamohamedtaher546]

thank you ,great tutoriel

[@jossesuryapinem42]

how about the logout ?

[@fahimahmedsumon624]

thank you for this great tutorial ❤❤❤🫡🫡

[@henrynguyen8282]

Hi Lama, very appreciate for your tutor, If possible can you teach us how to pass axiosJWT in this video to contextAPI

[@codelett2139]

Are you from nepal coz you have name started with lama and here we have lamas and sherpas in himalaya😊

[@mbmalek92]

You are the great 👍👍 man

[@saandial3412]

Great tutorial thx! For registering, could you show how to implement admin approval needed before users can log in? This way only approved friends can create an account and sign in.

[@klhmia]

Just create a separate database of 'temp' users to hold registered users waiting for approval. Allow admins to elevate those 'temp' users to 'active' users, moving them to the 'active' database which is the one you would used to sign users in.

[@mrlectus]

What i was looking for was req.user = user;