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.
💖 Support me on Patreon ➜ [ Ссылка ]
⭐ 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 Node.js 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: 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: [ Ссылка ]
🔗 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: [ Ссылка ]
🔗 baseQuery function arguments: [ Ссылка ]
🔗 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:
WebAIM.org - Advanced Forms: [ Ссылка ]
WebAIM.org - 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
