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

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.

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

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
(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
(43:20) Test the Login flow
(44:16) Redux: Extend the apiSlice to users
(47:20) React: UsersList component
(49:57) JWT Auth Flow and RTK Query Cache

📚 Modern Redux Authentication References:

📚 General Redux Toolkit References:

📚 JWT References:

📚 Accessible Form References:
MDN - Aria Attributes:

🔗 ES7 React JS Snippets Extension for VS Code:

🔗 React Dev Tools Extension for Chrome:

✅ Follow Me:

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

[YogeshLove]

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

[TwistedFate]

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

[kirillzlobin]

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

[mahdizohrevand]

easy to understand, easy to use, and production-grade quality. Great video for learning and applying in real-world projects! 👏

[dimitarkrastev]

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.

[darwisr]

Thanks for the tutorial, your english accent is easy to understand for someone who doesn't speak english like me 👍

[dindoleonard]

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

[mumarqayyum]

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

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

[electro]

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.

[Yash-jpxh]

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

[codegien]

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

[muhammadzeeshan]

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

[TSpods]

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

[codernerd]

I was waiting for this video thank you so much!

[VinayakSoni]

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. <3 thank you Lets code together

[okonkwo.ify]

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

[afdhaliapreto]

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

[patrick_kabwe]

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

[TemitopeJoshua]

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