Route is not reloading when router context is updated

[sher]

Problem

The title pretty much explains the issue. Trying to implement an app with authenticated routes, where auth data is retrieved async.
I came across @Tanner-Scadden's message mentioning that the route should reload on context change, but it is not behaving as explained.

Expected behavior

beforeLoad function should be called every time router context changes, and if auth data is not present should redirect to /login route.

Prepared a simple Vite app to reproduce the problem. Please take a look https://github.com/sher/tanstack-auth/blob/main/src/App.tsx

import { createRoute, createRouter, createRootRouteWithContext, RouterProvider, redirect } from '@tanstack/react-router';
import { useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { createContext, useContext, type PropsWithChildren } from 'react';

//-------------------------------------
//- Auth
//-------------------------------------
type User = {
  user_id: number;
  username: string;
};

type AuthState = {
  user: User | undefined;
  isAuthRequestFinished: boolean;
};

const initialState = { user: undefined } as AuthState;
const AuthContext = createContext(initialState);

function AuthProvider({ children }: PropsWithChildren) {
  const { isFetched: isAuthRequestFinished, data: user } = useQuery<User>({
    queryKey: ['auth'],
    queryFn: async function () {
      // Simulate a slow network request
      await new Promise((resolve) => setTimeout(resolve, 2000));
      const data = localStorage.getItem('user');
      const user = data ? JSON.parse(data) : null;
      return user;
    },
    staleTime: 0,
    retry: false,
  });

  console.log('AuthProvider', { user, isAuthRequestFinished });

  return <AuthContext.Provider value={{ user, isAuthRequestFinished }}>{children}</AuthContext.Provider>;
}

function useAuth() {
  const context = useContext(AuthContext);
  if (context === initialState) {
    throw new Error('useAuth must be used within a AuthProvider');
  }
  return context;
}

//-------------------------------------
//- Router
//-------------------------------------
type RootContext = {
  queryClient: QueryClient;
  auth: AuthState;
};

const rootRoute = createRootRouteWithContext<RootContext>()({
  beforeLoad: function ({ context }) {
    const { isAuthRequestFinished, user } = context.auth;
    // If we made a request and couldn't find a user, redirect to the login page
    console.log('beforeLoad', { isAuthRequestFinished, user });
    if (isAuthRequestFinished && !user) {
      throw redirect({ to: '/login' });
    }
  },
});

const homeRoute = createRoute({
  path: '/',
  component: () => <h1>Home</h1>,
  getParentRoute: () => rootRoute,
});

const loginRoute = createRoute({
  path: '/login',
  component: () => <h1>Login</h1>,
  getParentRoute: () => rootRoute,
});

const routeTree = rootRoute.addChildren([homeRoute, loginRoute]);

const queryClient = new QueryClient();

const router = createRouter({
  routeTree,
  context: {
    queryClient,
    auth: { user: undefined, isAuthRequestFinished: false },
  },
});

declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router;
  }
}

//-------------------------------------
//- App
//-------------------------------------
function InnerApp() {
  const { user, isAuthRequestFinished } = useAuth();
  return <RouterProvider router={router} context={{ queryClient, auth: { user, isAuthRequestFinished } }} />;
}

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <AuthProvider>
        <InnerApp />
      </AuthProvider>
    </QueryClientProvider>
  );
}

export default App;

[nwi-di]

Hi 🙋‍♂️

I think I am facing the same issue. When inside the function where the routers context gets updated an async operation is made, the route context update occurs later than when without the async operation.

A reproduction is possible based on the official authentication example, see here: https://codesandbox.io/p/devbox/nostalgic-cloud-d5s8zx?file=%2Fsrc%2Fauth.tsx%3A7%2C31 (I only added an async operation in the login function and login is not working as before...)

Steps to reproduce:

1. Open the app in the sandbox
2. Try to login => Login is not working 💣 the route context update happened after beforeLoad of _auth.tsx route was called... You can see also in the url the added redirect param
3. Comment out line 38 in auth.tsx
4. Try to login => Login is working directly

Anyone here to help / explain this in detail?

[pkarolyi]

Did any of you figure this out? I am having a very similar problem and I cannot find a good solution