Guard a page with server auth state
The app starts on /account. AuthProvider asks the fake server who is logged in (api.me(), which takes 200 ms) and exposes { status, user, login }, where status is "loading", "authenticated" or "anonymous".
Write RequireAuth: while status is "loading", render <p id="checking">Checking your session…</p>; when "anonymous", redirect to /login and remember the page the user wanted (in the navigation state); when "authenticated", render its children.
Update Login so that once the user is authenticated it sends them back to the page they wanted (or / if none). Don't store anything in localStorage: the session is the server's (an httpOnly cookie in a real app).
What Check tests
- An anonymous visitor doesn't see the account page
- They are sent to the login page
- The guard shows a checking state while loading
- After logging in they return to the account page
- Nothing was stored in localStorage
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Your page
Console
Nothing logged yet.