When I share tutorials, I'm in teaching mode. I'm saving all the data in state and sharing in the console, and overall, I'm making the data as easy to access as possible as you learn. That said, in a production app that is not what you should do with the data. I've received several questions about this, and I decided to make this tutorial about basic best practices for handling login data and other data you may receive in your application. If you're just starting with React logins, I recommend going to the beginning of my React Login series here: kzread.info/head/PL0Zuz27SZ-6PRCpm9clX0WiBEMB70FWwd

Dave is among those few KZread programmers who focuses on security of credentials leakage .. hats off

@DaveGrayTeachesCode

2 жыл бұрын

Thank you my friend! 🙏

This channel is a gold mine.

@DaveGrayTeachesCode

2 жыл бұрын

Thank you for the kind words 🙏💯

The tutorials are so good that these are first thing in the morning that I watch after waking up. Addicted to your tutorials!

In 2020 I struggled implenting a secured authentication for react Even till now there are less resources online which shows u how to go about it Thanks so much

@DaveGrayTeachesCode

2 жыл бұрын

You're welcome! I have provided reference links for resources and articles in the description that should help you learn more. 💯🚀

@richardwilliam7030

2 жыл бұрын

@@DaveGrayTeachesCode thanks so much I think we need to link up

Thanks a lot for this wonderful tution dave

It comes in a such good moment, thanks!

@DaveGrayTeachesCode

2 жыл бұрын

You're welcome, Ruan! 💯

excellent thank you !

Omg Thanks so much Dave

@DaveGrayTeachesCode

2 жыл бұрын

You're welcome, Richard! 🙏💯

Thank you man. It was very helpful. God bless you

@DaveGrayTeachesCode

Жыл бұрын

You're welcome!

Awesome, was wondering about this actually - will try this out next to add to the login/auth from your other vids (which are working great in dev)

@DaveGrayTeachesCode

2 жыл бұрын

Glad it was helpful! 💯🚀

@thattablebloke

2 жыл бұрын

@@DaveGrayTeachesCode Very much so. Actually I was the guy (maybe a few others also) on about decoding jwt tokens and passing data in them in your previous vid comments - just watched this and glad to report I managed to do the same thing, jwt_decode etc.. figured it out on my own a week or two ago and pleased to see you confirming it was the right thing to do in this vid. I actually have a useEffect in my main App file, basically every page, that listens for auth changes and runs - checks if there's an access token and then if so it sets state, userid, userphoto and just some small things like that which are used throughout the app, decoded from the accesstoken. (Don't forget to reset the state on logout!) The disable react dev tools is cool too, had no idea about that but have been wondering about hiding some stuff from users in general, nothing serious but just incase, Any potential for MERN stack deployment videos in future? Heroku, AWS etc?

@DaveGrayTeachesCode

2 жыл бұрын

@@thattablebloke Glad to hear it! There's potential for lots of videos in the future. Many requests. I'll keep plugging away!

Tank you Sir, your voice make me happy

@siddiqahmed3274

2 жыл бұрын

Yeah actually 😅❤️ Great person and great teacher 🌟

just subscribed!

thanks Dave 🥰

@DaveGrayTeachesCode

2 жыл бұрын

You're welcome! 🙏

Best youtube series ever

@DaveGrayTeachesCode

Жыл бұрын

Thank you!

Thanks a lot for your videos! Quick note: We also need to update the useRefreshToken hook as we're no longer receiving roles from the refresh request.

@DaveGrayTeachesCode

2 жыл бұрын

Good note!! 💯

@ryant2350

2 жыл бұрын

Will anyone be posting the updated useRefreshToken hook?

THX a lot! Make more advanced videos please for middle devs.

@DaveGrayTeachesCode

2 жыл бұрын

You're welcome! 🙏 Thanks for the request! 💯

You have a new subscriber!

Great video!

@DaveGrayTeachesCode

2 жыл бұрын

Thank you! 🙏

thank you)

@DaveGrayTeachesCode

2 жыл бұрын

You're welcome! 💯

Which extension are you using which highlight the function block? when you select the function

greate vídeo, thanks

@DaveGrayTeachesCode

2 жыл бұрын

Thank you, Cecon! 🙏

Thanks!

@DaveGrayTeachesCode

2 жыл бұрын

Thank you for the support, Ryan!

Wow! the way you explain, so simple. I really appreciate your work. The next chapter i want you to cover user verification with an email, so that only verified user can logged in...

@DaveGrayTeachesCode

2 жыл бұрын

Thank you! 🙏 I do cover the login with email and password in the React login series here: kzread.info/dash/bejne/imel29qoj7i6gpc.html And the verification takes place in the backend Node.js code: kzread.info/dash/bejne/gKCbkqyrhdeWoco.html

Thansk Dave, your videos are amazing!! Could you please do VueJS videos as well?

@DaveGrayTeachesCode

2 жыл бұрын

Thank you! I may get to VueJS at some point, but it is not on my upcoming list. I do like what I see from Vue. 🚀

Awesome 👌👌👌👌

@DaveGrayTeachesCode

2 жыл бұрын

Thank you! 💯

i wasn't subscribed to your channel, what a shame my friend, you're great, thanks for sharing your knowledge with us

@DaveGrayTeachesCode

2 жыл бұрын

I appreciate that! 💯🚀

Nice video dave ,now i learnt how to send roles from frontend 😊...could you make a video on serverless api ? That would be great to know....

@DaveGrayTeachesCode

2 жыл бұрын

Thank you, Usman 🙏 That's a good request and one that I would like to do. 💯

@usmanshahid8529

2 жыл бұрын

@@DaveGrayTeachesCode welcome sir ❤️

thanks

@DaveGrayTeachesCode

2 жыл бұрын

You're welcome!

excellent video! hope you get into nextjs soon!

@DaveGrayTeachesCode

2 жыл бұрын

Thank you! I am looking forward to it! 💯🚀

@siddiqahmed3274

2 жыл бұрын

Yess but before going to nextjs, a complete project using mern will be a great addition. Also it will be implementing many things together so it will give a good insight on how to do a production level project. It could be a paid course though but it wil be great addition🚀

@DaveGrayTeachesCode

2 жыл бұрын

@@siddiqahmed3274 I agree! 🙏💯

@GabrielMartinez-ez9ue

2 жыл бұрын

@@siddiqahmed3274 mongodb is useless in almost all scenarios.

@siddiqahmed3274

2 жыл бұрын

@@GabrielMartinez-ez9ue and why do you think mongodb is useless?

i feel like i found a treasure in youtube. sorry for not been able to buy you a cup of coffee, because i don't have credit card, but you definitely get my good wishes for you. Thanks for your efforts.

@DaveGrayTeachesCode

Жыл бұрын

You're welcome!

So good tutorial

@DaveGrayTeachesCode

2 жыл бұрын

Thank you, Sona 🙏

You should use axios interceptor that is useful approach to intercept each requests and response. In the response of api (unauthorizied) you can manage the refresh token approach.

@DaveGrayTeachesCode

2 жыл бұрын

Go back through the React login series (link in description) where I demonstrate exactly how to do that 💯

@JasonLaneZardoz

2 жыл бұрын

@@DaveGrayTeachesCode We've developed an OAuth Typescript library that intercepts requests, via a Service Worker, through configurable filters. The service worker is kept alive and the JWT lives in memory in the SW. This way the JWT is never exposed in localstorage or cookies, can also be encrypted. Of course setting a decent CSP policy would be expected. The only thing we store in the main context, is a refresh token when dealing with older ADFS OAuth servers as they don't rotate refresh tokens in certain scenarios. It also uses service discovery by using the .well-known metadata end point should it be available. I hope I can open source it at some point. I just have to convince my company.

@DaveGrayTeachesCode

2 жыл бұрын

@@JasonLaneZardoz this sounds great!! I hope you can open source it.

@JasonLaneZardoz

2 жыл бұрын

@@DaveGrayTeachesCode Me too! We're in phase 2 of development which is actually implementing it in a React app. So far so good. I'll let you know if we do.

@DaveGrayTeachesCode

2 жыл бұрын

@@JasonLaneZardoz please do!

Thanks for the tutorials. Could you add CRUD operations to this tutorial?

@DaveGrayTeachesCode

2 жыл бұрын

You're welcome! If you go through the React login series and the Node.js course, you will see some CRUD operations for creating a login and reading the data. You could add this login functionality to any app that does CRUD ops. A common example is a to-do list.

Hi @Dave, only one thing is remaining which is crucial part of login and registration and that is 'Forgot Password' option. Can you please include that as well?

Recently I am not using react-dev-tools. and If I am not gonna disable it on production , can people still check my app while its on server ?

7:36 I think that the best way is modify the response from the backend because the users can see the response in the network tab of the devtools

@DaveGrayTeachesCode

2 жыл бұрын

Agreed 💯 As I note in the video, if you are the one developing the backend this is the best choice.

@JoseMedina-xp6vi

2 жыл бұрын

@@DaveGrayTeachesCode I voted in your survey for videos of the MERN stack and I would like that some of these videos would be implementing some service of auth like Auth0, Firebase Auth, Supabase Auth, Keycloak... Thanks in advance! And thanks for these great tutorials of Auth in frontend apps

@DaveGrayTeachesCode

2 жыл бұрын

@@JoseMedina-xp6vi you're welcome! Here's my Auth0 tutorial: kzread.info/dash/bejne/onWu09WcdNubaJM.html

Great tutorials as usual. Pls make a series of tutorials with nextjs redux toolkit api jwt auth

@DaveGrayTeachesCode

2 жыл бұрын

Thank you! 🙏 I am looking forward to working with Next.js later this year. 🚀

Hi Dave, thank you so much for your tutorials. I followed your instrctuion and made a website that helped my company so much! However, I realised that the JWT authentication will fail in Safari. Other people said it may stem from the authorization header. Safari will override the authorization header. Is there any solution of this issue?

@DaveGrayTeachesCode

Жыл бұрын

I have an app deployed in my company that does not have this issue with Safari. Several Stackoverflow posts do identify devs having problems with the Authorization header and Safari. Notably, a redirect will cause this. If you are not using a redirect, some other posts noted an ending "/" in the url was the difference. You can Google these, but a post with a solution that should work no matter this issue suggestions creating a custom header : stackoverflow.com/questions/36789514/how-to-prevent-override-authorization-header-in-safari ...of course, you would need to modify your backend controller to look for this header.

Thanks for this video. How to load dynamic select field data from a network call while we write something in the input field?

@DaveGrayTeachesCode

2 жыл бұрын

You're welcome! Nice request - I think I understand what you want: Populate the select input options dynamically with results filtered from a text input. What you may want is a datalist element that will overlay the options instead of hiding them, but same concept overall.

@bikramchettri7056

2 жыл бұрын

Yes right, using select box as search field. When we type something in the field it get the result as the option.

Shouldn't we also disable Redux devtools for production?

Dave I am following all your tutorials thanks for such a great content !... I have a concern... when I am logged in and then go localhost:3000/login redirects me again to "login" and I need to be redirected to main page (bc I am already logged in)... How can I do this ? thanks in advance

@DaveGrayTeachesCode

2 жыл бұрын

When the component loads, you could check your login status and, if logged in, useNavigate to redirect to the page you want.

Question! How would you persist the token storage in front end best practice regarding security? I know you can use the local storage to do it, but I'm curious if there are some other ways to solve this problem in a more optimized way

@DaveGrayTeachesCode

2 жыл бұрын

In the login series, I address this and suggest state only for the auth token and then use a secure, httpOnly cookie for the refresh. In the persist tutorial, the refresh token is used to persist the login. There is a link to a good article about this topic in the description, too.

@Shuyinz

2 жыл бұрын

@@DaveGrayTeachesCode thanks! You are the best! 🎉😁

when website is refreshing datas are going to default how can i prevent it?

Hello thanks dave i learned a lot of information with you ، but please tell wich is best option use to secure data login and log out because you have more than 5 vedios and ways about login and logout . thanks

@DaveGrayTeachesCode

Жыл бұрын

Each video covers a different aspect of the same approach. All of the videos are using JWT access and refresh tokens. Check the video description for links to the other videos and/or playlist.

@kwrashazaka6051

Жыл бұрын

@@DaveGrayTeachesCode thnaks You are great

Hello Dave! Thanks so much for these tutorial series I have learned a lot, I must admit. I have a problem with the authController changes made I am getting an error that foundUser.refreshToken.filter is not a function when I attempted to log in, the frontend is logging error_empty_response to the console. It would be well appreciated if you help out. Big Thanks

@DaveGrayTeachesCode

Жыл бұрын

If filter is not a function then the value you have for foundUser.refreshToken is not an array. filter is an array method.

@emmanuelnodolomwanyi3082

Жыл бұрын

@@DaveGrayTeachesCode Thanks a lot for the reply, grateful. Here is the path the issue is let newRefreshTokenArray = !cookies?.jwt ? foundUser.refreshToken : foundUser.refreshToken.filter(rt => rt !== cookies.jwt);

@emmanuelnodolomwanyi3082

Жыл бұрын

@@DaveGrayTeachesCode Hi Dave!, Big thanks your answer really helped, I found where the error is, it was actually in the model where I defined the refreshToken I did not set the String value type to an array but rather just String, now I defined it like this [Sting] and it solved it. Many Thanks, Dave. I am buying a coffee trust me.

Hi Dave, I am implementing the login function using redux-toolkit now. there's a problem. save accessToken(or the other things) in the redux state store, and when the page is refreshed, all state values stored in the redux disappear. So, i need a way to persist login. in this case 1. make file such as 'PersistLogin.js' form your react-auth course. (->However, in the end, the confirmation also requires an access token, but if the token disappears, it cannot be confirmed.) 2. use redux-persist npm. (-> I studied that the reason why don't store accessToken in storage is because of security issues, but the irony is that it is also stored in storage.) which one is better way to use? or is there any other way? Thank you.

@DaveGrayTeachesCode

2 жыл бұрын

I think you are misunderstanding how the refresh token works. It is never stored in Javascript, but instead, in an httpOnly secure cookie. That cookie is sent to the refresh endpoint to retrieve a new access token when you use the persist login component. State will always disappear when you exit the app or refresh and I do not recommend the redux-persist approach of putting your token into local storage. The suggested prerequisite videos may further your understanding of the refresh token feature - especially the JWT Auth one where I provide a short slide show explaining the auth flow. 💯

@Minn-0321

2 жыл бұрын

@@DaveGrayTeachesCode Thank you for answer. I am thinking of saving access token to the redux store and using it for tasks that require auth such as 'writePost' etc, if I log in and receive access Token from the server. if there is valid accessToken state in the redux store, can write post. So, I wanted accessToken to be saved in the redux store (refreshToken already saved in cookie) , but the store will be initialized by reloading the page. You mean there's a problem with this way? I'm sorry that you might not understand my comment because I'm writing it through translation. Thank you

What vs code theme and font do you using?

@DaveGrayTeachesCode

2 жыл бұрын

GitHub theme 🚀

hi dave, how does this package decode the token without the access-token from the .env , isn't that a disappointment for the access token secret lol

@DaveGrayTeachesCode

Жыл бұрын

No, that's not how tokens work. The secret is to verify the signature, but the payload is simply base64 encoded. You can read more details here: jwt.io/introduction ..And you can see each part of a token decoded here: jwt.io/

@oribenez

3 ай бұрын

​@@DaveGrayTeachesCode I was wondering if someone asked for it and here I got the answer, thank you! from what I understand it works like a certificate to make sure no one has edited the Roles.

Instead of disabling devtools, you could setup CSP, so any browser extension can't access your code in the first place

@DaveGrayTeachesCode

2 жыл бұрын

Yes, this could be worthy of its own video. 💯 It is not a simple explanation like the basics suggested here. Good comment!

Filtering out passwords from React state seems completely pointless if they’re coming via network calls in the first place?

@DaveGrayTeachesCode

2 жыл бұрын

Passwords are not being sent back in a response and should not be. No reason to send a password to the client.

Sir i have a question .suppose we are successfully login in and if we if we copy the url of our some webpage like localhost:3000/homepage and then paste it in the address bar then we are redirect to the login page again ,because the auth state disappear at that point ... I dont know how to fix this issue ,i was trying to solve it but fails ❤️❤️ kindly tell me what to do

@DaveGrayTeachesCode

2 жыл бұрын

I recommend watching the full React Auth series (kzread.info/head/PL0Zuz27SZ-6PRCpm9clX0WiBEMB70FWwd) but especially the one on Login Persistence.

@usmanshahid8529

2 жыл бұрын

@@DaveGrayTeachesCode let me try that one 😊

what about adding google auth on this?

@DaveGrayTeachesCode

2 жыл бұрын

Each social media login is different. You could add many but the integrations would take time. Auth0 has a quick solution for this that I cover here: kzread.info/dash/bejne/onWu09WcdNubaJM.html

Hello sir. Please add a email verification feature on this series. thanks

@DaveGrayTeachesCode

Жыл бұрын

Great request! Thank you!

On backend when we decoded jwt we needed to have secret which we used to encrypt info into jwt. But here on frontend we can just decode it without even knowing secret. Why does it work like that? For me it looks like JWT is not save at all if you can just decode it using the decode library :)

@vishalvarma3014

3 ай бұрын

Exaclty, as per the video if someone could access roles from store then they could also access the token which eventually be decoded and get roles

In render props, dont use the array index as a key, this will lead to a very weird bugs

@DaveGrayTeachesCode

2 жыл бұрын

If you watch the full login series, I believe I say this when creating the list.. but I also mention I'm not going to import UUID or similar for an example list with 3 items.

i said this .thanks

@DaveGrayTeachesCode

2 жыл бұрын

Yes, I've had many comments and questions about this topic. I always appreciate yours 💯🚀

@abba3261

2 жыл бұрын

@@DaveGrayTeachesCode Thank you so much . Valuable videos are on KZread

To be honest, hiding the JWT from react devtools seems kinda nonsensical to me. The user can still easily get the token from the login network response or from localStorage, cookies or wherever the app persists it. Am I missing something here?

@DaveGrayTeachesCode

2 жыл бұрын

It's just a suggestion to help hide any state you want to store in React. It doesn't have to be a JWT. That said, check out the article(s) in the description about JWT storage. I agree with the articles in advising against the use of local storage.

@magicfibre

2 жыл бұрын

@@DaveGrayTeachesCode Aight, seems fair, thanks!

@JasonLaneZardoz

2 жыл бұрын

I didn't see this comment, I'd already made another reply here touching on this. We intercept request in a Service Worker and keep the JWT in memory in the SW. Yes a user can always see pretty much see anything if they know what they're doing. Your main enemy is XSS attacks in the client.

arent you installing nodejs packages in the browser? new webpack will even prevent you from doing that

@DaveGrayTeachesCode

2 жыл бұрын

Maybe you missed when I jumped back to Node.js for a bit to highlight bcrypt? I suggested the bcryptjs package for the frontend. I have no issue using jwt-decode as have many others.

no Completed Source Code ?

@DaveGrayTeachesCode

2 жыл бұрын

You can apply the concepts from this video to the starter source code repos linked to in the description.

bcrypt faster than bcryptjs right

@DaveGrayTeachesCode

2 жыл бұрын

Two different uses. bcrypt for Node.js and bcryptjs for frontend.

no email verification?

@DaveGrayTeachesCode

Жыл бұрын

That has been requested a few times and I'm adding to my upcoming schedule. It is not so much a login feature as it is a registration feature. More implementation for it on the backend.

@SajjadHematiNourani

Жыл бұрын

@@DaveGrayTeachesCode 🥰

@soothingsoundsofnature100

Жыл бұрын

@@DaveGrayTeachesCode Dave Thank you so much for Your videos. Could you also add " the " forgot password" feature. Thanks

nothing in the client is secure. anyone with devtools can both read the token from the network and decode it at will. the only real option would be storing the token in an http only cookie. so pretty much all of what you showed doesnt matter a bit unfortunately

@DaveGrayTeachesCode

2 жыл бұрын

I agree that nothing client-side is 100% secure. That said, you can take some precautions and consider what you are storing and where. It is not an all or nothing equation.

Unfortunately this video just diminishes the beauty of all previous videos... it should have been best practice all along instead of just one video trying to fix everything with packages. Disappointed. All new devs will lose all control here.

Что хочу сказать, проект говно. Бизнес логика реакта смешивается с компонентами, бизнес логика самого приложения тоже смешивается с компонентами. Redux для такой задачи вообще не нужен.

my vote.. stop doing tutorials that demonstrate bad practices.

@DaveGrayTeachesCode

2 жыл бұрын

Have a good day, Brice!

Hi Dave, I have been using your usePrivateAxios hook and I can't seem to get my req.params/req.query through. I notice that the {params: { x:y} } part of the axios.create is missing in axios.js. If I want to send params, do I need to adjust the axios.js, useAxiosPrivate, or is there something I can do to the GET request in my page container? This is my request on the page container. Please let me know if you can think of what the problem might be. const getEvents = async () => { try { console.log(userBigTags); const res = await axiosPrivate.get('/api/events/mybigtagevents', { params: { bigTags: userBigTags }, }); console.log(res); } catch (err) { console.log(err); } };

@DaveGrayTeachesCode

2 жыл бұрын

Params for a GET request go in the URL and you can achieve this using a template literal string for the URL to insert the values: `/api/events/mybigtagevents/?bigTags=${userBigTags}` ...For other types of requests (POST, PUT, etc), you would put them in the body of the request options.

@ryant2350

2 жыл бұрын

@@DaveGrayTeachesCode Bless you sir