JWT Authentication | Persist Login State on Refresh | MERN Stack
Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap
Learn JWT Authentication and how to persist login state on refresh in this MERN Stack Project tutorial. You will learn how to use JWT access tokens and refresh tokens in React with RTK Query and Redux as well as persist your app state when you refresh the page.
Note: JWT access tokens are sent in an authorization header, but most viewers search for "JWT Authentication" which explains this title instead of "JWT Authorization".
💖 Support me on Patreon ➜ / davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Advanced React & Redux: https://bit.ly/AdvReactDev
- The Complete Node.js Developer: https://bit.ly/CompleteNodeJS
- Jr to Senior Web Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ https://bit.ly/3nGHmNn
📬 Course Updates ➜ https://courses.davegray.codes/
🚀 Discord ➜ / discord
☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray
👇 Follow Me On Social Media:
Github: https://github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
🔗 All Resources for this MERN Stack Project: https://github.com/gitdagray/mern_sta...
🔗 Playlist for this MERN Stack Project Series: https://bit.ly/3Sn4EaI
JWT Authentication | Persist Login State on Refresh
(00:00) Intro
(00:18) Welcome
(00:35) Starter Code & User Stories
(01:58) Send access token with a baseQuery
(05:10) Test the baseQuery requests
(07:51) baseQueryWithReauth wrapper function
(13:12) Test the baseQueryWithReauth requests
(15:55) Fix for useQuery when it doesn't unsubscribe
(22:12) usePersist custom hook
(23:36) Add Persist toggle to Login form
(25:24) Quick CSS addition
(25:52) Persist Login component
(36:43) Set credentials with onQueryStarted
(38:09) Add PersistLogin to App.js
(39:04) Test the Persistent Login State
Corrections:
(16:39) Terminology 'labels' vs 'cache entries': When different values are placed here, different caches are created. In the upcoming 'Refactor' chapter 12 video, we insure all queries use the same cache entry value to avoid creating additional caches.
📚 Suggested Pre-requisites for this MERN course:
🔗 Node.js for Beginners full course: • Node.js Full Course for Beginners | C...
🔗 React JS for Beginners full course: • React JS Full Course for Beginners | ...
🔗 Redux Toolkit for Beginners full course: • React Redux Full Course for Beginners...
🔗 React Login Playlist: • React Login, Registration, and Authen...
📚 Tutorial References:
🔗 Redux Devtools: https://github.com/reduxjs/redux-devt...
🔗 Redux Toolkit Docs: Extending fetchBaseQuery for Authorization: https://redux-toolkit.js.org/rtk-quer...
Was this JWT Authentication and Persist Login State on refresh tutorial helpful? If so, please share. Let me know your thoughts in the comments.
#jwt #authentication #refresh
Смотрите видео JWT Authentication | Persist Login State on Refresh | MERN Stack онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Dave Gray 30 Август 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 24,907 раз и оно понравилось 455 людям.