MsalInterceptor breaks ngx-translate

Library

• msal@1.x.x or @azure/msal@1.x.x
• @azure/msal-browser@2.x.x
• @azure/msal-angular@0.x.x
• @azure/msal-angular@1.x.x
• @azure/msal-angularjs@1.x.x

Framework

Angular 10

Description

I use ngx-translate in my Angular 10 App. With uses the default HTTPLoader to load the language files.

export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http);
}

When i add the MsalInterceptor to the Angular App every HTTP Request to get the language files seems to be intercepted by the MsalInterceptor. Because that the request fails and ngx-translate is not working. The Request gets intercepted even if protectedResourceMap is to null.

In my unterstanding, MsalInterceptor trys to get a token and add the token to the request for every call ngx-translate make. But when the user is not signed in, getting the token fails and the ngx-translate request is not made.

Ngx-Translate start working again as normal immediately when i remove the MsalInterceptor. When the user is logged in with his Microsoft-Account, ngx-translate also works. But if the user is not signed in the MsalInterceptor tries to get a token for every ngx-translate request and then fails.

    MsalModule.forRoot({
            auth: {
                clientId: 'xyz', // This is your client ID
                authority: 'https://login.microsoftonline.com/xyz', // This is your tenant info
                redirectUri: 'http://localhost:4200/login' // This is your redirect URI
            },
            cache: {
                cacheLocation: 'localStorage'
            }
        }, {
            popUp: true,
            consentScopes: [
                'user.read',
                'api://xyz/api.consume'
            ],
            unprotectedResources: null,
            protectedResourceMap: null,
            extraQueryParameters: {}
        }),

Error Message

core.js:4197 ERROR ClientAuthError: User login is required. For silent calls, request must contain either sid or login_hint

Browsers/Environment

• Chrome
• Firefox
• Edge
• Safari
• IE
• Other (Please add browser name here)

[ishershunovich]

I have the same issue. Adding ["/assets/i18n/*.json", null] into protectedResourceMap doesn’t help, app sends requests with appended security token for these resources. Any workaround?

---

I’m sorry, I’ve found my mistake. It was in relative path, addition ‘/’ at start was redundant. So, adding [“assets/i18n/*.json”, null] works for me. Thank you very much!

[jasonnutter]

Apologies for the delay. I was able to reproduce the behavior you describe in the ngx-translate sample app, and was able to mitigate it by providing the relative path in the protectedResourceMap, e.g.:

export const protectedResourceMap: [string, string[]][] = [
    ["/assets/i18n/*.json", null]
];

Apologies for the confusion, we’ll make sure this is better documented. cc: @jo-arroyo