React User Login and Authentication with Axios
HTML-код
- Опубликовано: 6 июн 2024
- Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
Create a React User Login and Authentication form with Axios request submission. We'll build a user login form and submit the username and password with Axios to a backend REST API for authentication.
💖 Support me on Patreon ➜ / davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Advanced React: bit.ly/AdvReactDev
- Jr to Senior Web Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
- Master FAANG Coding Interviews: bit.ly/FAANGInterview
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 React JS for Beginners full course - 9 hours: • React JS Full Course f...
👀 React Login tutorial series playlist: • React Login, Registrat...
🔗 Source Code: github.com/gitdagray/react_lo...
📬 Course Updates ➜ courses.davegray.codes/
React User Login and Authentication with Axios
(00:00) Intro
(00:18) Welcome
(00:49) Starting App State
(01:30) Create the Login component
(02:12) Adding React Hooks
(04:22) Starting the JSX
(05:24) Username Input
(08:19) Password Input
(09:22) Finish the form
(10:18) handleSubmit function
(12:03) Displaying the success screen
(12:59) Testing the form
(13:57) Creating Auth context and state
(18:09) Adding Axios to the project
(20:01) Adding Axios to handleSubmit
(25:11) Handling Errors
(27:10) Node JS Authentication server
(28:55) Testing Server Responses
☕ Buy Me A Coffee: www.buymeacoffee.com/davegray
🔗 React Register Form with Validation, Axios and a11y: • React JS Form Validati...
🔗 Node JS Full Course (with source code) for building the backend REST API that will receive your form submissions: • Node.js Full Course fo...
🔗 FontAwesome for React:
fontawesome.com/v5.15/how-to-...
🔗 RegExr for Regular Expressions: regexr.com/
📚 Accessible Form References:
WebAIM.org - Advanced Forms: webaim.org/techniques/forms/a...
WebAIM.org - Form Validation: webaim.org/techniques/formval...
MDN - Aria Attributes:
aria-invalid: developer.mozilla.org/en-US/d...
aria-describedby: developer.mozilla.org/en-US/d...
aria-live: developer.mozilla.org/en-US/d...
aria-label: developer.mozilla.org/en-US/d...
🔗 ES7 React JS Snippets Extension for VS Code:
marketplace.visualstudio.com/...
🔗 React Dev Tools Extension for Chrome:
chrome.google.com/webstore/de...
📚 References:
ReactJS Official site: reactjs.org/
React Wikipedia: en.wikipedia.org/wiki/React_(...)
React Jobs: www.ziprecruiter.com/candidat...
✅ Follow Me:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
Was this tutorial about creating a React User Login form with authentication, axios, and accessibility features helpful? If so, please share. Let me know your thoughts in the comments.
#react #login #form
![TRASH or PASS! Eminem ( Houdini ) [REACTION!!!]](http://i.ytimg.com/vi/cB1WrZcMwMc/mqdefault.jpg)
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
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 😤.......
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 💯
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! 🙏🙏
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! 🙏
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!
Great work, you have put so much effort in these tutorials. Learned a lot. Thanks.
OMG, you're so good at making things complicated for beginners !
Your sarcasm is not lost on me. 😆
Damn, one of the best youtube channels in the developer space.
I am still a beginner web developement but I really apreciate your work. Thank you
amazing man
Glad it helped! 💯
just landed here today and I want to say that this channel is amazing!
Thank you!
Brilliant! This is amazing content. You have an incredible ability to get the complexity across, thank you so much.
Thank you man. Awesome, best tutorial ever. Keep it up
Amazing tutorials Dave, truly.
Glad to hear that! 💯
Thank so much. In India we call teacher as GURU. Your my guru from now on.
Thank you!
The clarity, the excellent presentation. Best in RUclips. I'll be referring to you as Boss.
Thank you for the kind words, Jukka! 🙏🙏
Amazing tutorial, I learn much things that I was struck in, thank you!
You're welcome! 💯
you're the coder Dave.. thanks for such awesome stuff!
My pleasure!
I like how specific this is. Thank you for making content for us beginners and intermidiate users.
You're very welcome! 💯
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!
Dave, I can't thank you enough for this amazing content. Thank You!
You're very welcome!
This guy is great. I like the tutorial a lot and learnt a lot too !
This is the most straight forward tutorial i have ever come accrossed. Thanks to you Dave
You're welcome!
Great job. Thanks Dave.
Thank you! 💯
Excellent tutorial.Thanks alot Dave.
You're welcome!
Excellent material as always.
Thank you, Gabriel 🙏💯
Well explained hats off to u Dave U r helping me a lot thanks is a very tiny word for ur work amazing buddy
Excellent tutorial. Thanks a lot.
Great video, it helped me a lot!
Thanks for sharing your knowledge!
You're welcome, Lucas! 💯
Thank you very much for this. It helped alot .
I really think this tutorial is underrated.
Glad it was helpful!
Thanks for describing every steps in details and thanks again for maintaining code quality.
#subscribed
You're welcome! 🙏🙏
Great tutorials. Thank you.
Thank you very much for the great tutorial! That's exactly what I've looking for to understand authentication.
Glad it was helpful!
exactly what I need it, thank you very much!
You're welcome! 💯
Great stuff, mate. Many thanks
You're welcome!
Thanks very much. Awesome video!
You're welcome!
Thanks for source code man appreciate it. You gained new sub
Great explanation! Thank You for your work!
Glad it was helpful!
Great Job.Thanks, a lot Dave.
You're welcome!
Great video, thank you 🙌
You're welcome! 🙏
super and very good explanation with example. very nice. thx
Thank you!
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!
found it very insightful.
this is the best tutorial for me, thanks!
You're welcome! 💯
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?
Awesome. Thank you
You are a good teacher. Everything that you explained realy understandable. Thank you very much..❤️🔥
Glad it was helpful! And you're welcome! 💯
I have never seen a tutorial this perfect and amazing. Thanks so much!!
Glad it was helpful!
Hi Dave! Which parts of the Node JS video corresponds to the login project?
excellent thank you !
I love your video !
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 }
what a video! thank so much
You're very welcome!
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
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.
You are the best , thank you!
Thank you, Kenia! 🙏💯
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
TY!
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.
28:15 Nice trick. Did not know about that :)
hmmm will you be my next binge?
🍕🍕🍕
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.
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.
Best of the bests tutorial
Thank you! 💯
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!
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!
at 24:58, is it necessary and safe to setAuth with pwd ? Thank you
Thanku sir this tutorial is helpfull.please make a Angular Mean series thanku...!!
Thank you! 🙏 And thanks for the request, too! 🚀
thx dave
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
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! 💯
Thank you very much.
You are welcome!
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.
Thanks for your generosity about spending time to teach others. This tutorial really helps me alot ❤
You are so welcome!
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
super video merci beaucoup
You're welcome! 🚀
Isnt a generic error message better than a specific one like "no server response"? For mitigating hackers
what is the use of setAuth and auth variable ,code can be in flow to reach successful sign in without it
25:00 But why should we save the password in AuthContext. Is it considered to be safe?
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.
Another question, what's the reason you use JSON.stringify to parse the body you send in a post request? I've always sent the object directly. What are the pros and cons?
Good question! 💯 This is something I did not need to do with Axios, but you must do it if you just use the fetch API. There is no con, but if you do not do it, Axios will do the object to JSON conversion automatically. Another reason to like Axios!
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! 💯
Liked it most
Thank you! 🙏
Thank you sir
You're welcome, Nando! 💯
So good tutorial
Thank you so much, Sona! 💯
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/
im following along for react native im hopping it wont get complicated, I wish my team chose react instead
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 💪🏽
Thank you so much Dave ! You are really amazing, that's so much learned in a so concise and clear way.
You're welcome, Zerui!
First i want to give you Dave so many thanks for your videos, its a greatful job what you do. And hello together in the community.
I have tried to insert 1:1 code in my project, for die Role-Based Authorization.
I am very beginner for react. I get to the home route after a login, so far so good. But after I want to call the home route again, the user is no longer authenticated. Unfortunately, I can't understand what the problem might be, so I'm contacting you here to perhaps get a tip. In this case, is it a safe method to save the AuthState in the LocalStorage?
Otherwise, sorry for my English and hope that you get on well with React ;) (FYI: UI-Style with ChakraUI)
Any reason why you're saving user password in global context?
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! 💯
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
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.
thank you !
You're welcome!