React Redux Login Authentication Flow with JWT Access, Refresh Tokens, Cookies
Web Dev Roadmap for Beginners (Free!):
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:
- Advanced React & Redux:
- Jr to Senior Web Dev Roadmap:
- Master FAANG Coding Interviews:
🚩 Subscribe ➜
🚀 Modern Redux full course - 4 hours:
👀 React Login tutorial series playlist:
🔗 Completed Source Code:
🔗 Backend REST API Source Code:
📬 Course Updates ➜
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:
(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) routing
(40:56) Backend Review
(43:20) Test the Login flow
(44:16) Redux: Extend the apiSlice to users
(47:20) React: UsersList component
(49:16) Update routing
(49:57) JWT Auth Flow and RTK Query Cache
☕ Buy Me A Coffee:
🔗 Node JS Full Course (with source code) for building the backend REST API that will receive your form submissions:
🔗 React Router Version 6 in 20 minutes:
📚 Modern Redux Authentication References:
🔗 Redux Toolkit Authentication: #authentication
🔗 baseQuery function arguments: #basequery-function-arguments
🔗 Automatic re-authorization by extending fetchBaseQuery: #automatic-re-authorization-by-extending-fetchbasequery
📚 General Redux Toolkit References:
🔗 Official Site for Redux Toolkit:
🔗 Redux Devtools:
📚 JWT References:
Intro to JSON Web Tokens:
All You Need to Know About Storing JWT in the Frontend:
Cross-Site Scripting (XSS):
Cross-Site Request Forgery (CSRF):
📚 Accessible Form References:
- Advanced Forms:
- Form Validation:
MDN - Aria Attributes:
aria-invalid:
aria-describedby:
aria-live:
aria-label:
🔗 ES7 React JS Snippets Extension for VS Code:
🔗 React Dev Tools Extension for Chrome:
✅ Follow Me:
Github:
Twitter:
LinkedIn:
Blog:
Reddit:
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