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

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

I love you Dave ❤❤❤❤❤❤❤❤❤❤❤❤❤❤

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

Hey Dave, first of all, thank you for your tutorial. I learned a lot and used the method you described in my Next.js 13 app. Everything seems to be working fine, and I also used SWR. Could you please let me know if I did anything wrong by using it next13 and swr?

Best of luck!

You know, when you don't take the time to respnod, you don't realize how stale your content gets. In this world anything over a year old is suspect. Otherwise good stuff.

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)

Hey, where can I found the back-end of this project?

Do i have to manually redirect the user to login in every request or can this be automated

Thank you so much

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

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?

Anyone else have trouble with the useRefreshToken / GET request on the /refreshToken endpoint? If Im running my backend on 3001 and my React frontend on 3000, the GET request doesn't send any cookies via the headers so I get a 401 error... It's been driving me absolutely crazy since the GET request works fine via Postman... I'm begging for someone to review my code here because it's seriously putting a damper on my project

Hello! Thanks for the great tutorial! I have read in some tutorials that the refresh token should also be renewed (so the previous refresh token is canceled), and sent back to the client, each time the access token is renewed. Is this correct or not ?

Amazing! I was thinking about axios hooks to redirect the user after try to refresh the token. This was so Helpfull. Very, very good. You are so fucking good man

Hi Dave,
I have one doubt, since here you are using Context to store Auth state, on a page refresh, it will lose its value. And I don't want the user to login everytime page is refreshed. How to handle this ?

can i implement this on next ? without using next auth

Sorry i'm nore sure about storing access token in memory of client. what if client does browser refresh then i go back to api and ask for new token and also refresh token to be generated on each page hard refresh?

If we have multiple concurrent requests with an invalid access token, then multiple requests would be sent to refresh token endpoint from interceptor, and we will get different pairs of tokens for each refresh token request.

So considering that we have implemented refresh token rotation with reuse detection, some of the request would still fail because only 1 pair of tokens will be valid from all these concurrent refresh token requests.

How do we handle that @DaveGrayTeachesCode

Your tutorials contain soooooooooooooooo much valuble information. The other tuts do not talk about AbortController in useEffect, but this is so much useful. I have watched a lot of videos. You are amazing man

i am getting error AXIOS NOT SENDING AUTHORIZATION HEADER - REACTJS-SPRINGBOOT

very practical video.good

Dou you have an url of deployed node app to send requests (if it is deployed)? It would be great to keep up with the video without BE requirements

your explanati level on is something else !!!

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

@DaveGrayTeachesCode
I'm getting Axios throwing CanceledError with Abort controller in react because of strict mode how can i improve the abort controller with strict mode

auth?.roles?.find(role => allowedRoles?.includes(role)) why find is not function?

Just to go to a next level. Is there any way to store the refresh and access tokens on a server instead of the client ?

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

How can i conditionally render a component like this but using jwt token instead of sessionStorage:
const isAuthenticated = sessionStorage.getItem("user");

Insanity how good this is.

Wouldn't you want to put the controller outside the useEffect?

Hey Dave. My backend dev provided my the auth endpoints that do not have a refresh route or a /refresh token. Could refer me to some resource that would help me to stroke and use the auth token in a cookie and use it? Or which part of this tutorial should I follow that will work for cases with only access token?

Thank you for your tutorials!

Any ideas on what icon theme he's using for folder's?

Wow what a great explanation

What is username and password?
I can not enter website

Hi Dave, I have a question. What would be the best way to provide a private instance of Axios to Redux? Currently, I'm passing it through actions, but it's quite inconvenient to do that repeatedly. Thank you very much!

Thanks for this awesome tutorial. I have a question
What will happen if i don't use controller.abort() in clean up function. And i was also getting a cancel error name 'CanceledError' i don't know why? maybe because i 'm using vite for react?

When I refresh browser using ctrl +F5 I am auotamtically logout due to authcontext undefine. auth?.roles?.find(role => allowedRoles?.includes(role)) uath is undefined.Please resolve this issue. Even you can check your code also

Hi Dave can you help me with this problem? so, i make my app require to login to access it, all of that thing working fine for the Role Protected Route, Login , etc. The problem is, when i refresh the page, it comeback to login page. can you gave me suggestion from that problem?

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.

Hey Dave,
Thanks a lot for your videos.
I have question, If we store JWT token in the memory, How do I make my web app accessible from new browser tab?
What if I want to allow my user to open some component into new browser tab

thanks broo it works