Creating a login with authentication is often a required part of creating a web app. In this tutorial, you will learn how to create a login form that submits information with Axios for authentication with a server. The login will also be created with accessibility in mind. This is really part 2 of a registration / login tutorial series. Part 1 is the registration with validation tutorial found here: ruclips.net/video/brcHK3P6ChQ/видео.html
Hi @dave, I missed the other video which I will watch later but I have future request for this video. Can you add a session & localStorage to maintain the use session for certain period so that when you refresh local host it won't log you out until and unless you logout or session expires. These are a good add-ons to this project. Cheers! and thanks for your work.
Hey SW, thanks for the request! I do not recommend localStorage (or sessionStorage) for storing tokens even though the majority of tutorials use them. A refresh token should really be in an http-Only secure cookie with the access token stored in app state. I cover this in detail for the backend in my Node JS full course: ruclips.net/video/f2EqECiTBL8/видео.html But you are absolutely right about adding a persistent login to this series, and I plan to do that (with the cookie)! 💯🚀
Hi @DaveGrayTeachesCode I wanted to know which sections in the node video (its 7 hours long) correspond to this project? can you give us the chapters exactly
You have done a great job; I am watching this in 2024 and I will not hesitate to say that I didn't find such tutorial on entire you tube. So super helpful to me.
I know what you're talking about. Those thick azz peanut butter on the roof of their mouth type accents. They're very annoying when looking for solutions in coding when coding is already hard enough 😤.......
Thank you for responding with this video after my comment on the react tutorial. Your course stacks backend and front end expertly! Now, the server will have issued a refresh token in the form of a HTTP cookie. I cant wait to see how you handle the refresh in the client app!
Dave, your channel is massively underrated. Really well put together + love how each video in the series builds on the previous. This is exactly what I look for in Udemy courses that I pay for! Liked and subbed!!
dave is the only youtuber, who before i even watched the video, i gave a thumbs up. quality of content, delivery of concepts all neatly wrapped and can be understood in depth 😍😘
What makes your videos great is that you split frontend and backend. You didn't use any backend here yet I still understand what is going on on backend and how to manage login registration in frontend with auth.
For anyone comes to this tutorial lately, the second argument of axios request, in the time this tutorial was published, it needed to be json (that is why he used json.stringnify). But currently, it is ok to pass an object, no need to convert to json anymore Moreover, in a axios post request, the content type is default set to json, so u can remove that
This series of videos is exactly what I was looking for. Let me thank you for this great content! Perfectly explained and such a clean code that makes it even easier for someone to understand what is being explained. Thanks again
Thanks Dave Gray I really appreciate your commitment and time to go through thing like these, and how you take your time to explain bit by bit of the code thanks👍👊
After so many days of searching on RUclips, I stumbled upon your video playlist on how to set refreshTokens and use them in a React app. I also learned a lot about Private Routes and other concepts. I'm extremely grateful for the valuable content you've provided. I really appreciate what you're doing. Although the playlist is a year old, it's still the best. Just one small doubt i have. In the context API, you have initialized the auth state and createContext with an empty object. If i do the same, it is not redirecting to the login page. May I know why?
Thanks for your amazing and concise tutorial. Would you make a tutorial for Django Rest Framework, since I wanna use Django as a backend Server instead of Node JS.
Hi Dave, First of all thanks for these great tutorials!! What's the difference between this tutorial and your "React Login Authentication with JWT Access, Refresh Tokens, Cookies and Axios" tutorial. Also, is the backend that you use in this tutorial created in the full Node js Guide? Thanks!
You're welcome! This is part of a video series. This video is the 2nd video. The other one you mention is the 3rd video. Playlist: ruclips.net/p/PL0Zuz27SZ-6PRCpm9clX0WiBEMB70FWwd ...yes, the backend is created in my Node.js full course here: ruclips.net/video/f2EqECiTBL8/видео.html
Great video! Quick question. If my role is actually a string and not an array like it is in your video, would the include that you used for the protected routes still work?
As always, you make it so simple for us. thank you. my question is, what happens if I add react-query to my app. should I change this AuthProvider and use react-query somehow? can you make a video about that? Thank you
I skimmed through the video, excellent job, however I have a silly question, forgive me, How were you able to route to the home or make shift home page upon logging in?
Hi, Dave. Ty for your lessons. Why do you put post request body in JSON.stringify function? We can just put js object there as the 2nd parameter { user, pwd }
19:33 What else do you typically put inside of the api folder? Aside from the function that creates the axios instance. I already placed my api calls in their respective stores so.
Good question - it really depends on how you (or your team) wants to organize the project. I like the modern Redux approach where you have a separate API layer with RTK Query and all endpoints are defined there.
Hello sir. Again an excellent tutorial with amazing explanation. I have some questions if i may ask. 1. Is state safe to store authentication details? And we have to login every time we refresh page because state will disappear. What is a better authentication approach so we dynamically checking on server if user is authenticated ? Ty for this amazing tutorial
Hello Vasilis - yes, there are more videos in the series. One provides a solution for Login Persistence which handles persisting your login even when the page is refreshed: ruclips.net/video/27KeYk-5vJw/видео.html ..Best Practices / suggestions for storing auth state and more in this video: ruclips.net/video/3QaFEu-KkR8/видео.html
Is it correct to set the axios base url depending on whether we are in a dev or prod environment? I've been doing the env checking using interceptors, and I discovered here the base url setting, which one is better in this case? Thanks for sharing your knowledge Dave.
Thank you! Connecting to MySQL or any other database happens in the backend code. If you use Node.js with MySQL, you could use something like Sequelize to connect with the database: www.npmjs.com/package/sequelize
Amazing content!!! !! :) Added to my TOP content providers 💪💪 one thing, it would be nice to have this backend api link to test it out on ourself or maybe some json-server to mock it somehow :) Keep doing, amazing work! waiting for same with typescirpt 😊😊
I am currently trying to make a sign in and sign up with vite react js and also using Axios as the database. What is the difference between the normal react js and the vite react js? Is there a way for me to convert between react js to vite react js?
It is still just React.js. Vite is more for the dev environment and build. Just check the Vite.js site for the changes on things like environment variables, static assets, etc: vitejs.dev/guide/
Hi Dave , Your tutorial is awesome , I want to follow along react-authentication series but i dont want to create nodejs project for backend from scratch that we are using in current project. Is there any way i can directly setup backend and focus on react part . If there is way please let me know it will be greate help Thanks
You may find another Rest API, but it may not respond the same. You could possibly learn the React concepts without using the backend, but if you want it to function as you go, you'll need the backend Rest API.
Dave, Thanks a lot for this tutorial! Do you have another version of this tutorial with Typescript ? Or do you know how to use { setAuth } with Typescript ?
You're welcome! I have created tutorials with Typescript on my channel yet - beginner series coming soon! setAuth is the setState function from useState. Look up how to use Typescript with setState.
@@DaveGrayTeachesCode, can you please help me with the course link that you referred to in the video along with react with the typescript playlist. I am unable to find it in the description section.
Hey Dave, your tutorials have been really helpful to me. I have this question @ 22:37 - What is the thing with withCredentials? Why do we need to specify it? I was working with an API and I was getting an error when I set withCredentials to true. I have googled about it a bit but it wasn't clear to me why it is needed? Could help me understand its need?
This is golden.....Thanks Dave your a saver. my challenge is that I tried to use your already created backend so i can follow along but I can't seem to get the desired result. no response from the backend. the best i got is an index.html. how do I call the other end points like register, login so I can get the token and all from the front end. i don't know backend yet(still focusing on front end)
Of course! You can build the backend to integrate with this React Login series by completing my Node.js course where it is built: ruclips.net/video/f2EqECiTBL8/видео.html ..the Node.js course uses a MongoDB database.
Does your backend have secure: true but you are in dev mode with localhost only using http instead of https? Just a possibility. Remove secure: true while in dev mode if so.
Hello dave i have followed your video and successfully connected back and front ends, thank you for that. But i have a question: Right now im getting my data to the body so it comes with param, what do i have to change in login.js to make it send with data
You can keep going in this React Login series to see how I send data and interact with a Node.js REST API. With a login form, you should send a POST request to login. As you mentioned, your data should be in the body of the request.
Why using at 24:13 (in a try / catch block) optional chaining? response.data will be guaranteed to exist from axios. Even when there is no AccessToken on the response.data we will get undefined either way, right? And in case we get an error, we will jump straight to the catch (error) block, right? I'm new to this optional chaining thing, thats why I'm asking. Cheers Tim
Hello Dave, thank you so much for such quality content you are creating! I have already completed the Node (loved the allowedOrigin) series and just done as well this one, with persisting login. Absolute illuminating ! There is something I can't wrap my head on and if I remember correctly is in this video you first implemented. When creating the Login component, into the submit function, you call setAuth and pass to it user, psw, role and accessToken. Is it correct that all this values are gonna be stored into the app state globally (as long as the Provider pass it down) ? Is it necessary to pass it also the password? Thank you again for all the time you are investing !
I can't remember in which tutorial I break out the auth state to the Context API with an AuthProvider and create a useAuth hook, but that is eventually what happens. Then whatever component needs the auth state can just bring in the useAuth hook. Early on in this series, I may have just put the auth state in the login component until the expanded access was needed.
Hi, I'm new to react and I'm loving your videos. Great work! A quick one, is it really safe to store the password in state. I've seen it in several tutorial and I'm just wondering if that's really safe. PS: I'm from a back-end side of things
Yes, storing in state is simply saying storing in app memory. It is not put in local storage or anywhere else. If you use a password at all, it will be in memory at some point as it needs to be sent. A page refresh / reload will empty "app state" which is memory - not really storage.
I must say, It's Awesome. For Now I'm Working in MS ACCESS and Also Making Tutorials. I need a bit of your help that in which language i may move next, Can You Please help me in making right choice. Thanks in Advance
For web development, start with the 3 pillars of web dev: HTML, CSS, and JavaScript. After those, move on to Advanced JS and a library/framework of your choice like React, Vue, Svelte, etc. Or emphasize web design after the pillars and move on to CSS libraries/frameworks like SASS, Bootstrap, Tailwind, MaterialUI, etc.
Hi, pls let me know which nodeJS tutorial need to follow of your youtube channel so that I can also create the same backend environment in my local with authentication fucntionality which you are using in this ReactJS tutorial.
Creating a login with authentication is often a required part of creating a web app. In this tutorial, you will learn how to create a login form that submits information with Axios for authentication with a server. The login will also be created with accessibility in mind. This is really part 2 of a registration / login tutorial series. Part 1 is the registration with validation tutorial found here: ruclips.net/video/brcHK3P6ChQ/видео.html
Hi @dave, I missed the other video which I will watch later but I have future request for this video.
Can you add a session & localStorage to maintain the use session for certain period so that when you refresh local host it won't log you out until and unless you logout or session expires.
These are a good add-ons to this project.
Cheers! and thanks for your work.
Hey SW, thanks for the request! I do not recommend localStorage (or sessionStorage) for storing tokens even though the majority of tutorials use them. A refresh token should really be in an http-Only secure cookie with the access token stored in app state. I cover this in detail for the backend in my Node JS full course: ruclips.net/video/f2EqECiTBL8/видео.html But you are absolutely right about adding a persistent login to this series, and I plan to do that (with the cookie)! 💯🚀
Hi @DaveGrayTeachesCode I wanted to know which sections in the node video (its 7 hours long) correspond to this project? can you give us the chapters exactly
You have done a great job; I am watching this in 2024 and I will not hesitate to say that I didn't find such tutorial on entire you tube. So super helpful to me.
Finally someone that speaks clear and concise. Loved the tutorial going to look at your full course. Thanks alot.
You're welcome! 🙏
I know what you're talking about. Those thick azz peanut butter on the roof of their mouth type accents. They're very annoying when looking for solutions in coding when coding is already hard enough 😤.......
Thank so much. In India we call teacher as GURU. Your my guru from now on.
Thank you!
Thank you for responding with this video after my comment on the react tutorial. Your course stacks backend and front end expertly! Now, the server will have issued a refresh token in the form of a HTTP cookie. I cant wait to see how you handle the refresh in the client app!
Thank you, DH! I'm also looking forward to setting up role-based protected routes!
Dave, your channel is massively underrated. Really well put together + love how each video in the series builds on the previous. This is exactly what I look for in Udemy courses that I pay for! Liked and subbed!!
Much appreciated! Thank you, Shawn! 💯
dave is the only youtuber, who before i even watched the video, i gave a thumbs up.
quality of content, delivery of concepts all neatly wrapped and can be understood in depth 😍😘
Thank you for the kind words, Vincent! 🙏🙏
Couldn’t be more clear! I’ve already have worked doing some things in React but this wrap up my knowledge rather nicely! Congrats 🎉 I just subscribed!
Welcome aboard!
How amazing, this is the first tutorial I've watched from you and it's so very well organized and you explain things bit by bit. Thanks a lot Dave.
You're welcome! I am glad it helped 💯
just landed here today and I want to say that this channel is amazing!
Thank you!
I am still a beginner web developement but I really apreciate your work. Thank you
Damn, one of the best youtube channels in the developer space.
What makes your videos great is that you split frontend and backend. You didn't use any backend here yet I still understand what is going on on backend and how to manage login registration in frontend with auth.
Thank you for the kind words, Enes! 🙏
The clarity, the excellent presentation. Best in RUclips. I'll be referring to you as Boss.
Thank you for the kind words, Jukka! 🙏🙏
OMG, you're so good at making things complicated for beginners !
Your sarcasm is not lost on me. 😆
amazing man
Glad it helped! 💯
For anyone comes to this tutorial lately, the second argument of axios request, in the time this tutorial was published, it needed to be json (that is why he used json.stringnify). But currently, it is ok to pass an object, no need to convert to json anymore
Moreover, in a axios post request, the content type is default set to json, so u can remove that
Great work, you have put so much effort in these tutorials. Learned a lot. Thanks.
This series of videos is exactly what I was looking for. Let me thank you for this great content! Perfectly explained and such a clean code that makes it even easier for someone to understand what is being explained. Thanks again
You're welcome, Santiago! 🙏
This is the most straight forward tutorial i have ever come accrossed. Thanks to you Dave
You're welcome!
you're the coder Dave.. thanks for such awesome stuff!
My pleasure!
Brilliant! This is amazing content. You have an incredible ability to get the complexity across, thank you so much.
Very Easy to follow tutorial. Loved every bit of it. Will definitely watch the entire playlist and more of your courses.
Happy to hear that!
"keep striving for progress over perfection and a little progress everyday will go a very long way" I love it :)
Amazing tutorials Dave, truly.
Glad to hear that! 💯
Amazing tutorial, I learn much things that I was struck in, thank you!
You're welcome! 💯
Thanks Dave Gray I really appreciate your commitment and time to go through thing like these, and how you take your time to explain bit by bit of the code thanks👍👊
You're very welcome!
I like how specific this is. Thank you for making content for us beginners and intermidiate users.
You're very welcome! 💯
Thank you very much for this. It helped alot .
I really think this tutorial is underrated.
Glad it was helpful!
Thank you man. Awesome, best tutorial ever. Keep it up
This guy is great. I like the tutorial a lot and learnt a lot too !
28:15 Nice trick. Did not know about that :)
After so many days of searching on RUclips, I stumbled upon your video playlist on how to set refreshTokens and use them in a React app. I also learned a lot about Private Routes and other concepts. I'm extremely grateful for the valuable content you've provided. I really appreciate what you're doing. Although the playlist is a year old, it's still the best.
Just one small doubt i have. In the context API, you have initialized the auth state and createContext with an empty object. If i do the same, it is not redirecting to the login page. May I know why?
Dave, I can't thank you enough for this amazing content. Thank You!
You're very welcome!
I've watched a few of your videos. You are a really fine instructor, and your pacing is perfect. Thank you!
Thank you for the kind words, Charlie! 🙏
Thanks for sharing your knowledge!
You're welcome, Lucas! 💯
Well explained hats off to u Dave U r helping me a lot thanks is a very tiny word for ur work amazing buddy
Thanks for your amazing and concise tutorial.
Would you make a tutorial for Django Rest Framework, since I wanna use Django as a backend Server instead of Node JS.
Thank you for the request!
Hi Dave! Which parts of the Node JS video corresponds to the login project?
Great job. Thanks Dave.
Thank you! 💯
Hi Dave,
First of all thanks for these great tutorials!!
What's the difference between this tutorial and your "React Login Authentication with JWT Access, Refresh Tokens, Cookies and Axios" tutorial.
Also, is the backend that you use in this tutorial created in the full Node js Guide? Thanks!
You're welcome! This is part of a video series. This video is the 2nd video. The other one you mention is the 3rd video. Playlist: ruclips.net/p/PL0Zuz27SZ-6PRCpm9clX0WiBEMB70FWwd ...yes, the backend is created in my Node.js full course here: ruclips.net/video/f2EqECiTBL8/видео.html
Excellent tutorial. Thanks a lot.
Thank you very much for the great tutorial! That's exactly what I've looking for to understand authentication.
Glad it was helpful!
Excellent tutorial.Thanks alot Dave.
You're welcome!
Great explanation! Thank You for your work!
Glad it was helpful!
Great video! Quick question. If my role is actually a string and not an array like it is in your video, would the include that you used for the protected routes still work?
As always, you make it so simple for us. thank you.
my question is, what happens if I add react-query to my app. should I change this AuthProvider and use react-query somehow? can you make a video about that? Thank you
Thank you, Francis! 🙏 Yes, it would be a good refactor with React Query, and I plan to do this video soon! 💯
Thanks for describing every steps in details and thanks again for maintaining code quality.
#subscribed
You're welcome! 🙏🙏
I skimmed through the video, excellent job, however I have a silly question, forgive me, How were you able to route to the home or make shift home page upon logging in?
ooh, I just saw it, where you used the success state to render a page
Glad you found it! 💯
Thanks for source code man appreciate it. You gained new sub
Great tutorials. Thank you.
Hi, Dave. Ty for your lessons. Why do you put post request body in JSON.stringify function? We can just put js object there as the 2nd parameter { user, pwd }
19:33 What else do you typically put inside of the api folder? Aside from the function that creates the axios instance. I already placed my api calls in their respective stores so.
Good question - it really depends on how you (or your team) wants to organize the project. I like the modern Redux approach where you have a separate API layer with RTK Query and all endpoints are defined there.
Hello sir. Again an excellent tutorial with amazing explanation. I have some questions if i may ask.
1. Is state safe to store authentication details?
And we have to login every time we refresh page because state will disappear. What is a better authentication approach so we dynamically checking on server if user is authenticated ?
Ty for this amazing tutorial
Hello Vasilis - yes, there are more videos in the series. One provides a solution for Login Persistence which handles persisting your login even when the page is refreshed: ruclips.net/video/27KeYk-5vJw/видео.html ..Best Practices / suggestions for storing auth state and more in this video: ruclips.net/video/3QaFEu-KkR8/видео.html
@@DaveGrayTeachesCode Thx sir. U deserve everything.
Excellent material as always.
Thank you, Gabriel 🙏💯
Is it correct to set the axios base url depending on whether we are in a dev or prod environment? I've been doing the env checking using interceptors, and I discovered here the base url setting, which one is better in this case? Thanks for sharing your knowledge Dave.
The env with a production vs development check is great. The environment variable still provides a constant for the BASE_URL which is the main idea.
super and very good explanation with example. very nice. thx
Thank you!
Thank you for the video it was very helpful ❤️
But I have a concern about logout. It seems you haven't implement a logout function here... 🤔
Keep going in this series. There will be one.
Hello Dave, Your Tutorial is awesome can you please tell us how you connect with database mysql and curd operations
Thank you! Connecting to MySQL or any other database happens in the backend code. If you use Node.js with MySQL, you could use something like Sequelize to connect with the database: www.npmjs.com/package/sequelize
exactly what I need it, thank you very much!
You're welcome! 💯
Amazing content!!! !! :)
Added to my TOP content providers 💪💪
one thing, it would be nice to have this backend api link to test it out on ourself or maybe some json-server to mock it somehow :)
Keep doing, amazing work! waiting for same with typescirpt 😊😊
Thank you, Thomas! You can use the Node.js backend that is built in my Node.js for Beginners course here: ruclips.net/video/f2EqECiTBL8/видео.html
You are a good teacher. Everything that you explained realy understandable. Thank you very much..❤️🔥
Glad it was helpful! And you're welcome! 💯
Great video, it helped me a lot!
Hello Dave! Thank u so much! Can you add mail confirmation guide (after registration) ?
This is a good suggestion! Thank you, Avel. It may be more of a Node.js tutorial than a frontend tutorial, but it all goes together. 💯🚀
@@DaveGrayTeachesCode 💪🏽
I am currently trying to make a sign in and sign up with vite react js and also using Axios as the database. What is the difference between the normal react js and the vite react js? Is there a way for me to convert between react js to vite react js?
It is still just React.js. Vite is more for the dev environment and build. Just check the Vite.js site for the changes on things like environment variables, static assets, etc: vitejs.dev/guide/
Hi Dave ,
Your tutorial is awesome , I want to follow along react-authentication series but i dont want to create nodejs project for backend from scratch that we are using in current project.
Is there any way i can directly setup backend and focus on react part . If there is way please let me know it will be greate help
Thanks
You may find another Rest API, but it may not respond the same. You could possibly learn the React concepts without using the backend, but if you want it to function as you go, you'll need the backend Rest API.
Thanks, Dave really great tutorial. My only issue now is figuring out how to logout
If you keep going in this React Login series, a logout is added to the flow.
I have never seen a tutorial this perfect and amazing. Thanks so much!!
Glad it was helpful!
Isnt a generic error message better than a specific one like "no server response"? For mitigating hackers
this is the best tutorial for me, thanks!
You're welcome! 💯
Thank you so much. It is a good example, but how to call axiosPrivate not inside the Component, for example inside redux operations?
You're welcome! 🙏I've had several requests for a login flow with Redux which will make a good future tutorial! 💯
Dave, Thanks a lot for this tutorial! Do you have another version of this tutorial with Typescript ? Or do you know how to use { setAuth } with Typescript ?
You're welcome! I have created tutorials with Typescript on my channel yet - beginner series coming soon! setAuth is the setState function from useState. Look up how to use Typescript with setState.
@@DaveGrayTeachesCode, can you please help me with the course link that you referred to in the video along with react with the typescript playlist.
I am unable to find it in the description section.
Great stuff, mate. Many thanks
You're welcome!
Great Job.Thanks, a lot Dave.
You're welcome!
Hey Dave, your tutorials have been really helpful to me. I have this question @ 22:37 - What is the thing with withCredentials? Why do we need to specify it? I was working with an API and I was getting an error when I set withCredentials to true. I have googled about it a bit but it wasn't clear to me why it is needed? Could help me understand its need?
Glad to hear that. It is a config setting in axios. If I remember correctly, I used axios here. Reference this page: axios-http.com/docs/req_config
Just perfect and the best one , wich theme vs code you are using ?? because its beautiful
Thank you 🙏 GitHub theme 🚀
@@DaveGrayTeachesCode thank you and keep it up , you are the best
found it very insightful.
This is golden.....Thanks Dave your a saver.
my challenge is that I tried to use your already created backend so i can follow along but I can't seem to get the desired result. no response from the backend.
the best i got is an index.html.
how do I call the other end points like register, login so I can get the token and all from the front end.
i don't know backend yet(still focusing on front end)
Ah yes, you need to set up your own MongoDB with it and provide the environment variables... All backend stuff completed in my Node.js course.
Okay.... thanks a lot
Hi, is it possible to write this information into some sort of database instead? This was a great tutorial!!
Of course! You can build the backend to integrate with this React Login series by completing my Node.js course where it is built: ruclips.net/video/f2EqECiTBL8/видео.html ..the Node.js course uses a MongoDB database.
hmmm will you be my next binge?
🍕🍕🍕
Very good tutorial. Can you also add the "Forgot Password" feature. Thanks
Good request!
Great video, thank you 🙌
You're welcome! 🙏
Awesome. Thank you
Thanks for the content... any suggestions on how to persist the context values upon resfresh of the page
Keep going in this series. There is a video dedicated to that. Links in description - look for Persist Login
@@DaveGrayTeachesCode Thanks
What will happend if user refreshes page after logging in? Won't context data be lost ?
Link to Login Persistence video in the description, but I suggest watching the full series in order.
I love your video !
Thanku sir this tutorial is helpfull.please make a Angular Mean series thanku...!!
Thank you! 🙏 And thanks for the request, too! 🚀
The cookie doesnt set on the front end. The token does generate at the backend though but idk whats wrong. I believe is code is flawless.
Does your backend have secure: true but you are in dev mode with localhost only using http instead of https? Just a possibility. Remove secure: true while in dev mode if so.
Hello dave i have followed your video and successfully connected back and front ends, thank you for that. But i have a question:
Right now im getting my data to the body so it comes with param, what do i have to change in login.js to make it send with data
You can keep going in this React Login series to see how I send data and interact with a Node.js REST API. With a login form, you should send a POST request to login. As you mentioned, your data should be in the body of the request.
Thanks for your generosity about spending time to teach others. This tutorial really helps me alot ❤
You are so welcome!
Why using at 24:13 (in a try / catch block) optional chaining?
response.data will be guaranteed to exist from axios.
Even when there is no AccessToken on the response.data we will get undefined either way, right?
And in case we get an error, we will jump straight to the catch (error) block, right?
I'm new to this optional chaining thing, thats why I'm asking. Cheers Tim
Hi Tim - I often use optional chaining as it doesn't hurt anything but in the instance you described, it is probably not necessary. Good work! 💯
@@DaveGrayTeachesCode Thanks for answering that. I think I understood it now.
Hello Dave, thank you so much for such quality content you are creating! I have already completed the Node (loved the allowedOrigin) series and just done as well this one, with persisting login. Absolute illuminating !
There is something I can't wrap my head on and if I remember correctly is in this video you first implemented.
When creating the Login component, into the submit function, you call setAuth and pass to it user, psw, role and accessToken.
Is it correct that all this values are gonna be stored into the app state globally (as long as the Provider pass it down) ? Is it necessary to pass it also the password?
Thank you again for all the time you are investing !
I can't remember in which tutorial I break out the auth state to the Context API with an AuthProvider and create a useAuth hook, but that is eventually what happens. Then whatever component needs the auth state can just bring in the useAuth hook. Early on in this series, I may have just put the auth state in the login component until the expanded access was needed.
what a video! thank so much
You're very welcome!
25:00 But why should we save the password in AuthContext. Is it considered to be safe?
Hey - I really love your tutorials - can I request laravel 9-react tutorials?
Thank you! And thank you for the request!
Hi, I'm new to react and I'm loving your videos. Great work! A quick one, is it really safe to store the password in state. I've seen it in several tutorial and I'm just wondering if that's really safe. PS: I'm from a back-end side of things
Yes, storing in state is simply saying storing in app memory. It is not put in local storage or anywhere else. If you use a password at all, it will be in memory at some point as it needs to be sent. A page refresh / reload will empty "app state" which is memory - not really storage.
@@DaveGrayTeachesCode Alright. Thanks for the clarification Dave
I must say, It's Awesome. For Now I'm Working in MS ACCESS and Also Making Tutorials.
I need a bit of your help that in which language i may move next, Can You Please help me in making right choice.
Thanks in Advance
For web development, start with the 3 pillars of web dev: HTML, CSS, and JavaScript. After those, move on to Advanced JS and a library/framework of your choice like React, Vue, Svelte, etc. Or emphasize web design after the pillars and move on to CSS libraries/frameworks like SASS, Bootstrap, Tailwind, MaterialUI, etc.
@@DaveGrayTeachesCode Thanks alot for your advice bro
Hi, pls let me know which nodeJS tutorial need to follow of your youtube channel so that I can also create the same backend environment in my local with authentication fucntionality which you are using in this ReactJS tutorial.
The Node.js Full Course - there should be a link to it in this video's description.
in english thank you teacher , in arabic شكرا جزيلا يا استاذ
This video helped me.