Hydration issue with client-side authentication

[joeatwawa]

I'm using MSAL, which is a client-side authentication package for Azure Active Directory. It does not work on the server, so in my root.jsx file, I need to gate the authentication with if(!isServer){.

// root.jsx
  if(!isServer){
    const msalInstance = new PublicClientApplication(msalConfig);

    msalInstance.initialize().then(() => { 
      return msalInstance.handleRedirectPromise();
    }).then(() => {
      const accounts = msalInstance.getAllAccounts();
      if(accounts.length){
        setAuth({
          isAuthenticated: true,
          account: accounts[0]
        });
      } else {
        msalInstance.loginRedirect({scopes: ["openid"]});
      }
    });
  }

// routes/index.jsx
import { useAuthContext } from "../contexts/auth-context";

export default function Home() {
  const [auth] = useAuthContext();

  return (
    <main>
      <Show when={auth().isAuthenticated} fallback={<Loader><p>Lion Login is needed to view this content.</p><p>One moment while we authenticate you.</p></Loader>}>
        <RoleViewer />
      </Show>
    </main>
  );
}

This is causing a hydration mismatch when the client is able to pull the authentication status from cache, because in server render, auth().isAuthenticated is false, but by the time this component is hydrated, it is true.

Is there an idiomatic way to solve this problem?

[joeatwawa]

As noted in this discussion, I think my problem is solved by using onMount rather than simply checking for isServer. If there's a better way to do this, feel free to let me know, but I'll close this discussion (and the linked one) to help keep things tidy.