React Web App - reset password B2C not working with MsalAuthenticationTemplate

Library

• [@azure/msal-browser@2.12.0] msal@1.x.x or @azure/msal@1.x.x
• [@azure/msal-react@1.0.0-beta.0] @azure/msal-react@1.x.x

Description

We are currently using this library to implement the Azure B2C reset password flow in our react app. We downloaded the sample here, changed the config so it is using our B2C tenant and it worked; we were able to reset our password and we become authenticated.

However, when we start using MsalAuthenticationTemplate we run into problems. We are using MsalAuthenticationTemplate to force the user to sign in if they are unauthenticated. I can go through the reset password flow until the end, where I receive multiple failed bad requests on https://<tenant>.b2clogin.com/<tenant>.onmicrosoft.com/<signinuserflow>/oauth2/v2.0/token

Here is the code:

const SecureContent = (props) => {
  const { instance } = useMsal();

  useEffect(() => {
    const callbackId = instance.addEventCallback((event) => {
      if (event.eventType === "msal:loginFailure") {
        if (
            event.error &&
            event.error.errorMessage.indexOf(b2cErrorCodes.FORGOTTEN_PASSWORD) >
            -1
        ) {
          instance.loginRedirect({
            authority:
                "https://<tenant>.b2clogin.com/tfp/<tenant>.onmicrosoft.com/<resetPasswordAuthority>",
          }).then(() => {
          });
        }
      }
    });
    return () => {
      if (callbackId) {
        instance.removeEventCallback(callbackId);
      }
    };
  }, []);

  return props.children;
};

const WebSecurityContainer = (props) => {

  const pca = new PublicClientApplication(ourConfiguration);

  return (
      <MsalProvider instance={pca}>
        <SecureContent>
          <MsalAuthenticationTemplate
            interactionType={InteractionType.Redirect}
            authenticationRequest={scopes: [
      "https://<tenant>.onmicrosoft.com/<clientId>/authentication",
    ]}>
            {props.children}
          </MsalAuthenticationTemplate>
        </SecureContent>
      </MsalProvider>
  );
};

Any ideas on what I am doing wrong? If you need more info around the configuration then let me know.

Source

• Internal (Microsoft)
• Customer request

[tnorling]

Yes you should be able to do something like this:

if (event.eventType === EventType.LOGIN_SUCCESS) {
        if (event.payload.idTokenClaims["acr"] === "forgotPasswordPolicy") {
            instance.logout({account: event.payload.account});
        }
}

[tnorling]

@AshTappin This is by design.