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

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 2

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 3

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 4

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

};