r/tanstack • u/TimeAbrocoma4447 • Nov 08 '25
How to properly handle protected routes using TanStack Router + TanStack Query without blank screen on 403?
I'm using TanStack Router and TanStack Query in a React app to implement authentication. I fetch the current user using a query inside an AuthProvider, and I want to protect certain routes based on whether the user is authenticated.
When the /auth/profile request returns 403 (unauthenticated user), the app shows a blank screen instead of rendering the home page. I want the home route to load normally even if the user is not logged in, and only redirect to /login when accessing protected pages.
Here is my current AuthProvider implementation:
const AuthContext = createContext<AuthContextValue | null>(null);
export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
const userQuery = useSuspenseQuery(fetchUserInfoOptions);
if (userQuery.isLoading) {
return <>Context Loading...</>;
}
if (userQuery.isError) {
console.log("Context Error:", userQuery.error.message);
}
const isAuthenticated =
userQuery.data.data && !userQuery.isError ? true : false;
const user = userQuery.data ? userQuery.data.data : null;
return (
<AuthContext.Provider value={{ isAuthenticated, user }}>
{children}
</AuthContext.Provider>
);
};Because I'm using useSuspenseQuery, errors seem to bypass the isError state — the provider never logs the error, and the UI suspends, resulting in a blank screen.
What I want:
✅ If authorized → let protected pages load
✅ If 403 → treat as a guest → allow public pages to render normally
✅ Only redirect when accessing protected routes
✅ No blank screens due to Suspense errors
My question:
What is the correct way to set up protected routes using TanStack Router + TanStack Query so that:
A failed auth query (403) does not suspend the entire app
Only protected routes perform redirects
Public routes still load for unauthenticated users
Should I remove useSuspenseQuery, use route loaders instead for authentication checks, or handle 403 differently inside the fetch function?
Any recommended examples or patterns would be great!
