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

Question

I am using react-aad-msal with Azure AD B2C. I have sign-in and sign-out working. However, when I click 'Forgot your password?', the auth window disappears and nothing happens.

It seems I need to specify name of my 'forgot password' policy, but I do not know where to put it.

Based on Tony's answer added this code to my App's render:

if (window.location.href.indexOf("error_description=AADB2C90118") >= 0)
    {
      return <AzureAD
      provider={
        new MsalAuthProviderFactory({
          authority: 'https://login.microsoftonline.com/tfp/x5aaas.onmicrosoft.com/B2C_1_PwdReset', 
          clientID: 'a1568977-3095-4bf6-a6d6-c10c87658488',
          scopes: ['https://x5aaas.onmicrosoft.com/ui/use'],
          type: LoginType.Redirect,
          postLogoutRedirectUri: window.origin,
        })
      }
      unauthenticatedFunction={this.unauthenticatedFunction}
      userInfoCallback={this.userJustLoggedIn}
      authenticatedFunction={this.authenticatedFunction}
    />;
    }

I see that after I click "Forgot password?", the condition is true, and return happens. However, the window for password reset does not show up and I get redirected back to my app URL.

Any suggestions?

Answer 1

在Azure B2C中使用组合的注册/登录策略时，用户必须自己处理忘记密码的情况。您可以找到更详细的评论here。

具有本地帐户的注册或登录用户流包括“忘记密码？”体验首页上的链接。单击此链接不会自动触发密码重置用户流程。

相反，错误代码AADB2C90118返回到您的应用程序。您的应用程序需要通过运行重置密码的特定用户流来处理此错误代码。要查看示例，请看一下simple ASP.NET sample，它演示了用户流的链接。

Answer 2

我所做的就是在App.js中创建一个路由：

          <Route
            path="/forgot"
            component={() => {
              window.location.href = forgotPasswordUrl;
              return null;
            }}
          />

然后，在constructor

中

if (window.location.hash.indexOf('AADB2C90118') >= 0) {
  history.push('/forgot');
}

那行得通。

Answer 3

使用 msal-react 和 msal-browser 我能够使用以下代码显示 Azure AD B2C 密码重置页面（假设您创建了一个名为 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})
      }
    }
});