angular-oauth2-oidc forgot password flow

Question

I am setting up B2C on my Angular (8) app with angular-oauth2-oidc. I have a sign in and a sign out policy and I have managed correctly to set up the angular-oauth2-oidc service. At the moment I am using the standard Microsoft login page which contains a Forgot Password link. I have created the flow for the Forgot Password in B2C, but I am struggling to integrate it in angular-oauth2-oidc. When I click the Forgot Password link, B2C throws an error "AADB2C90118"; to make sure that the flow is correct I have tested the flow creating an AuthConfig file such the one that I have created for the sign in policy; just with the Forgot Password flow information (in this case the users clicks a button and is redirected to the Forgot Password issuer) - and it works.

Is there any variable in the AuthConfig file that can be set as the Forgot Password endpoint or any way that can handle this issue?

Did you find any solution on this?

Syeda Samreen
– Syeda Samreen

2020-03-12 07:21:20 +00:00
Commented Mar 12, 2020 at 7:21 — Syeda Samreen
– Syeda Samreen, Commented Mar 12, 2020 at 7:21

Ruben Szekér · Accepted Answer · 2021-01-30 13:24:26Z

6

I managed to get it working by following a suggestion from the creator of the angular-oauth2-oidc library.

First, I created an OAuthErrorEventParams interface I can cast my OAuthErrorEvent.params to:

export interface OAuthErrorEventParams {
   error: string;
   error_description: string;
   state: string;
 }

I then created this constant to represent my RedirectUrl to redirect to the password reset flow:

export const PasswordResetUrl = 'https://[tenantname].b2clogin.com/[tenantname].onmicrosoft.com/oauth2/v2.0/authorize?' +
    'p=[PasswordResetFlowName]' +
    '&client_id=' + authConfig.clientId +
    '&nonce=defaultNonce' +
    '&redirect_uri=' + window.location.origin + '/index.html' +
    '&scope=openid' +
    '&response_type=id_token' +
    '&prompt=login';

And then finally in my component that handles the setup and config of the Auth service, I added the below:

constructor(private oauthService: OAuthService) {
     this.configure();
     this.oauthService.events.subscribe(e => {
       if (e instanceof OAuthErrorEvent) {
         const parm = e.params as OAuthErrorEventParams;
         if (parm.error === 'access_denied' && parm.error_description.includes('AADB2C90118')) {
           // redirect to forgot password flow
           window.location.href = PasswordResetUrl;
         } else if (parm.error === 'access_denied' && parm.error_description.includes('AADB2C90091')) {
           // user has cancelled out of password reset
           this.oauthService.initLoginFlow();
         }
       }
     });
     this.oauthService.tryLoginImplicitFlow();
   }

I really hope this helps someone because I had a hell of a time finding a solution to this prior to landing up here.

edited Jan 30, 2021 at 13:24

Ruben Szekér

1,1831 gold badge10 silver badges24 bronze badges

answered Apr 3, 2020 at 7:30

Captain Kenpachi

7,2558 gold badges50 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

simon90 Over a year ago

Thank you! For the moment I was going around the problem using a custom login page and redirecting the Forgot Password link to the correct one, but I'll definitely use this other solution

Captain Kenpachi Over a year ago

Glad I could help, bro.

Ruben Szekér Over a year ago

This solution worked for me. I only had to tweak it slightly. Using window.location.origin did not work for me (I have 3 different reply URLs) so I used the full URLs instead. You can copy/paste these URLs from Azure B2C when testing the user flow.

andrea.spot. · Accepted Answer · 2024-04-09 14:20:02Z

1

For those who have this problem with the Code Flow (NO IMPLICIT GRANT), we had to edit the PasswordResetUrl like this:

export const PasswordResetUrl = 'https://[tenantname].b2clogin.com/[tenantname].onmicrosoft.com/oauth2/v2.0/authorize?' +
'p=[PasswordResetFlowName]' +
'&client_id=' + authConfig.clientId +
'&nonce=defaultNonce' +
'&redirect_uri=' + window.location.origin + '/index.html' +
'&scope=openid' +
'&response_type=code' +
'&prompt=login' +
'&code_challenge=##################&code_challenge_method=S256';

edited Apr 9, 2024 at 14:20

answered Oct 23, 2020 at 10:48

andrea.spot.

4954 silver badges9 bronze badges

Collectives™ on Stack Overflow

angular-oauth2-oidc forgot password flow

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related