Context not typed

import type { AppAbility } from '@code-shifters/jps-auth';
import type { QueryClient } from '@tanstack/react-query';
import { queryClient } from '~/lib/query-client';
import { routeTree } from '~/routeTree.gen';
import type { SignInResponseSchema } from '~/shared/schemas/sign-in.schema';
import { loggedUserStoreState } from '~/store/user.store';

/**
 * Router context type.
 */
type RouterContext = {
  queryClient: QueryClient;
  user: SignInResponseSchema | null;
  permissions?: AppAbility | null;
};

/**
 * Router instance with context data.
 */
const router = createRouter({
  routeTree,
  defaultPreload: 'intent',
  context: {
    queryClient,
    // TODO: not working!
    user: loggedUserStoreState.get() ?? null,
    permissions: loggedUserStoreState.getPermissions(),
  },
});

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

export { router, type RouterContext };

import type { AppAbility } from '@code-shifters/jps-auth';
import type { QueryClient } from '@tanstack/react-query';
import { queryClient } from '~/lib/query-client';
import { routeTree } from '~/routeTree.gen';
import type { SignInResponseSchema } from '~/shared/schemas/sign-in.schema';
import { loggedUserStoreState } from '~/store/user.store';

/**
 * Router context type.
 */
type RouterContext = {
  queryClient: QueryClient;
  user: SignInResponseSchema | null;
  permissions?: AppAbility | null;
};

/**
 * Router instance with context data.
 */
const router = createRouter({
  routeTree,
  defaultPreload: 'intent',
  context: {
    queryClient,
    // TODO: not working!
    user: loggedUserStoreState.get() ?? null,
    permissions: loggedUserStoreState.getPermissions(),
  },
});

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

export { router, type RouterContext };

const Route = createRootRouteWithContext<RouterContext>()({
  component: () => (
    <QueryClientProvider client={queryClient}>
      <Toaster
        position="bottom-left"
        closeButton
        duration={10000}
        icons={{
          error: <CircleX />,
          info: <Info />,
          success: <CircleCheck />,
          warning: <AlertTriangle />,
        }}
      />

      <Outlet />

      {/* Dev Tools from TanStack */}
      <ReactQueryDevtools buttonPosition="bottom-right" client={queryClient} />
      <TanStackRouterDevtools
        position="bottom-right"
        toggleButtonProps={{
          style: {
            zIndex: 10,
            right: 66,
          },
        }}
      />
    </QueryClientProvider>
  ),
});

export { Route };

const Route = createRootRouteWithContext<RouterContext>()({
  component: () => (
    <QueryClientProvider client={queryClient}>
      <Toaster
        position="bottom-left"
        closeButton
        duration={10000}
        icons={{
          error: <CircleX />,
          info: <Info />,
          success: <CircleCheck />,
          warning: <AlertTriangle />,
        }}
      />

      <Outlet />

      {/* Dev Tools from TanStack */}
      <ReactQueryDevtools buttonPosition="bottom-right" client={queryClient} />
      <TanStackRouterDevtools
        position="bottom-right"
        toggleButtonProps={{
          style: {
            zIndex: 10,
            right: 66,
          },
        }}
      />
    </QueryClientProvider>
  ),
});

export { Route };