MSAL authentication in APP_INITIALIZER in Angular

Question

we are moving to MSAL from Auth0 and previously we did authentication in APP_INITIALIZER and then added other async call after that.

return (): Promise<void> => {
    return new Promise((resolve) => {
      authService
        .processAuthenticationData()
        .then((res) => {
           // actions$.pipe(ofType(loadPermisions) and so on

I want to keep this behaviour with MSAL but i am struggling to that.

Does anybody have any experiences with this approach or any tips or recommendations how to achieve it? Thanks

if (!msalService.instance.getActiveAccount()) {
    console.log("no logged in");
    msalService.loginRedirect();
  }
return () =>
    msalService.handleRedirectObservable().pipe(
      takeWhile((response) => !!response),
      tap((response) => {
        console.log("logged", response);
        if (response) {
          msalService.instance.setActiveAccount(response.account);
        }
      }),
    );

This doesn't work because 'instance' has to active user so it keeps redirecting, also i am not sure if redirect causes APP_INITIALIZED to cancel and then after redirecting back starts over?

  return () =>
    msalService.loginRedirect().pipe(
      tap(() => console.log('after login redirect')),
      concatMap(() =>
        msalService.handleRedirectObservable().pipe(
          tap((response) => {
            console.log("login reaction ", response);
            msalService.instance.setActiveAccount(response.account);
          }),
        ),
      ),
    );

This doesnt work probably because handleRedirectObservable is not subscribed it time of redirecting back from loginRedirect?

Plus there is also msalBroadcastService but i am not sure if its right way.

score 0 · Accepted Answer · answered Feb 22 '23 at 10:26

Turns out i wasn't that far from an answer. "handleRedirectObservable" reads params in uri and returns undefined if they are not present so you can login afterwards. Redirect will delete context and after redirect from login it will start over.

This approach works and if you do that in service you can do some proper initialization of your application like permissions etc.

export function appInitializationFactory(
  msalService: MsalService,
): () => Observable<any> {
  return () =>
    msalService.handleRedirectObservable().pipe(
      tap((response) => console.log("response from handle: ", response)),
      concatMap((response) => {
        if (!response && msalService.instance.getAllAccounts().length === 0) {
          console.log("No account found -> login");
          return msalService.loginRedirect();
        } else {
          console.log("Logged in! Set account etc.");
          return EMPTY;
        }
      }),
    );
}

MSAL authentication in APP_INITIALIZER in Angular

1 Answers1