T
TanStack•13mo ago
conscious-sapphire

Authentication using React hooks does not re-trigger beforeLoad

Hi, I use a react hook useInternetIdentity to login the user and want to set that up so that the user identity is available in the router context. This works well. But, changes to the login state does not trigger a new beforeLoad on the route. When the login state changes because the user logs in or out, I can see the identity in <InnerRoot> update. But, this does not trigger a refresh of the route. Is this to be expected? I could of course trigger this behaviour myself on login/logout, redirecting from the login route to the index route or whatever. But I assumed this would happen automagically thanks to connecting the RouteProvider to the hook return values. Thanks! 
import "./index.css";

import { RouterProvider, createRouter } from "@tanstack/react-router";
import { InternetIdentityProvider, useInternetIdentity } from "ic-use-internet-identity";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { routeTree } from "./routeTree.gen";
import Actors from "./actors";
import useMerchant from "./hooks/useMerchant";

const router = createRouter({
  routeTree, context: {
    identity: undefined!,
    merchant: undefined!,
  }
});

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

function InnerRoot() {
  const { identity, isInitializing } = useInternetIdentity();
  const { data: merchant } = useMerchant();

  if (isInitializing) return null;

  return <RouterProvider router={router} context={{ identity, merchant }} />
}

createRoot(document.getElementById("root")!).render(
  <StrictMode>
      <InternetIdentityProvider>
        <Actors>
          <InnerRoot />
        </Actors>
      </InternetIdentityProvider>
  </StrictMode>
);
import "./index.css";

import { RouterProvider, createRouter } from "@tanstack/react-router";
import { InternetIdentityProvider, useInternetIdentity } from "ic-use-internet-identity";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { routeTree } from "./routeTree.gen";
import Actors from "./actors";
import useMerchant from "./hooks/useMerchant";

const router = createRouter({
  routeTree, context: {
    identity: undefined!,
    merchant: undefined!,
  }
});

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

function InnerRoot() {
  const { identity, isInitializing } = useInternetIdentity();
  const { data: merchant } = useMerchant();

  if (isInitializing) return null;

  return <RouterProvider router={router} context={{ identity, merchant }} />
}

createRoot(document.getElementById("root")!).render(
  <StrictMode>
      <InternetIdentityProvider>
        <Actors>
          <InnerRoot />
        </Actors>
      </InternetIdentityProvider>
  </StrictMode>
);
1 Reply
conscious-sapphire
conscious-sapphireOP•13mo ago
Oh. Read other posts here and came across router.invalidate(). That solves it!

Did you find this page helpful?