Redux & Redux Toolkit Course
Redux & Redux Toolkit
/
Intermediate

User Session Management

Definition

Managing the lifecycle of a user's session, including silent token refreshes, session timeouts, and re-hydrating the Redux state on app boot.

Explain Like I'm New

Access tokens usually expire after 15 minutes for security. Before they expire, your app needs to silently ask the server for a new token in the background using a 'Refresh Token', update the Redux state, and keep the user logged in without interrupting their work.

Real World Example

If you leave Netflix open on a tab for 3 days, when you come back, Netflix's background code has already silently refreshed your session. You don't have to log in again.

Common Use Cases

  • •JWT Refresh Token flows
  • •Idle timeout logouts

Interactive Example

// Handling App Boot (Re-hydrating the session)

function App() {
  const dispatch = useDispatch();
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // On boot, silently ask the server if we have a valid cookie session
    async function checkSession() {
      try {
        const user = await api.fetch('/me');
        dispatch(setCredentials({ user }));
      } catch {
        // Not logged in. Do nothing.
      } finally {
        setIsLoading(false); // Stop showing the loading screen
      }
    }
    checkSession();
  }, []);

  if (isLoading) return <SplashScreen />;
  return <Router />;
}

Interview Questions

basic

  • Why do Access Tokens expire so quickly (e.g., 15 minutes)?

intermediate

  • How do you intercept an expired token error in RTK Query to trigger a silent refresh?

Flash Cards

Question

Why expire quickly?

Click to reveal answer
Answer

If a hacker steals an Access Token, it becomes useless after 15 minutes. The hacker does NOT have the Refresh Token (which is usually kept securely in an HttpOnly cookie).

Question

How to intercept?

Click to reveal answer
Answer

You write a custom `baseQuery` wrapper in RTK Query. If any API request returns a `401 Unauthorized`, the wrapper pauses the request, calls the `/refresh` endpoint, gets a new token, updates Redux, and then retries the original request automatically.