TanStackT
TanStack•14mo ago•
1 reply
moderate-tomato

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>
);
Was this page helpful?