azure-ad-msalmsal-angular

Missing BroadcastService in @azure/msal-angular@2.X.X


I'm trying to update MSAL Angular v1 to v2 now, but have had some problems. One of them is that BroadcastService is missing in V2.

I have followed this guide, but none mentions what an equivalent of BroadcastService is in V2. https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/v2-docs/v1-v2-upgrade-guide.md

I found MsalBroadcastService in V2 repository, but not sure how to migrate it.
https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/b315d95797810241224a3cf118e67a1a723adec7/lib/msal-angular/src/msal.broadcast.service.ts#L13

My current code is something like this.

this.broadcastService.subscribe("msal:loginFailure", payload => {
    // do something here
});

this.broadcastService.subscribe("msal:loginSuccess", payload => {
    // do something here
});

Solution

  • Apparently MsalBroadcastService is the replacement, and I found the sample of usage.
    https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/samples/msal-angular-v2-samples/angular10-sample-app/src/app/app.component.ts

    Not exactly the equivalent, but it seems that I can use InteractionStatus.
    https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/6f18948aa9220c7ed8433a28a77b91d63bdb942b/lib/msal-browser/src/utils/BrowserConstants.ts#L115

    ==EDIT==
    There is a detailed documentation on that page. Damn, I just had to read a whole document instead of jsut skimming the upgrade guide.
    https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/initialization.md#subscribe-to-events

    Here is the code from the link.

    import { EventMessage, EventType } from '@azure/msal-browser';
    import { filter } from 'rxjs/operators';
    
    this.msalBroadcastService.msalSubject$
        .pipe(
            filter((msg: EventMessage) => msg.eventType === EventType.LOGIN_SUCCESS)
        )
        .subscribe((result) => {
            // do something here
        });
    

    Also there is an upgrade guide now.
    https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/v1-v2-upgrade-guide.md