JWT Authentication - Persist Login State on Refresh - MERN Stack

Overview

Explore JWT Authentication and learn how to persist login state on refresh in this comprehensive MERN Stack tutorial. Discover techniques for implementing JWT access tokens and refresh tokens in React with RTK Query and Redux, and master the art of maintaining app state during page refreshes. Dive into topics such as sending access tokens with baseQuery, creating a baseQueryWithReauth wrapper function, fixing useQuery unsubscribe issues, and developing a custom usePersist hook. Implement a persist toggle in the login form, create a PersistLogin component, and integrate it into your app for seamless user experiences. By the end of this 43-minute video, gain the skills to enhance your web applications with robust authentication mechanisms and improved state management.

Syllabus

Intro
Welcome
Starter Code & User Stories
Send access token with a baseQuery
Test the baseQuery requests
baseQueryWithReauth wrapper function
Test the baseQueryWithReauth requests
Fix for useQuery when it doesn't unsubscribe
usePersist custom hook
Add Persist toggle to Login form
Quick CSS addition
Persist Login component
Set credentials with onQueryStarted
Add PersistLogin to App.js
Test the Persistent Login State
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.