Authentication With JWT Tutorial - React, NodeJS | How To 

Good video, despite the terminology confusion about authorization and authentication (these terms are used incorrectly in many occurrences)

Thanks a lot Pedro. I particularly like your sincerity when you encounter bugs and work to fix them. However, just like in one of the comments below, you seem to have mixed up the two terms authentication and authorization. While authentication helps you validate a user, that is, confirm if a user is signed up already, and should subsequently be logged in when the enter the right inputs, authorization helps you control who should access specific routes or resources.

Hey, Just wanted to say thank you for the quality content. Me and my brother (32 year old with a Degree in Industrial Engineering and Management & 29 year old with a Degree in Computer Science) learned so much from you about JWT, and about how Session works. This tutorial will be embedded into our website, and we will forever be grateful and in your debt! Thank you thank you thank you ♥ You look so young, how old are you?

This is a great series of videos. I'm working on a project for college using the exact same stack and wasn't sure what method I wanted to use for authentication, then I found your videos. Thank you for the time and effort to share this with us!

Great videos thank you. Keep up the good work! A tip on explaining the difference which may be easier for people to remember: Authentication = who are you? Authorisation = What are you allowed to do (i.e. login)

Thank you bro just because of you i solved my problem that was really irritating me and now i am going to finish my project in just time..

Good video. You didn't need the "Bearer" because that's not how it was accessed at the backend. The backend didn't manipulate the token to filter out the string "Bearer". The video was great!!!

Thank you! There is a bunch of tutorials that do not apply to a real project, and you getting your project and applying this concept on it, allowed me, to do the same, I have a project and I applied your logic in mine, worked like a charm.

Bro..you are a life saver man. Was looking for this for days. Finally found it. Continue on making such Quality content. Thanks man

Hours of frutration and horrible experiences with CORS. Found this video by chance and your cors configuration fixed my issues....I was setting the headers in the responses and using a cors configuration just with the "origin: []". The headers were not being "considered" when a request was made because of the middleware. I had no clue lol thanks a lot :D

You know what? I usually never like and comment but you were genuine about it. And the content is actually good. So have my like sir

Parabéns pelo vídeo, muito bom ver brasileiros falando um inglês fluente e fazendo tutoriais em inglês.

you're really really great programmer I learned a lot from you thanks a lot keep going bro and I hope you gonna become one of the famous programmers in the world love from Jordan

Thanks pedro, even though it still a lil confuse however your explanation were help lot alot in this case. Your video honestly is straight forward and are in the point. Keep your good work buddy.

U deserve million subscribers. Awesome tutorial. Keep it up bro 👊💪💯

Can you zoom into the code when ur typing but great video tho

Your video helped me a lot because I was taking a course in which the client was already realizing, so I couldn't know that it was up to me to put the token in my head, hahaha. Really thank you for this video.

Pedro sir This series is one of the best videos seen.

Hey Pedro Very good video, accurate. I was wrong for a long time, about 40 minutes. It was necessary to define next () for each auth that is performed otherwise I never have a response. Very Cool, keep it up brother Congrats!😀

Pretty sure you got meant to say authorization is the "who is allowed to do what" and authentication is "who is who"

You and Dev Ed have always the nicest explanation !!

Hi Pedro, I just wanted to thank you for these videos, I was struggling literally for a week on end watching another tutorial before a friend of mine recommended I watch yours and I've watched all 3 videos and it was truly a breath of fresh air, I was literally learning every step of the way and very easily at that too whereas the other video I followed, I was left feeling even more frustrated at the end of it because I didn't have a clue as to how I would implement it into my project. You should never stop putting tutorials out there, your teaching style is awesome and I literally come to your channel first to look for tutorials now. I do have a question for your though, I'd like to be able to implement what you taught in a production environment as I will be doing a few freelance projects and want to offer the best there is in the way of authentication and authorization to my clients, I know the 3rd video is the one that's more suited to it(if I'm not mistaken) and you also have another here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-b9WlsQMGWMQ.html which I've also watched but not followed along to as yet but I'd like to know if you have another video with a full production ready application using the same stack where you do the authentication as taught in the 3 part(plus the other) video series that you can refer me to please? and if not perhaps you could do one on that, as a beginner I feel it would be really nice to see how it all comes together. Again, thank you for putting such great content out there. I'll be jumping to your NextJs videos after this lol

Thanks dude. I have a wrong perception about jwt before watching our video. "That's very hard , Doe's n't understand easyly.". 🥵 But you will broke my wrong hope. your teaching way is pretty simple. Thanks again ❣

Great video, man! I’m from Brazil and I appreciate your work. Keep up!

dude, you have videos for all my questions :D thank you a lot!!!!

Everything is clear. Great job, Thank you!

Keep pumping this stuff out. Great job!

This awesome video helps me to code my first authentication api. Thank you very much!

I have an upcoming software engineering project and this will definitely going to help me man! Awesome. Thanks a lot.

Thank for this video pedro, for the trick, it is for example .. Bearer eidjflskflf .... which is returned as token, so we had to do req.headers["x-acces-token"].split (" ")[1] to access the token.

thanks man , let me use this method for my project too , i am happy to be here ,keep burning

Amazing! you have earned a loyal subscriber. Keep it up!

Your videos are the best! thanku for the content

MAN!!!!!! Did you send me down a rabbit hole!!! LOL First off, THANK YOU for your videos. They are awesome and exactly on the level I need. The bug however is that your cookie you set is not valid for 24 hours, but a thousandth of that (its in milliseconds not seconds). I did not want to have a cookie for 24h so I made an "hour" which turns out to be 3.6 seconds. So, my login check did not work, because the cookie immediately expired. But again kudos for the videos, they are awesome

Just wanted to say thank I have one question in sequelize when i connect the post and comment table it show this error how to fix this error Error: Posts.hasMany called with something that's not a subclass of Sequelize.Model .

First thanks for your video. FYI: You need the Bearer so that as on standart not everyone can make a API call. Just your application can ;)

Thanks sir, you helped me a lot, this is actually that i want to know :)

31:35 totally agree, the reaason why they said it is very complicated because others explain jwt to them in a very complicated way, they never tell you exactly how to work with jwt in a full circle and always talk about jwt as if it is a complicated API that NASA used in freakin mars, that is why people think it is complicated

My wep-page crashes when the jwt token expires and I have to manually delete my expired token from the localStorage for the page to work again, why is that happening and how i can solve it ? Note: I’m not using a refresh token .

Thanks a lot, Pedro. Your videos helped me a lot.

Thank you dude ! Was an awesome tutorial. Good explanations, and you talk very well !

Thanks for this, your videos are simple and easy to understand, I like the way you teach the fundamental concepts for us to move on to more complex stuff, keep at it! cheers

I love your teaching man. Thanks you so much

Awsome video cleared all my doubts. Thanks man 👍🏼👍🏼

So one thing I would have shown was how to get the app to authenticate the user upon clicking the login and auto authenticate as the user navigates through the app. Since a "Check if Authenticated" button is never used in a real scenario. Regardless I did enjoy the knowledge you showed, but for your future videos ( which you might already ) show more realistic examples.

unfortunately I have this error code at the end: Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client, do you know what i can do about it?

You are amazing pedro, keep up!

Great video. Great content. Was very helpful

Thank you so much. This was very helpful.

Great tutorials Perdo!

thanks now concept is very clear..

Keep up the amazing work mate

It will be great if you can leave the previous videos in the comment : ) I am looking for the videos you mentioned and you know there are many other great videos you made so it's hard to find which one.

Thankx for this explanation about jwt

How to store our jwt in cookies in our frontend ? Am doing a MERN stack application and I reply frontend and back-end seperately, when I store the cookies in backend it's being stored in backend deployed , so I can't access it from fronend, please help me out, thank you!

Great video! Very helpful bro!

Thank you so much! It is very clear!

Good video but you are wrong at the start when you said authorization is when they log in and authentication when they do api requests. It ia actually the other way around. Authentication = to see whoever logs in (aka authentic user) authorization = if allowed (authorized) to access a resource. :)

Simple and Clear

I think you mixed up Authorization and Authentication, but otherwise, great video.

Great video, helped me a lot

hey can anybody tell where is the video previous to this session i am confused at 6:04.. the result[0] thing.. can anyone gimme the link to the previous video???

I have a question. How do we check each time the logged in user and the key given to him? i think when we using jwt.verify() method , we must check who sending request like is it the logged in user or another user(like pretend user)? in the video we just check only jwt key is generated or not

Hey Pedro, this video was very useful. How can i redirect the user to a home page after he clicks the "login" button?

Great video as always. I have a question about the expiry and invalidation of the JWT. Maybe I'm a little confused, but does it ever expire ?? And what happens when it does expire ?? Maybe could be the subject of a whole new video.

Thank u Pedro, this login-auth tutorial series have been of a lot of help for me, and i bet for the rest all of us as well You have a very bright future kid. Keep on hacking!

This video is basically😀 very good!

Thank you so much for this!

I have a question. So I basically follow your instructions and everything seems to work as expected. However, I do notice one thing. When I send the login request and inspect the request payload in the Network tab in Dev Tools, the username and password are fully shown in plain text. Is there something I do wrong or that's the way it is supposed to be? Because I believe in your video we are sending password in plaintext to server and then server will bcrypt compare, so I am a little bit confused. Thank you

Hello Pedro You teach wonderfully Please prepare a training course and teach us to create a blog with the admin panel I say blog to be a simple web to learn different things Thankful

Very nice tutorial! Could you make a tutorial about Email verification after register an account?

im trying to find the video he talks about where he built the initial app program. i feel crazy but i cant seem to locate it. anyone able to drop a link in a reply?

Would this work even if you refresh your React app in the browser? I'm using the Bearer passport strategy on my NodeJs backend but whenever I have to refresh my browser, I am unauthenticated. I know this because I tested this out by protecting some routes on my React app

nice video really helped me through

Ty a lot you are a life saver ^^

Great video man!

Good videos thanks! But I've been reading that storing de JWT in localstorage or in cookies are not good practices for the xss attacks, with this approach how to make the actual token gets expired let's say in 1 minute and auto refresh the access token to be more secure?

Your channel has great content..!! awesome..!! you just got a new subscriber..!! 😁👍

I have 2 questions. First is what happens when the token expires? Second is if I do a api request the token expire time reset? Btw very good tutorial 🙂.

Yo Pedro... Just wondering are you using JWT and sessions in this ? Is it not usually use one or the other ? Relatively new to this btw just curious...

Thank you so much bro

I think is the opposite. Authentication means who that person is ( username , password ) . Authorization is what I am able to access so what page or resource , btw nice tutorial.

Thanks

Pedro you are awesome

Thanks alot man!!!!

Thank you. Glad to hear it is restful. but 24:12 isn't it just go to the endpoint of IsUserAuth and since that endpoint has used the middleware VerifyJWT so the backend can validate? for example, if I want only authenticated user can go to a page, do I need to again put the middleware VerifyJWT into the app.get "request" like this: app.get("/page", VerifyJWT, (req, res)) or we just need to do it once in IsUserAuth endpoint for the whole application by clicking the button? I am not sure how to call the "app.get, app.post".

Always awesome...thanks bro

Nice Vids !!! Thanks for them. Maybe it's possible to make a tutorial about email verification ?

I am getting an internal server error while loading data. I can load the data if i don't use the middleware.but when i use middleware in loading data..am getting error like internal server error and its showing like no token

Boa Pedro!! Video top, me ajudou demais, desejo muito sucesso para você ksksks, salve do Brasil.

Can someone pls link past two videos that he mentions at the begginging, cant find them

But where is the previous video link ? can you give that link here ?

Hi, ty for your videos, i have been looking for these kind of things and got this videos rlly nice, i have a question about doing 2 roles, and for example how to autenticate or take the difference if your role is user or administrator

Great content!!

Bro, your tutorials are awesome! Crystal clear explanations! Quick question: have you explained how to setup .env files? You mentioned them but I'm not sure if you've published something already.

I'm yet to see the video... from the comments ..looks good... please can you do a complete authentication system using redux? Thanks

hey pedro i just wanted to ask a quick question please if u dont mind replying to me back... i am currently learning react secifically the topic of authentication and autherization. so my question as someone who has no background to server side programming how do i have to tackle when it comes server since i can not program for my own

very clear

Is it possible to get a copy of the source?

What's the use of session if you're using JWT for authentication? (BTW, I'm newbie to JWT 😅)