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

Overview

Learn how to implement a React Redux login authentication flow using JWT access and refresh tokens, secure cookies, and an RTK Query base query reauthentication wrapper. Follow along as the tutorial guides you through setting up the Redux store, creating necessary components, and integrating with a Node.js backend. Explore concepts such as authSlice, baseQuery, apiSlice, and routing in React. Gain practical knowledge on implementing user authentication, protecting routes, and managing the JWT auth flow with RTK Query cache. Perfect for developers looking to enhance their web application's security and user management capabilities.

Syllabus

Intro
Welcome
Starter Code and Dependencies
Begin Redux: authSlice
baseQuery
baseQuery with re-authorization wrapper
apiSlice
Extend the apiSlice to auth
Configure the Redux store
Begin React: index.js
Layout component
Public component
Redux: Export useLoginMutation
Login component
RequireAuth component
Welcome component
App.js routing
Node.js Backend Review
Test the Login flow
Redux: Extend the apiSlice to users
React: UsersList component
Update App.js routing
JWT Auth Flow and RTK Query Cache