Upgrading to msal-angular@1.1.1 from 0.1.4 - Help handling redirect URL with an invitation flow.

Library

• msal@1.x.x or @azure/msal@1.x.x
• @azure/msal-browser@2.x.x
• @azure/msal-angular@0.x.x
• @azure/msal-angular@1.x.x
• @azure/msal-angularjs@1.x.x

Description

Up until recently we were using @azure/msal-angular@0.1.4, since we upgraded to 1.1.1 we’ve introduce an issue where by the invitation flow we had doesn’t work any more.

The flow we have is:

But since upgrading to 1.1.1/ msal@1.4.0 the invitation flow no longer works, presumably because we had to implement a handleRedirectCallback:

    this.authService.handleRedirectCallback((authError, response) => { 
      if (authError && this.appConfig.config.authentication.enableLogging) {
        console.error('Redirect Error: ', authError.errorMessage);
        return;
      }
    });

Without this a user wasn’t able to login normally because they kept getting redirected back to the login screen and not into our application.

My question is how can we implement the handleRedirectCallback to handle this?

Our msal configuration has some of the following properties:

{
    "clientID": "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX",
    "authority": "https://login.microsoftonline.com/tfp/XXX.onmicrosoft.com/B2C_1A_signup_signin_adacap-r2sys",
    "redirectUri": "https://XXX/login",
    "validateAuthority": false,
    "cacheLocation": "localStorage",
    "postLogoutRedirectUri": "https://XXX/login",
    "navigateToLoginRequestUrl": false,
    "popUp": true,
    "consentScopes": [
        "user_impersonation",
        "https://XXX.onmicrosoft.com/api/user_impersonation"
    ],
    "protectedResourceMap": [
        [
            "https://localhost:44380",
            [
                "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
            ]
        ]
    ],
    "loadFrameTimeout": 900000,
    "renewTokenBeforeExpires": 1800000,
    "enableLogging": false,
    "enablePiiLogging": false
}

And our current login.component.ts has the following(I’ve stripped down alot of it as its not part of this):

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit, OnDestroy {

  public isLoading = false;

  constructor(protected router: Router,
    protected authService: MsalService,
    protected broadcastService: BroadcastService,
    protected authorisationService: AuthorisationService,
    protected http: HttpClient,
    protected axEntityTypesService: AxEntityTypesService,
    protected usersService: UsersService,
    protected legalTextService: LegalTextService,
    protected ccService: NgcCookieConsentService,
    private appConfig: AppConfigService) {
    
    this.authService.handleRedirectCallback((authError, response) => { 
      if (authError && this.appConfig.config.authentication.enableLogging) {
        console.error('Redirect Error: ', authError.errorMessage);
        return;
      }
    });
    
    this.broadcastService.subscribe('msal:loginSuccess', () => {
      this.handleLoginSuccessEvent();
    });

    broadcastService.subscribe("msal:loginFailure", (payload) => {
      if (this.b2cForgotPassword()) {
        localStorage.setItem('redirect', 'login');
        this.router.navigate(['forgot-password']);
      }
      else if (this.authorisationService.currentUser && !this.authorisationService.currentUser.isActive())
        this.router.navigate(['unauthorised']);
    });
  }

  login() {
    this.authService.loginRedirect();
  }

  handleLoginSuccessEvent() {
    if (localStorage.getItem('redirect')) {
      this.router.navigate(['/login']);
      localStorage.clear();
    }
    else {
      if (this.authorisationService.currentUser != null && this.http != null) {
        this.isLoading = true;
        
        // do some things with the current user setting them up correctly before:
        
        this.isLoading = false;
        this.router.navigate(['/dashboard']);
      }
    }
  }
}

[mcdonnell-john]

Hi @tnorling apologies for the delay, we had some infrastructure issues, that delayed coming back around to this 😦

This works, we managed so update the email link a user gets to redirect to our application which then redirects the user to B2C using the msal loginRedirect method.

From my perspective this issue is resolved but I think @jmckennon wanted to leave this open to track documentation improvements

[mcdonnell-john]

Cool thanks, I’ll test it out tomorrow