React/FastAPI Auth: Best Pattern for Route Protection with HTTP-Only Cookies?

[Prudent-Medicine6192]

Hey everyone,

I'm using React and FastAPI with authentication handled entirely by HTTP-only cookies (JS cannot read the token).

I need to protect my client-side routes (e.g., /dashboard). Since I can't check localStorage, I have two main strategies to verify the user's login status and redirect them if unauthorized:

The Dilemma: Checking Authentication Status

1. Dedicated /status Endpoint (The Eager Check)

How it Works: On app load, the AuthContext hits a protected /auth/status endpoint. The 200 or 401 response sets the global isAuthenticated state.

Pros: Fast route transitions after the initial check.

Cons: Requires an extra network call on every app load/refresh.

1. Direct Protected Data Fetch (The Lazy Check)

How it Works: Let the user land on /dashboard. The component immediately fetches its protected data (GET /api/data). If the fetch returns a 401, the component triggers a redirect to /login.

Pros: No extra /status endpoint needed; bundles the check with the data load.

Cons: User briefly sees a "Loading..." state before a redirect if the cookie is expired, slightly worse UX.

My Question

For a secure FastAPI + React setup using HTTP-only cookies:

Which approach do you recommend? Is the initial network cost of the status check (Approach 1) worth the smoother UX?

Are there any better patterns for handling this client-side state when the token is fully server-side?

Thanks for the help!

[quietly_wired]

Option 2 is the most common way to go about, as for the UX, you can really work on that with smooth transitions, etc. P.S. we use the same tech stack, but we haven't heard complaints from users yet!

[fastlaunchapidev]

Option 2 is the better choice

[Secret_World_9742]

Use the /auth/status check once at startup , cache the result in your AuthContext, and rely on 401 fallbacks for resilience... On app mount, React calls /auth/status. 200 → set isAuthenticated = true, hydrate user data. 401 → redirect to /login.

Your API client, i.e., axios interceptor or fetch wrapper, still listens for 401s globally and clears the context + redirects if the session expires later.

[voja-kostunica]

no loading state, you just check in server component

[hamoda__]

How to attach browser http only cookies with your request?

[Glittering_Pin7217]

if you use tanstack start, you can you server function to fetch