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: ruclips.net/p/PL0Zuz27SZ-6PRCpm9clX0WiBEMB70FWwd
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
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 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?
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 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 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.
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...
Thank you! 🙏 I do cover the login with email and password in the React login series here: ruclips.net/video/X3qyxo_UTR4/видео.html And the verification takes place in the backend Node.js code: ruclips.net/video/Nlg0JrUt0qg/видео.html
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 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
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?
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.
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
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.
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.
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/
@@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.
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
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.
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.
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 :)
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 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);
@@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.
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
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?
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.
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.
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?
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.
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: ruclips.net/video/pAzqscDx580/видео.html
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
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.
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.
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. 💯
@@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
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.
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
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 для такой задачи вообще не нужен.
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); } };
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.
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: ruclips.net/p/PL0Zuz27SZ-6PRCpm9clX0WiBEMB70FWwd
Dave is among those few RUclips programmers who focuses on security of credentials leakage .. hats off
Thank you my friend! 🙏
This channel is a gold mine.
Thank you for the kind words 🙏💯
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
You're welcome! I have provided reference links for resources and articles in the description that should help you learn more. 💯🚀
@@DaveGrayTeachesCode thanks so much
I think we need to link up
The tutorials are so good that these are first thing in the morning that I watch after waking up. Addicted to your tutorials!
Thanks!
Thank you for the support, Ryan!
Best youtube series ever
Thank you!
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.
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)
Glad it was helpful! 💯🚀
@@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?
@@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
Yeah actually 😅❤️
Great person and great teacher 🌟
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.
Good note!! 💯
Will anyone be posting the updated useRefreshToken hook?
THX a lot!
Make more advanced videos please for middle devs.
You're welcome! 🙏 Thanks for the request! 💯
It comes in a such good moment, thanks!
You're welcome, Ruan! 💯
Omg
Thanks so much Dave
You're welcome, Richard! 🙏💯
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.
Go back through the React login series (link in description) where I demonstrate exactly how to do that 💯
@@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.
@@JasonLaneZardoz this sounds great!! I hope you can open source it.
@@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.
@@JasonLaneZardoz please do!
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...
Thank you! 🙏 I do cover the login with email and password in the React login series here: ruclips.net/video/X3qyxo_UTR4/видео.html And the verification takes place in the backend Node.js code: ruclips.net/video/Nlg0JrUt0qg/видео.html
Thanks a lot for this wonderful tution dave
excellent video! hope you get into nextjs soon!
Thank you! I am looking forward to it! 💯🚀
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🚀
@@siddiqahmed3274 I agree! 🙏💯
@@siddiqahmed3274 mongodb is useless in almost all scenarios.
@@GabrielMartinez-ez9ue and why do you think mongodb is useless?
Thank you man. It was very helpful. God bless you
You're welcome!
just subscribed!
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
Agreed 💯 As I note in the video, if you are the one developing the backend this is the best choice.
@@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
@@JoseMedina-xp6vi you're welcome! Here's my Auth0 tutorial: ruclips.net/video/pAzqscDx580/видео.html
i wasn't subscribed to your channel, what a shame my friend, you're great, thanks for sharing your knowledge with us
I appreciate that! 💯🚀
thanks Dave 🥰
You're welcome! 🙏
excellent thank you !
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....
Thank you, Usman 🙏 That's a good request and one that I would like to do. 💯
@@DaveGrayTeachesCode welcome sir ❤️
Great video!
Thank you! 🙏
You have a new subscriber!
greate vídeo, thanks
Thank you, Cecon! 🙏
thank you)
You're welcome! 💯
Thansk Dave, your videos are amazing!!
Could you please do VueJS videos as well?
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 👌👌👌👌
Thank you! 💯
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?
Thanks for this video. How to load dynamic select field data from a network call while we write something in the input field?
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.
Yes right, using select box as search field. When we type something in the field it get the result as the option.
thanks
You're welcome!
Great tutorials as usual. Pls make a series of tutorials with nextjs redux toolkit api jwt auth
Thank you! 🙏 I am looking forward to working with Next.js later this year. 🚀
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
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.
@@DaveGrayTeachesCode
thnaks
You are great
So good tutorial
Thank you, Sona 🙏
Which extension are you using which highlight the function block? when you select the function
Thanks for the tutorials. Could you add CRUD operations to this tutorial?
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.
Instead of disabling devtools, you could setup CSP, so any browser extension can't access your code in the first place
Yes, this could be worthy of its own video. 💯 It is not a simple explanation like the basics suggested here. Good comment!
Shouldn't we also disable Redux devtools for production?
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
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/
@@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.
Hello sir. Please add a email verification feature on this series. thanks
Great request! Thank you!
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
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.
@@DaveGrayTeachesCode thanks! You are the best! 🎉😁
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 ?
when website is refreshing datas are going to default how can i prevent it?
In render props, dont use the array index as a key, this will lead to a very weird bugs
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.
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 :)
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
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
If filter is not a function then the value you have for foundUser.refreshToken is not an array. filter is an array method.
@@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);
@@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.
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
When the component loads, you could check your login status and, if logged in, useNavigate to redirect to the page you want.
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?
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.
@@DaveGrayTeachesCode Aight, seems fair, thanks!
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.
Filtering out passwords from React state seems completely pointless if they’re coming via network calls in the first place?
Passwords are not being sent back in a response and should not be. No reason to send a password to the client.
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?
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.
What vs code theme and font do you using?
GitHub theme 🚀
what about adding google auth on this?
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: ruclips.net/video/pAzqscDx580/видео.html
i said this .thanks
Yes, I've had many comments and questions about this topic. I always appreciate yours 💯🚀
@@DaveGrayTeachesCode Thank you so much . Valuable videos are on RUclips
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
I recommend watching the full React Auth series (ruclips.net/p/PL0Zuz27SZ-6PRCpm9clX0WiBEMB70FWwd) but especially the one on Login Persistence.
@@DaveGrayTeachesCode let me try that one 😊
no email verification?
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.
@@DaveGrayTeachesCode 🥰
@@DaveGrayTeachesCode Dave Thank you so much for Your videos. Could you also add " the " forgot password" feature. Thanks
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.
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. 💯
@@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
arent you installing nodejs packages in the browser? new webpack will even prevent you from doing that
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.
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
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.
bcrypt faster than bcryptjs right
Two different uses. bcrypt for Node.js and bcryptjs for frontend.
no Completed Source Code ?
You can apply the concepts from this video to the starter source code repos linked to in the description.
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.
my vote.. stop doing tutorials that demonstrate bad practices.
Have a good day, Brice!
Что хочу сказать, проект говно. Бизнес логика реакта смешивается с компонентами, бизнес логика самого приложения тоже смешивается с компонентами. Redux для такой задачи вообще не нужен.
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);
}
};
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.
@@DaveGrayTeachesCode Bless you sir