[Solved]-How do I make 'forgot password' working in react-aad-msal with Azure AD B2C?-Reactjs

using msal-react and msal-browser i was able to get the azure ad b2c password reset page to appear using the following code (assuming you created a password reset user flow named b2c_1_reset):

import { usemsal } from "@azure/msal-react";
import { eventtype } from '@azure/msal-browser';

....

const { instance, inprogress, accounts } = usemsal();

// msal logging
//instance.setlogger(new logger(loggercallback));

const callbackid = instance.addeventcallback((message) => {
    if (message.eventtype === eventtype.login_failure){
      if (message.error.errormessage.includes("aadb2c90118")) { // the user has forgotten their password.
        const authority = "https://<your_domain>.b2clogin.com/crowdalert.onmicrosoft.com/b2c_1_reset";
        instance.loginredirect({authority: authority})
      }
    }
});

credit to ian for the hint.

you should add an extra condition in case the user cancels their attempt to change reset their account credentials. this way they are redirected back to login instead of getting stuck on your app.

import { usemsal } from "@azure/msal-react";

export default mycomponent = () => {

// other code

const { instance, accounts, inprogress } = usemsal();

instance.addeventcallback((message: any) => {
    if (message.eventtype === eventtype.login_failure && message.error.errormessage.includes("aadb2c90118")) {
      // the user has forgotten their password.
      instance.loginredirect(passwordresetrequest);
    } else if (message.eventtype === eventtype.handle_redirect_end && inprogress === interactionstatus.none) {
      instance.loginredirect(loginrequest);
    }
  });

// rest of component

};

when using a combined sign-up/sign-in policy in azure b2c, users have to handle the forgot password scenario themselves. you can find more detailed comments here.

a sign-up or sign-in user flow with local accounts includes a "forgot password?" link on the first page of the experience. clicking this link doesn't automatically trigger a password reset user flow.

instead, the error code aadb2c90118 is returned to your application. your application needs to handle this error code by running a specific user flow that resets the password. to see an example, take a look at a simple asp.net sample that demonstrates the linking of user flows.