MSAL library fails to parse token in Chromium based browsers

We've encountered very strange issue with MSAL Library, or Azure authentication as such. Chromium based browsers fail to parse token if 'Given Name' and 'Family Name' properties in token contain non ASCII characters. It was reported by users with ž, č, Č, Ž characters in their names. But such users can easily log in using Firefox. Oddly enough, we have "non ASCII users" that do not encounter this issue at all, regardless of used browser.

As for the Angular code, nothing special with the msalInitialize:

// Authentication is executed in APP_INIT
function msalInitialize(msal: MsalService): Observable<boolean | void> {
  return msal.initialize().pipe(
    switchMap(() => msal.handleRedirectObservable()),
    // Check redirectResult to prevent login loop
    switchMap((redirectResult) => {
      if (redirectResult) {
        const msalInstance = msal.instance;

        const allAccounts = msalInstance.getAllAccounts();
        msalInstance.setActiveAccount(allAccounts[0]);

        return of(true);
      } else {
        const request: RedirectRequest = {
          scopes: environment.auth.scopes
        };
        return msal.loginRedirect(request);
      }
    }),
    catchError((e) => {
      console.log('MSAL Error:', e);
      // Authentication is hidden beneath a splash screen and that's how we communicate with it
      send(APP_LOADING_STATE.APP_AUTHENTICATION_FAILURE);
      throw new Error(APP_LOADING_STATE.APP_AUTHENTICATION_FAILURE);
    })
  );
}

The issue was "solved" by removing Family and Given name properties, since we don't use them. But, I'm really curious what is causing that? My theories are:

1. Azure configuration - unfortunately, this is handled by our client, we have no access to it. It would require a meeting with them to go setting by setting and figure it out
2. MSAL configuration - something which can be set when instantiating MSAL lib. So far I wasn't able to find such setting.
3. JS engine differences - honestly, no idea what can I do about it.

Has anyone encountered this? If so, how did you solve it?

The issue with the MSAL Library failing to parse tokens in Chromium-based browsers when the 'Given Name' and 'Family Name' properties contain non-ASCII is due to the differences in how browsers handle non-ASCII characters.

• This issue is not related to Azure or MSAL configuration.
• The issue likely arises because JavaScript engines in different browsers handle character encoding.
• Chromium-based browsers may have more stringent or different parsing rules compared to Firefox.

To resolve the issue, check the below:

• Remove the "Given Name" and "Family Name" properties, as you have done.
• Or make use a different browser, such as Firefox, which does not have this issue.

There isn't a single configuration setting in MSAL that can universally resolve this issue across all browsers.

Reference:

@azure/msal-browser - npm (npmjs.com)