MSAL Angular 7: Password Reset Implementation

Question

I'm using this MSAL Library (https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-angular) for authentication.

For password reset my code is as follows:

// app.component.ts

constructor(private authService: MsalService)
{
 if (this.forgotPassword()) {
            this.navigateToForgotPassword();
        } else {
        this.authService
            .acquireTokenSilent(MsalHelperService.getMsalConfigurationSettingValue('consentScopes'))
            .then(token => {
                if (this.authService.getUser()) {
                    this.userService.setLoggedIn(true);
                    this.navigateToLandingPage();
                } else {
                    this.userService.setLoggedIn(false);
                    this.login();
                }
            })
            .catch(error => {
                this.userService.setLoggedIn(false);
                this.login();
            });
    }
...
}

// Determine if user clicked "Forgot Password"
forgotPassword() {
        const storage = this.authService.getCacheStorage();
        const authError: string = storage.getItem('msal.login.error') ? storage.getItem('msal.login.error') : null;
        if (authError && authError.indexOf('AADB2C90118') > -1) {
            return true;
        }

        return false;
    }

navigateToForgotPassword() {
        this.authService.authority = this.authService.authority.replace('b2c_1a_signupsignin', 'b2c_1a_passwordreset');
        this.authService.loginRedirect(MsalHelperService.getMsalConfigurationSettingValue('consentScopes'));
    }

Up until this point all works well.

After password reset the user is directed back to app.component which then calls loginRedirect() to display the login form.

On return to the app.component the following error is logged:

"Refused to display 'https://...signupsignin/' in a frame because it set 'X-Frame-Options' to 'deny'".

Ideally I would like to log the user in automatically after password reset.

Please advise if this is at all possible or at least how I can get rid of the error above without having to modify the MSAL Library.

Answer 1

I did something similar, based on your answer:

if (payload._errorDesc && payload._errorDesc.indexOf('AADB2C90118') !== -1) {
    console.log('Set recovery flow to true');
    console.log('Redirecting to password recovery page');
    localStorage.setItem('custom.recovery.password.flow', 'true');
    msalService.authority = `https://login.microsoftonline.com/tfp/${environment.tenant}/b2c_1_reset_password/v2.0/`;
    msalService.loginRedirect();
  }
});
this.broadcastService.subscribe('msal:loginSuccess', payload => {
  if(localStorage.getItem('custom.recovery.password.flow') === 'true'){
    console.log('Set recovery to false');
    console.log('Redirecting to login page');
    localStorage.setItem('custom.recovery.password.flow', 'false');
    msalService.logout();
  }
});

Answer 2

Auto-login is still an issue, but I resolved the error by logging out on loginSuccess.

this.loginSuccessSubscription = this.broadcastService.subscribe('msal:loginSuccess', payload => {
    // Temporary solution to avoid 'X-Frame-Options' error on password reset. MSAL not yet supporting auto-login after password reset.
    if (this.resetPassword()) {
        this.logout();
    }
    ...
});

// Check claim
resetPassword() {
    return document.referrer.toLowerCase().indexOf('b2c_1a_passwordreset') > -1;
}