Ionic and MSAL Authentication with Azure AD instance

Issue

I want to make login in Azure AD from my Ionic mobile app.

I've been trying to make my implementation worked using UserAgentApplication.loginPopup() from msal module just as user initially described here: Ionic and MSAL Authentication, and I finally got the redirection problem in Ionic (I can complete the process using ng serve and browser, but not when I tested it on mobile: the redirection to my base app throws an error and never come back; it seems to be a known problem)

The proposed workaround by Paolo Cuscela was to avoid this PopupLogin utility and make it work with InAppBrowser and a CustomNavigationClient, but in this case, I don't know how I have to instantiate my msalService.instance with the proper msal config, just as I did before with UserAgentApplication (clientId, authority, redirectUri, etc...).

Could you help me with this? I'm getting crazy.

Thank you in advance.

I'm trying to log in with Azure AD instance but I have a lot of problems in Ionic mobile app.

Solution

Finally, I did it using InAppBrowser and it was easier than I expected.

private iab: InAppBrowser;
(...)
return new Promise<string>((resolve, reject) => {
      const authUrl = `${environment.activeDirectory.authority + environment.activeDirectory.tenantId}/oauth2/v2.0/authorize?`
        + `client_id=${environment.activeDirectory.clientId}&`
        + `response_type=token&`
        + `redirect_uri=${encodeURIComponent(environment.activeDirectory.redirectUri)}&`
        + `scope=${environment.activeDirectory.scope}`;

      const browserOptions = 'location=yes,mediaPlaybackRequiresUserAction=yes,' +
          'shouldPauseOnSuspend=yes,usewkwebview=yes,clearcache=yes,clearsessioncache=yes,fullscreen=yes,hidenavegationbuttons=yes';

      const browser = this.iab.create(authUrl, '_blank', browserOptions); 

      browser.on('loadstart').subscribe((event: any) => {
        if (event.url.includes('#access_token')) {
          // do something
        }
      });
  });

This approach uses complete authUrl to access to AzureAD login. That response_type=token makes the access_token to be returned in the redirect_uri. This does not work in the browser because Azure login cannot be reached because of X-Frame-Option error, but it works if I installed it in the device.

I know it could be more sophisticated, but it works for me for now.

Answered By - Agent-47