Authenticated Router & Context

[burabatbold]

import { createFileRoute, redirect } from "@tanstack/react-router";

export const Route = createFileRoute("/")({
  beforeLoad: ({ context }) => {
    console.log(context, "BEFORE LOAD IN ROOT");
    if (context.user) {
      throw redirect({ to: "/dashboard" });
    } else {
      throw redirect({ to: "/auth/login" });
    }
  },
  component: RouteComponent,
});

function RouteComponent() {
  return <div>Hello "/"!</div>;
}

import { RouterProvider, createRouter } from "@tanstack/react-router";
import { StrictMode } from "react";
import ReactDOM from "react-dom/client";
// Import the generated route tree
import { SessionProvider, useSession } from "./context/session/session";
import { QueryProvider } from "./providers/query-client";
import { routeTree } from "./routeTree.gen";

// Create a new router instance
const router = createRouter({
  routeTree,
  context: {
    is_authenticated: false,
    is_loading: false,
    signIn: () => {},
    signOut: () => {},
    user: undefined,
  },
  defaultPreload: "intent",
  scrollRestoration: true,
});

// Register the router instance for type safety
declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router;
  }
}

function InnerApp() {
  const auth = useSession();
  return <RouterProvider router={router} context={{ ...auth }} />;
}

// Render the app
const rootElement = document.getElementById("root")!;
if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
    <StrictMode>
      <QueryProvider>
        <SessionProvider>
          <InnerApp />
        </SessionProvider>
      </QueryProvider>
    </StrictMode>,
  );
}

export const SessionProvider = ({
  children,
}: {
  children: React.ReactNode;
}) => {
  const [state, setState] = useState<SessionContextState>({
    is_authenticated: false,
    is_loading: false,
  });

  const info = useMutation({
    mutationFn: authApi.info,
    onSuccess: (data) => {
      setState({
        user: data,
        is_authenticated: true,
        is_loading: false,
      });
    },
  });

  console.log(state.user, "USER CONTEXT");

  useEffect(() => {
    setState({ ...state, is_loading: true });
    info.mutate();
  }, []);
  
  return (
    <SessionContext.Provider value={{ ...state, signIn, signOut }}>
      {children}
    </SessionContext.Provider>
  );
};

The problem is the tanstack router is not listening context state . Can you guys help me ?

[CorentinDoue]

I think this has been answered here: #1668
You need to invalidate the router context when you change it.