Authentication With JWT Tutorial - React, NodeJS | How To

[@antoninosabetta]

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

[@Gkotzegien7]

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

[@dicompathak]

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

[@PedroTechnologies]

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!

[@talkohavy]

Can you post a link to it? We'll be sure to watch it, and of course like it :)

[@Sky-yy]

@@PedroTechnologies which video, please post the link

[@andrewlister8906]

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!

[@PedroTechnologies]

Glad it was helpful!

[@darshildarji1670]

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

[@Eumanuel]

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.

[@quranforlife4665]

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

[@PedroTechnologies]

I appreciate that!

[@talkohavy]

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?

[@PedroTechnologies]

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!

[@epicadidash]

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

[@revvin76]

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)

[@mohammedkhamis2194]

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

[@PedroTechnologies]

hahaha Thank you Bro! I really appreciate it!

[@riteshthakur9250]

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

[@PedroTechnologies]

Im happy I could help!

[@jonmultimedia]

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

[@olorundareagnes934]

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.

[@Sanyat100]

You and Dev Ed have always the nicest explanation !!

[@bryanmartins3637]

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

[@auxmail5573]

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

[@jamjam3448]

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

[@DBDrumss]

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

[@PedroTechnologies]

Wow, thank you so much! Really happy you liked the video!

[@soltiscd]

Keep pumping this stuff out. Great job!

[@PedroTechnologies]

Thank You! I appreciate it!

[@junjietan2668]

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.

[@PedroTechnologies]

Thank you! I appreciate it! Im here to help you if u are still confused! Just let me know!

[@mixedideas3351]

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

[@PedroTechnologies]

Thank you so much! I appreciate the positive message!

[@mixedideas3351]

@@PedroTechnologies its working , thanks boss

[@PedroTechnologies]

Awesome!

[@hermessantos181]

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

[@RidoineEL]

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.

[@sebascalderon5842]

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!😀

[@reshandissanayake2772]

Everything is clear. Great job, Thank you!

[@PedroTechnologies]

Great to hear!

[@jerrywebie4380]

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

[@Omer-fr1ze]

Great tutorials Perdo!

[@riyaazct]

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: kzbin.info/www/bejne/mGq6naaHgqyKg7M 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

[@nicolasbarcelo4258]

You are amazing pedro, keep up!

[@PedroTechnologies]

Thank You Bro! I appreciate it

[@torvaldhessel]

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

[@umairqamar2672]

Keep up the amazing work mate

[@user-eve12345]

Your videos are the best! thanku for the content

[@AmarSingh-uw1db]

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

[@PedroTechnologies]

Glad it helped!

[@Nozyka31]

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

[@sivamani6358]

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 ❣

[@asrafulislam8948]

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

[@josuerojasvega]

Great video! Very helpful bro!

[@PedroTechnologies]

Glad it helped!

[@nwobodogeorge5370]

I love your teaching man. Thanks you so much

[@syedsaad317]

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

[@CAPS_AMERICA]

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

[@PedroTechnologies]

Glad it was helpful!

[@rohith8269]

Great video. Great content. Was very helpful

[@michaelvanderloon6392]

Great video man!

[@PedroTechnologies]

Glad you liked it!

[@TheGlitchOfTheGame]

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 .

[@rendivs925]

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

[@ethiotechprogrammingyoutub1898]

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 .

[@Jimmy-zw9ve]

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

[@raphaelmachado7197]

Great video, helped me a lot

[@weektopeak]

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

[@leovogel8536]

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

[@PedroTechnologies]

Glad yoou liked it! Yeah at the time I was still confused on why we needed the bearer but ur right!

[@RidoineEL]

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.

[@artlyroo]

Thank you so much. This was very helpful.

[@maxmaksum4673]

Always awesome...thanks bro

[@PedroTechnologies]

Glad you liked it!

[@Jimmy-zw9ve]

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.

[@PedroTechnologies]

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.

[@Jimmy-zw9ve]

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

[@earlwood7826]

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?

[@PedroTechnologies]

It should be stored in an http cookie, so that no one can access it through the browser's js. In the video I made the mistake of storing it in the local storage to make it simpler for the video!

[@earlwood7826]

@@PedroTechnologies Thanks for your answer! U got a new subscriptor lml. Yes I know that you made it this way for simple explanation but will you make a tutorial on how to make it with http cookie?

[@amritraj658]

Thankx for this explanation about jwt

[@stevestef6613]

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

[@PedroTechnologies]

THank you! I am trying to zoom in more, I agree its hard to see!

[@romimaximus]

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

[@PedroTechnologies]

Welcome aboard! Thank you!

[@chiawen.]

Thank you so much! It is very clear!

[@Florentin-Flo]

This video is basically😀 very good!

[@ARZLJAMESILAO]

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

[@PedroTechnologies]

Glad I could help!

[@GodYutaru]

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!

[@PedroTechnologies]

That makes me very happy! Thank you for the positive words! I am glad I am being able to help you!

[@Shellflower1234]

Great content!!

[@janadarkprince2354]

Simple and Clear

[@PedroTechnologies]

Thank you!

[@metin2dare]

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

[@yashaskirito]

Thank you so much for this!

[@frank3481]

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.

[@pranavyeole102]

nice video really helped me through

[@charliebla12]

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

[@PedroTechnologies]

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!

[@codingwithanonymous890]

thanks now concept is very clear..

[@sasikalarao3476]

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!

[@danielgarciabarea2321]

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

[@nixelev4041]

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?

[@jahanshah1538]

Do you have a video on logging out functionality?

[@PedroTechnologies]

Yes!

[@jahanshah1538]

@@PedroTechnologies Sorry I couldn't find it lol would appreciate a link

[@PedroTechnologies]

@@jahanshah1538 Omg im sorry I read your question wrong. I thought you asked if I could make a video on it! A lot fo people are requesting it so I think I will make one!

[@njtuts5818]

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

[@Dev_Everything]

Is it possible to get a copy of the source?

[@stevenpadayas6611]

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.

[@PedroTechnologies]

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!

[@amaljoseph6968]

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

[@PedroTechnologies]

Interesting, can you paste ur code here?

[@amaljoseph6968]

@@PedroTechnologies export const loadUser=()=>(dispatch:Function,getState:Function)=>{ //user loading dispatch({type:actionTypes.USER_LOADING}) const headers:any ={ 'Authorization':'Bearer '+tokenConfig(getState) } axios.get(API_URL+'/users',headers) .then(res=> dispatch({ type:actionTypes.USER_LOADED, payload:res.data }) ) .catch(err=>{ dispatch(returnErrors(err.response.data,err.response.status)) dispatch({ type:actionTypes.AUTH_ERROR }) }) } export const tokenConfig = (getState:Function)=>{ //get token from localstorage //it will take token from authReducer const token = getState().auth.token //headers const config:IConfigHeaders={ headers:{ 'Content-Type': 'application/json' } } //if we have token,then add it to headers if(token){ config.headers['authorization']=token } return config }

[@amaljoseph6968]

Could you find it??

[@zhichengyu950]

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

[@PedroTechnologies]

Thank you! I have never implemented email verification before, but I am going to search more about the topic!

[@zhichengyu950]

@@PedroTechnologies Thanks a lot!

[@fitness-dose-xp]

really usefull keep it up

[@PedroTechnologies]

Glad to hear that!

[@formiga8010]

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

[@PedroTechnologies]

Fico feliz :)

[@formiga8010]

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

[@teski4]

Nice video and liked it! I built an app using jwt and stored token in localstorage and deployed on heroku. However, it is removing the token every time I refresh the page. I don't have loggedIn status in my code and is that the state that will keep me logged in and render the page after refresh?

[@PedroTechnologies]

You can persist the status in many different ways. You can also store the jwt in your cookies. I recommend having a globa state to keep you logged in!

[@teski4]

@@PedroTechnologies Thanks for the answer Pedro!

[@blissweb]

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.

[@amanchahal5764]

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?

[@mariofabijanec4403]

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

[@devanshbhuptani260]

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

[@sohailsayed4159]

Pedro you are awesome

[@CryptoHunters2]

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

[@PedroTechnologies]

Hey, Thank You! You mean making a blog with an admin panel to delete posts?

[@CryptoHunters2]

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

[@dnextreme]

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

[@FarhanAlly]

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

[@well_done_07]

i can provide u a server if you want.

[@chandrikabiswal5092]

What is the repository name for the video in your Git account ?

[@PedroTechnologies]

Unfortunately the code for this one was not saved, sorry about that!

[@cheerlalaxmansagar2396]

Super 👌liked and subscribed

[@lokmanlife3023]

can you do a video on after u authen, u will redirect to a protected route??

[@PedroTechnologies]

Will post a video tommorow talking about this!

[@hiraaziz6274]

How can we redirect to another page if authentication is true?? I am a beginner in learning react .. need lite help

[@PedroTechnologies]

You can use the React Router Dom Component!

[@Lindaine]

@@PedroTechnologies so after the user succesfully logged in, I can probably change a state to true and if that state is true then the user will be redirected using tag?

[@hiraaziz6274]

@@PedroTechnologies Thankyou, I will try

[@xxxxdddddss]

How would you deal with logout? Set the local storage to empty string or somehow deactivate the token or what?

[@PedroTechnologies]

You can't manually expire a token, but you can delete the token from the local storage. Then you can assign a new token to the user when they login

[@GauTrang_3e3]

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

[@shbita]

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.

[@PedroTechnologies]

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!

[@flowerofash4439]

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

[@cansugunes9226]

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

[@PedroTechnologies]

Thank you for the idea!

[@PedroTechnologies]

I will make a video about it!

[@cansugunes9226]

I'm waiting for it. Thanks a lot 🙂

[@blazingtech5691]

Hi man, Can you do a video on How to fetch data about a user from MySQL database to the react front end, Like, once we log in, we have the username and password to find if the user is authorized. But after the login, let say we are displaying a dashboard page and in it, there is a button to fetch the name of the user or something else of that user. How can we find which user is requesting the data. Please do a video on this. I think we can use this jwt token for that but I don't know how to use it. So please help.

[@PedroTechnologies]

To do that you need to have the id of the user logged in saved on the browser, and then pass this id as params in the api request!

[@blazingtech5691]

@@PedroTechnologies where can I store this id ? can we store this on the local storage? or in some session: cookies?. Can you explain?

[@zenec_]

Ty a lot you are a life saver ^^