No cached authority found when clicking Back button from browser in Forgot Password screen

Library

• @azure/msal-angular": "^2.0.0-alpha.5
• @azure/msal-browser": "^2.11.1

Framework

• Angular: 10.2.4

Description

Error Message

BrowserAuthError: no_cached_authority_error: No cached authority found.

MSAL Configuration

export const b2cPolicies: B2CPolicies = {
  names: {
    signUpSignIn: environment.B2C.SIGN_IN_POLICY_NAME,
    forgotPassword: environment.B2C.RESET_PASSWORD_POLICY_NAME,
  },
  authorities: {
    signUpSignIn: {
      authority: environment.B2C.SIGN_IN_AUTHORITY,
    },
    forgotPassword: {
      authority: environment.B2C.RESET_PASSWORD_AUTHORITY,
    },
  },
  authorityDomain: environment.B2C.AUTHORITY_DOMAIN,
};

export const apiScope: string = environment.B2C.SCOPE;

export const apiConfig: B2CApiConfig[] = Object.values(environment.API_URLS).map((uri: string) => ({
  scopes: [apiScope],
  uri: `${uri}/**`,
}));

Reproduction steps

1. Go to http://localhost:4200/ (will run signup-sign in policy and display login page)
2. Click on Forgot Password link (will run password-reset policy)
3. Click the back button from the browser (This should display the login page but returns an error)

 subscribeToSuccessResetPassword(): void {
    this.msalBroadcastService.msalSubject$
      .pipe(
        filter(
          (msg: EventMessage) =>
            msg.eventType === EventType.LOGIN_SUCCESS || msg.eventType === EventType.ACQUIRE_TOKEN_SUCCESS
        ),
        takeUntil(this.destroy)
      )
      .subscribe((result: EventMessage) => {
        console.log('subscribeToSuccessResetPassword');
        const payload: IdTokenClaims = result.payload as AuthenticationResult;
        const isSuccessResetPassword: boolean =
          payload.idTokenClaims?.tfp === authConfig.b2cPolicies.names.forgotPassword;

        localStorage.setItem(CommonConstants.AUTH_TOKEN, payload.idToken);

        if (isSuccessResetPassword) {
          return this.authService.logout();
        }

        this.checkAccount();

        return result;
      });
  }

  subscribeToLoginFailure(): void {
    this.msalBroadcastService.msalSubject$
      .pipe(
        filter(
          (msg: EventMessage) =>
            msg.eventType === EventType.LOGIN_FAILURE || msg.eventType === EventType.ACQUIRE_TOKEN_FAILURE
        ),
        takeUntil(this.destroy)
      )
      .subscribe((result: EventMessage) => {
        console.log('subscribeToLoginFailure');

        if (result.error instanceof AuthError) {
          this.loggerService.logMessage(result.error.message, CommonConstants.logType.ERROR);

          const isForgotPasswordFlow: boolean = result.error.message.includes('AADB2C90118');

          if (isForgotPasswordFlow) {
            const resetPasswordFlowRequest: RedirectRequest | PopupRequest = {
              scopes: ['openid'],
              authority: authConfig.b2cPolicies.authorities.forgotPassword.authority,
            };

            this.login(resetPasswordFlowRequest);

            return;
          }

          const isForgotPasswordFlowCancelled: boolean = result.error.message.includes('AADB2C90091');

          if (isForgotPasswordFlowCancelled) {
            this.login();
          }
        }
      });
  }

// We use msalGuard and msalInterceptor and login is made by one of them. Here is the code: 
export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap: Map<string, Array<string>> = new Map<string, Array<string>>();

  apiConfig.forEach((config: B2CApiConfig) => {
    protectedResourceMap.set(config.uri, config.scopes);
  });

  return {
    interactionType: InteractionType.Redirect,
    protectedResourceMap,
  };
}

export function MSALGuardConfigFactory(): MsalGuardConfiguration {
  return {
    interactionType: InteractionType.Redirect,
    authRequest: {
      scopes: [apiScope],
    },
  };
}

I also tried this example https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-v2-samples/angular11-b2c-sample and it seems that the same bug with BrowserAuthError: no_cached_authority_error: No cached authority found. can be reproduced …It’s an unsystematic bug. It doesn’t occur every time. Steps to reproduce:

1. Go to forgot password
2. Go back by pressing the back button from the browser
3. Click on forgot password again (The error reproduces)

Expected behavior

Should return to login page

Identity Provider

• Azure B2C Custom Policy

Browsers/Environment

• Chrome

Regression

• Did this behavior work before? No

Security

• Is this issue security related?
• No

Source

• Customer request

[pkanher617]

Still working on trying to find a fix for this issue. Thanks for your patience.

[pkanher617]

@BiancaDianaAlexiuc Thanks for opening this issue! We were able to reproduce this behavior. This is definitely a bug. What appears to be happening is the forgot password flow seems to skip the client app when hitting the back button, which ends up putting the application in a bad state where it can’t read the appropriate items from the cache. Let me investigate with the B2C team and get back to you on how we can mitigate this.