I'm using this MSAL Library () for authentication.

For password reset my code is as follows:

// appponent.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 appponent which then calls loginRedirect() to display the login form.

On return to the appponent 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.

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

For password reset my code is as follows:

// app.ponent.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.ponent which then calls loginRedirect() to display the login form.

On return to the app.ponent 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.

• javascript
• angular
• authentication
• azure-ad-msal
• msal.js

• 1 Hi, any luck with this problem? – Cleber Dantas Commented Feb 6, 2019 at 18:48
• 1 See my answer below. – De Wet van As Commented Feb 7, 2019 at 5:34

2 Answers 2

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./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();
  }
});

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;
}