<Person> Component from @microsoft/mgt-react Not Rendering Profile Photo Without Full Page Refresh

[shubham-lbmc]

Issue Summary

When using the component from @microsoft/mgt-react in a React + TypeScript app with MSAL authentication, the profile photo does not load on initial navigation. It only appears after a full page reload (Ctrl + R). This appears to be due to a race condition where the provider is not ready when the component is rendered.

Steps to Reproduce

1. Set up an MSAL-based React application using

@azure/msal-react
@microsoft/mgt-msal2-provider

2. Initialize the provider inside a top-level useEffect:

ts

Providers.globalProvider = new Msal2Provider({
  publicClientApplication: instance,
  scopes: ["User.Read", "User.ReadBasic.All", "profile"]
});

3. Navigate to a route that includes the following component:

tsx

<Person
  userId={entraId}
  personCardInteraction="hover"
  showPresence={true}
/>

4. On navigation without page refresh, the profile image does not load, and no request is made to /me/photo.

5. After refreshing the page using Ctrl + R, the image loads correctly and the Graph API call is made.

Expected Behavior

• The component should render the profile photo and presence on initial navigation.
• Providers.globalProvider.state or isSignedIn should be initialized before attempts to fetch data.
• No console errors related to IndexedDB or provider state should appear.

Actual Behavior

• Providers.globalProvider.state is null or undefined on first render.
• A Graph API call to /me/photo is not made.
• The image is missing until a hard refresh is triggered.
• Console logs the following error:

Failed to execute 'get' on 'IDBObjectStore': No key or key range specified.
DataError: Failed to execute 'get' on 'IDBObjectStore': No key or key range specified.
    at Proxy.<anonymous> (bundle.js:45216:22)
    at Proxy.method (bundle.js:45325:54)
    at CacheStore.<anonymous> (bundle.js:43794:19)

Additional Context

• The component is used inside a custom header that persists across route changes using react-router-dom.
• It appears that tries to fetch data before Providers. globalProvider is initialized.
• isReady or Providers. globalProvider.state is not reliably set at first render.

MGTProviderSetup.tsx

import { useEffect, useState } from "react";
import { useMsal } from "@azure/msal-react";
import { Providers, ProviderState } from "@microsoft/mgt-element";
import { Msal2Provider } from "@microsoft/mgt-msal2-provider";
import { loginRequest } from "./Auth/AuthConfig";

export const MGTProviderSetup: React.FC = () => {
  const { instance } = useMsal();
  const [providerReady, setProviderReady] = useState(false);

  useEffect(() => {
    if (!Providers.globalProvider) {
      Providers.globalProvider = new Msal2Provider({
        publicClientApplication: instance as any,
        scopes: loginRequest.scopes,
      });
    }

    const interval = setInterval(() => {
      if (
        Providers.globalProvider &&
        Providers.globalProvider.state === ProviderState.SignedIn
      ) {
        setProviderReady(true);
        clearInterval(interval);
      }
    }, 200);

    return () => clearInterval(interval);
  }, [instance]);

  return null;
};

MGTProfileCard.tsx

import React from "react";
import { Person } from "@microsoft/mgt-react";

interface MGTProfileCardProps {
  userId: string;
  className?: string;
  style?: React.CSSProperties;
  height?: string;
}

const MGTProfileCard: React.FC<MGTProfileCardProps> = ({
  userId,
  className = "",
  style = {},
  height = "40px",
}) => {
  return (
    <div
      className={`mgt-profile-card-wrapper ${className}`}
      style={{ ...style, height, position: "relative" }}
    >
      <Person
        userId={userId}
        personCardInteraction="hover"
        showPresence={true}
      />
    </div>
  );
};

export default MGTProfileCard;

Thanks and regards,
Shubham Hande

[bh3605]

This isn't exclusive to react. This is happening in 4.6.0 in Angular too. Problem is with the mgt-person code

Sample template

  <mgt-person #personComp view="fourlines" person-card="hover">
    <template data-type="line4">
      <div>
        UPN: [[person.userPrincipalName]]
      </div>
    </template>
    <template data-type="person-card">
      <mgt-person-card inherit-details></mgt-person-card>
    </template>
  </mgt-person>

undefined is being passed and that's used as the key to query the indexDb. An unhandled error is thrown despite there being a try/catch present.

For some reason my second conditional breakpoint never hits. It breaks when key is undefined while the conditional breakpoint above it does.