Is there any obvious problem that you can see?

const root = createRoot(document.getElementById("root") as HTMLElement);

const queryClient = new QueryClient();

const RootComponent = () => {
  return (
    <>
      <Outlet />
      {/* <ReactQueryDevtools buttonPosition="top-right" /> */}
      <TanStackRouterDevtools position="bottom-right" />
    </>
  );
};

const rootRoute = rootRouteWithContext<{
  queryClient: QueryClient;
}>()({
  component: RootComponent,
  beforeLoad: async ({ location }) => {
    const { data } = await supabase.auth.getSession();

    if (
      location.pathname === "/login" ||
      location.pathname === "/register" ||
      location.pathname === "/"
    ) {
      return;
    }

    if (!data?.session?.user) {
      throw redirect({
        to: "/login",
        search: {
          redirect: location.href,
        },
      });
    }
  },
});

const indexRoute = new Route({
  getParentRoute: () => rootRoute,
  path: "/",
  component: WorkoutsPage,
});

const loginRoute = new Route({
  getParentRoute: () => indexRoute,
  path: "/login",
  component: LoginPage,
});
const notesRoute = new Route({
  getParentRoute: () => indexRoute,
  path: "/notes",
  component: NotesPage,
});
const workoutRoute = new Route({
  getParentRoute: () => indexRoute,
  path: "/workout/$id",
  component: WorkoutPage,
});

const routeTree = rootRoute.addChildren([
  indexRoute,
  workoutRoute,
  loginRoute,
  notesRoute,
]);

const router = new Router({
  routeTree,
  defaultPreload: "intent",
  defaultPreloadStaleTime: 0,
  context: {
    queryClient,
  },
});

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

root.render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <Toaster />
      <RouterProvider router={router} />
    </QueryClientProvider>
  </StrictMode>,
);