Authentication With JWT Tutorial - React, NodeJS | How To
HTML-код
- Опубликовано: 22 окт 2020
- How to Authenticate with Json Web Tokens using ReactJS and NodeJS. In this video I explain how to make a simple JWT authentication system that allows and API verify if the user is correct when they are making a request.
🌟 Learn Programming Fundamentals on Brilliant: brilliant.sjv.io/PedroTech
-
Please leave a comment on what topic you guys want me to cover next!
-
📞 Tutoring Session: www.fiverr.com/share/pw8RPY
👕 Programming Merch: teespring.com/stores/pedrotech
💻 PedroTech Discord: / discord
-
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Twitter: / pedrotech_
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/machadop1407
Email: machadop1407@gmail.com
Tags:
- JWT
- Json Web Tokens
- ReactJS Tutorial
- Authentication with ReactJS
- NodeJS Tutorial
- Authentication With JWT 
Наука
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.
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!
Glad it was helpful!
@@PedroTechnologies i am making an notes app but i want that a for a particular user only his notes should be shown how can i do that
Good video, despite the terminology confusion about authorization and authentication (these terms are used incorrectly in many occurrences)
You and Dev Ed have always the nicest explanation !!
Keep pumping this stuff out. Great job!
Thank You! I appreciate it!
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
hahaha Thank you Bro! I really appreciate it!
Great video, man! I’m from Brazil and I appreciate your work. Keep up!
Pedro sir This series is one of the best videos seen.
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)
Parabéns pelo vídeo, muito bom ver brasileiros falando um inglês fluente e fazendo tutoriais em inglês.
Bro..you are a life saver man. Was looking for this for days. Finally found it. Continue on making such Quality content. Thanks man
I am so happy you liked it! If you have any trouble or any doubts, I posted an updated version of this video a week ago!
Can you post a link to it?
We'll be sure to watch it, and of course like it :)
@@PedroTechnologies which video, please post the link
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
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.
Thank you! I appreciate it! Im here to help you if u are still confused! Just let me know!
Everything is clear. Great job, Thank you!
Great to hear!
Thank you dude ! Was an awesome tutorial. Good explanations, and you talk very well !
This awesome video helps me to code my first authentication api. Thank you very much!
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?
Your comment. made me very happy! I am beyond grateful that I am able to help people like you, who are working hard to succeed in the industry. Thank you for watching! I am 19 years old!
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
Glad it was helpful!
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..
Im happy I could help!
dude, you have videos for all my questions :D thank you a lot!!!!
I love your teaching man. Thanks you so much
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.
Thanks a lot, Pedro. Your videos helped me a lot.
Your videos are the best! thanku for the content
You are amazing pedro, keep up!
Thank You Bro! I appreciate it
Amazing! you have earned a loyal subscriber. Keep it up!
Wow, thank you so much! Really happy you liked the video!
Awsome video cleared all my doubts. Thanks man 👍🏼👍🏼
Glad it helped!
U deserve million subscribers. Awesome tutorial. Keep it up bro 👊💪💯
I appreciate that!
Keep up the amazing work mate
Great tutorials Perdo!
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!😀
Great video. Great content. Was very helpful
Thank you so much. This was very helpful.
Thank you so much! It is very clear!
thanks man , let me use this method for my project too , i am happy to be here ,keep burning
Thank you so much! I appreciate the positive message!
@@PedroTechnologies its working , thanks boss
Awesome!
Great video, helped me a lot
Thanks sir, you helped me a lot, this is actually that i want to know :)
Great video! Very helpful bro!
Glad it helped!
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
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.
thanks now concept is very clear..
Thank you so much for this!
Thankx for this explanation about jwt
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: ruclips.net/video/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
nice video really helped me through
Simple and Clear
Thank you!
Thank you so much bro
Ty a lot you are a life saver ^^
Great video man!
Glad you liked it!
Great content!!
Always awesome...thanks bro
Glad you liked it!
Thanks alot man!!!!
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!!!
Your channel has great content..!! awesome..!! you just got a new subscriber..!! 😁👍
Welcome aboard! Thank you!
Pedro you are awesome
Thanks a lot bro!
No problem!
very clear
Boa Pedro!! Video top, me ajudou demais, desejo muito sucesso para você ksksks, salve do Brasil.
Fico feliz :)
@@PedroTechnologies Ah, aliás eu posso te perguntar uma dúvida que já tentei fazer de tudo e não estou conseguindo com o React?
thanks a lot broskie!
Happy to help!
Super 👌liked and subscribed
This video is basically😀 very good!
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!
That makes me very happy! Thank you for the positive words! I am glad I am being able to help you!
Thanks for video.
Thank you for watching!
Thanks
O cara é brabo
I have an upcoming software engineering project and this will definitely going to help me man! Awesome. Thanks a lot.
Glad I could help!
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
amazing video
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.
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 ;)
Glad yoou liked it! Yeah at the time I was still confused on why we needed the bearer but ur right!
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.
really usefull keep it up
Glad to hear that!
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 ❣
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.
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.
liked, subscribed, got the bell too
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
Pretty sure you got meant to say authorization is the "who is allowed to do what" and authentication is "who is who"
Nice Vids !!! Thanks for them.
Maybe it's possible to make a tutorial about email verification ?
Thank you for the idea!
I will make a video about it!
I'm waiting for it. Thanks a lot 🙂
Can you zoom into the code when ur typing but great video tho
THank you! I am trying to zoom in more, I agree its hard to see!
Hey Pedro, this video was very useful. How can i redirect the user to a home page after he clicks the "login" button?
love you
Very nice tutorial! Could you make a tutorial about Email verification after register an account?
Thank you! I have never implemented email verification before, but I am going to search more about the topic!
@@PedroTechnologies Thanks a lot!
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
Hey, Thank You! You mean making a blog with an admin panel to delete posts?
@@PedroTechnologies Yes, something like that
For example, a user as an administrator
And be able to send posts
And remove it
Or, for example, have a category
If there is a comment, that is great :))
Of course, the posts system can also send photos
These are very good things. By learning these, you can easily set up personal or corporate websites
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".
I'm yet to see the video... from the comments ..looks good... please can you do a complete authentication system using redux? Thanks
Hope You Enjoy it! I don't use Redux, so I wouldn't know how to implement it with it. Sorry about that!
Nice
I've been following your tutorial about how to make login system using express + mysql, it's really make sense for me to understand. But, when try to implement to mobile platform, i'm stuck in authentification system. Would you like to provide for React Native please. Thank you so much before.
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.
Yeah, I realize this video focused a bit more on authorization than I wanted it to. In a realistic example, you would use a check if authenticated function in every route that checks if the api call passed a valid jwt in their header. If they don't then you don't authorize the call. Or also, try using the token to identify a logged in user!
Hey Pedro, I asked about Restful's "Stateless" a few hours ago in your latest video.
I have some more questions.
1. So in this video the backend creates and sends the token to the frontend in 8:42, it is not stateless right? Also in 27:15 using localStorage is getting the token from backend response.
2. As you have mentioned in 4:31 to use the token in every API request, I want to make sure that does API request mean working with app.get app.post or the Axios request in the frontend?
If it means working with app. So what we do in actual project is to put the middleware verifyJWT in 12:10 into each app.get app.post and then that's it? since in this video you do the authentication with a button as just an example?
I know my questions may be quite confusing but I just want to make sure I got that right. Thank you Pedro.
Hey, no worries! So in this video we are just creating the middleware to verify that we are an authorized user by the server. So the server isnt keeping track of the token, but the client is. So the client stores it in their browser and sends it with every request. The server only validates if that token is valid.
@@PedroTechnologies 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 them the app.get app.post.
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
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 .
hey, can you make tutorial how to implement refresh token?
But where is the previous video link ? can you give that link here ?
Thanks a lot Pedro 🙏
I have a question regarding how to get the username form the token so next time I don't need to enter username and password , and I can know it from the token.
So if you want to keep the user logged in you can store an id / token in the cookie and then just check to see if it exists whenever someone eneters the site. If it exists, then you should automatically login to the user with that token!
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
Hello, do you have any materials to share on how we should route once auth is true? Thank you for this video it has extremely helpful!
Thank you! You can just use the component in the React-Router-Dom library. Or you can also do something like window.location.pathname = "/newroute"
What's the use of session if you're using JWT for authentication? (BTW, I'm newbie to JWT 😅)
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...
Hey, yeah there are 2 types of auth: Token based and session based! In this video the session is just being created to hold the data. For session based auth you ususally store the session id in a db. I will make a video on it!
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 .