T
TanStack•4w ago
sensitive-blue

Freeze + Crash when trying to setup Authenticated Routes.

problem. I have a Vite + Router + Query + Start application and I am trying to setup authentication on it. I've followed how to setup authenticated routes guide. For some reason the application freezes on "Loading" & If I comment out loading, it immediately crashes. Even useEffect() from my useAuth.tsx() hook doesn't execute to update the auth state whoes job was to invalidate isLoading that renders "Loading". I'm not really sure what I'm doing wrong. Please help! This is my first time using Tanstack Router. code. My router.tsx looks like this, 
// src/router.tsx
export type RouterType = Awaited<ReturnType<typeof getRouter>>;
export const getRouter = () => {
  const queryClient = new QueryClient();
  const router = createRouter({
    routeTree,
    context: { queryClient: queryClient, auth: undefined! },
    defaultPreload: "intent",
    Wrap: (props: { children: ReactNode }) => {
      return (
        <QueryProvider queryClient={queryClient}>
          <ApplicationStateProvider>
            {props.children}
          </ApplicationStateProvider>
        </QueryProvider>
      );
    }
  });
  return router;
};
// src/router.tsx
export type RouterType = Awaited<ReturnType<typeof getRouter>>;
export const getRouter = () => {
  const queryClient = new QueryClient();
  const router = createRouter({
    routeTree,
    context: { queryClient: queryClient, auth: undefined! },
    defaultPreload: "intent",
    Wrap: (props: { children: ReactNode }) => {
      return (
        <QueryProvider queryClient={queryClient}>
          <ApplicationStateProvider>
            {props.children}
          </ApplicationStateProvider>
        </QueryProvider>
      );
    }
  });
  return router;
};
& root route contains authentication context state AuthState whcih comes from a useAuth() hook. This hook instantiates login, logout & auth state itself & returns the following, 
//src/hooks/useAuth.tsx
  if (isLoading) {
    return <div>Loading...</div>
  }
  return (
    <AuthContext.Provider value={{ isAuthenticated, user, login, register, logout }}>
        {children}
    </AuthContext.Provider>
  )
//src/hooks/useAuth.tsx
  if (isLoading) {
    return <div>Loading...</div>
  }
  return (
    <AuthContext.Provider value={{ isAuthenticated, user, login, register, logout }}>
        {children}
    </AuthContext.Provider>
  )
I'm also confused about <RouterProvider /> (which I believe is what propogates authentication state from useAuth() hook to the router itself) alonsgide Start. It doesn't matter if I add or remove it. Everything stays Frozen.
2 Replies
sensitive-blue
sensitive-blueOP•4w ago
The error I get if I reload (while frozen on loading) 
[vite] connected.
Error reading appStream: TypeError [ERR_INVALID_STATE]: Invalid state: Controller is already closed
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5) {
  code: 'ERR_INVALID_STATE'
}
Error reading routerStream: TypeError [ERR_INVALID_STATE]: Invalid state: ReadableStream is locked
  code: 'ERR_INVALID_STATE'
}
node:internal/process/promises:394
    triggerUncaughtException(err, true /* fromPromise */);
    ^
TypeError [ERR_INVALID_STATE]: Invalid state: ReadableStream is locked
  code: 'ERR_INVALID_STATE'
}

Node.js v23.8.0
 ELIFECYCLE  Command failed with exit code 1.
[vite] connected.
Error reading appStream: TypeError [ERR_INVALID_STATE]: Invalid state: Controller is already closed
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5) {
  code: 'ERR_INVALID_STATE'
}
Error reading routerStream: TypeError [ERR_INVALID_STATE]: Invalid state: ReadableStream is locked
  code: 'ERR_INVALID_STATE'
}
node:internal/process/promises:394
    triggerUncaughtException(err, true /* fromPromise */);
    ^
TypeError [ERR_INVALID_STATE]: Invalid state: ReadableStream is locked
  code: 'ERR_INVALID_STATE'
}

Node.js v23.8.0
 ELIFECYCLE  Command failed with exit code 1.
I've trimmed stacktrace to important errors. I've narrowed down the issue. It occurs after I add <AuthProvider>... to the <RootComponent />. It doesn't matter if I add <RouterProvider /> inside <RootDocument>. 
// src/routes/__root.tsx
function RootComponent() {
  return (
      <AuthProvider>
        <RootDocument>
          <Outlet />
        </RootDocument>
      </AuthProvider>
  )
}

function RootDocument({ children }: { children?: React.ReactNode }) {
  const auth = useAuth()
  return (
    <html>
      <head>
        <HeadContent />
      </head>
      <body>
        { /* If router provider is absent = children */ }
        { /* If router provider is present = <RouterProvider router={getRouter()} context={{auth}} /> */}
        <Devtools />
        <Scripts />
      </body>
    </html>
  )
}
// src/routes/__root.tsx
function RootComponent() {
  return (
      <AuthProvider>
        <RootDocument>
          <Outlet />
        </RootDocument>
      </AuthProvider>
  )
}

function RootDocument({ children }: { children?: React.ReactNode }) {
  const auth = useAuth()
  return (
    <html>
      <head>
        <HeadContent />
      </head>
      <body>
        { /* If router provider is absent = children */ }
        { /* If router provider is present = <RouterProvider router={getRouter()} context={{auth}} /> */}
        <Devtools />
        <Scripts />
      </body>
    </html>
  )
}
The application works fine if I remove <AuthProvider /> but goes into infinite loops and crashes when AuthProvider is added....
flat-fuchsia
flat-fuchsia•2w ago
do u happen to have a export for serverfn in the same file? I had a similar thing where i had a server function declared in one of my routes that caused this or any exports other then the main ones in the routes dir for the page (edited)Saturday, November 15, 2025 at 3:34 PM Send a message in "Freeze + Crash when trying to setup Authenticated Routes."

Did you find this page helpful?