When will you use this?

Use these patterns when data is shared across pages or comes from a server.

• Shopping carts, user sessions, and API data need clear state patterns.
• Teams pick Context, Zustand, or Redux based on app size — you will see all three in jobs.

Real-world: Toolliyo login → JWT → API

Student logs in, receives JWT, axios interceptor attaches Authorization header on every course API call until logout or refresh.

Production-style code

async function login(email, password) {
  const res = await fetch('/api/auth/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email, password })
  });
  const { token, user } = await res.json();
  localStorage.setItem('token', token);
  return user;
}

api.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});

What happens in production: Same flow powers Toolliyo, banking apps, and SaaS — login once, API calls authenticated automatically.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

// After login success:
setUser(data.user);
// axios interceptor adds header:
api.interceptors.request.use(config => {
  const token = getToken();
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});

Line-by-line walkthrough

How it works (big picture)

• Login API returns user + token.
• Store token safely.
• Interceptor attaches it to every request.
• On 401, redirect to login.

Do this on your computer

1. Build login form posting to /api/login.
2. Save user in Context.
3. Add axios interceptor for Authorization header.
4. Read the real-world section and name which part of the app uses this topic.
5. Run the example locally and confirm the same behavior in the browser.
6. Change one value in the example (text, initial state, or URL) and predict what will happen before you save.

Experiments — try changing this

• Change text or labels in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error message, then fix it.
• Open React DevTools (browser extension) while running Authentication Flows and inspect component props/state.

Remember

Login → token → attach to requests → logout clears. Use Context for current user UI. Server validates every protected API.

Common questions