Microsoft multi factor authentication using angular redirect issue

Question

In my angular project, I am using Microsoft Authentication. The issue which I am facing is when I give insted popup to redirect, after authentication my page is refreshing many times. But for the popup case it is working fine.

MsalModule.forRoot({
      auth: {
        clientId: 'Enter_the_Application_Id_Here',
        authority: 'Enter_the_Cloud_Instance_Id_HereEnter_the_Tenant_Info_Here',
        redirectUri: 'Enter_the_Redirect_Uri_Here',
      },
      cache: {
        cacheLocation: 'localStorage',
        storeAuthStateInCookie: isIE, // set to true for IE 11
      },
    },
    {
      popUp: true,
      consentScopes: [
        'user.read',
        'openid',
        'profile',
      ],
      unprotectedResources: [],
      protectedResourceMap: [
        ['Enter_the_Graph_Endpoint_Herev1.0/me', ['user.read']]
      ],
      extraQueryParameters: {}
    })
  ],

If I give popUp: true it is working as expected. But if I give popUp: false and if I am not giving anything it is redirecting to login page but after login the page is getting refreshed many times

Answer 1

Assuming that you are using the IMsalService as implemented in the official example app, here is the official solution

@Injectable()
export class MsalService implements IMsalService {
    private redirectHash: string;

    constructor(
        @Inject(MSAL_INSTANCE) private msalInstance: IPublicClientApplication,
        private location: Location
    ) {
        // Cache the code hash before Angular router clears it
        const hash = this.location.path(true).split('#').pop();
        if (hash) {
            this.redirectHash = `#${hash}`;
        }
    }
    ...
    handleRedirectObservable(): Observable<AuthenticationResult> {
        return from(this.msalInstance.handleRedirectPromise(this.redirectHash));
    }
    ...
}

This fix was merged by the following PR The full discussion about the issue lives here

Briefly, angular is doing naviagation before msal can resolve it's auth promise.

In my old job i faced simillar issues, which led us to use msal.js instead @azure/msal-angular, so if you are using @azure/msal-angular and this fix doesn't work for you, i would strongly recommend you to switch to msal.js and create your own angular-msal implementation.

EDIT

So by refering msal.js I mean @azure/msal-browser and this Repo (look at the vanilla js implementations) so the thing that I'am suggesting is dedecating the time to write your own msal wrapper to fit your case.

Answer 2

unfortunately the above did not work for me... And below update in app.component.ts is what worked. Maybe a late reply, but hopefully, it will be useful for others looking for the answer

    if(window.location.hash) {
  let resetPasswordFlowRequest = {
    scopes: ["openid"],
    authority: this.isFrench ? b2cPoliciesFr.authorities.forgotPassword.authority : b2cPolicies.authorities.forgotPassword.authority,
  };
  this.authService.handleRedirectObservable().subscribe({
    next: (result: AuthenticationResult) => {
      //
    },
    error: (error) => { 
      if (error.errorMessage.lastIndexOf("cancelled") > 0) this.authService.loginRedirect();
      else this.authService.loginRedirect(resetPasswordFlowRequest);
     }
  });
} else {
  this.login();
}

Answer 3

Below method needs to be handles in order to ensure no refresh

msalInstance.handleRedirectObservable()