MSAL with Angular integration using unprotectedResources

Question

I'm currently integrating azure AD to my angular app...everything is working great so far except for how it handles HTTP.

So i've attached a typical http interceptor to the app:

{
  provide: HTTP_INTERCEPTORS,
  useClass: MsalInterceptor,
  multi: true
},

and some configuration like this...

 MsalModule.forRoot({
  auth: {
      clientId: id,
      authority: auth,
      validateAuthority: true,
      redirectUri: "http://localhost/",
      postLogoutRedirectUri: "http://localhost/dashboard",
      navigateToLoginRequestUrl: true
  },
  framework: {
      unprotectedResources: ["http://localhost/dashboard"]
  },
}, {
    popUp: true
})

So when i put in unprotectedResources i am expecting all http requests for http://localhost/dashboard to go through without any authentication.

However...when i'm not logged in, i get "core.js:7187 ERROR ClientAuthError: User login is required." in the console.

Any help?

Answer 1

According to their documentation As of @azure/[email protected], protectedResourceMap supports wildcard patterns that are supported by minimatch, and unprotectedResources is deprecated and ignored.

Instead put protectedResourceMap: null should work

Reference: https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/2217