React User Login and Authentication with Axios

[@DaveGrayTeachesCode]

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: kzbin.info/www/bejne/mKPGeX5phZt2nrM

[@SmartWizzard]

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.

[@DaveGrayTeachesCode]

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: kzbin.info/www/bejne/nGOoonh5nrl1gpo But you are absolutely right about adding a persistent login to this series, and I plan to do that (with the cookie)! 💯🚀

[@pranjalruhela1103]

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

[@nirajchandrajoshi]

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.

[@r0ck3th76]

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

[@DaveGrayTeachesCode]

You're welcome! 🙏

[@darkNovaskar]

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 😤.......

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

[@DaveGrayTeachesCode]

Much appreciated! Thank you, Shawn! 💯

[@tarrasuribabu9571]

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

[@DaveGrayTeachesCode]

Thank you!

[@DH-jw4th]

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!

[@DaveGrayTeachesCode]

Thank you, DH! I'm also looking forward to setting up role-based protected routes!

[@tabliqatchi6696]

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.

[@DaveGrayTeachesCode]

You're welcome! I am glad it helped 💯

[@DanielGarcia-vc7ci]

just landed here today and I want to say that this channel is amazing!

[@DaveGrayTeachesCode]

Thank you!

[@rishavmasih9450]

Damn, one of the best youtube channels in the developer space.

[@ivana1755]

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!

[@DaveGrayTeachesCode]

Welcome aboard!

[@companyjoe]

The clarity, the excellent presentation. Best in KZbin. I'll be referring to you as Boss.

[@DaveGrayTeachesCode]

Thank you for the kind words, Jukka! 🙏🙏

[@santiagopetrungaro]

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

[@DaveGrayTeachesCode]

You're welcome, Santiago! 🙏

[@Serhii_lolovich]

amazing man

[@DaveGrayTeachesCode]

Glad it helped! 💯

[@saadarman4718]

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

[@Trauma_Clown]

OMG, you're so good at making things complicated for beginners !

[@DaveGrayTeachesCode]

Your sarcasm is not lost on me. 😆

[@irinamihai-s9n]

I am still a beginner web developement but I really apreciate your work. Thank you

[@abdallahabdoulhakim2998]

Great content as always! Just a slight remark, you actually do no need to use JSON.stringify in the post request as Axios automatically converts the data to JSON.

[@DaveGrayTeachesCode]

Good note - this video is around 2 1/2 years old. I'm guessing the version I used in the video didn't do this.

[@vincent3542]

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

[@DaveGrayTeachesCode]

Thank you for the kind words, Vincent! 🙏🙏

[@trinhphong7844]

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

[@kirillzlobin7135]

28:15 Nice trick. Did not know about that :)

[@danielguise]

Brilliant! This is amazing content. You have an incredible ability to get the complexity across, thank you so much.

[@satellitesage2487]

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.

[@DaveGrayTeachesCode]

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.

[@aaaliii4u]

you're the coder Dave.. thanks for such awesome stuff!

[@DaveGrayTeachesCode]

My pleasure!

[@Notyoubiz]

I like how specific this is. Thank you for making content for us beginners and intermidiate users.

[@DaveGrayTeachesCode]

You're very welcome! 💯

[@azaiezsene3165]

Thank you very much for this. It helped alot . I really think this tutorial is underrated.

[@DaveGrayTeachesCode]

Glad it was helpful!

[@learner8084]

This guy is great. I like the tutorial a lot and learnt a lot too !

[@ryant2350]

Amazing tutorials Dave, truly.

[@DaveGrayTeachesCode]

Glad to hear that! 💯

[@sabrinalucianavieirapinto5602]

Amazing tutorial, I learn much things that I was struck in, thank you!

[@DaveGrayTeachesCode]

You're welcome! 💯

[@Dame-Techie]

Very Easy to follow tutorial. Loved every bit of it. Will definitely watch the entire playlist and more of your courses.

[@DaveGrayTeachesCode]

Happy to hear that!

[@changNoi1337]

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

[@DaveGrayTeachesCode]

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

[@changNoi1337]

@@DaveGrayTeachesCode Thanks for answering that. I think I understood it now.

[@emAyush56]

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?

[@DaveGrayTeachesCode]

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

[@MrBuloy11]

"keep striving for progress over perfection and a little progress everyday will go a very long way" I love it :)

[@DevBigEazi]

This is the most straight forward tutorial i have ever come accrossed. Thanks to you Dave

[@DaveGrayTeachesCode]

You're welcome!

[@hamidabdolrahimi4606]

Thank you man. Awesome, best tutorial ever. Keep it up

[@kaushikchopra3149]

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

[@kirillzlobin7135]

25:00 But why should we save the password in AuthContext. Is it considered to be safe?

[@Adrian-nc1tp]

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?

[@DaveGrayTeachesCode]

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/

[@iliasswork6623]

Dave, I can't thank you enough for this amazing content. Thank You!

[@DaveGrayTeachesCode]

You're very welcome!

[@gandamraviteja7019]

Well explained hats off to u Dave U r helping me a lot thanks is a very tiny word for ur work amazing buddy

[@danieltkach2330]

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.

[@DaveGrayTeachesCode]

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.

[@khaidoan5858]

at 24:58, is it necessary and safe to setAuth with pwd ? Thank you

[@adamwarzecha4439]

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

[@DaveGrayTeachesCode]

Link to Login Persistence video in the description, but I suggest watching the full series in order.

[@pranjalruhela1103]

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

[@shivanshmishra7992]

Why are you not popular yet?!

[@DaveGrayTeachesCode]

Hmm, I guess everyone has their own definition of popular. I was happy reaching 100k subs! 🚀 Still growing!

[@shivanshmishra7992]

@@DaveGrayTeachesCode Do you have an udemy course or something equivalent? I would buy it.

[@jamesxiao4996]

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!

[@DaveGrayTeachesCode]

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: kzbin.info/aero/PL0Zuz27SZ-6PRCpm9clX0WiBEMB70FWwd ...yes, the backend is created in my Node.js full course here: kzbin.info/www/bejne/nGOoonh5nrl1gpo

[@Alone.journey_0]

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👍👊

[@DaveGrayTeachesCode]

You're very welcome!

[@ismailhrana3915]

Thanks for describing every steps in details and thanks again for maintaining code quality. #subscribed

[@DaveGrayTeachesCode]

You're welcome! 🙏🙏

[@thehitlist4046]

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?

[@atharvameher5880]

Thanks for source code man appreciate it. You gained new sub

[@preethpalsinghthakur7748]

Excellent tutorial.Thanks alot Dave.

[@DaveGrayTeachesCode]

You're welcome!

[@enes98li1]

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.

[@DaveGrayTeachesCode]

Thank you for the kind words, Enes! 🙏

[@brucelee7782]

Isnt a generic error message better than a specific one like "no server response"? For mitigating hackers

[@kevinmutinda8429]

Thanks for the content... any suggestions on how to persist the context values upon resfresh of the page

[@DaveGrayTeachesCode]

Keep going in this series. There is a video dedicated to that. Links in description - look for Persist Login

[@kevinmutinda8429]

@@DaveGrayTeachesCode Thanks

[@fmaciel2]

Thank you very much for the great tutorial! That's exactly what I've looking for to understand authentication.

[@DaveGrayTeachesCode]

Glad it was helpful!

[@josephchinemeremjerry3167]

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?

[@josephchinemeremjerry3167]

ooh, I just saw it, where you used the success state to render a page

[@DaveGrayTeachesCode]

Glad you found it! 💯

[@SniperKillerARG]

Thanks for sharing your knowledge!

[@DaveGrayTeachesCode]

You're welcome, Lucas! 💯

[@nataliapylko6494]

Great explanation! Thank You for your work!

[@DaveGrayTeachesCode]

Glad it was helpful!

[@GabrielMartinez-ez9ue]

Excellent material as always.

[@DaveGrayTeachesCode]

Thank you, Gabriel 🙏💯

[@Доджи-м6щ]

Great job. Thanks Dave.

[@DaveGrayTeachesCode]

Thank you! 💯

[@prasathj7436]

Excellent tutorial. Thanks a lot.

[@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

[@DaveGrayTeachesCode]

Thank you, Francis! 🙏 Yes, it would be a good refactor with React Query, and I plan to do this video soon! 💯

[@tarekghosn3648]

hmmm will you be my next binge?

[@DaveGrayTeachesCode]

🍕🍕🍕

[@aleksandrpetrov3938]

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 }

[@alexkost70]

Great video, it helped me a lot!

[@vishwasmakwana125]

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

[@DaveGrayTeachesCode]

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.

[@ImperiousRex13]

Thanks, Dave really great tutorial. My only issue now is figuring out how to logout

[@DaveGrayTeachesCode]

If you keep going in this React Login series, a logout is added to the flow.

[@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.

[@DaveGrayTeachesCode]

Thank you for the request!

[@loussifchiheb8309]

Just perfect and the best one , wich theme vs code you are using ?? because its beautiful

[@DaveGrayTeachesCode]

Thank you 🙏 GitHub theme 🚀

[@loussifchiheb8309]

@@DaveGrayTeachesCode thank you and keep it up , you are the best

[@michahaj5659]

What prettier you are using to react?

[@DaveGrayTeachesCode]

I don't remember exactly what I may have been using at the time I made this video. I have used the Prettier extension in the past. Right now, I am sticking with ES7 React Snippets and default formatting from VS Code.

[@thomass2040]

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

[@DaveGrayTeachesCode]

Thank you, Thomas! You can use the Node.js backend that is built in my Node.js for Beginners course here: kzbin.info/www/bejne/nGOoonh5nrl1gpo

[@techtipsbydigitron9738]

You are a good teacher. Everything that you explained realy understandable. Thank you very much..❤️🔥

[@DaveGrayTeachesCode]

Glad it was helpful! And you're welcome! 💯

[@danieltkach2330]

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?

[@DaveGrayTeachesCode]

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!

[@akashagrawal5067]

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.

[@DaveGrayTeachesCode]

The Node.js Full Course - there should be a link to it in this video's description.

[@MrQVeeBoo]

super and very good explanation with example. very nice. thx

[@DaveGrayTeachesCode]

Thank you!

[@mayurdevhare7289]

Hello Dave, Your Tutorial is awesome can you please tell us how you connect with database mysql and curd operations

[@DaveGrayTeachesCode]

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

[@charliema3762]

I've watched a few of your videos. You are a really fine instructor, and your pacing is perfect. Thank you!

[@DaveGrayTeachesCode]

Thank you for the kind words, Charlie! 🙏

[@tinvo5369]

this is the best tutorial for me, thanks!

[@DaveGrayTeachesCode]

You're welcome! 💯

[@emmanuelakogwu7761]

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)

[@DaveGrayTeachesCode]

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.

[@emmanuelakogwu7761]

Okay.... thanks a lot

[@avel8965]

Hello Dave! Thank u so much! Can you add mail confirmation guide (after registration) ?

[@DaveGrayTeachesCode]

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. 💯🚀

[@avel8965]

@@DaveGrayTeachesCode 💪🏽

[@njoeror]

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 ?

[@DaveGrayTeachesCode]

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.

[@shubhamsood589]

@@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.

[@kostyapolishko6282]

Thank you so much. It is a good example, but how to call axiosPrivate not inside the Component, for example inside redux operations?

[@DaveGrayTeachesCode]

You're welcome! 🙏I've had several requests for a login flow with Redux which will make a good future tutorial! 💯

[@vasilispapasakellariou4074]

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

[@DaveGrayTeachesCode]

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: kzbin.info/www/bejne/aGiuloyhYpqpgNk ..Best Practices / suggestions for storing auth state and more in this video: kzbin.info/www/bejne/aYLEd3irYrCeiJo

[@vasilispapasakellariou4074]

@@DaveGrayTeachesCode Thx sir. U deserve everything.

[@abraham.tesfay]

Great tutorials. Thank you.

[@joshua4262]

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.

[@DaveGrayTeachesCode]

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.

[@lljdm]

should I do in the same project file the backend in your node js tuts sir?

[@DaveGrayTeachesCode]

Your backend is a different project.

[@kevindeming9765]

Do you have a tutorial on forgotten password reset?

[@DaveGrayTeachesCode]

Not yet, but that would be a good addition! 💯

[@anushangapavith7162]

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... 🤔

[@DaveGrayTeachesCode]

Keep going in this series. There will be one.

[@arpitsinha3835]

what is the use of setAuth and auth variable ,code can be in flow to reach successful sign in without it

[@dusanvulic7275]

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

[@DaveGrayTeachesCode]

This is a frontend tutorial. You can use any backend with this. I offered mine as an example that is available if you want.

[@MrVipulLal]

Great stuff, mate. Many thanks

[@DaveGrayTeachesCode]

You're welcome!

[@vnm_8945]

exactly what I need it, thank you very much!

[@DaveGrayTeachesCode]

You're welcome! 💯

[@TejaswiniC-us8pn]

Hello dave!.... what can I do to add both username/email option in the single input?

[@DaveGrayTeachesCode]

I have never seen a form ask for username and email all in one single input? Seems strange. I don't recommend it. You want to have separate validation for each item.

[@tejaswinic]

@@DaveGrayTeachesCode many websites asks for either username login or email login. User can opt either username or email login! For example instagram.. we can either login usomg username or phone number. How can we do it?

[@TejaswiniC-us8pn]

@@DaveGrayTeachesCode Not username AND email , but username or email!

[@germ7169]

After changing the auth state how can I navigate to a protected route? When I change the auth state I think it rerenders and I don't get to navigate

[@DaveGrayTeachesCode]

Keep going in this series of videos. There is a video dedicated to protected routes following this one.

[@elgingeroo]

What keyboard do you have?

[@DaveGrayTeachesCode]

Logitech wireless. It can be loud at times, but it has a great feel.

[@elgingeroo]

@@DaveGrayTeachesCode what model? I am in love with the sound!

[@DaveGrayTeachesCode]

@@elgingeroo K270 - www.logitech.com/en-gb/products/keyboards/k270-unifying-wireless.html

[@youtubespecial6517]

How you make directly thise 3 pieces of state .. Can you tell me this shortcut key. And you can also make video on shortcut in vs code it will be really helpful

[@youtubespecial6517]

Ohhh are copy pasting it from somewhere?

[@DaveGrayTeachesCode]

Can you refer to a timestamp of the video for me to reference? Usually when you see me changing multiple things at the same time, I have pressed Ctrl+D to select more than one at a time.

[@odigwenwike7575]

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

[@shivanshudev4924]

From where I can learn about the backend used in this?

[@DaveGrayTeachesCode]

In the description, there is a link to a Node.js for Beginners course. The backend is built there. Or you can build your own backend in whichever language and/or framework you choose.

[@elinabrahmandam8652]

Hi, is it possible to write this information into some sort of database instead? This was a great tutorial!!

[@DaveGrayTeachesCode]

Of course! You can build the backend to integrate with this React Login series by completing my Node.js course where it is built: kzbin.info/www/bejne/nGOoonh5nrl1gpo ..the Node.js course uses a MongoDB database.

[@soothingsoundsofnature100]

Very good tutorial. Can you also add the "Forgot Password" feature. Thanks

[@DaveGrayTeachesCode]

Good request!

[@jeetudewangan9836]

why it is giving cors error i'm already added the frontend address in allowedOrigins. When i use withCredentials: true it gives cors error but when i remove withCredentials:true it works fine what's the issure occured here. And why we are using withCredentials here, can you explain it with easy example ? I pull my hair from 2 days just because I am not able to understand

[@DaveGrayTeachesCode]

The withCredentials option likely triggers an OPTIONS preflight request which is part of CORS. Without it, it likely doesn't. This could be something as simple as including a trailing slash / in the URL in your allowedOrigins.