Forgot password seems to be unimplemented or missing from documentation

Please provide us with the following information:

This issue is for a: (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ ] feature request
- [X] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

Minimal steps to reproduce

Configure Azure with a signin sign up user flow Configure Azure with a Password reset user flow Look for documentation on where to set the forgot password user flow

Results: Nothing found

Any log messages given by the failure

Not applicable

Expected/desired behavior

I would expecty full documentation on how to configure

OS and Version?

Not applicable

Versions

0.4.9

Mention any other details that might be useful

I briefly scanned through the code and couldn’t see anything that looked applicable to the forgot password user flow, I recognize I might just not have looked hard enough, but regardless. I think this should be documented (or implemented if it’s not)

[Premkumar-Shanmugam]

I used the functions exposed by MsalAuthProvider.

// authProvider.js
import { MsalAuthProvider } from 'react-aad-msal';

// Msal Configurations
const config = { ... }

// Authentication Parameters
const authenticationParameters = { ... }

// Options
const options = { ... }

// Forgot Password Handler
function handleForgotPassword(error) {
  if (error && error.errorMessage.indexOf('AADB2C90118') > -1) {
    authProvider.setAuthenticationParameters ({authority: <PASSWORD RESET AUTHORITY>})
    authProvider.login()
  }
}

const authProvider = new MsalAuthProvider(config, authenticationParameters, options)
authProvider.registerErrorHandler(handleForgotPassword)

export default authProvider

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { AzureAD } from 'react-aad-msal';

import App from './App';
import authProvider from './authProvider';

authProvider.setAuthenticationParameters ({authority: <SISO AUTHORITY>})
ReactDOM.render(
  <AzureAD provider={authProvider} >
    <App />
  </AzureAD>,
  document.getElementById('root'),
);

[Mohammed-El-Nabulsi]

My solution is just to dig into the exposed MSAL functions and do the following:

authProvider.handleRedirectCallback((error, response) => {
  if (error && error.errorMessage.indexOf('AADB2C90118') > -1) {
    authProvider.loginRedirect({
      authority: 'https://<tenant>.b2clogin.com/<tenant>.onmicrosoft.com/B2C_1A_PasswordReset',
      redirectUri: window.location.origin,
      extraQueryParameters: {
        // eslint-disable-next-line @typescript-eslint/camelcase
        ui_locales: 'de',
      },
    });
  }
});

I think my sample should be extended to catch the returned token after Password Reset to prevent a second login prompt to the user. Maybe I’ll have time to look at that within the next few days.

Hope that helps.