React User Login and Authentication with Axios
ฝัง
- เผยแพร่เมื่อ 23 ก.ค. 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
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: th-cam.com/video/brcHK3P6ChQ/w-d-xo.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: th-cam.com/video/f2EqECiTBL8/w-d-xo.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
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 💯
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 😤.......
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! 💯
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!
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!
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! 🙏🙏
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.
Great work, you have put so much effort in these tutorials. Learned a lot. Thanks.
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
Brilliant! This is amazing content. You have an incredible ability to get the complexity across, thank you so much.
OMG, you're so good at making things complicated for beginners !
Your sarcasm is not lost on me. 😆
amazing man
Glad it helped! 💯
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!
Thank you man. Awesome, best tutorial ever. Keep it up
Amazing tutorial, I learn much things that I was struck in, thank you!
You're welcome! 💯
Amazing tutorials Dave, truly.
Glad to hear that! 💯
Dave, I can't thank you enough for this amazing content. Thank You!
You're very welcome!
you're the coder Dave.. thanks for such awesome stuff!
My pleasure!
Thank so much. In India we call teacher as GURU. Your my guru from now on.
Thank you!
I like how specific this is. Thank you for making content for us beginners and intermidiate users.
You're very welcome! 💯
The clarity, the excellent presentation. Best in TH-cam. I'll be referring to you as Boss.
Thank you for the kind words, Jukka! 🙏🙏
This guy is great. I like the tutorial a lot and learnt a lot too !
Damn, one of the best youtube channels in the developer space.
Excellent tutorial.Thanks alot Dave.
You're welcome!
Well explained hats off to u Dave U r helping me a lot thanks is a very tiny word for ur work amazing buddy
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 }
This is the most straight forward tutorial i have ever come accrossed. Thanks to you Dave
You're welcome!
Great tutorials. Thank you.
Excellent material as always.
Thank you, Gabriel 🙏💯
Excellent tutorial. Thanks a lot.
Great job. Thanks Dave.
Thank you! 💯
Thanks for describing every steps in details and thanks again for maintaining code quality.
#subscribed
You're welcome! 🙏🙏
After so many days of searching on TH-cam, 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?
Great video, it helped me 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!
Thanks very much. Awesome video!
You're welcome!
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.
Great stuff, mate. Many thanks
You're welcome!
Thank you very much for this. It helped alot .
I really think this tutorial is underrated.
Glad it was helpful!
I love your video !
exactly what I need it, thank you very much!
You're welcome! 💯
Thanks for sharing your knowledge!
You're welcome, Lucas! 💯
Great Job.Thanks, a lot Dave.
You're welcome!
Great explanation! Thank You for your work!
Glad it was helpful!
Thanks for source code man appreciate it. You gained new sub
Great video, thank you 🙌
You're welcome! 🙏
Hi Dave! Which parts of the Node JS video corresponds to the login project?
this is the best tutorial for me, thanks!
You're welcome! 💯
super and very good explanation with example. very nice. thx
Thank you!
Awesome. Thank you
excellent thank you !
at 24:58, is it necessary and safe to setAuth with pwd ? Thank you
what is the use of setAuth and auth variable ,code can be in flow to reach successful sign in without it
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.
You are a good teacher. Everything that you explained realy understandable. Thank you very much..❤️🔥
Glad it was helpful! And you're welcome! 💯
what a video! thank so much
You're very welcome!
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 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: th-cam.com/play/PL0Zuz27SZ-6PRCpm9clX0WiBEMB70FWwd.html ...yes, the backend is created in my Node.js full course here: th-cam.com/video/f2EqECiTBL8/w-d-xo.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.
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.
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!
This video helped me.
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! 💯
I have never seen a tutorial this perfect and amazing. Thanks so much!!
Glad it was helpful!
Dave when I hit refresh in my browser after log in it kicks me back to login :(
I did all the code but I don't find the user in my bdd and I can add the same user with same proprieties and it makes n error what to do ?
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
Isnt a generic error message better than a specific one like "no server response"? For mitigating hackers
25:00 But why should we save the password in AuthContext. Is it considered to be safe?
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! 💯
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.
You are the best , thank you!
Thank you, Kenia! 🙏💯
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.
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/
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! 🙏
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: th-cam.com/video/f2EqECiTBL8/w-d-xo.html
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!
Any reason why you're saving user password in global context?
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.
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
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.
hmmm will you be my next binge?
🍕🍕🍕
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.
Thanks for the tutorial. I have been getting ..Cannot read properties of undefined (reading 'focus')..when invoking errRef.current.focus(); Have the same issues with focus in registration. Could it have something to do with the react version? Your response will be appreciated.
React is Javascript underneath so focus and the version are not the issue. It sounds like you are calling focus on something React says is undefined. You can download my source code and compare to see what is different in your code.
For anyone else like me having this same problem and looking in the comments for the answer: it's undefined until you finish the input attributes for the username. That's where we finally define the focus. In other words, this error goes away a few more minutes into the tutorial, lol.
Hello Dave, it was so useful source for people who like me at the begging of the react. But I'm confused about access token. We didn't use bearer token, so that for other pages, I can't send my access token to server. For example, I tried to create user list, but while I am using 'get' method I don't know how to add my access token to header. Can you help?
If you keep going in this series (other videos linked in description), you will learn how to send data to the server, too. The token will go in the authorization header with the word Bearer followed by a space and then the token.
Thanks!
28:15 Nice trick. Did not know about that :)
If I have a big app, and I'm rendering a lot of things in app.js, how and where do I put in app a login form page, so I could see an app after authorisation in login form? thx a lot in advance, your videos are amazing
Thank you! Go to the next video in this React login series. It handles routing with protected routes in React Router v6.
TY!
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!
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)
thx dave
the problem when you store token with useContext and refresh u lose state how can i handle that ?
You always lose app state when you refresh an app. In two more videos in this series the topic is persistent login. That will show you how.
Hi! I'm using typescript with react and it's giving an error in the "ref" property of the input. How can I solve? can you help me?
Google to the rescue! I searched for: useRef + Typescript ..and the first result: linguinecode.com/post/how-to-use-react-useref-with-typescript 🚀
Thank you very much.
You are welcome!
Thanku sir this tutorial is helpfull.please make a Angular Mean series thanku...!!
Thank you! 🙏 And thanks for the request, too! 🚀