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.

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

Chetan Birajdar · Accepted Answer · 2021-04-21 07:07:45Z

3

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.

answered Apr 21, 2021 at 7:07

Chetan Birajdar

4712 gold badges10 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 11: Problem at Msal Angular V2 package

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related