Open
Description
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
- Set up an MSAL-based React application using
@azure/msal-react
@microsoft/mgt-msal2-provider
- Initialize the provider inside a top-level useEffect:
ts
Providers.globalProvider = new Msal2Provider({
publicClientApplication: instance,
scopes: ["User.Read", "User.ReadBasic.All", "profile"]
});
- Navigate to a route that includes the following component:
tsx
<Person
userId={entraId}
personCardInteraction="hover"
showPresence={true}
/>
-
On navigation without page refresh, the profile image does not load, and no request is made to /me/photo.
-
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
Labels
No labels
Type
Projects
Status
Needs Triage 🔍