React Redux Login Authentication Flow with JWT Access, Refresh Tokens, Cookies

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
Learn React Redux Login Authentication Flow with JWT Access, Refresh Tokens, Cookies and more. This tutorial sets up a React Redux login and auth flow that uses JWT access and refresh tokens, secure cookies and an RTK Query base query reauthentication wrapper.
💖 Support me on Patreon ➜ / davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Advanced React & Redux: bit.ly/AdvReactDev
- Jr to Senior Web Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
- Master FAANG Coding Interviews: bit.ly/FAANGInterview
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 Modern Redux full course - 4 hours: • React Redux Full Cours...
👀 React Login tutorial series playlist: • React Login, Registrat...
🔗 Completed Source Code: github.com/gitdagray/redux_jw...
🔗 Backend Node.js REST API Source Code: github.com/gitdagray/nodejs_j...
📬 Course Updates ➜ courses.davegray.codes/
React Redux Login Authentication Flow and JWT Access, Refresh Tokens, Cookies
(00:00) Intro
(00:46) Welcome
(01:36) Starter Code and Dependencies
(02:30) Begin Redux: authSlice
(05:50) baseQuery
(09:06) baseQuery with re-authorization wrapper
(14:57) apiSlice
(15:51) Extend the apiSlice to auth
(17:27) Configure the Redux store
(19:46) Begin React: index.js
(22:33) Layout component
(23:28) Public component
(24:11) Redux: Export useLoginMutation
(24:54) Login component
(31:48) RequireAuth component
(34:33) Welcome component
(37:12) App.js routing
(40:56) Node.js Backend Review
(43:20) Test the Login flow
(44:16) Redux: Extend the apiSlice to users
(47:20) React: UsersList component
(49:16) Update App.js routing
(49:57) JWT Auth Flow and RTK Query Cache
☕ Buy Me A Coffee: www.buymeacoffee.com/davegray
🔗 Node JS Full Course (with source code) for building the backend REST API that will receive your form submissions: • Node.js Full Course fo...
🔗 React Router Version 6 in 20 minutes: • React Router v6 in 20 ...
📚 Modern Redux Authentication References:
🔗 Redux Toolkit Authentication: redux-toolkit.js.org/rtk-quer...
🔗 baseQuery function arguments: redux-toolkit.js.org/rtk-quer...
🔗 Automatic re-authorization by extending fetchBaseQuery: redux-toolkit.js.org/rtk-quer...
📚 General Redux Toolkit References:
🔗 Official Site for Redux Toolkit: redux-toolkit.js.org/
🔗 Redux Devtools: github.com/reduxjs/redux-devt...
📚 JWT References:
Intro to JSON Web Tokens: jwt.io/introduction
All You Need to Know About Storing JWT in the Frontend: dev.to/cotter/localstorage-vs...
Cross-Site Scripting (XSS): owasp.org/www-community/attac...
Cross-Site Request Forgery (CSRF): owasp.org/www-community/attac...
📚 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...
✅ Follow Me:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
Was this tutorial about Redux Login Authentication with JWT Access and Refresh Tokens helpful? If so, please share. Let me know your thoughts in the comments.
#redux #login #authentication

[@DaveGrayTeachesCode]

In this advanced tutorial, we'll take a look at a login authentication flow in React and Redux that uses JWT tokens and cookies. The key is to understand how to intercept a failed request, refresh your access token by sending your refresh token, and then sending your original request again with the new access token. This can be achieved with Axios interceptors, but with modern Redux, we apply RTK Query and build a base query wrapper function instead. If you are just starting with Redux, I recommend going to my Redux full course first: kzbin.info/www/bejne/hKLdlYmEZ9msrLM

[@TwistedFate123]

Dude you deserve more visibility on this platform!! Your explanations just simply works and easily understood!

[@DaveGrayTeachesCode]

Thank you for the kind words! 🙏

[@jordanryanethanowona2974]

@@DaveGrayTeachesCode Hi dave, thans for this great tutorial. everything works fine for me until the end when i had to add the users endpoint. i dont know if am missing something or if the framework has evolved but my users endpoint is never even called. i took a look at your code and it looks ok on my side.

[@Yogesh2Love]

You are making tutorial on what exactly we need to do in working conditions that's a big help Dave.

[@DaveGrayTeachesCode]

You're welcome, Yogesh! 🙏🙏

[@codegien]

I honestly would have given up on coding long ago but you keep me inspired. Thank you

[@DaveGrayTeachesCode]

Glad I could help!

[@dimitarkrastev6085]

By far the best tutorial on the subject I have found. Every other tutorial creates something simple and practically non-applicable to any real world scenario like "incrementCounter". Good luck infering how to apply the "counter" redux example for a login for example... Getting a real life problem like this and fully implementing it end-to-end using the subject of the tutorial is just invaluable. Great video, thank you very much.

[@DaveGrayTeachesCode]

Glad it was helpful!

[@dindoleonard]

Every tutorial you create is gold! Thank you. Will send another coffee. 💪

[@DaveGrayTeachesCode]

Thank you, Leonardo! 🙏☕

[@muhammadzeeshan07]

Excellent method of explanation, everything just went straightly into my brain, not over it🙃, Thanks a lot Dave for all of your content

[@dev-suresh]

Thanks for the value Dave. This video is not for complete beginners but definitely for beginners having done some good work excelling their skills.

[@patrick_kabwe]

Just what i needed. Thank Dave you have been of help for the past 3 month

[@DaveGrayTeachesCode]

You're welcome, Patrick! 💯🚀

[@Yash-jp6xh]

Absolutely loved this tutorial... helped me built up Login and setup authentication for my chat application.

[@sumitkachare6628]

Hi Dave really thanks for this series , there is always something new to learn from your videos. Thanks a lot.

[@DaveGrayTeachesCode]

You're welcome, Sumit! 💯🙏

[@codernerd7076]

I was waiting for this video thank you so much!

[@DaveGrayTeachesCode]

You're welcome! Yes, many requests for this Login Authentication flow with Redux 💯

[@mamlzy]

work as expected! thank you so much fo this Auth & RTK Query tutorial, cant find like this in other youtube channel so far. Can't wait to see u discuss about Next.js SSR with RTK Query (CRUD example). I really appreciate your effort..

[@DaveGrayTeachesCode]

You're welcome!

[@ManishMulchandani-rx2pk]

Big salute and thanks for sharing this vid. You've gained a loyal subscriber.

[@kishoreandra]

Amazing Dave .... These videos are found no where with such quality I bet 💯

[@DaveGrayTeachesCode]

Glad you like them! 🙏🚀

[@kishoreandra]

@@DaveGrayTeachesCode absolutely ... Would love to see more of it 😉 🙏🤞

[@dharmeshgohil9375]

Waited for this video, awesome👌👌👌

[@DaveGrayTeachesCode]

Thank you, Dharmesh! Many requests for this login auth flow with Redux! 🚀

[@TSpods]

hello dave you are the best teacher in the world, all the tutorials you do helped me a world

[@DaveGrayTeachesCode]

Thank you for the kind words!

[@TemitopeJoshua10]

Dave, thanks for helping me out, I love your channel from Nigeria 🇳🇬.

[@DaveGrayTeachesCode]

You're welcome and hello to Nigeria!

[@kirillzlobin7135]

1:22 Congratulations on being recognized by the Redux official team!!! This is amazingly cool

[@DaveGrayTeachesCode]

Thanks!

[@okonkwo.ify18]

And that’s y I always recommend your channel to people

[@DaveGrayTeachesCode]

Thank you, Ifeanyi! 🙏

[@VinayakSoni98]

always helpful. when i dont find a particular section of a code/ logic i always check your videos and always mostly i find that you have covered that topic. was so confused that how to get user token from user slice to createApi i found it @9:18 always you videos are helpful.

[@SuperCodepk]

You are doing great man 👏. Your content is helping me alot

[@DaveGrayTeachesCode]

Glad to hear it!

[@rajukadel1007]

Waiting for your more videos....Super generous man---> Mr.Dave Gray !!!

[@DaveGrayTeachesCode]

Thank you!

[@ghassanclassic7689]

Great tutorial Dave 🎉 Thank you very much 🙏

[@DaveGrayTeachesCode]

You're welcome!

[@mumarqayyum9286]

Everything is incredible explained. As a newbie to react and redux toolkit, i wish it has persiststate on reload using redux toolkit

[@DaveGrayTeachesCode]

I think you could apply a persist login strategy like the one I show here: kzbin.info/www/bejne/aGiuloyhYpqpgNk ..but modify it from RTK Query.

[@electro1146]

Dave, your content is fantastic and it's great that you dive deep into stuff that others normally don't. However, it would be helpful if you provide links to documentation that we could use as reference.

[@celestialmage7739]

Thank you so much for this Dave :)

[@DaveGrayTeachesCode]

You're welcome!

[@by6321]

Dave you are lifesaver! God bless you man.

[@DaveGrayTeachesCode]

Glad I could help!

[@by6321]

@@DaveGrayTeachesCode I would like to use backend as PHP, I hope it will work for me.

[@user-ym8qt7sr8x]

Nice video Dave, thank you!

[@DaveGrayTeachesCode]

Very welcome!

[@yurabobrov6717]

Top content! Highly recommended for everyone who wants to familiarize with RTK query.

[@DaveGrayTeachesCode]

Thank you, Yura! 🙏💯

[@altered.thought]

I'm refreshing on my MERN stack and this content is premium. 💯

[@DaveGrayTeachesCode]

Great to hear!

[@AhmadSukkar]

Really, thanks a lot for these videos 🙌

[@DaveGrayTeachesCode]

You're welcome!

[@lailabouziani7704]

Thank you, great tutoriel ;)

[@juneroyd.quinimon495]

Thanks for this sir Dave :)

[@DaveGrayTeachesCode]

You're welcome, Juneroy! 💯

[@regilearn2138]

Hi Dave really appreciate this. And would like to suggest add email and SMS verification part also,

[@DaveGrayTeachesCode]

Thank you for the request!

[@AfifAlfiano]

Awesome, thank you dave

[@DaveGrayTeachesCode]

Very welcome!

[@michaelangermeyer2118]

Really good Tutorials! They all helped me very much on creating software. What would be a good way to implement a persistent login with React Redux?

[@dadaabiola2474]

The Security Guy! 🤗

[@DaveGrayTeachesCode]

Thank you 💯 but I'm no security expert.. maybe good at building login auth flow. 🙏

[@amaraag9435]

Hi Dave? I think your tutorials may be best tutorial right now. I have one question. I noticed you used setAll method for save data in store in 7th video. In this video you used independent reducer for save auth data in store. Which is better technique save data in store after fetch data?

[@enzocodes]

Hello Dave! First of all congratulations and thank you for making this awesome tutorial. I have a question, if we don't want the user to log in every time the page is refreshed.. do you recommend adding a method in the private route to authenticate a user with the refresh token in the cookies? That way we would have the token, or how would you persist a session? Thank you! Greetings from Argentina

[@sergeyplotnikov5031]

Thank you very much Dave!!!!

[@DaveGrayTeachesCode]

You're welcome, Sergey!

[@ibrahimhafez7750]

The best teacher in the whole world

[@DaveGrayTeachesCode]

Thank you, Ibrahim! 🙏

[@ER-oj8mo]

Hey Dave! Thanks for the video, I just built the same thing except using Axios interceptors, might give this a shot. I would love if you could take a look at a video detailing how to persist jwt token authentication over a refresh / separate tabs? Thanks again for the video!

[@BaseQuatroB4]

This is useless without persisting the token safely.

[@DaveGrayTeachesCode]

Hi ER - glad to hear it - did you build your Axios version with my tutorial mentioned in the pre-requisites at the beginning of this video? ( kzbin.info/www/bejne/pHqbgYyQg6unl8U ) ...you might notice one video in that series applies login persistence with JWTs. The same strategy could be applied here. Link: kzbin.info/www/bejne/aGiuloyhYpqpgNk

[@DaveGrayTeachesCode]

@BaseQuatro that is harsh and unwarranted. In addition, the prerequisites I mentioned at the beginning of this video include a dedicated tutorial with the login persistence strategy: kzbin.info/www/bejne/aGiuloyhYpqpgNk

[@ER-oj8mo]

@@DaveGrayTeachesCode I didn’t see it, thanks so much, I’ll absolutely watch it!

[@ER-oj8mo]

@@DaveGrayTeachesCode well - now i've done three different methods. Been a nervous wreck about authentication / removing friction from my users experience. RTK (this method) is definitely what I'm settling on.

[@MohamedIbrahim-ig1dk]

Hi Dave, your work is really great for showing every single option available, and it is best material I saw for learning react! Quick question though, would you able to do a video about Persistent login with redux rtk query, as the other one in the series was built over axios and I am confused how to do it on top of this example here. Thanks in advance :)

[@DaveGrayTeachesCode]

Thanks for the kind words and request! Once you apply what is in this tutorial, not much else changes. Your persistent login approach should essentially remain the same as what I covered here: kzbin.info/www/bejne/aGiuloyhYpqpgNk

[@andreaso.1549]

Hi Mohamed, I was gonna ask the same question. However, Dave's reply made me stubborn. I now have persistent login with refresh/access tokens using RTK in my app. I wrote a short article about it on LinkedIn: bit.ly/3Cbl1kV In the article there is also a link to the gist with the code. Feel free to ask any questions.

[@Winter_Wyvern1]

@@learningxsync5324 its in his other video, hence he replied the link above ur reply.

[@davithchhung7577]

Thanks you for the video!

[@DaveGrayTeachesCode]

You're welcome, Davith!

[@vishwasmakwana125]

Hi Dave , Your content is awesome , I just want to know one thing for backend in this tutorial are you providing any starter code ? That I can use it directly and follow along to focus on UI side

[@DaveGrayTeachesCode]

There is source code provided for this tutorial in a Github link in the description. I can't remember if there is "starter code" or just completed code. Likewise, the Node.js backend REST API code is also provided at the link for the Node.js course in the description.

[@gadgetsexplain]

This channel is my G.O.A.T 🤩

[@DaveGrayTeachesCode]

Thank you! 💯🚀

[@adityojuliantriwm8442]

Hello, Dave! I feel really grateful for finding your content cause it always helps me learn right when I need it. Thank you for your incredible and helpful content! I got a quick question regarding the redux slice and it would be very appreciated if you could provide me with inspiration. I'm working on my project and I've implemented all of my redux slice functions (except for refresh JWT functionality) using the asyncThunk method (calling corresponding service functions and reaching the API endpoint using Axios). I've been wondering if I could implement baseQuery and inject all of my implemented slice functions as you've done in the video. Thanks in advance! :)

[@DaveGrayTeachesCode]

You're welcome! And yes, you can integrate Axios and baseQuery. Here is the docs link showing how: redux-toolkit.js.org/rtk-query/usage/customizing-queries#axios-basequery

[@adityojuliantriwm8442]

@@DaveGrayTeachesCode Thank you so much for your help in guiding me to the right steps. Another question if you'd let me, is it safe to put the handleRefreshToken function on the nodejs as one of the middleware before reaching the final endpoint function? Thank you!

[@DaveGrayTeachesCode]

@@adityojuliantriwm8442 you could, but it seems like the controller is where you would handle this functionality.

[@user-cz9zm2us1y]

Hello, I have been following your tutorial series, and everything is going well so far. Thank you very much for sharing your knowledge. I have a question about this tutorial: you used Axios for the requests but now Redux for the rest of the project. Does that mean it's better to use Redux instead of Axios for the requests in the remaining parts of the project?

[@dev-suresh]

For those wondering the same thing: RTK is built on the top of fetch request, just like axios. They both do the same thing - "fetch requests made easy". Here we are using RTK because when we have already used RTK for state management then why not create the complete auth process using RTK itself instead of relying on other dependencies. This is one reason why using RTK is the preferred approach here. Anyways, if you want to use AXIOS for requests you can do that but then you should stick with redux for state management only. Hope this helped.

[@stephaneadjakotan750]

absolutely the best authentication course of all that I have seen on youtube, there is nothing to argue about. 🤔I have a small question since we did the login with an HTTP Post, wouldn't it be relevant to use the HTTP Post for the refresh-token?

[@DaveGrayTeachesCode]

The refresh token is in a cookie which is automatically sent with every request as long as withCredentials is set to true. Javascript doesn't really touch it and the request type should not matter.

[@kikodzn1851]

At login page you should also use a ref for username and password once they are required only in the submit

[@shervangh9660]

i love you dave

[@famfy]

Dave you are one my favourite teachers! Great job on very important topics! Thank you! Do you think creating tutorial for Nextjs probably again with Authorization and Authentification?

[@DaveGrayTeachesCode]

Thank you! Yes, Next.js is on my list to cover right after Typescript!

[@ghkpr]

Thanks, great tutorial! createApi just blew my mind

[@DaveGrayTeachesCode]

Thank you!

[@root3044]

Thank you for your quality content! I would like to know if the manipulation of this project could be done without too much difference by making a back-end in Ruby On Rails? Take care of yourself !

[@DaveGrayTeachesCode]

Great question! RonR is something I do not have experience with. The logical flow of the JWT auth should stay the same, so this frontend code should not change much if at all.

[@jamesnelson174]

Hi Dave, great tutorials, and i appreciate your effort towards our growth. Quick one, How do I get Axios interceptors to work with the Rtk query with token

[@DaveGrayTeachesCode]

That's what this tutorial really does, but without axios. However, the docs do show how to add axios to your baseQuery if you want to use it: redux-toolkit.js.org/rtk-query/usage/customizing-queries#axios-basequery

[@ekay]

Very good and clear tutorial even for me as a beginner. I was just wondering is the approach to using the persistent login feature with redux is the same as in the previous tutorial?

[@DaveGrayTeachesCode]

Same approach / concept, but it does require some changes (not identical code). I will be doing this in my current MERN Stack series so you can see the exact code I use: kzbin.info/aero/PL0Zuz27SZ-6P4dQUsoDatjEGpmBpcOW8V ...this series is not complete yet, but auth will be covered in it.

[@ekay]

@@DaveGrayTeachesCode I didn't know about the playlist. I will try it, thanks!

[@narekdanielyan8810]

Hi Dave, thanks for this great tutorial. Ihave one queation, what if we are logged in and reloading oage, how to trigger refreshtoken ?

[@navidsotoudehmehr749]

Thank you so much

[@DaveGrayTeachesCode]

You're most welcome

[@jimkarakaxas9909]

Hey Dave! Thanks for your really great content. Always learning so many new topics from your videos. I would like to ask you one question regarding the request that you are refresing your access token. So where do you enter the refresh token in the request? Because now in the request we are just configuring the new url which is "/refresh" and passing also the 'api', and the 'extraOptions', but where do you specify the refresh token for the request?

[@DaveGrayTeachesCode]

The refresh token is in an httpOnly secure cookie. The cookie is sent with the request, but you cannot access the token with JavaScript on the frontend. That's what makes it more secure 😀

[@jimkarakaxas9909]

@@DaveGrayTeachesCode Thank you so much for your answer! Now everything is crystal clear:)

[@majdiswais]

This is really very informative, thanks Dave! Quick questions, for the purpose of storing the authentication information (access token) do you prefer Redux or Context API?

[@DaveGrayTeachesCode]

I always keep things as simple as possible. I prefer Context unless state gets so complicated I need something like Redux.

[@MrSaydo17]

Thanks for the video! You mentioned not using map for lists. Can you expand on that?

[@DaveGrayTeachesCode]

Sorry if that wasn't clear. Nothing wrong with map. I mentioned using the map iterator as the item key. With larger lists it is known to cause a problem, but even if I give an example with 3 items, I am guaranteed to get a comment saying I shouldn't use it. With a larger list, use a package like uuid to generate the list item keys.

[@NguyenTuan-pu7ye]

this is amazing content sir, it helps me a lot. But i have a question when i send a login request to server, i will receive the response object containing accestoken and refreshtoken so where i store the refreshtoken and in baseQueryWithReauth, how can i pass refresh token argument in order to send it to server that will create new token again. Thank you.

[@faheemhaider211]

Thanks a lot for another great learning video. One query, Can we integrate thunk in the above example?

[@DaveGrayTeachesCode]

You're welcome! Of course! There is usually more than one way to achieve the same thing. The docs have some good examples of using axios, too.

[@hasst9261]

It is rly useful. Thank you It is like from me, obviously

[@DaveGrayTeachesCode]

You're welcome!

[@thedigitalgurutech]

Do you have any tutorials using Strapi with React? Would love to see this redux/toolkit with Strapi if you're up for making that tutorial. Specifically, wanting to do include with Ecommerce/Strapi/Stripe tutorial I've built and been customizing. You're videos are phenomenal though - wish I would have discovered you months ago!!!

[@afdhaliapreto7703]

if you deeply understanding of redux toolkit query, it is more simple than using axios interceptors. otherwise we have fetch data API and state management all in one on RTKQ

[@marcel5235]

would you make video about react-query / swr and http only cookie refresh jwt? I think that this could be in React the most common usage ( if you dont use next or redux ), Btw: thanks for this video - it makes me think about secure app more and gives me some ideas

[@jefcodejp5364]

Hi Dave. Can you show how this flow is acheived with react query?

[@therevenant9296]

Great tutorial! Thanks dave! There is just one thing revolving in my mind, as I save my refresh token in cookies, it logs me out. The refresh token is already in my cookie. How do I persist the login even when the reload happens?

[@kirillzlobin7135]

17:35 - Theoretically we could specify endpoints in our apiSlice, correct? So in this line: export const authApiSlice = apiSlice.injectEndpoints({... we kind of inherit the settings from specified in apiSlice, correct?

[@lagorra5000]

I never been so lost tbh, nothing wrong with the tutorial off course. just realizing how much lack of knowledge I have! I need to step up, damn!

[@DaveGrayTeachesCode]

A little progress every day!

[@lagorra5000]

@@DaveGrayTeachesCode Thank you for these amazing tutorials Dave! I wanted to ask you, could you do a tutorial like this but with the aws-sdk for user authentication?

[@DaveGrayTeachesCode]

@@lagorra5000 thanks for the request! I could do an AWS tutorial, but it would be far different from this. AWS has a different process.

[@VidalHerrero]

Thanks for your explanations, they helped me a lot. I have a suggestion, could you explain how to fetch a scrolling list?. I could not find any clear example yet.

[@DaveGrayTeachesCode]

You're welcome! Yes, I think you mean "infinite scroll" which is here: kzbin.info/www/bejne/gIjPgJZ6qtiSqNU

[@VidalHerrero]

@@DaveGrayTeachesCode Thanks for yor reply, Yes I was referring to "infinite scroll", but I mean implementing it using RTK query instead of react query... Anyway thanks again

[@daheepark2065]

Hello from Korea! Thanks for sharing great tutorials! It gave me a lot of help to understand Redux Toolkit and RTK query and your authentication tutorials helped me implementing authentication flow using React. After watching your tutorials, I have one question. At 28:48 in this video, you are using try-catch block with unwrap method. Is there any difference between using try-catch block with unwrap method and using isError and error property like using isLoading when handling errors?

[@DaveGrayTeachesCode]

Great question! It is personal preference and what works best for you in the situation you are in. I usually use the isLoading, isError, and similar values from a hook, but sometimes - such as in a login form - I prefer the unwrap() with try / catch.

[@daheepark2065]

@@DaveGrayTeachesCode Thank you for your quick reply! Have a nice day!

[@domieSinday]

Awesome!

[@DaveGrayTeachesCode]

You're welcome! 🚀

[@tetthys3620]

Thank you!!!

[@DaveGrayTeachesCode]

You're welcome!

[@dmytroostretsov6367]

Hi Dave, I saw your awesome video about React Redux Login Authentication Flow with JWT Access. I really appreciate it, Thank you! Now I try to understand react, so could you please tell me a few words about how you get previous route info from the 'navigate state'? I mean this part of your code: So how do you read 'from' and 'location' in the login component? Thanks a lot.

[@DaveGrayTeachesCode]

You can look back to the login component code to see how I'm looking for that. Near the top of the component where const from = ... Also, it is a bit of a dive into the React Router v6 docs, but start here: reactrouter.com/docs/en/v6/hooks/use-navigate

[@lioraviv2359]

Hey Dave, thanks for the tutorial! In the end of the video when you tested things out you got sent back to the login page after the token timed out, shouldn't the program request a new token then send the request with the new token instead like you showed at the start of the tutorial?

[@DaveGrayTeachesCode]

I think I remember also showing where you can use the refresh token to get a new access token, too? However, what you are describing is when the refresh token has expired - and you need to let it expire at some point. When that happens, you will not be issued a new access token and instead, you will be logged out.

[@diasaijanov8675]

hey Dave. What is preflight request? Do you have video explanation?

[@gadothegado]

Hey Dave! Another awesome video which is exactly what I was looking for to complete the your Redux course. Thanks man! Question though what exactly is the "keepUnusedDataFor" is for? I thought it would clear the cache or something for 5s then it'll call the api and get the data again from DB but surprisingly it kinda unauthenticated the user completely. Is that what happened? Please elaborate!

[@gadothegado]

OK! I misspelled the refresh api path. After fixing it, It all worked as I expected it. After 5s it called the refresh then refetched the data without going back to the login page. So all is good now.

[@DaveGrayTeachesCode]

Glad to hear that!

[@DaveGrayTeachesCode]

keepUnusedDataFor is the number - in seconds - that RTK will keep the data in cache AFTER no components are subscribed to the data. The default is 60 if not specified. A component subscribes to the data when it requests the data and unsubscribes when it unmounts.

[@smokencode]

Thanks Dave, your videos helped me a lot, specially when I start working with Redux, but help me until today! I have one question about the authentication process. If I reload the page, I loose the credentials and back to the login page, is supposed to be like this according the videos instructions, I missed something, or I need to implement some extra configuration to hold the tokens in the browser? Thanks Again and Best Regards !

[@DaveGrayTeachesCode]

Your backend code needs to send you an httpOnly secure cookie with a refresh token in it. JavaScript cannot see that httpOnly cookie, but your baseQuery should be sending it if you have enabled credentials in the query options. You can see this in my source code from the link in the description. If you are not familiar with the cookie I'm talking about, my React auth series will help you - and you are asking about the Persist Login strategy: kzbin.info/aero/PL0Zuz27SZ-6PRCpm9clX0WiBEMB70FWwd

[@mohamedyoussef8835]

Awesome explanation ++++++++++++++++++++++ Thank you

[@DaveGrayTeachesCode]

You are welcome!

[@mariacamilamontealegremerc5892]

Hi dave, thanks for the video, I think is really good. By the way, I think that youd didn't say what the credentials are to login and be able to see the user list on the UI . Could you please help me out with this question? Thank you very much!

[@DaveGrayTeachesCode]

You need to create your own users and passwords for them. If you have created your own backend with Node.js, you will also have your own MongoDB account for your database. I show how to do all of that in my Node.js course here: kzbin.info/www/bejne/nGOoonh5nrl1gpo

[@vitaliibudkin8210]

Hi, Dave! Could you please tell me what's the best solution if I need to save two user accounts in my App and I need to quickly switch between this two accounts? I use JWT Access with refresh tokens and cookies now. Is there any way to save two different cookies for more that one user on the same PC?

[@LisaMcGerr]

Such an awesome video - where can we learn about creating a Register or Sign up component with RTK?

[@DaveGrayTeachesCode]

Thank you! You can learn about register and sign up components with React in this playlist - and then you can use RTKQ if you want - although these tutorials do not: kzbin.info/aero/PL0Zuz27SZ-6PRCpm9clX0WiBEMB70FWwd To learn more about Redux Toolkit and RTKQ, here is my playlist: kzbin.info/aero/PL0Zuz27SZ-6M1J5I1w2-uZx36Qp6qhjKo

[@ankitkumarjat9886]

Thanks for such a great video. I have one question How we can use axios with rtk query? I need it for upload progress during file uploaded.

[@DaveGrayTeachesCode]

Yes, you can 💯 Here is a link to the docs on this: redux-toolkit.js.org/rtk-query/usage/customizing-queries#axios-basequery

[@devripxy]

you are a crack Dave! thank u for the video.

[@DaveGrayTeachesCode]

You're welcome! 💯

[@moazabdulhalim2819]

Dude, you're amazing, I've never seen anyone explain the way you do me and my teammates have improved a lot since I discovered your channel I have one question , I'm making an admin panel and i've followed your video is there a way to keep the user logged in when refreshing the page without storing the token in the local storage

[@moazabdulhalim2819]

found your react persistent videos you really have a solution for everything!! Many thanks

[@DaveGrayTeachesCode]

Glad to hear you found them, and glad it helped!

[@LoFiRadio-tp5tj]

Thanx Dave! But you don't throw any refresh token to the server. Can you explaun how I can call base query with the new token, not just with the new url? Please, I'm struggling a few ours because I can throw any props to the base query! Thanx man, you doing a great job!

[@jardelduarte7987]

great job, i init a project with a redux and before include redux-persist... my pages dont reset skills in reducers, u have a tutorial of the redux auth with a persist? And again, congrats!

[@DaveGrayTeachesCode]

Thank you, Jardel. After looking at redux-persist (www.npmjs.com/package/redux-persist) it looks like it would work, but be careful to not store the JWT with it as it uses localStorage, files, or non-httpOnly cookies. A process you might consider is shared here: kzbin.info/www/bejne/aGiuloyhYpqpgNk ..it only requires a username in localStorage and a previously received secure httpOnly cookie with refresh token. This video is from my React login series listed in the prerequisites for this video near the beginning.

[@VladyslavChapiuk]

Hello and thank you for the nice example. I even did the page refresh with it. The only issue I have is it detects that user was hacked if I have two separate queries at a time. So one of the query uses the new refresh token and runs successfully. But another one tries to get refresh token and does not find the user anymore. I think it is race conditions or something. Can you help with that?

[@wbielicz]

Great tutorial Dave! Really helped me understand this difficult topic. However, why does my redux state only update whenever I log out and back in even tho the fetchBaseQuery function successfully called the api the second time and updated my mongodb while logged but, my redux state behind the scenes?

[@DaveGrayTeachesCode]

That's difficult for me to say without knowing how you set up your Redux or RTK Query. This tutorial just goes over the auth part.

[@sauryabhatt]

Hey Dave, it is one of the best tutorial on the topic. Is there a git link for this tutorial?

[@DaveGrayTeachesCode]

In the description. The source code link.

[@kasirbarati3336]

Thanks for the tut, please do one for auth0 + redux toolkit query + react

[@DaveGrayTeachesCode]

Thank you for the request!

[@igorssigalovs1049]

In case of headers, there is actually a mention that ( which is RFC-2616 sec. 4) they should be case insensitive (Field names and not the values)

[@DaveGrayTeachesCode]

Right. I assume you are referencing when I said there is "no standard" for the authorization header. We're saying the same thing. The word authorization can be upper or lower case so your backend needs to look for both. If there was a "standard" way of doing this, it would always be (for example) upper case.

[@mohamedsamy2315]

Hey Dave ! can you please make same vedio with RTK query (login + refresh token ) and if you can use in save token HTTPonly cookies

[@DaveGrayTeachesCode]

Hi Mohamed - this tutorial uses RTK Query and receives an httpOnly secure cookie with the refresh token in it.

[@gerardolongobardi3055]

Hi Dave. This is a great tutorial. Thanks!! I have a question. Once you save the accessToken in redux state, despite it gets expired, the expired token stays saved in that state and the RequireAuth component will still get that the access token exists, that token from selector is true. How can you delete with logout the accesstoken when it gets expired???

[@yubrajkhatri3519]

Exactly i a came with same problem

[@tahirdibirov1430]

Did you use FSD Architecture here?

[@bassamajam299]

Thank you for this great video it helped me a lot :) Could you help me please know how can I get the users list even if I reload the page or close the tab and open a new one? Thanks :)

[@DaveGrayTeachesCode]

Please continue watching the videos in this series (linked in the description). I have a video dedicated to persisting the login even after a page refresh or revisit.

[@nepalrameshwor1540]

user's token gets reset or lost after refresh the page when using redux store. So, what is the best way to store token and other information of user so that after refresh no data is lost or reset?