When will you use this?

Use when your React app must talk to a real backend or show live updates.

• React frontends talk to .NET, Node, or Java APIs — fetch and auth are daily tasks.
• Live chat and stock tickers use WebSockets or SignalR with React state.

Real-world: protect student grades route

Toolliyo grades page checks session cookie, refreshes JWT before expiry, redirects to login if 401 from API.

Production-style code

function useRequireAuth() {
  const navigate = useNavigate();
  useEffect(() => {
    fetch('/api/auth/refresh', { method: 'POST', credentials: 'include' })
      .then(r => { if (!r.ok) throw new Error(); return r.json(); })
      .catch(() => navigate('/login'));
  }, [navigate]);
}

function GradesPage() {
  useRequireAuth();
  const { data } = useQuery({ queryKey: ['grades'], queryFn: fetchGrades });
  return <GradeTable rows={data} />;
}

What happens in production: Auth is cross-cutting — refresh + route guards prevent leaking sensitive student data.

Lesson example (start here)

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

function Login() {
  async function handleLogin(e) {
    e.preventDefault();
    const res = await api.post('/auth/login', { email, password });
    setUser(res.data.user);
    navigate('/dashboard');
  }
  return <form onSubmit={handleLogin}>...</form>;
}

Line-by-line walkthrough

How it works (big picture)

• Server validates password and returns token.
• Client stores session and redirects.
• Protected routes check user before render.

Do this on your computer

1. Build login and register forms.
2. Create AuthContext with user state.
3. Protect routes and API calls.
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.

Remember

Login → token/session → protected routes. Never trust client alone. Clear auth on logout.

Common questions