Angular Azure AD B2C Password reset policy after password changed logs into app and then shows login page - azure-ad-b2c

Question

I am using Azure AD B2C with my Angular 11 application.
I am trying to use forgot password policy and it is working fine except after password is changed, it logs me into application and displays me my landing page and a fraction of second redirects to login page. Not sure what i am doing wrong.
Can anyone please help me how to resolve this?
this.msalBroadcastService.msalSubject$
.pipe(
filter((msg: EventMessage) => msg.eventType === EventType.LOGIN_FAILURE || msg.eventType === EventType.ACQUIRE_TOKEN_FAILURE),
takeUntil(this._destroying$)
)
.subscribe((result: EventMessage) => {
// Checking for the forgot password error. Learn more about B2C error codes at
// https://learn.microsoft.com/azure/active-directory-b2c/error-codes
if (result.error && result.error.message.indexOf('AADB2C90118') > -1) {
let resetPasswordFlowRequest: RedirectRequest | PopupRequest = {
authority: b2cPolicies.authorities.resetPassword.authority,
scopes: [],
};
this.login(resetPasswordFlowRequest);
};
});
login(userFlowRequest?: RedirectRequest | PopupRequest) {
if (this.msalGuardConfig.interactionType === InteractionType.Popup) {
if (this.msalGuardConfig.authRequest) {
this.authService.loginPopup({ ...this.msalGuardConfig.authRequest, ...userFlowRequest } as PopupRequest)
.subscribe((response: AuthenticationResult) => {
this.authService.instance.setActiveAccount(response.account);
});
} else {
this.authService.loginPopup(userFlowRequest)
.subscribe((response: AuthenticationResult) => {
this.authService.instance.setActiveAccount(response.account);
});
}
} else {
if (this.msalGuardConfig.authRequest) {
this.authService.loginRedirect({ ...this.msalGuardConfig.authRequest, ...userFlowRequest } as RedirectRequest);
} else {
this.authService.loginRedirect(userFlowRequest);
}
}
}

Answer 1

I was trying to do the same thing the other day using user flows, not custom policy as per business requirement, However, I found out that after the password reset is finished, it redirects back to the app, but it can not sign in back using returned information through the URL. Not sure, if it is a bug or what, but it still tries to do that and timeout.
I would suggest after the password reset is successful, try to force logout e.g. remove MSAL stored information, and redirect to the login or landing page.
If I find a better solution, I will post it for you.

Answer 2

I have done a bit of research on this. I found out, once the password has been reset, the user is supposed to log in again. If you want to get the user logged in after the password has been reset, you need to authenticate the user in the API and return back the token. Here is the code for that:
public async Task<OAuthResult> AuthenticateCredentialsAsync(string username, string password)
{
var oauthEndpoint = new Uri(new Uri($"{_b2cSettings.Authority}{_b2cSettings.SignInROPC}/"), "oauth2/v2.0/token");
using (var client = new HttpClient())
{
var result = await client.PostAsync(oauthEndpoint, new FormUrlEncodedContent(new[]
{
new KeyValuePair<string, string>("client_id", _b2cSettings.ClientId),
new KeyValuePair<string, string>("grant_type", "password"),
new KeyValuePair<string, string>("client_info", "1"),
new KeyValuePair<string, string>("username", username),
new KeyValuePair<string, string>("password", password),
new KeyValuePair<string, string>("scope", $"openid {_b2cSettings.ClientId} offline_access "),
new KeyValuePair<string, string>("client_secret", _b2cSettings.ClientSecret),
new KeyValuePair<string, string>("response_type", "token id_token")
}));
if (result.StatusCode != HttpStatusCode.OK)
throw new AuthenticationFailedException(await result.Content.ReadAsStringAsync());
var content = await result.Content.ReadAsStringAsync();
var authResult = JsonConvert.DeserializeObject<OAuthResult>(content);
return authResult;
}
}
public class OAuthResult
{
public string Token_Type { get; set; }
public string Scope { get; set; }
public int Expires_In { get; set; }
public string Access_Token { get; set; }
public string Id_Token { get; set; }
public string Refresh_Token { get; set; }
public string Client_Info { get; set; }
}
NOTE: You need to create an ROPC policy in the Azure AD B2C.
Another option is to logout user after the password reset and redirection happens back to the App:
this.loggedInSuccess$ = new ReplaySubject<boolean>();
this.msalBroadcastService.msalSubject$
.pipe(
filter((msg: EventMessage) => msg.eventType === EventType.LOGIN_SUCCESS || msg.eventType === EventType.ACQUIRE_TOKEN_SUCCESS)
)
.subscribe((result) => {
const payload: IdTokenClaims = <AuthenticationResult>result.payload;
if (payload.idTokenClaims?.tfp === b2cPolicies.names.forgotPassword) {
return this.msalService.logout();
} else if (payload.idTokenClaims?.tfp === b2cPolicies.names.signIn) {
this.loggedInSuccess$.next(true);
this.msalService.instance.setActiveAccount(payload.account);
}
return result;
});
If you have any issues, let me know, and I can post the full code.
Furthermore, you can handle more things as per your app requirements using the MSAL events:
https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/v2-docs/events.md