In this tutorial, you will learn how to create custom React hooks that you can use in your app login form and any other form you want. That's the great thing about creating React hooks.. they are reusable! Take these hooks with you into your future projects, too! If you're just learning how to create a login system with React, go to the beginning of this React Login playlist here: th-cam.com/play/PL0Zuz27SZ-6PRCpm9clX0WiBEMB70FWwd.html
Having come from a predominantly back-end (Java) background, I am learning the front end as part of my current role. And truthfully, its not been an easy learning. Mostly because the tutorials out there are just tutorials and lack production level code quality and nuances. Until now. Watching these videos, have Dave write and explain what's he doing and why's he doing has been a great experience. Its like doing pair programming with a senior developer. Can't thank you enough. God bless you! 🙏
One of the best auth tutorial out there on youtube or any other course. most importantly it is way more advanced than all beginners auth tutorial really loving the series. Continue making videos like this 👍👍👍.
Wow, Dave! This is an epic tutorial! Custom hooks can be intimidating but you really reveal some of that custom hook magic here. If you ever post some more custom hook tutorials that would be fantastic! On a side note, I am sure you have a long list of potential tutorials to undertake, but if you are ever looking for more, might I suggest some tutorials on data mining user activity. Data is modern currency and I think anyone getting into coding would be interested in learning how to undertake data mining users in their MERN apps. Yet there isn't really much out there on how to approach data collection. I'm sure it would be a monumental undertaking but I'd buy your course on that in a heartbeat!
And, to be honest, although you have so many followers to reply to, I've never seen someone as humble as you are with all these comments. That must be taking a lot of your time.
for the SSR in nextjs, when during hydration, the input value rendered on the server side should match to the value on the client side. If different (because of missing localStorage), the nextjs will not happy and an error popup shown. It may be fixed by placing useEffect hook to load value from localStorage, so the value always be initialValue and after hydration the useEffect will replace the initalValue with the value from localStorage.
Hi Dave, thank you for your teaching! I wonder will you teach us how to implement a forget / reset password system? Like a user can receive an email having a link for them to reset the password.
@Dave Gray Hello Dave, thanks for your brilliant tutorial, I have this error (Converting circular structure to JSON --> starting at object with constructor 'HTMLInputElement' | property '__reactFiber$tt43cjn8o3g' -> object with constructor 'FiberNode' --- property 'stateNode' closes the circle at JSON.stringify ()) when I use toggle function in useToggle hook at 18:05 but when I use just ( const toggle = () => { setValue((prev) => !prev); };) it works fine, please help me in that!!
Thank you very much for this awesome series! I've found it very helpful! But I have one question about useLocalStorage hook: Why are you adding key into dependency array of useEffect hook? Won't it be working just fine without key in the dependency array ?
Thanks for such an amazing series of lessons. I've learned so much from it! Just some thought about useToggle hook. Instead of directly using useToggle hook inside Login page, would it be cleaner doing that in AuthProvider? In other words, AUthContext would have persist and setPersist (or we can rename it togglePersist), but that would come from calling useToggle. So in Login page, we still getting the whether the persist flag from AuthContext. This way, we can avoid calling localStorage.
I see no problem in accessing it from a context you create, but you will still need localStorage. If the app is refreshed / reloaded, it won't remember the toggle setting unless you keep it in localStorage and load it from there.
It is really special. Thanks for your share. I have a question that after I logged in and then I reload the page, it is still showing the login form that I think it is not good for the logic. Can you improve it too?
You're welcome. The logic is good, but you must be missing something in my code for either the frontend (React) or the backend (Node.js). I suggest downloading my source code and comparing to yours. I also recommend completing my Node.js full course to understand how the backend works: th-cam.com/video/f2EqECiTBL8/w-d-xo.html
Hi Dave! I am just trying to understand the logic with the toggleCheck function. If I console.log the value, it logs the onChange event. We don't give in any value in the onChange attribute on the checkbox. So yes now it automatically uses the !prev value, because the onChange event is an object and not a boolean. I just don't understand why we are doing this and I always try to understand everything when I am learning something :P Can you explain this to me, or is this a small bug?
For me dont't know why, but reset function from Input hook does not work when I login in in my own project..... Have same logic as you Dave... I consloe.log(value) of my input and it does not change. I test your code and your work as it should be... Don't have any idea where to schear issue now..
The best advice I can give is to look at my source code provided at a link in the description and compare to yours. One typo or one small thing missing can make a big difference.
@@DaveGrayTeachesCode already do that. Best things is ... Funcinality works on my register form, but on login form not.... What I notice is, funcionality works on login form when i put reset function bęfore axios response. If it is after, then IT wont work .... Strange for me. Sorry for typos, writting from phone with no english keyboard assistance
Yes, in the description look for "Node JS Full Course for building the backend REST API". The source code is there. Also the links to the other videos in this React login series are available, too. 💯🚀
Brilliant tutorials but i feel this is missing one thing (i used this tutorials but implemented the logic in my own project so i may have missed that) but login route should ensure that the user is logged out so someone who has already logged in should not be able to access the login route it should navigate that user to default protected route
can you make one hooks which can check internet connection is availabel or not ?if not then after such a time it remind or show notification plzzzzzzzzzzz
@@DaveGrayTeachesCode What do you think about React Native, Dave? I enjoyed it for the most part. Mainly because it's so similar to React itself. Just in general what do you think about it? If you needed to make an App for a client (for both platforms) would you use React Native? Performance wise?
@@Colstonewall I cannot confirm performance wise, but I've heard Flutter has the best performance for cross platform choices. I would choose React Native because of my familiarity with React. Unless a native app was truly needed, I would build a PWA. (Progressive Web App)
@@DaveGrayTeachesCode Yeah, I felt the same way. I made an App and chose React Native because of my familiarity of React. My only problem was Credit Card integration. I think I eventually got that fixed due to new SDK's by Stripe. Anyways, thank you for the reply (and all your awesome vids)! It's appreciated, Dave.
Hi Dave, thanks for the tutorial! I was reviewing this lesson here and I had a logical impasse, but what if the user opened the site link in another tab? On the other tab, we don’t have a state, there will be a request to update the token, we will update, okay, but what will happen to the previous tab? On it, the token will no longer be relevant =/
Cookies are shared between tabs. If you are using an httpOnly secure cookie as I have suggested in this auth series, you can still use it in a new tab.
@@DaveGrayTeachesCodeDo you mean to pass the same authorization as if we just refreshed the page? But here again the question is, in the previous window we did not click “remember me”, then authorization will not happen in the new tab, although automatic authorization should take place, despite the fact that I did not click “remember me”.
@@viktorkasap I might need to go back and check - it has been over a year since published - but if you did not click "Remember Me", it should not attempt to authorize automatically.
@@DaveGrayTeachesCode Everything is fine in your code, yes, it works like that, if the user did not click “remember me”, then in a new tab he will have to enter his login and password. But, everyone is used to a different behavior, if I am logged in, then by opening the link in a new tab, the user will also expect that he is in the system, and then the question arises how to do this with the current implementation, most likely jwt is not very suitable for such solutions and it is more convenient to use sessions
I assume you are referring to the custom useLocalStorage hook that has useState in it. It is because local storage stores the data objects as strings. More about local storage here: th-cam.com/video/zmFDvFwj6-8/w-d-xo.html
Thank u very much. Appreciate your effort. Learning a lot from you. I have a request. I know you are busy, but if you would like to create a full stack blog project using the MERN stack, then it would be very helpful for someone like me who also like blogging beside coding. I searched a lot but i didn't found anything very effective. It would be very helpful if you do it like where we can upload blog posts very easily with images and other useful functionality. Thanks a lot to you. Wish you all the best with your dream.
Thank you for the request! While understanding React will definitely help with a blog project, I'd suggest using something like Next.js. I hope to do a series on it later this year. 🚀
when use ip address:3000 or change BASE_URL from localhost to ip address why the page auto logout when refresh how to protect?,Could you give me advice.
This is likely due to the Node.js backend code. You must update the CORS config to allow the URL you are using to access the REST API. I am guessing you are receiving a CORS rejection response. This is covered as we build the Node.js backend in my Node.js full course: th-cam.com/video/f2EqECiTBL8/w-d-xo.html
In this tutorial, you will learn how to create custom React hooks that you can use in your app login form and any other form you want. That's the great thing about creating React hooks.. they are reusable! Take these hooks with you into your future projects, too! If you're just learning how to create a login system with React, go to the beginning of this React Login playlist here: th-cam.com/play/PL0Zuz27SZ-6PRCpm9clX0WiBEMB70FWwd.html
Having come from a predominantly back-end (Java) background, I am learning the front end as part of my current role. And truthfully, its not been an easy learning. Mostly because the tutorials out there are just tutorials and lack production level code quality and nuances. Until now. Watching these videos, have Dave write and explain what's he doing and why's he doing has been a great experience. Its like doing pair programming with a senior developer. Can't thank you enough. God bless you! 🙏
Thank you so much for the kind words! 🙏🙏💯
One of the best auth tutorial out there on youtube or any other course. most importantly it is way more advanced than all beginners auth tutorial really loving the series.
Continue making videos like this 👍👍👍.
Thank you! 🙏🚀
Thanks!
Thank you for the support, Ryan!
Wow, Dave! This is an epic tutorial! Custom hooks can be intimidating but you really reveal some of that custom hook magic here. If you ever post some more custom hook tutorials that would be fantastic! On a side note, I am sure you have a long list of potential tutorials to undertake, but if you are ever looking for more, might I suggest some tutorials on data mining user activity. Data is modern currency and I think anyone getting into coding would be interested in learning how to undertake data mining users in their MERN apps. Yet there isn't really much out there on how to approach data collection. I'm sure it would be a monumental undertaking but I'd buy your course on that in a heartbeat!
Thank you for the kind words and the requests, Ryan! 🙏🙏
Good sir, thank you for providing your knowledge for free in such a detail in your channel. Your work is very much appreciated.
You're welcome, Lucas! 💯
I've not finished react course yet, but i think after finishing course it will be fun to learn this one. Thanks for lessons!
You're welcome!
Great course. Learned a lot of things from your videos (even though I am experienced developer). Keep up your good work!
Glad to hear it! Thank you! 💯
how much experience you have ?
dave i know you are bored of how many times i comment on your vids but you are just great and no words to express on that
im planing to watch this serios 2 times with a deferent account to understand it will and i hope Im supporting you like that
And, to be honest, although you have so many followers to reply to, I've never seen someone as humble as you are with all these comments. That must be taking a lot of your time.
Just may Allah protect you and bless you.
I have recently finished the JWT part for the backend. It is the time to pick this one!
Right on! 🚀 I suggest starting at the beginning of this series when you do.
for the SSR in nextjs, when during hydration, the input value rendered on the server side should match to the value on the client side. If different (because of missing localStorage), the nextjs will not happy and an error popup shown. It may be fixed by placing useEffect hook to load value from localStorage, so the value always be initialValue and after hydration the useEffect will replace the initalValue with the value from localStorage.
Best channel about react
Thank you! 💯🙏
Best Tutorial 👍👍👍
Thank you! 🚀💯
Hi Dave, thank you for your teaching! I wonder will you teach us how to implement a forget / reset password system? Like a user can receive an email having a link for them to reset the password.
Yes, I've received this request several times, and it is on my list to create a video for soon! Thanks! 💯🚀
Nice one!! This video was very useful
Glad it was helpful!
Wow, where is the 1000-like button? I've gotta smash it!🤩
@Dave Gray
Hello Dave, thanks for your brilliant tutorial,
I have this error (Converting circular structure to JSON
--> starting at object with constructor 'HTMLInputElement'
| property '__reactFiber$tt43cjn8o3g' -> object with constructor 'FiberNode'
--- property 'stateNode' closes the circle
at JSON.stringify ())
when I use toggle function in useToggle hook at 18:05 but when I use just
(
const toggle = () => {
setValue((prev) => !prev);
};)
it works fine, please help me in that!!
Hey dave, can you make a video about drag-drop items on react. I searched alot but I can't find a video that explains good.
Thanks for the request! Great suggestion 💯🚀
Excellent demonstration of creating and using Custom Hooks in React. Thanks, Dave
{2022-04-03}
You're very welcome! 🙏🚀
Can you explain about Typescript Generic in detail ?
Thank you very much for this awesome series!
I've found it very helpful!
But I have one question about useLocalStorage hook:
Why are you adding key into dependency array of useEffect hook?
Won't it be working just fine without key in the dependency array ?
It has been over a year since I made this one. I would need to go back through the code myself. Best way to find out... did you try it?
When u pass in parameters to a custom hook, you need to pass those parameters into the use effect too in order to avoid weird behaviour
Thanks for such an amazing series of lessons. I've learned so much from it!
Just some thought about useToggle hook. Instead of directly using useToggle hook inside Login page, would it be cleaner doing that in AuthProvider? In other words, AUthContext would have persist and setPersist (or we can rename it togglePersist), but that would come from calling useToggle. So in Login page, we still getting the whether the persist flag from AuthContext. This way, we can avoid calling localStorage.
I see no problem in accessing it from a context you create, but you will still need localStorage. If the app is refreshed / reloaded, it won't remember the toggle setting unless you keep it in localStorage and load it from there.
It is really special. Thanks for your share. I have a question that after I logged in and then I reload the page, it is still showing the login form that I think it is not good for the logic. Can you improve it too?
You're welcome. The logic is good, but you must be missing something in my code for either the frontend (React) or the backend (Node.js). I suggest downloading my source code and comparing to yours. I also recommend completing my Node.js full course to understand how the backend works: th-cam.com/video/f2EqECiTBL8/w-d-xo.html
Hi Dave!
I am just trying to understand the logic with the toggleCheck function.
If I console.log the value, it logs the onChange event. We don't give in any value in the onChange attribute on the checkbox. So yes now it automatically uses the !prev value, because the onChange event is an object and not a boolean.
I just don't understand why we are doing this and I always try to understand everything when I am learning something :P Can you explain this to me, or is this a small bug?
Hello! Can you please provide a timestamp to the spot in the video that you are referencing? Thanks!
For me dont't know why, but reset function from Input hook does not work when I login in in my own project..... Have same logic as you Dave... I consloe.log(value) of my input and it does not change.
I test your code and your work as it should be...
Don't have any idea where to schear issue now..
The best advice I can give is to look at my source code provided at a link in the description and compare to yours. One typo or one small thing missing can make a big difference.
@@DaveGrayTeachesCode already do that.
Best things is ... Funcinality works on my register form, but on login form not....
What I notice is, funcionality works on login form when i put reset function bęfore axios response.
If it is after, then IT wont work .... Strange for me.
Sorry for typos, writting from phone with no english keyboard assistance
Probably because the user input field is a controlled input and the 'username' is being stored and retrieved from localStorage..
where is the backend that you use for this app
In the description, look for the Node.js link with source code.
Thank you for the tutorial. Can I get the express.js source code for practice?
Yes, in the description look for "Node JS Full Course for building the backend REST API". The source code is there. Also the links to the other videos in this React login series are available, too. 💯🚀
Brilliant tutorials but i feel this is missing one thing (i used this tutorials but implemented the logic in my own project so i may have missed that) but login route should ensure that the user is logged out so someone who has already logged in should not be able to access the login route it should navigate that user to default protected route
Thank you! Yes, if that behavior is desired, it is easy to add. Glad you were able to implement it. 🚀
How do you did that?
can you make one hooks which can check internet connection is availabel or not ?if not then after such a time it remind or show notification plzzzzzzzzzzz
Great request! Thank you! 💯🚀
Loved it
Thank you!
Any chance you'll be doing any react native lectures in the future?
I'd like to do a React Native series. Maybe later this year. Thanks for the request! 🙏🚀
@@DaveGrayTeachesCode What do you think about React Native, Dave? I enjoyed it for the most part. Mainly because it's so similar to React itself. Just in general what do you think about it? If you needed to make an App for a client (for both platforms) would you use React Native? Performance wise?
@@Colstonewall I cannot confirm performance wise, but I've heard Flutter has the best performance for cross platform choices. I would choose React Native because of my familiarity with React. Unless a native app was truly needed, I would build a PWA. (Progressive Web App)
@@DaveGrayTeachesCode Yeah, I felt the same way.
I made an App and chose React Native because of my familiarity of React.
My only problem was Credit Card integration. I think I eventually got that fixed due to new SDK's by Stripe.
Anyways, thank you for the reply (and all your awesome vids)! It's appreciated, Dave.
Hi Dave, thanks for the tutorial!
I was reviewing this lesson here and I had a logical impasse, but what if the user opened the site link in another tab? On the other tab, we don’t have a state, there will be a request to update the token, we will update, okay, but what will happen to the previous tab? On it, the token will no longer be relevant =/
Cookies are shared between tabs. If you are using an httpOnly secure cookie as I have suggested in this auth series, you can still use it in a new tab.
@@DaveGrayTeachesCodeDo you mean to pass the same authorization as if we just refreshed the page?
But here again the question is, in the previous window we did not click “remember me”, then authorization will not happen in the new tab, although automatic authorization should take place, despite the fact that I did not click “remember me”.
@@viktorkasap I might need to go back and check - it has been over a year since published - but if you did not click "Remember Me", it should not attempt to authorize automatically.
@@DaveGrayTeachesCode Everything is fine in your code, yes, it works like that, if the user did not click “remember me”, then in a new tab he will have to enter his login and password. But, everyone is used to a different behavior, if I am logged in, then by opening the link in a new tab, the user will also expect that he is in the system, and then the question arises how to do this with the current implementation, most likely jwt is not very suitable for such solutions and it is more convenient to use sessions
Nice
Thank you! 💯
Why do you use JSON.parse() and JSON.stringify() in UseState () hook?
I assume you are referring to the custom useLocalStorage hook that has useState in it. It is because local storage stores the data objects as strings. More about local storage here: th-cam.com/video/zmFDvFwj6-8/w-d-xo.html
Thank u very much. Appreciate your effort. Learning a lot from you. I have a request. I know you are busy, but if you would like to create a full stack blog project using the MERN stack, then it would be very helpful for someone like me who also like blogging beside coding. I searched a lot but i didn't found anything very effective. It would be very helpful if you do it like where we can upload blog posts very easily with images and other useful functionality. Thanks a lot to you. Wish you all the best with your dream.
Thank you for the request! While understanding React will definitely help with a blog project, I'd suggest using something like Next.js. I hope to do a series on it later this year. 🚀
@@DaveGrayTeachesCode Do you use Typescript Dave? What's your opinion on it?
@@hgsbrodi I think it brings more organization to the chaos. And that's a good thing. I'm looking forward to covering it for students this year 💯
when use ip address:3000 or change BASE_URL from localhost to ip address why the page auto logout when refresh how to protect?,Could you give me advice.
This is likely due to the Node.js backend code. You must update the CORS config to allow the URL you are using to access the REST API. I am guessing you are receiving a CORS rejection response. This is covered as we build the Node.js backend in my Node.js full course: th-cam.com/video/f2EqECiTBL8/w-d-xo.html
@@DaveGrayTeachesCode Thank you
Login is not working in incognito mode because of response header is not working here...Can you help how to do this?
Incognito mode means you do not want cookies or storage so this goes against what incognito mode is for: support.google.com/chrome/answer/9845881
???????