Undefined idTokenClaims after browser refresh

[slefved]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

^4.7.0

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

^3.0.6

Public or Confidential Client?

Public

Description

Similar issue like #6690 and #6816 but Im using msal-react. idTokenClaims successfully obtained after login, but return undefined if browser refreshed.

Error Message

idTokenClaims undefined

MSAL Logs

no verbose level logs

Network Trace (Preferrably Fiddler)

• Sent
• Pending

MSAL Configuration

{
  auth: {
    clientId: [clientId],
    authority: 'https://[tenant].ciamlogin.com/',
    redirectUri: 'http://localhost:5173',
    postLogoutRedirectUri: '/',
    navigateToLoginRequestUrl: true,
  },
  cache: {
    cacheLocation: BrowserCacheLocation.LocalStorage,
    storeAuthStateInCookie: false,
  },
}

Relevant Code Snippets

const msalInstance = new PublicClientApplication(msalConfig);

await msalInstance.initialize();

if (!msalInstance.getActiveAccount() && msalInstance.getAllAccounts().length > 0) {
  msalInstance.setActiveAccount(msalInstance.getActiveAccount()[0]);
}

msalInstance.addEventCallback(async (event) => {
  if (event.eventType === EventType.LOGIN_SUCCESS && event.payload.account) {
    const account = event.payload.account;
    msalInstance.setActiveAccount(account);
  }
});

createRoot(document.getElementById('root')).render(
  <MsalProvider instance={msalInstance}>
    <MsalAuthenticationTemplate
      interactionType={InteractionType.Redirect}
      authenticationRequest={{ scopes: [] }}
    >
      <App />
    </MsalAuthenticationTemplate>
  </MsalProvider>
)



export default function App() {
  const { instance } = useMsal();
  const { idTokenClaims } = instance.getActiveAccount();
  console.log(idTokenClaims); // undefined
  return (
    <h1>Hello</h1>
  )
}

Reproduction Steps

1. Open website and will be directed to Entra login page.
2. Input credential and login.
3. Successfully loggedin and redirected. idTokenClaims is obtained in App component.
4. Refresh the page and idTokenClaims is undefined

Expected Behavior

idTokenClaims obtain even after browser refreshed.

Identity Provider

Entra ID (formerly Azure AD) / MSA

Browsers Affected (Select all that apply)

Chrome

Regression

No response

[slefved]

Actually I have found the solution after tweaking the code for days and still thinking why this code works. I just modified the children component inside MsalAuthenticationTemplate.

createRoot(document.getElementById('root')).render(
  <MsalProvider instance={msalInstance}>
    <MsalAuthenticationTemplate
      interactionType={InteractionType.Redirect}
      authenticationRequest={{ scopes: [] }}
    >
      {() => <App />}
    </MsalAuthenticationTemplate>
  </MsalProvider>
)

The idTokenClaims will be logged twice, first will be undefined, and the second render is obtained.