Part 9 of The MERN Stack Project Series - In this lesson, we add login authentication to our the React app of our MERN Stack Project. We will integrate our login form with Redux and RTK Query. This tutorial is not for beginners. If you are a beginner, check out my full courses all in one playlist here: ua-cam.com/play/PL0Zuz27SZ-6M1Uopt6_VL3gf3cpMnwavm.html
In my case, after adding dispatch(apiSlice.util.resetApiState()) inside inQueryStarted, isSuccess property of useSendLogoutMutation() won't be true anymore, so I can't return the beginning page. How can I handle the problem?
yea i encountered the same problem that isSuccess always defaults to 'false' because sendLogout clears the apiSlice like you said. I just made a custom handleLogout function { sendlogout() navigate("/") }
ya I got the same problem, either you cane remove dispatch(apiSlice.util.resetApiState()) or you can use your custom isSuccess state or use setTimeOut and wait till navigate then reset the state like, setTimeout(() => { dispatch(apiSlice.util.resetApiState()) }, 1000) though I am still getting value of data as null in const { data } = await queryFulfilled refer code from next lessong in authApiSlice
ya I got the same problem, either you cane remove dispatch(apiSlice.util.resetApiState()) or you can use your custom isSuccess state or use setTimeOut and wait till navigate then reset the state like, setTimeout(() => { dispatch(apiSlice.util.resetApiState()) }, 1000) though I am still getting value of data as null in const { data } = await queryFulfilled refer code from next lessong in authApiSlice
Hi Dave,In Multi-Step Form how to keep filled data,When we are go back and forth due to page refresh we lost the previous filled data ?,Please help me on this,What is the best practice in industry
I have not published a multi-step form tutorial for React, but yes, you can keep the state when changing screens of the form. That is not the same as refreshing the page though. I do have a tutorial that shows how to keep the user data entered into the form after a page refresh - Look at the useInput and useLocalStorage hooks in this tutorial: ua-cam.com/video/eQrbjvn_fSc/v-deo.html
Thanks again Dave. As a user of 'old style Redux' who is refactoring an app I was about to ask how, as well as sending the token to API endpoints, I could check if there is a token in state because I currently conditionally render some header links based on auth status (token and an 'isLoggedIn' boolean). Instead I looked at our previous work and managed to create the extra state and a relevant selector for use in components. Keep up the amazing work!
You nailed it, Kev! We will be doing the same in an upcoming lesson on Role-Based Access Control and Permissions. We will providing not only different header links but also frontend routing based on the role of who is logged in.
That is still coming in this series. Some of the prerequisites for this series mentioned in the first video have this as well. We will be implementing role-based access control and permissions.
@@DaveGrayTeachesCode I've looked through the docs for rtk query and goodness, it's a lot to take in. It's very complicated and advanced stuff that you'll mostly likely not be able to get started quickly. A lot is happening
if we store the access token in memory this would also mean that when we reload the app on the login page we will have to login each time? even if we use the refresh token to generate a new auth token on the login screen that would basically flash the login screen for a bit and then redirect us to the authenticated screen we specify correct?
I will be applying a persistent login strategy in the next lesson or two for this series. To get an idea of how it works, you can check out the prerequisite React Login videos for this series listed in the description - especially the persistent login video. With the prefetch component we already have in place for this project, you will be able to refresh from any protected page suprisingly fast. Any delay will depend on connection speed because - as you mentioned - refreshing the page reloads any React app.
Really appreciate your efforts to give such great content for free! Had the following doubt, could you please check? The token that we use is sensitive information and can't be stored in redux state right?
The refresh token should not be in state, but you can use the access token in state. That's what we do here. Do not put either in localStorage. I avoid that.
Never in local storage. The client does need to send them back somehow. That's the reason for the httpOnly secure cookie. I've provided references with the videos. Do you have references that disagree?
Hi Dave, why we can use build.mutation in 'Get' method for the refresh? I thought it is a standard code for mutation in POST, PUT, PATCH methods in building.mutation and GET method in build.query?
This is an excellent question! We can specify any http method we want in a mutation although - as you mention - the most common are POST, PUT, PATCH, and DELETE. We send a GET request for the refresh endpoint because we are not sending anything in the body of the request as we would with POST and the others. That said, it is still a mutation - because mutation refers to our state - and we will be replacing the access token in our Redux state with the response we get from the request. I hope that helps!
Hi Dave ... I would appreciate if you could please guide me on the order of playlist I should follow in order to learn Complete React properly There seems to be four playlist 1. React Tutorials 2. React Redux Toolkit 3. React login registration and authentication 4. React hooks
I suggest React Tutorials as it holds most of the other React tutorials as well. React Tutorials starts with my full course and then covers most of the React hooks.
Dave you are really doing great Job thank you for spreading the knowlodge , i hope you will add the login using google account also and reset password by email.
@@DaveGrayTeachesCode thank you so much for your reply , it will be great because it will make it such a compelete tutorial especially that it will be connected with the fire base and also the register might be with an email or gamil and also the password recovery. thank you again. BIG RESPECT
Will the refresh request have a body that would normally be sent with POST, UPDATE, DELETE, or similar HTTP methods? No, it will only send the cookie that contains the refresh token. At the same time, it will mutate our app state by receiving a new access token in response to the request. We could send the cookie with a POST request method or others, but it is not necessary.
Hey Dave when foundUser.password is passed to bycrpyt.compare it says data and hash arguments required. I was able to solve it by adding .select ('+password')
Part 9 of The MERN Stack Project Series - In this lesson, we add login authentication to our the React app of our MERN Stack Project. We will integrate our login form with Redux and RTK Query. This tutorial is not for beginners. If you are a beginner, check out my full courses all in one playlist here: ua-cam.com/play/PL0Zuz27SZ-6M1Uopt6_VL3gf3cpMnwavm.html
In my case, after adding dispatch(apiSlice.util.resetApiState()) inside inQueryStarted, isSuccess property of useSendLogoutMutation() won't be true anymore, so I can't return the beginning page. How can I handle the problem?
yea i encountered the same problem that isSuccess always defaults to 'false' because sendLogout clears the apiSlice like you said. I just made a custom handleLogout function { sendlogout() navigate("/") }
ya I got the same problem, either you cane remove dispatch(apiSlice.util.resetApiState()) or you can use your custom isSuccess state or use setTimeOut and wait till navigate then reset the state like, setTimeout(() => {
dispatch(apiSlice.util.resetApiState())
}, 1000)
though I am still getting value of data as null in const { data } = await queryFulfilled
refer code from next lessong in authApiSlice
ya I got the same problem, either you cane remove dispatch(apiSlice.util.resetApiState()) or you can use your custom isSuccess state or use setTimeOut and wait till navigate then reset the state like, setTimeout(() => {
dispatch(apiSlice.util.resetApiState())
}, 1000)
though I am still getting value of data as null in const { data } = await queryFulfilled
refer code from next lessong in authApiSlice
@@babenshin7841 Your method works thanks. actually isLoading remains true and isSuccess remains false.
Hi Dave,In Multi-Step Form how to keep filled data,When we are go back and forth due to page refresh we lost the previous filled data ?,Please help me on this,What is the best practice in industry
I have not published a multi-step form tutorial for React, but yes, you can keep the state when changing screens of the form. That is not the same as refreshing the page though. I do have a tutorial that shows how to keep the user data entered into the form after a page refresh - Look at the useInput and useLocalStorage hooks in this tutorial: ua-cam.com/video/eQrbjvn_fSc/v-deo.html
Why you can make dynamic form or use local storage to save value from user input?
@@DaveGrayTeachesCode Appreciate your reply Dave and please do video on multistep form and data persistence in page refresh.
Soon I will start learning React and your channel is definitely at the top of the list. Thank you for doing this.
You're welcome! 💯
very useful and well explained
Glad to hear that!
Make a mern project with backend microservice architecture with using typescript.I didn't find these all things in youtube
Nice request!
Thanks again Dave. As a user of 'old style Redux' who is refactoring an app I was about to ask how, as well as sending the token to API endpoints, I could check if there is a token in state because I currently conditionally render some header links based on auth status (token and an 'isLoggedIn' boolean). Instead I looked at our previous work and managed to create the extra state and a relevant selector for use in components. Keep up the amazing work!
You nailed it, Kev! We will be doing the same in an upcoming lesson on Role-Based Access Control and Permissions. We will providing not only different header links but also frontend routing based on the role of who is logged in.
Hi Dave!) Thanks for sharing your skills) Can you show how to implement Role Based Access Control or maybe Attribute Based Access Control system?
That is still coming in this series. Some of the prerequisites for this series mentioned in the first video have this as well. We will be implementing role-based access control and permissions.
Is it just me or rtk query is just a bit painful to work with? The API is kinda overwhelming and difficult to master
Once you get the hang of it, I think you'll find it is pretty good! View the RTK builder endpoints as your API layer to match your backend.
@@DaveGrayTeachesCode I've looked through the docs for rtk query and goodness, it's a lot to take in. It's very complicated and advanced stuff that you'll mostly likely not be able to get started quickly. A lot is happening
@@nanonkay5669 yes, as a prerequisite to this MERN Project course, I listed my Redux full course. It helps to complete that first.
Could you make react testing videos using jest and react testing library ? And also testing redux actions/reducers and action creators
Great requests, Waleed! 🙏💯
I agree, with the huge amount of good information he has regarding react, testing will be a wiser next series
What happens if user copy the refresh token in cookie before log out and refresh the access token? How can we handle this stuff sir?
if we store the access token in memory this would also mean that when we reload the app on the login page we will have to login each time? even if we use the refresh token to generate a new auth token on the login screen that would basically flash the login screen for a bit and then redirect us to the authenticated screen we specify correct?
I will be applying a persistent login strategy in the next lesson or two for this series. To get an idea of how it works, you can check out the prerequisite React Login videos for this series listed in the description - especially the persistent login video. With the prefetch component we already have in place for this project, you will be able to refresh from any protected page suprisingly fast. Any delay will depend on connection speed because - as you mentioned - refreshing the page reloads any React app.
some advanced redux s**t right there, and i love it. :p thanks dave. pardon my french. i got excited.
Glad you liked it!
Hi. Iam waiting for this video
I'm sure about what I will expect in this video, thanks you very much for this
You're very welcome!
Server not set cookies on client side. How to fix this issue?
Fixing by setting secure: true and fetchBaseQuery option credentials: "include"
How to persist the token inside the redux after the hard reload of the page?
I do have videos that cover the persist strategy. Always worth searching my channel, but here is one link: ua-cam.com/video/-JJFQ9bkUbo/v-deo.html
Really appreciate your efforts to give such great content for free!
Had the following doubt, could you please check? The token that we use is sensitive information and can't be stored in redux state right?
The refresh token should not be in state, but you can use the access token in state. That's what we do here. Do not put either in localStorage. I avoid that.
You should never store your refresh or access tokens in the client. This is really bad practice.
Never in local storage. The client does need to send them back somehow. That's the reason for the httpOnly secure cookie. I've provided references with the videos. Do you have references that disagree?
Hi Dave, why we can use build.mutation in 'Get' method for the refresh? I thought it is a standard code for mutation in POST, PUT, PATCH methods in building.mutation and GET method in build.query?
This is an excellent question! We can specify any http method we want in a mutation although - as you mention - the most common are POST, PUT, PATCH, and DELETE. We send a GET request for the refresh endpoint because we are not sending anything in the body of the request as we would with POST and the others. That said, it is still a mutation - because mutation refers to our state - and we will be replacing the access token in our Redux state with the response we get from the request. I hope that helps!
@@DaveGrayTeachesCode thanks sharing your knowledge
Hi Dave ... I would appreciate if you could please guide me on the order of playlist I should follow in order to learn Complete React properly
There seems to be four playlist
1. React Tutorials
2. React Redux Toolkit
3. React login registration and authentication
4. React hooks
I suggest React Tutorials as it holds most of the other React tutorials as well. React Tutorials starts with my full course and then covers most of the React hooks.
@@DaveGrayTeachesCode alright thanks 👍🏻
Dave you are really doing great Job thank you for spreading the knowlodge , i hope you will add the login using google account also and reset password by email.
Thanks for the requests! 💯 That may go above and beyond this series, but your requests will make nice additional add-ons. 🚀
@@DaveGrayTeachesCode thank you so much for your reply , it will be great because it will make it such a compelete tutorial especially that it will be connected with the fire base and also the register might be with an email or gamil and also the password recovery. thank you again. BIG RESPECT
9:35 Why are you using mutation for GET endpoint?
Will the refresh request have a body that would normally be sent with POST, UPDATE, DELETE, or similar HTTP methods? No, it will only send the cookie that contains the refresh token. At the same time, it will mutate our app state by receiving a new access token in response to the request. We could send the cookie with a POST request method or others, but it is not necessary.
Would it be awesome in future to have Microservices with MERN stack, that would be killer, great content Dave as always
Thank you and great request! 💯
Best Fulldiv and Mentor I've ever seen! thanks a lot for your Hardwoek
You're welcome and thank you for the kind words! 💯
Thanks
Welcome!
great series! how many videos are left in this mern list ?
Thank you, Shakil! Not many left. I never count out how many. I just go where the required content leads. We are getting close! 💯🚀
{2023-03-24}, {2023-03-25}, {2023-03-30}
Hey Dave when foundUser.password is passed to bycrpyt.compare it says data and hash arguments required. I was able to solve it by adding .select ('+password')
I don't have an error? Compare to my source code at the course resources link and see if you have any differences in your code.
@@DaveGrayTeachesCode I will have a look.
@@DaveGrayTeachesCode will you be doing pagination