React Login Authentication with JWT Access, Refresh Tokens, Cookies and Axios

[@DaveGrayTeachesCode]

In this tutorial, you will learn how to apply a JWT user authentication strategy with access and refresh tokens to your React app. You will also learn how to create a private Axios instance and apply Axios interceptors to requests and responses. This tutorial is part 4 of a React User Login and Registration series. Links to all tutorials in this series are in the description. 🚀 If you're just getting started with React, I recommend my React JS for Beginners full course here: kzbin.info/www/bejne/iIepcqx8jLRnndE

[@vickylance]

I have a doubt is it fine having so many 403 requests made and logged in the console? Or is calling refresh token api in a settimeout better?

[@samiullahsheikh5015]

Dave, I have the similar question. When should make the refresh token api call ? What is the best approach to hit refresh token endpoint to get new access token?

[@DaveGrayTeachesCode]

@@samiullahsheikh5015 using the Axios interceptors detailed in this tutorial, the refresh token endpoint is automatically requested when needed.

[@DaveGrayTeachesCode]

@@vickylance nothing wrong with a 403 if it is handled. The interceptors handle it. 💯

[@broncoUkraine]

Hi, thanks a lot, but with React 18 the last part with interceptors doesn't work. I receive CanceledError if using react 18 method render in the index.js, like const root = ReactDOM.createRoot(document.getElementById('root')); . And everything is fine when you use simple ReactDOM.render('code here").

[@markoleptic4501]

This video in combination with the "JWT Authentication | Node JS and Express tutorials for Beginners" is the only tutorial/tutorial series that actually describes the full backend to frontend implementation of jwt authentication. AND provides the source code. It was frustrating finding so many videos that only did part of the implementation and expected the viewers to know how to handle the rest. Thank you.

[@DaveGrayTeachesCode]

You're very welcome!

[@luiscortes6563]

Yes thanks a lot! I attempted this about 2 yrs ago and couldn’t find a video on it being done the right way; they didn’t store access token in memory!

[@zb2747]

Thank you Dave - just watched your node jwt auth video with refresh tokens and now watching the implementation w/react on the client. Like someone said here there’s not to many dev/teachers who explain and implement jwt auth w/refresh end to end and with a database. Keep the videos coming my friend! Would love to see more intermediate - advanced topics especially in node. Peace and much love 🙏🏾

[@DaveGrayTeachesCode]

Thank you, ZB! 💯

[@noone_and_nobody]

This is gold! It just doesn't talk about the concepts instead develops per expectations of a real time user application. Absolutely loved it!

[@DaveGrayTeachesCode]

Thanks!

[@googlemani]

Enjoyed the content on JWT Authentication on React. I have bookmarked your other videos on the playlist. I highly recommend your Nodejs and ReactJS course.

[@memoryleakerz]

I've seen many instructors Dave but you set a higher, newer, and better standard. You explain everything to the level of formatting your code and you master these skills with great knowledge. Awesome tutorial!!! you're awesome, subscribed for sure.

[@DaveGrayTeachesCode]

Thank you for the kind words, and welcome aboard! 💯

[@TannerBarcelos]

This is something I still struggle with after 3 years experience. This cleared up all my confusions. Thanks as usual, Dave!

[@kartikarora3521]

Thank You! I was waiting for this video. There is no video on KZbin which shows how to implement Refresh Token. Even I took a udemy course and it just showed me how to implement just Access Token and skipped the Refresh Token part. Thank You soo much!

[@DaveGrayTeachesCode]

Right on! 💯 I have also noticed this information is hard to find. I have included some resource links in the description too.

[@kartikarora3521]

@@DaveGrayTeachesCode Thanks, I will read those articles too.

[@dandelion0331]

youtube now doesn't display dislike anymore. Dave if you see dislikes at the backend of youtube, don't frustrate, those dislikes are from bootcamp training people. we suport you. learned a lot from MERN stack series and this series. The redux series is little tough but I will spend more time on those. Thanks!

[@DaveGrayTeachesCode]

Thank you for the kind words!

[@shashwa7]

36:27 one small addition in that catch block, is to check if the catched error code is due to 'cancelled req' due to aborting req when component unmounts. otherwise it will keep navigating back to login page even after success login! the code will look like: const getUsers = () => { try{ //try block code } catch (err) { console.log("error fetching users", err); if (err.code !== "ERR_CANCELED") navigate("/login", { state: { from: location }, replace: true }); } }

[@ClinicaMboi]

Incredible! I had been looking for this content for some time, I was very dissatisfied with my authentication strategy, as I started in the area recently, I ended up following some practices, which based on initial knowledge, it is not possible to say whether it is a safe practice or not. your approach gave me good insights into how I can keep improving, thanks Dave, impeccable work. hugs from Brazil!

[@jaydevjagda]

hey dave, i love ur teaching style but , i want just one thing that , if u can do , can plz first explain , in which file what are u going to do , what is your thinking behind that file creation , i understand u breaking file in individual part for code modulizing but when we see the video , first we have to understand why this file is created and why u do that , what is ur thinking behind that file creation then we understand rest of , no doubt your teaching skill are far greater then any other teachers on youtube , if u can do this that help us a lot , love from India

[@hikemalliday6007]

These are baller vids man. Ive been at an internship for 3 months now, and the first couple months was a brain bleeding experience -- all of my self taught apps up to the point of hire were very one dimensional and basic, in terms of fetches, config, etc (they still are, but slightly better). After working in a pro setting and having to learn and use better practices such as custom hooks, acios config objects, etc, I can now follow and appreciate these videos even more. This is the perfect level of difficulty for me to improve my hobby applications. Great content, thank you so much!

[@sammyattah4653]

Thank you Dave. I can't stop recommending you to my friends/colleagues. If one wants to learn modern react, your channel is highly recommended. You have helped me change some of my old codes.

[@DaveGrayTeachesCode]

Awesome, thank you! 💯🚀

[@ibraheemsulay]

This guy could explain a very technical concept to a toddler and the toddler would understand it with ease. Thank you for this wonderful tutorial

[@DaveGrayTeachesCode]

Thank you for the kind words, Ibrahim! 🙏🙏

[@riteshjoshi0413]

I love how you simplify the topic while explaining sir. Thank You so much

[@DaveGrayTeachesCode]

Thank you, Ritesh! 💯🙏

[@morphology5114]

In my app, I won't need registering, and I was searching for a tutorial on handling JWT authentication with react. You literally saved me posting this tutorial right now. I will try to implement only login using this video, I'm using Django for my backend. Thank you very much, very good and understandable tutorials + the small tips and tricks with the VS Code are also on point!

[@DaveGrayTeachesCode]

Glad I could help! 💯

[@dominiktworek6455]

Hey, I am someone who knows react and js very little. I decided to build a full-stack application using React on TypeScript, SpringBoot on Java and MySql database. While I feel confident with Java and Spring, I struggle a lot with React. This series helps me a lot to implement a logging system and routing system. Some topics like cors weren't clear to me and with this series and with some ChatGPT explanation I got to the point where every basic info about HTTP-only cookies, tokens, react-router, etc became greatly allocated in my brain :). I would pay for a course like this, so I really think this is super valuable material. Peace and happy coding!

[@spirits__]

You are on 🔥 with these advanced topics. Please keep them coming as there aren’t as many great videos on these topics. I just happen to be working on a new authentication system at work and trying to understand the differences between access, refresh token and the best practices for storing them and your video helped a lot ✊ and right on time

[@DaveGrayTeachesCode]

That's great to hear! Glad I could help and thanks for the support! 💯🚀

[@thomasmunguya2207]

I love how you explain concepts in detail. You go as far as explaining the motivation behind every decision made. Great tutorial and thanks!.

[@thomasandre-lubin3899]

Amazing tutorials, I've rarely seen something that well explained, and detailed. The rythm is great too !

[@DaveGrayTeachesCode]

Happy to hear that!

[@sadaliryu]

Thanks Dave Gray, i searched for this course and didn't find any clear and functional tutorial like your, Well Done

[@DaveGrayTeachesCode]

Glad it was helpful!

[@VinceKully]

Hey Dave just wanted to point out that axios >= 1.0.0 (1.0 was released ~10 days ago) will cause your response interceptor to reject an error when retrying. There are a few lines in the axios source code that, when trying to normalize values, ends up returning any unknown value via toString, which ends up spitting out an entire function being toStringed as the error passed into the response interceptor. Downgrading axios to 0.27.2 allowed your solution to work perfectly.

[@DaveGrayTeachesCode]

Thanks Vince - yes, technology keeps moving forward. Also note this tutorial uses React 17 and React 18 strict mode will trigger multiple requests.

[@dukekim4816]

Hi Dave! Loving the tutorials. Any plans on updating this to keep up with updates?

[@DaveGrayTeachesCode]

@@dukekim4816 YT will not let me update videos.

[@Iskarize]

Do you think this will get fixed in the future?

[@calinciobanu259]

@@DaveGrayTeachesCode Hey! Are you not going to say anything about a quick fix? I have been struggling with this problem for a couple of hours and just now saw this comment

[@egorushakov2267]

Finally, a video that shows you how to securely authenticate users. Thanks Dave

[@DaveGrayTeachesCode]

Welcome!

[@webblocksapp]

Hi Dave thanks a lot for this tutorial, it helped me a lot for implementing a refresh token flow at my React app. I would like to add a small fix to your guide, instead of using 403 response status at the interceptor, use 401. 401 refers to unauthorized, it means the client provides no credentials or invalid credentials, and 403 the client has valid credentials but not enough privileges to perform an action on a resource. If we validate vs 403, we can have the scenario of refreshing the token unnecessarily if the user doesn't have a role for a specific request.

[@DaveGrayTeachesCode]

Thanks for the note! Not sure where I first learned 403 was the response to use for the expired access token but I stand corrected. 💯

[@daniezra]

@@DaveGrayTeachesCode I had the same issue, the ChatGpt response about that is: "When an access token expires in API, you should return the HTTP status code 401 Unauthorized, along with a WWW-Authenticate header indicating the authentication method required to access the requested resource. The HTTP status code 401 Unauthorized indicates that the request lacks valid authentication credentials for the target resource, and the WWW-Authenticate header informs the client which authentication method to use to authenticate the request. This is the correct status code to use when an access token has expired or is invalid. The HTTP status code 403 Forbidden, on the other hand, indicates that the server understood the request, but refuses to authorize it. This means that the client has authenticated correctly, but does not have sufficient permission to access the requested resource. Therefore, it is not appropriate to use the HTTP status code 403 Forbidden when the access token has expired in API. I had the same issue, the ChatGpt response about that is:In summary, when an access token expires in Web API, you should return the HTTP status code 401 Unauthorized."

[@hristopisarev1827]

I have watched many tutorials and paid courses but this is next level - awesome explanation of everything ! Thank you!

[@brajagopalmukherjee1588]

Man waiting for full stack beginner friendly project

[@DaveGrayTeachesCode]

Coming soon! 💯

[@andrewclarke6916]

Phew! This was a tricky one and it took a while to get it working correctly but I got there in the end. I had the same cookie problem as Marcos but working fine now after adding 'secure: true' to the cookie settings.

[@DaveGrayTeachesCode]

Good job, Andrew! 💯🚀

[@ImperiousRex13]

Hey Dave, I appreciate all your hard work in putting these videos together for those of us trying to learn something new. I enjoyed your video but I am having issues when logging in to see the Users list. I've seen that you answered similar questions about getting a CanceledError and I've also taken a look at your other videos describing these breaking changes. I've tried to implement your solutions while still working with strict mode but, I still receive errors. So far the only solution that has worked for me is to remove the AbortController in the Users component's useEffect but, is that appropriate? I would like to do things the right way and seeing as how you have the Abort Controller I just don't know what I should do.

[@DaveGrayTeachesCode]

Hi Rick. The AbortController issues an CanceledError by default when called. It is not a bad thing because it is expected to happen. With React 18 strict mode, React mounts, unmounts, and remounts each component. This creates one of those CanceledErrors. I did make a video about how to workaround this here: kzbin.info/www/bejne/bmLJko2wpZZrhK8

[@ImperiousRex13]

@@DaveGrayTeachesCode Thanks for the response! I am currently watching the workaround video because at this point I considered removing the AbortController altogether. Do the errors also explain why, when I try to log in to see the users list, I was not redirected to see the list? When I try to log in, I can see the user object retrieved but all that happens is the Login form/component reloads.

[@kodewala]

A perfect solution to my every problem. Trust me this video is going to help me a lot.

[@demetrxx]

This one explained all I needed and relieved me of that pain related to access/refresh tokens that I've been having for the last couple of days. Thank you, Dave!

[@DaveGrayTeachesCode]

Glad I could help!

[@mohajeramir]

Congratulations on 💯. What a great way to wrap up the year. Might be a good occasion to post a non-technical video. I am sure a lot of people would love to know you more.

[@DaveGrayTeachesCode]

Thank you and thank you for the request! 💯

[@ЕвгенийСиманин-ы5ц]

The best IT teacher over the world!

[@akshaybalamurugan]

This is exactly what i was looking for...Thank You!!! You earned a sub.

[@marcel5235]

Finally intermediate tuts for my job - appreciate your content, helps me get little bit higher and self sufficient as React dev at job field

[@DaveGrayTeachesCode]

Glad I could help!

[@codernasir1549]

A simple like or share is not enough for this rich tutorial. you deserve more. take love.

[@DaveGrayTeachesCode]

Thank you for the kind words! 🙏🙏

[@hood_love_189]

went from studying your videos to getting a job. Although we kind of not use react, but because of my skills I got the job. So A big thank you

[@tech5956]

Great tutorial😍, Keep sharing videos like this, Wish you more subscribers for your great efforts and time

[@DaveGrayTeachesCode]

Thank you!

[@TheJamesgggill]

This is probably the best JWT auth tutorial i've seen. Thank you!

[@DaveGrayTeachesCode]

Thank you, James! 🙏

[@kawsar.130]

Your videos are making great changes to my skillset and improving standard programming concept everyday. You are awesome Dave Gray. I really appreciate your hard work.

[@DaveGrayTeachesCode]

Great to hear! Thank you!

[@kirillzlobin7135]

24:52 - I am always confused about this. Our auth and refresh - are an object and a function - reference type. When we use it in a dependency array - it will always "change" and make the component to be rerendered? No?

[@GautamKumar-jx5su]

All this interconnected tutorials feels like movies franchise :) love this tutorial btw.

[@TheLukjtas]

Tus tutoriales son fantásticos! Estoy estudiando inglés por lo que se me complica un poco el idioma, pero tu contenido es de extrema utilidad. New sub! thx

[@DaveGrayTeachesCode]

Gracias Lucas! Yo comprende un poquito español mi amigo 😃

[@rishidubey8745]

your explanati level on is something else !!!

[@olujobifolaranmi2133]

Thank you Dave, you really did justice to the topic.

[@ronir.kpradhan1785]

Hey Dave, just wanna say thank you for this amazing tutorial you really made it crystal clear on how to handle the tokens. Much love and wish you good health 🙏

[@DaveGrayTeachesCode]

You're welcome, Roni! 🙏💯

[@thakursaad9364]

This whole playlist was of insane help. Don't know how to say thank you. But thank you anyway

[@DaveGrayTeachesCode]

You're welcome! 🙏

[@jonathantang4429]

Your videos are one of the best out there. Each time there are anything that I don't understand from your video, I will go and research more on that portion and I will learn a lot. I got lost on the useAxiosPrivate hook portion but I just followed along the tutorial and it works!! Now I need to go learn about interceptors. Do you have any videos on it?

[@DaveGrayTeachesCode]

Glad I could help, Jonathan! 💯 This is the video I cover where I cover Axios interceptors overall. They intercept requests and responses and allow you to modify those requests and responses as they are intercepted. The Axios docs cover them here, too: axios-http.com/docs/interceptors

[@kove5762]

If you get 403 status when you try to refresh token, it's probably because during login cookies might not be saved in the browser. To fix it, you have to change siteName attribute from 'None' to 'Strict' when you are sending cookies ( Login and Refresh Token route)

[@olufuwadavid5064]

it still doesn't work

[@oloyang431]

It worked for me, but I have no idea why it worked. sameSite: "None" is supposed to allow sending cookies if the server and the client have different origins, and different ports are considered different origins, while sameSite:"Strict" is supposed to prevent sending cookies in the same scenario. But, somehow "Strict" works... It makes no sense...

[@yuhiahtyun5665]

You're awesome Mr.Gray. Keep up your great work, your channel gonna be big in the future !

[@DaveGrayTeachesCode]

Thank you for the kind words! 🚀

[@miloheh]

Super helpful! I struggled making this year ago. I’m glad to see this explained because it seems much more manageable/clear coming from you!

[@DaveGrayTeachesCode]

Glad I could help! 💯

[@DH-jw4th]

Wow, thanks for responding tho my request. This was worth the wait! Genius presented in a way that can be understood by the average react developper…

[@DaveGrayTeachesCode]

Right on! 💯 Glad I could help!

[@HayatoYano-qt8tu]

Very well explained. Helping me a lot, Mr. Dave. Cheers from japan

[@DaveGrayTeachesCode]

Thank you! And hello 👋 to Japan!

[@chans9055]

Now I think I know how to apply access/refresh token strategy to web services. Thank you for the great tutorial!

[@DaveGrayTeachesCode]

Glad it was helpful! 💯

[@1Malak16]

Thank You! There is not so much high quality information regarding advanced topics such as authentification. Please keep on with such videos.

[@DaveGrayTeachesCode]

You're welcome! 💯🚀

[@masonasa7009]

thank you sir for this this truly raised my level up a notch and am happy this series teaches almost everything and i must say it did get a bit advanced for me lol

[@stevereid636]

Thanks

[@DaveGrayTeachesCode]

Thank you, Steve!

[@pradeepmax1]

Best JWT Tutorial on YT 👍

[@DaveGrayTeachesCode]

Appreciate that!

[@Teddyrobinson]

Thank you for the tutorials!! Made it through all 4 and I'm happy that I did

[@profeskills768]

This is the best JWT-cookie auth tutorial i've seen. Thank you so mush!, all works for me . thank you again for this awesome Tutorial.

[@DaveGrayTeachesCode]

You're welcome!! 🙏

[@TheNiquitin]

Great tutorial! Very helpful, and as somebody else mentioned, I love that you mention every shortcut you use in VS Code because that lets em improve my own workflow. I'm always postponing diving deeper into VS Code's tools and this kills two birds with one stone (my apologies to PETA members).

[@DaveGrayTeachesCode]

You're welcome!

[@lidorbenshimol1838]

Hey Dave, Amazing tutorial as usual. Im very happy to find pro tutorials like that in youtube and want to say thank you!

[@DaveGrayTeachesCode]

You're welcome! 💯

[@laurraileanu8374]

great tutorial Dave, really in-depth and easy to understand

[@DaveGrayTeachesCode]

Thank you!

[@htoomaungthait1880]

Thank for showing way to implement role based authentication and access control in react.

[@ahmad-murery]

I think I need to watch this video one more time, I feel like my brain got shrank a little, it's maybe the cold weather, Thanks Dave,

[@DaveGrayTeachesCode]

It's definitely the cold weather my friend! 🥶

[@waili4028]

thank you so much for the video, you answered all my confusions already in the first few mins! enjoying the whole video now

[@DaveGrayTeachesCode]

Glad it was helpful! 💯

[@thompsonmanda]

Hai Dave this is a great video, but I cannot help but wonder, when you use the the contextAPI to manage your state and store the auth token, are you persisting the context over page rerenders and route changes?? Am not really sure whats going on there. When the accessToken is sent in the response from the server, where exactly are you storing it? and how are you persisting it over the route changes within your application??

[@gokulrajan6987]

Very informative! The best I have seen so far!

[@DaveGrayTeachesCode]

Glad to hear that! 💯

[@saadarman4718]

Another well made and greatly explained tutorial.

[@pravinkumarg8007]

This is next level tutorial. Thanks @DaveGray for an awesome tutorial :)

[@DaveGrayTeachesCode]

Thank you for the kind words, Pravin! 💯

[@ksue1448]

The best Auth tutorial ever!! appreciate all the references links too

[@DaveGrayTeachesCode]

You're welcome! 💯

[@jamestariga08]

If you are using React 18, I suggest using a boolean ref with useRef before the getUsers function. In User.js: if (firstRenderRef.current) { firstRenderRef.current = false return } const getUsers = async () => { try { // something } catch (err) { console.error(err) navigate('/login', { state: { from: location }, replace: true }) } }

[@DaveGrayTeachesCode]

A very similar suggestion / solution to the "fix" I suggest in my video here: kzbin.info/www/bejne/bmLJko2wpZZrhK8 - good stuff, James! 💯 I will also be sharing a re-work of this full auth flow soon which uses React Query and React 18.

[@hamidabdolrahimi4606]

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

[@deepfuchsia7204]

One thingy I noticed. Let's say we open a page in a new tab, and this page has two different resources we need to get, let's say /cars to get a list of cars and /fruits to get a list of fruits. Those two request are sent immediatelly, without waiting one another. At the moment of time we don't have an access token, but we have a refresh token. Since the request are sent in parallel - we'll have the refresh token flow twice. So basically the more requests we issue - the more refresh token requests we'll get as a result. It would be nice to somehow delay all requests if refresh token request has started and hasn't finished yet.

[@DaveGrayTeachesCode]

Sounds like you are using React 18 in strict mode. Fix for what you are describing: kzbin.info/www/bejne/bmLJko2wpZZrhK8

[@miglrodri]

This is great content, i watched all videos, probably forgot to like them all, but already subscribed to the channel. Thanks very much for the explanation 👏

[@DaveGrayTeachesCode]

Welcome aboard! And thank you for the kind words! 🙏💯

[@rajatgupta001]

Great tutorial, got so many doubts cleared. However I have 1 question: Since, we are already sending access token and at server can also access refreshToken from cookie (as withCredentials is true), we can simply verify accessToken at server and if it's expired, we can verify refreshToken and if refresh token is valid we can simply send back new access token. This way we don't have to make 2 (requestInterceptor and responseInterceptor) requests to the server and hence don't require responseInterceptor at all.

[@sultannasyrov4662]

Great course on react authentication. Thanks a lot. Exactly what needed.

[@DaveGrayTeachesCode]

Glad it was helpful! 💯

[@CTILET]

I am not understand good but always write comment and like for your work!

[@DaveGrayTeachesCode]

Thank you! Yes, working with JWT authentication is more advanced. I will create some more beginner level React projects soon. 💯🚀

[@Astynax777]

This is a great tutorial. Could you explain how you deal with multiple async requests firing at the same time (say, at page load) which all have no or expired access tokens? They'd all attempt to get new access tokens, I believe, with your implementation.

[@rauldeandrade]

Great quality content. I'm surprised I haven't seen your channel earlier

[@DaveGrayTeachesCode]

Welcome aboard, Raul! 💯

[@starnutoditopo7762]

Hi, Dave! Whould you consider a good choice to move the "redirection to login page" from the users component to the useAxiosPrivate hook? That is: in useAxiosPrivate.js, 1) add the required imports import { useNavigate, useLocation } from "react-router-dom"; 2) initalize const navigate = useNavigate(); const location = useLocation(); 3) replace the line newAccessToken = await refresh(); with something like: try { newAccessToken = await refresh(); } catch (err) { console.log("Cannot refresh token: redirecting to login page.", err); navigate('/login', { state: { from: location }, replace: true }); } ? This should handle the redirection logic in a unique point in the application, avoiding to replicate it in every component. Thanks!

[@DaveGrayTeachesCode]

I think that's a good thought! 💯 You lose some flexibility for redirects based on specific requests, but overall, this might be all that most need. 🚀

[@MrQVeeBoo]

just wanna note to myself or anyone who confused like me. 32:00 axios interceptors is the middle man who intercept between client and server both ways, request and response. the part that said !prevRequest?.sent means ?. operator is used to safely access properties or call methods on a possibly null or undefined value. null or undefined value in if statement is considered as false therefore, .....!prevRequest?.sent means if sent property doesn't exist, then undefined but not throw error and with the ! negates then the whole this of (!prevRequest?.sent) is true. thus, if sent doesn't exist then create this sent property, prevRequest.sent = true;

[@al-doori2392]

Thank you a lot lot I was struggling how to combine .NET Core API implementing JWT with React, may gold bless you and give you what you wish, you helped me a lot !!

[@DaveGrayTeachesCode]

Glad to hear I helped!

[@buksirchik1663]

31:21 Why did you check a 403 error instead of 401 one? And why didn't you refresh a token in a request interceptor?

[@Kudadise]

Thanks dave this was educative, I was having problems in implementing Auth on React.

[@DaveGrayTeachesCode]

Glad I could help!

[@mauronunes7196]

Insanity how good this is.

[@RaniLink]

Thanks for the amazing video(s)! Question, in your useAxiosPrivate hook, why did you add the refreshToken hook in the useEffect dependency array? it's a static function, innit?

[@DaveGrayTeachesCode]

You're welcome! Going back in time and my memory here... this was with React 17 that complained about things missing from the useEffect dependency array even when they weren't sometimes needed... so I usually added everything it complained about. Otherwise, many questions from viewers about the warning for the missing dependencies.

[@dharmaraosalana641]

Good effort but step by step by approach makes understandable more

[@winstonsmith4367]

You are simply the best, thank you thank you thank you❤

[@coolme7437]

This tutorial is a gem❤

[@jinge8943]

Thank you for your explanation. Can I have a question? If you don't store auth state in browser storage, when user reload the page, how to know if user is logged in or not?

[@DaveGrayTeachesCode]

Go to the next video in this series to create a Persistent Login (link in description)

[@sidneythomas643]

So basically from now on, better to use axiosPrivate here for requests where the user has to be authenticated to have access (that request)? And use the default axios for request where the user don't need to be authenticated to make have access to (that request) -- am i understanding correctly?

[@DaveGrayTeachesCode]

If I remember correctly, yes.

[@Anonymose43]

That’s letterly awesome ! Good explanation man

[@DaveGrayTeachesCode]

Thank you! 🙏💯

[@yummysoup]

at 24:40 : what is the reason to add refresh in the dependancy array of useEffect ? Thank you for the amazing content you are a great teacher.

[@ntrpause]

Es el mejor tutorial que vi para usar JWT

[@DaveGrayTeachesCode]

Gracias! Thank you!

[@kirillzlobin7135]

24:57 - if "refresh" is a fuction and it is inside of a dependency array of useEffect, does it mean that this useEffect will be called every rerender, as "refresh" function will have a new reference?

[@moizratlamwala9377]

What if page is refreshed after loggedin? Our access token will be vanished from app’s state?

[@Sv-ry9lj]

One of the best tutorials! Thank you

[@DaveGrayTeachesCode]

You're very welcome!

[@henry-chung]

What an amazing tutorial, Dave! Thank you very much for all your efforts putting in these videos! I've been wondering that why we shouldn't store JWT in local storage, because when we make a private request, we attach our JWT in the header ("Authorization": "Bearer ..."), so someone can copy that token from the request header. Why is this method more secured?

[@jessbk1678]

hey Dave just want to say this was a great tutorial, definitely has helped me alot to understand how to work with jwt and refresh tokens on the client side, can you do a tutorial on how to deploy with docker / kubernetes / enginx

[@DaveGrayTeachesCode]

Thank you and great request! Docker is definitely on my list 💯🚀