Microsoft-authentication-library-for-js: [Help needed] How to implement forgot password flow?

[gopinav]

Please follow the issue template below. Failure to do so will result in a delay in answering your question.

Library

• [x] [email protected] or @azure/[email protected]
• [ ] @azure/[email protected]
• [ ] @azure/[email protected]
• [ ] @azure/[email protected]
• [ ] @azure/[email protected]

Description

I'm trying to implement the 'Reset Password' or 'Forgot Password' flow but the msal user agent doesn't seem to expose any methods for this. How should I be handling the 'Forgot Password' click on the sign_in B2C policy?

[pkanher617]

Related to https://github.com/Azure-Samples/active-directory-b2c-javascript-msal-singlepageapp/issues/9.

[pkanher617]

@gopinav Sorry for the inconvenience. We are working on making the B2C experience in our library smoother, I will update here when I have more info.

[fpiazza99]

Three years to get this functionality??? Really

[jeverduzco]

Sorry for the inconvenience. We are working on making the B2C experience in our library smoother, I will update here when I have more info.

Any updates on this? it's impossible to put an application into production without this functionality.

[alberthoekstra]

In previous versions it was possible to replace the authority with the url to the password forgot policy and just call the loginredirect or loginpopup method.

I’m currently on the latest beta version that’s on npm and this method doesn’t work anymore.

[alberthoekstra]

I got it to work with beta version.

Used package versions:

"@azure/msal-angular": "^1.0.0-beta.3",
"msal": "^1.2.2-beta.1",

this.ms.handleRedirectCallback((authError, response) => {
  // get msal error from storage
  const msalErrorDescription = localStorage.getItem(
    "msal.error.description"
  );
  // check if msal error set
  if (msalErrorDescription) {
    // check if error code for forgot password is there
    if (msalErrorDescription.indexOf("AADB2C90118") > -1) {
      // change authority to password reset policy
      this.ms.loginRedirect({
        authority: environment.passwordResetPolicy
      });
      return;
    }
  }
});

'environment.passwordResetPolicy' is an url to the password reset policy like: 'https://{tenant}.b2clogin.com/{tenant}.onmicrosoft.com/B2C_1A_ChangePassword'

[alberthoekstra]

This seems to work in development env, but not when I publish it to Azure app service.
Any devs know why?

[jeverduzco]

This seems to work in development env, but not when I publish it to Azure app service.
Any devs know why?

I'm running some tests today to see if I can make it work.

[alberthoekstra]

It has something to do with executing the redirect in the handleRedirectCallback.
If I move the loginRedirect to the passwordResetPolicy outside the handleRedirectCallback it does work.

[jeverduzco]

It has something to do with executing the redirect in the handleRedirectCallback.
If I move the loginRedirect to the passwordResetPolicy outside the handleRedirectCallback it does work.

During the weekend I made some tests and finally I have it working in my project, during the day I will upload an example repo.

[alberthoekstra]

Great! I’ll take a look when it’s there.

[jeverduzco]

Great! I’ll take a look when it’s there.

https://github.com/jeverduzco/msal-nuxt-example

In this repo I have an example working, the msal settings are in msal/msal.js and the logic to capture the error of recovering password is in pages/auth.vue

[alberthoekstra]

Can't get it to run but see what you did. Thanks!

[tnorling]

Our b2c sample has been updated to show how to implement the forgot password flow and can be found here