Router context and beforeLoad race condition

import { RouterProvider, createRouter } from "@tanstack/react-router";
import { routeTree } from "@/routeTree.gen";
import { useAuthState } from "react-firebase-hooks/auth";
import { auth } from "config";

declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router;
  }
}
const router = createRouter({
  routeTree,
  context: { user: undefined!, loading: true, error: undefined }
});

export default function App() {
  const [user, loading, error] = useAuthState(auth);

  return <RouterProvider router={router} context={{ user, loading, error }} />;
}

import { Outlet, createFileRoute, redirect } from "@tanstack/react-router";
import { auth } from "config"; // This is a import alis that points to my firebaseConfig.ts

export const Route = createFileRoute("/_auth")({
  beforeLoad: async ({ context, location }) => {
    await auth.authStateReady();
    await new Promise(resolve => setTimeout(resolve, 10));

    if (context.user === null) {
      throw redirect({
        to: "/login",
        search: {
          redirect: location.href
        }
      });
    }
  },
  component: () => <Outlet />
});

export default function App() {
  const [user, loading, error] = useAuthState(auth);

  const router = createRouter({
    routeTree,
    context: { user: undefined, loading: true, error: undefined }
  });

  return <RouterProvider router={router} context={{ user, loading, error }} />;
}