Angular 11: Problem at Msal Angular V2 package

Question

I have upgraded my angular project from v8 to v11. I have upgraded @azure/msal-angular package from V1 to V2(2.0.0-beta.3). I have followed the samples given on https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-v2-samples/angular11-sample-app.

The configuration done on Azure portal were working fine with the earlier version. This is a SSO App, there is no login button.

1. App.module

   const isIE = window.navigator.userAgent.indexOf("MSIE ") > -1 || 
    window.navigator.userAgent.indexOf("Trident/") > -1;  
   
    export function loggerCallback(logLevel: LogLevel, message: string) {
      console.log(message);
    }
   
    export function MSALInstanceFactory(): IPublicClientApplication {
     return new PublicClientApplication({
      auth: {
             clientId: environment.clientId,
             authority: 
             `https://login.microsoftonline.com/${environment.tenantName}`,
              redirectUri: environment.redirectUrl
            },
     cache: {
             cacheLocation: BrowserCacheLocation.LocalStorage,
             storeAuthStateInCookie: isIE, 
            },
    system: {
      loggerOptions: {
                loggerCallback,
                logLevel: LogLevel.Info,
                piiLoggingEnabled: false
               }
         }
      });
    }
   
    export function MSALInterceptorConfigFactory(): 
     MsalInterceptorConfiguration {
        const protectedResourceMap = new Map<string, Array<string>>();
        protectedResourceMap.set(`${environment.clientId}`, 
        [`${environment.scopeUrl}`]);
   
     return {
        interactionType: InteractionType.Redirect,
        protectedResourceMap
      };
    }
   
   export function MSALGuardConfigFactory(): MsalGuardConfiguration {
      return {
        interactionType: InteractionType.Redirect,
        authRequest: {
          scopes: [`${environment.scopeUrl}`]
       },
      };
     }
   
    providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    },
    {
      provide: MSAL_INSTANCE,
      useFactory: MSALInstanceFactory
    },
    {
      provide: MSAL_GUARD_CONFIG,
      useFactory: MSALGuardConfigFactory
    },
    {
      provide: MSAL_INTERCEPTOR_CONFIG,
      useFactory: MSALInterceptorConfigFactory
    },
   

App.component

ngOnInit(){

this.msalBroadcastService.inProgress$
  .pipe(
    filter((status: InteractionStatus) => status === InteractionStatus.None),
    takeUntil(this._destroying$)
  )
  .subscribe(() => {
    this.checkAccount();
  }); 
}



setLoginDisplay() { 
    this.loginDisplay = this.authService.instance.getAllAccounts().length > 0;

  }

  checkAccount() {
    this.loggedIn = this.authService.instance.getAllAccounts().length > 0;
  }

  checkAndSetActiveAccount() { 
    let activeAccount = this.authService.instance.getActiveAccount();

    if (!activeAccount && this.authService.instance.getAllAccounts().length > 0) {
      let accounts = this.authService.instance.getAllAccounts();
      this.authService.instance.setActiveAccount(accounts[0]);
    }
  }

  login() {
    if (this.msalGuardConfig.interactionType === InteractionType.Popup) {
      if (this.msalGuardConfig.authRequest) {
        this.authService.loginPopup({ ...this.msalGuardConfig.authRequest } as PopupRequest)
          .subscribe((response: AuthenticationResult) => {
            this.authService.instance.setActiveAccount(response.account);
          });
      } else {
        this.authService.loginPopup()
          .subscribe((response: AuthenticationResult) => {
            this.authService.instance.setActiveAccount(response.account);
          });
      }
    } else {
      if (this.msalGuardConfig.authRequest) {
        this.authService.loginRedirect({ ...this.msalGuardConfig.authRequest } as RedirectRequest);
      } else {
        this.authService.loginRedirect();
      }
    }
  }

environment

scopeUrl: "api://xxxxxxx-xxxx-xxxx-a247-6023a95xxxxx/api",
  clientId: "b4f868f3-xxxx-xxxx-xxxx-4d44f053ff29",
  tenantName: "83993965-xxxx-xxxx-xxxx-d8259608fd30",
  scope: "user.read",
  appUrl: "http://localhost:4300/",
  location: "localStorage",
  graphUrl: "https://graph.microsoft.com/v1.0/me"

But now the same configuration is not working with upgraded msal package. I am getting below error

http Post Call :

https://login.microsoftonline.com/83993965-e753-xxxx-xxxx-d825960xxxx/oauth2/v2.0/token

Error Response :

error_codes: [7000218]
error_description: "AADSTS7000218: The request body must contain the following parameter: 'client_assertion' or 'client_secret'.
↵Trace ID: f0843107-bd57-4d08-b92e-15a873724e00
↵Correlation ID: 1764d345-xxxx-xxx-xxxx-20a9fda5bcb6
↵Timestamp: 2021-04-14 12:58:22Z"
error_uri: "https://login.microsoftonline.com/error?code=7000218"

Any help is appreciated

Answer 1

If you are upgrading from msal V1 to V2 in Angular Project. You have to do the same in Azure AD. I deleted the current Azure APP Id in Azure Directory and created an new App ID for MSAL 2.0 following the process mentioned in below MS doc.

Register Azure AD and set allowPublicClient= true https://learn.microsoft.com/en-us/azure/active-directory/develop/scenario-spa-app-registration

Note : Create the new app ID with the template "Single Page Application". Check the type of the redirectUri in the manifest is 'Spa' and not 'Web'. If 'Web' is present then delete it.