Skip to content

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

Open
@shubham-lbmc

Description

@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
  1. Initialize the provider inside a top-level useEffect:

ts

Providers.globalProvider = new Msal2Provider({
  publicClientApplication: instance,
  scopes: ["User.Read", "User.ReadBasic.All", "profile"]
});
  1. Navigate to a route that includes the following component:

tsx

<Person
  userId={entraId}
  personCardInteraction="hover"
  showPresence={true}
/>
  1. On navigation without page refresh, the profile image does not load, and no request is made to /me/photo.

  2. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    Status

    Needs Triage 🔍

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions