React User Login and Authentication with Axios

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.

⭐ Become a full-stack web dev with Zero To Mastery Courses:

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

🔗 FontAwesome for React:

📚 Accessible Form References:
MDN - Aria Attributes:

🔗 ES7 React JS Snippets Extension for VS Code:

🔗 React Dev Tools Extension for Chrome:

📚 References:

✅ Follow Me:

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

[tarrasuribabu]

Thank so much. In India we call teacher as GURU. Your my guru from now on.

[shawn.builds]

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!!

[rckth]

Finally someone that speaks clear and concise. Loved the tutorial going to look at your full course. Thanks alot.

[ivana]

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!

[kaushikchopra]

After so many days of searching on YouTube, 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?

[Adrian-nctp]

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?

[adamwarzecha]

What will happend if user refreshes page after logging in? Won't context data be lost ?

[tabliqatchi]

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.

[mohammadefathl]

in english thank you teacher, in arabic شكرا جزيلا يا استاذ

[kumarprince]

URGENT: Can anyone please help me with the backend server.js file for this application? As I'm new at frontend development and have limited knowledge of backend, so I'm having difficulties in creating the server from my end. And due to time constraints I'm not able to cover the node js backend course as of now.
Thanks in advance 🙏

[farzindev]

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

[vincent]

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 😍😘

[dusanvulic]

@20.00 you mentioned backend created with other strongly think that would be MUCH FAIR if you said that at the start of this video.

[rogerfantw]

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.

[thehitlist]

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?

[odigwenwike]

Any reason why you're saving user password in global context?

[pranjalruhela]

Hi Dave! Which parts of the Node JS video corresponds to the login project?

[saadarman]

Great work, you have put so much effort in these tutorials. Learned a lot. Thanks.

[danieltkach]

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.

[jamesxiao]

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!