Cart item count badge shows stale data after logout
Description
After logging out and logging back in as a different user, the cart badge in the header still shows the previous user's item count. The actual cart contents are correct — only the badge number is stale. Refreshing the page fixes it.
Reproduction Steps
- 1
Log in as User A (who has 3 items in cart)
- 2
Observe cart badge shows '3' in header
- 3
Click logout
- 4
Log in as User B (who has 0 items in cart)
- 5
Observe: cart badge still shows '3'
- 6
Click on cart icon — actual cart is empty (correct)
- 7
Refresh page — badge updates to '0' (correct after reload)
Root Cause Hypothesis
The cart count is cached in a React context that persists across the auth state change. The logout action clears the auth token but doesn't reset the CartContext. When the new user logs in, the context still holds the previous count until a full page reload triggers re-hydration.
Resolution
Added a useEffect in CartProvider that listens to auth state changes. When the user identity changes (or becomes null), the cart context resets to its initial state and re-fetches from the API. Also added a `key` prop to CartProvider based on user ID to force remount on user switch.