Angular-oauth2-oidc: Forgot Password Flow

Created on 18 Mar 2020  路  6Comments  路  Source: manfredsteyer/angular-oauth2-oidc

hi Team,

How can we implement Forgot Password and Change Password Policy with this plugin.

I guess we can change auth config based on policies but need some callback that can handle AADB2C90091 and AADB2C90118 error codes.

Please comment

Thanks,
Bhavna

investigation-needed

Most helpful comment

Hi, sorry to barge in like this, but I thought I'd supply a working solution I figured out based on @manfredsteyer 's hint.

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 breakpointObserver: BreakpointObserver,
               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
           const redir  = PasswordResetUrl;
           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.

All 6 comments

I'm not sure if I follow. Would you have a minimal repro (Stackblitz or repository with a minimal example) that demonstrates what you're trying to do?

(Can't make a promise that I personally would have time to investigate though...)

Also, this might be helpful, it's from a different lib with the same purpose: https://github.com/damienbod/angular-auth-oidc-client/issues/83

Does this plugin handles any callback where we can handle AADB2C90091 and AADB2C90118 error codes? If yes, please post code snippet?

Hi @ravishb,

you should see the error when you subscribe to the events observable:

https://manfredsteyer.github.io/angular-oauth2-oidc/docs/additional-documentation/events.html

I guess, it will be a token_error or a code_error.

Does this work for you?

Best wishes,
Manfred

If not, feel free to re-open this issue.

yes I tried below piece of code. But control doesn't fall in this when I click on forgot password.

this.authService.events.subscribe(event => {
if (event instanceof OAuthErrorEvent) {
console.error(event);
}
});

Hi, sorry to barge in like this, but I thought I'd supply a working solution I figured out based on @manfredsteyer 's hint.

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 breakpointObserver: BreakpointObserver,
               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
           const redir  = PasswordResetUrl;
           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.

Was this page helpful?
0 / 5 - 0 ratings