Protecting Routes in TanStack Start with Zustand

Route protection in TanStack Start doesn't have a built-in auth guard out of the box, but combining a Zustand store with a layout route gives you a clean, reusable solution that works well with SSR and hydration. Here's the full setup. The Auth Store First, the Zustand store. It persists the user to localStorage via the persist middleware and uses a hasHydrated flag to track when the store has been rehydrated from storage. This is critical — without it you'll get a flash of redirect on page load even for logged-in users. import type { User } from ' @/types ' ; import { create } from ' zustand ' ; import { persist } from ' zustand/middleware ' ; import { logoutUser } from ' @/lib/directus ' ; interface AuthState { user : User | null ; hasHydrated : boolean ; setHasHydrated : ( state : boolean ) => void ; setUser : ( user : User ) => void ; logout : () => Promise < void > ; isLoggedIn : () => boolean ; } export const useAuthStore = create < AuthState > ()( persist ( ( set , get ) => ({ u