You mentioned that it's not good to store jwt in localstorage since is public, can be accessed by browsers extensions etc..., well, cookie can be accessed as well, httponly can be intercepted by extensions, so where would you store a jwt? The title says: How to Make Your React App Safer, but you only pointed out a problem...
I mean, there will always be vulnerability. For example, not only can httpOnly cookies be accessible by the chrome extension api, but if a browser doesn't support httpOnly cookies, then it will treat it like a normal cookie. My point with this wasn't to give a 100% solution, because there isn't one. I just pointed out what you should do to minimize the risk. The risk from using cookies is way less then the risk of using session/local storage.
I've been a pro software engineer with over 6yrs of experience, here's my $0.02 on this - there really isn't a safe way to store tokens. Local storage, cookies, etc are all vulnerable. All websites, even major ones, use one of these and get hacked regularly but the media never talks about it due to not making their stock prices more volatile than it already is. The security of your application 99.9% depends on how well your backend is. Frontend code will ALWAYS be vulnerable no matter which framework, library or language you use which means your desired method of storing auth tokens "safely" is also vulnerable.
@nonequivalence1864 Could you please explain how do i make my back end more secure or provide me any blog or channel that you think it might help me I use node.js btw And Thank you ❤
Sorry, but nosense, cookies are same vulnerable to XSS attacks as localStorage, it doesn't matter where you store them, that's why we create tokens so they are encrypted, the only thing you can do is add a little more information in the token. such as the user's browser, device, and checking it on the backend
Hi! In the example you gave where the user manually types a URL, is it safe to just set the input type to "url"? I found out that forms do validate url input types when calling the onChange and onSubmit events, but I wonder if that's enough and if it also works when the input is not within a form.
Agreed... Except that you can manually change the input type to text in the developer tools before submitting. So, it is still not safe relying on it completely.
i agree local storage is not the best place to store your tokens. So as a beginner I'm asking which are the best places to store them ? It's important for me plz answer
Thanks for your video! Is there any solution for securely storing jwt token ? If we store it in httpOnly cookie, we need server side proxy for our react app (which means our react app will become a Nodejs app) or if our REST Api handle cookies, it will become stateful which is against REST.
Nowadays all methods has a vulnerability problem, it's easy to say that save JWT in LocalStorage is dangerous, but nothing is a silver bullet, you just must take a lot of care of your backend, rotating the JWT signature secret regulary and having a system that allows the user to invalidate/ban a stolen JWT based on the identity saved on it
there isn't any foolproof way to store, its kind of anything is vulnerable on frontend and your app security 99% depends on your backend, so make a double check on backend upon token coming from frontend in a req when you are doing some critical action
Pedro this is nice video but we will really appreciate it if you build of full stack application consisting of Admin and user dashboard using JavaScript and nodejs for backend Thanks you are the best so far
If you could animate things up and show us that instead of your face in full screen mode, I think that would be helpful. You can keep your face video at the bottom/ top in small screen overlapped like in streaming videos. Just a suggestion. Cheers
What I learned is that it's best to store JWT tokens in cookies, and use them for any API request as it goes on; Make sure to keep the tokens valid for a limited time-span, determined by the nature of the app. After that, revoke access (either directly, indirectly or even both).
Hi Pedro, thanks for your useful tutorials. I learned a lot of things until now. If you make another video about "How to load content based on language changed from mongo DB with react js?", it will also become another useful video. Thanks
I didn't understand why jwt in localstorage is unsafe 🙈 If the jwt is encrypted what can a attacker do with it? The attacker also doesn't have the BE details (its in .env file) so the attacker can't use the jwt to update the data in the DB
you have misundertood 4 things so i'll help you understand them. jwts are not encrypted, they are signed!, both encryption and signing use public private key pairs though, there is a difference between encryption and signing. for example: ENCRYPTION - 1. if i wanted to tell you a secret but there were alot of people that will listen to us, i will ENCRYPT the secret, we will agree beforehand on how to decrypt encrypted data, then i will encrypt the secret and give you the encrypted secret, since we both agreed on how to decrypt data before, you'll be able to decrypt the secret and read it, since all the other people dont know how to decrypt the secret, it will seem to them as a bunch of useless data. SIGNING - 2. on the other hand, if i wanted to announce something to the people and the people wanted to be 100% sure it was me and not an impersonator, i will announce my public key to the people and everyone will have a record of my public key, then i will SIGN the message that i want to announce with my private key, the people then receive my announcement and they will verify the signature in the message that i signed using my public key that i shared with them. 3 .If the jwt is encrypted what can a attacker do with it? - first of all, its not encrypted, its signed as you read above, infact you can go to jwt.io, paste in a jwt that you have and they'll tell you the information contained in the jwt. if an attacker gets hold of a jwt, they can impersonate the person that received that jwt from the backend, the backend only checks to see if the jwt is valid by checking if the signature on the jwt is valid and now that this attacker has a jwt they stole, the backend would allow them to do anything the owner could do and thats BAAAAAD. 4. The attacker also doesn't have the BE details (its in .env file) so the attacker can't use the jwt to update the data in the DB whatever logic you wrote in the app update the data in the db, your users dont update the DB directly, your backend does, and what else does your backend allow?? 🤔, it allows request from the user on the internet 😄, processes the requests and UPDATES the DB to store the information received from the user. you .env file defines what environment your app runs on and what DBs to connect to. The attacker initially doesnt know how your backend is setup BUT they can enumerate your backend by analyzing the response the app returns when they do certain things and hence why the pedro says its better to return a generic statement to the user instead of returning the message of the error which is usually contained in the message field (err.message) i hope this cleared up some confusion and taught you something new, have fun and take care byeeeeeeeeeee
Hello pedro ! First of all, It's been like 1 year I wanted to leanr MERN but couldn't because I felt like the youtuber wasn't able to explain it well to a beginner. But after watching your 1 hour course, I want to thank you because I understand better now. But I have a little problem If you ( or someone else ) can help... I tried to connect my cluster to mongodb compass but I got this error "Server selection timed out after 30000 ms". Does someone knows what's the reason for this ? Thanks !
Please could you make a video about Authentication, how to properly save jwt tokens without localstorage, how to refresh the token? I know this is a lot, but I've been having issues with this
It sucks to know you cannot use JWT safely in your client app that's why I'll stick to localStorage and JWT expiring after one hour until I'll learn httpOnly ( which is also not full safe)
You mentioned that it's not good to store jwt in localstorage since is public, can be accessed by browsers extensions etc..., well, cookie can be accessed as well, httponly can be intercepted by extensions, so where would you store a jwt? The title says: How to Make Your React App Safer, but you only pointed out a problem...
I mean, there will always be vulnerability. For example, not only can httpOnly cookies be accessible by the chrome extension api, but if a browser doesn't support httpOnly cookies, then it will treat it like a normal cookie. My point with this wasn't to give a 100% solution, because there isn't one. I just pointed out what you should do to minimize the risk. The risk from using cookies is way less then the risk of using session/local storage.
I've been a pro software engineer with over 6yrs of experience, here's my $0.02 on this - there really isn't a safe way to store tokens. Local storage, cookies, etc are all vulnerable. All websites, even major ones, use one of these and get hacked regularly but the media never talks about it due to not making their stock prices more volatile than it already is. The security of your application 99.9% depends on how well your backend is. Frontend code will ALWAYS be vulnerable no matter which framework, library or language you use which means your desired method of storing auth tokens "safely" is also vulnerable.
agree
If only React were only front end code
@nonequivalence1864
Could you please explain how do i make my back end more secure or provide me any blog or channel that you think it might help me
I use node.js btw
And Thank you ❤
@@AG-ur1lj lmao
pro software engineer ? it’s something new haha
Where should be store the jwt then pedro?
Not a new dev but you caught me there at saving cookies to local storage for easy accessibility. Thanks for the knowledge
I also saved in localstorage too . but these info from firebase . May be it is safe.
Sorry, but nosense, cookies are same vulnerable to XSS attacks as localStorage, it doesn't matter where you store them, that's why we create tokens so they are encrypted, the only thing you can do is add a little more information in the token. such as the user's browser, device, and checking it on the backend
Dude, you are among my top favorite dev video creators! Keep up the great job!
Love from India... 🙌
I love India ❤️
@QURASHI AKEEL no one does🗿
Great discussion on JWT and your point about a huge hit via NPM packages is....accurate and scary!
Congrats on the 100k man! So happy that you keep going up, your channel has been a huge help and the content keeps getting better. Great job.
Hi! In the example you gave where the user manually types a URL, is it safe to just set the input type to "url"?
I found out that forms do validate url input types when calling the onChange and onSubmit events, but I wonder if that's enough and if it also works when the input is not within a form.
Agreed... Except that you can manually change the input type to text in the developer tools before submitting. So, it is still not safe relying on it completely.
Please make a video on Authentication and Authorisation for React. Authentication and Authorisation for Node Express were very useful.
the only person ever when i heard him said please do like to this video i go fast to do the like thank u so much pedro
Fantastic video! Thank you
About Next 13, how would you deal with authentication? :)
Tbh ive been sick so I haven't been totally up to date with the new release yet! I will try it out and for sure make a vid on my opinions!
@@PedroTechnologies oh god I hope you are doing better ! Thanks for your work my friend
yesssir, thanks to make us up to date with ur videos and make me more aware what i'm doing with my web application , love it
Nice, could you do a tutorial on how to implement Pagination in React Table? Where you fetch next page by API and not load everything at once.
He have made one before but not with react table. You can find it here: ua-cam.com/video/HANSMtDy508/v-deo.html. However I also prefer react table.
@@uttekarlsson3265 implement the same logic with react table
lots of love and respect from INDIA
rock on Pedro, you're doing a great work and CONGRATS
Brother would like to ask can i apply it also on my angular app 🤔
i agree local storage is not the best place to store your tokens. So as a beginner I'm asking which are the best places to store them ? It's important for me plz answer
Thanks for your video! Is there any solution for securely storing jwt token ? If we store it in httpOnly cookie, we need server side proxy for our react app (which means our react app will become a Nodejs app) or if our REST Api handle cookies, it will become stateful which is against REST.
Had the same thing on my table today as well, i really hoped there was a solution given here
Nowadays all methods has a vulnerability problem, it's easy to say that save JWT in LocalStorage is dangerous, but nothing is a silver bullet, you just must take a lot of care of your backend, rotating the JWT signature secret regulary and having a system that allows the user to invalidate/ban a stolen JWT based on the identity saved on it
How do one create a backdoor in his react code just in case client failed to payup
So whats the way to handle tokens? cookies? you didn't say it, or the answer is cookies with corrects cors?
So at the end, where to store the security tokens in the frontend?
there isn't any foolproof way to store, its kind of anything is vulnerable on frontend and your app security 99% depends on your backend, so make a double check on backend upon token coming from frontend in a req when you are doing some critical action
your advice is so good to think about even though mine is based on vue framework. thank you for your work and video.
Thanks, bro, xss is pretty interesting
would you ever do a todo tutorial or something like that trying solid.js?
Pedro this is nice video but we will really appreciate it if you build of full stack application consisting of Admin and user dashboard using JavaScript and nodejs for backend
Thanks you are the best so far
hi sir, in you github repo is their are any real world professional projects publically. plz can u refer one of them for review for me
How extensions can excess my browser local storage, isn't that protected inside my browser ?.
Pedro, if we're using like Firebase Auth, Auth0, or NextAuth isn't the JWT pre-handled already?
If you could animate things up and show us that instead of your face in full screen mode, I think that would be helpful. You can keep your face video at the bottom/ top in small screen overlapped like in streaming videos. Just a suggestion. Cheers
If we have to retain the user session between revisits to our application, where should we store the jwt? Cookies?
Redis cache
@@napoleonbonaparte1260 then we have to maintain user session on the server side.
I was left with the same doubt since it does not mention where to store it
What I learned is that it's best to store JWT tokens in cookies, and use them for any API request as it goes on; Make sure to keep the tokens valid for a limited time-span, determined by the nature of the app.
After that, revoke access (either directly, indirectly or even both).
Good one, would be better if you have explanation with some digrams.
Hi Pedro, thanks for your useful tutorials. I learned a lot of things until now. If you make another video about "How to load content based on language changed from mongo DB with react js?", it will also become another useful video. Thanks
I didn't understand why jwt in localstorage is unsafe 🙈 If the jwt is encrypted what can a attacker do with it? The attacker also doesn't have the BE details (its in .env file) so the attacker can't use the jwt to update the data in the DB
you have misundertood 4 things so i'll help you understand them.
jwts are not encrypted, they are signed!, both encryption and signing use public private key pairs though, there is a difference between encryption and signing.
for example:
ENCRYPTION -
1. if i wanted to tell you a secret but there were alot of people that will listen to us, i will ENCRYPT the secret, we will agree beforehand on how to decrypt encrypted data, then i will encrypt the secret and give you the encrypted secret, since we both agreed on how to decrypt data before, you'll be able to decrypt the secret and read it, since all the other people dont know how to decrypt the secret, it will seem to them as a bunch of useless data.
SIGNING -
2. on the other hand, if i wanted to announce something to the people and the people wanted to be 100% sure it was me and not an impersonator, i will announce my public key to the people and everyone will have a record of my public key, then i will SIGN the message that i want to announce with my private key, the people then receive my announcement and they will verify the signature in the message that i signed using my public key that i shared with them.
3 .If the jwt is encrypted what can a attacker do with it? -
first of all, its not encrypted, its signed as you read above, infact you can go to jwt.io, paste in a jwt that you have and they'll tell you the information contained in the jwt. if an attacker gets hold of a jwt, they can impersonate the person that received that jwt from the backend, the backend only checks to see if the jwt is valid by checking if the signature on the jwt is valid and now that this attacker has a jwt they stole, the backend would allow them to do anything the owner could do and thats BAAAAAD.
4. The attacker also doesn't have the BE details (its in .env file) so the attacker can't use the jwt to update the data in the DB
whatever logic you wrote in the app update the data in the db, your users dont update the DB directly, your backend does, and what else does your backend allow?? 🤔, it allows request from the user on the internet 😄, processes the requests and UPDATES the DB to store the information received from the user. you .env file defines what environment your app runs on and what DBs to connect to.
The attacker initially doesnt know how your backend is setup BUT they can enumerate your backend by analyzing the response the app returns when they do certain things and hence why the pedro says its better to return a generic statement to the user instead of returning the message of the error which is usually contained in the message field (err.message)
i hope this cleared up some confusion and taught you something new, have fun and take care
byeeeeeeeeeee
@@abdirahmann great response. I learned a few things in there as far as jwt being signed
@@abdirahmann This comment deserves a pin
*Alternative title*
Battle Scars: PEDRO
Joga duro man, parabens denovo.
Hello pedro ! First of all, It's been like 1 year I wanted to leanr MERN but couldn't because I felt like the youtuber wasn't able to explain it well to a beginner. But after watching your 1 hour course, I want to thank you because I understand better now.
But I have a little problem If you ( or someone else ) can help... I tried to connect my cluster to mongodb compass but I got this error "Server selection timed out after 30000 ms". Does someone knows what's the reason for this ?
Thanks !
Please could you make a video about Authentication, how to properly save jwt tokens without localstorage, how to refresh the token? I know this is a lot, but I've been having issues with this
mora no brasil mano ?
I liked the lesson so much! Good job! Still waiting for Nextjs with redux toolkit.....
Awesome. Would be great if you drop a video about S.E.O for react apps
Nice vid pedro
Yo said what not to do with jwt but you didn't say what to do with jwb...
Love from kerala❤
YOU DIDN'T GIVE ANY RECOMMENDATIONS ABOUT WHERE ELSE TO STORE TOKENS
IF I'M NOT USING LOCAL STORAGE OR COOKIES
WHAT DO I USE??????
It's out of context but, can u make a Vedio on Api integration in React js. I'll appreciate it thnx!
create react app has never been safe with all these redos valunerablities
Awesome
That's encoding not encryption
Rumo ao 1M
Egyptian announced 11/ 11 a revolution against the decorators alsis
Could you speak about
Our Egyptian revolution
bro❤❤
like and comment done :)
Mr Beast quem?
This video just a waste of time. No examples or solutions provided
It sucks to know you cannot use JWT safely in your client app that's why I'll stick to localStorage and JWT expiring after one hour until I'll learn httpOnly ( which is also not full safe)
It's not effective for everyone. do code It'll helpful for everyone