Ionic-msal integration

Hi All,
I am working on integrating MSAL to ionic app using the angular (npm install @azure/msal-angular --save). (https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/b6b80bfc2369040424d7475bec8c6c323dfa093d/lib/msal-angular/README.md).

The issue is,
When I try to login with the API method loginpopup() from msalservice in browser (ionic serve) it works fine and I am able to login
But when I try to run same in android it is always throwing error (error.split is not a function).
any idea ?
Attaching screenshot.


and
msal config in app.module.ts

 MsalModule.forRoot({
      clientID: 'my-client-id',
      authority: 'https://login.microsoftonline.com/common/',
      validateAuthority: true,
      redirectUri: 'http://localhost:8100/tabs/tab1',
      cacheLocation: 'localStorage',
      storeAuthStateInCookie: isIE, // set to true for IE 11
      postLogoutRedirectUri: 'http://localhost:8100/tabs/tab1',
      navigateToLoginRequestUrl: true,
      popUp: true,
      // consentScopes: ["https://graph.microsoft.com/User.ReadWrite"]
      consentScopes: ['user.read', 'openid', 'profile', 'api://a88bb933-319c-41b5-9f04-eff36d985612/access_as_user'],
      unprotectedResources: ['https://www.microsoft.com/en-us/'],
      protectedResourceMap,
      logger: loggerCallback,
      correlationId: '1234',
      piiLoggingEnabled: true
    }
    ),

Hello, did you solve this issue? Does msal angular worked with ionic? Thanks

It works for ionic… BUt For broker support still u need to go with ms-adal plugin… Only MSAL doesn’t work for broker auth

@yashwanth493 Could you go into more detail about what you had to do to make it work? I tried to integrate it like I would for a normal angular application and there are no errors and the MsalGuard route guard is invoked as expected, but after a successful login and redirect to the Ionic app the login state is still null. Since msal-angular is (as far as I know) built for the Angular routing module and Ionic probably overrides this I assumed that the hook into the routing module which receives the successful login from Azure AD/B2C is just never handled. Would be glad for any insight since I’m currently blocked in implementing this. Thanks.

This is also partially being followed in this GitHub ticket from the msal-angular repository: https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/1439

1 Like

@Pharao2k For MSAL login in ionic the redirect_url is having some issues, ionic doesn’t read the callback redirect url and it remains in the password screen even after login success. So the same thing can be achieved using the ADAL plugin of cordova ionic (https://ionicframework.com/docs/native/ms-adal) .

Msadal is archived and no longer maintained , so if you try to use it in future for ios apps , apple store will refuse it …

I’m using MS adal plugin in a Ionic3 project and its working well and I’m receiving all the authenticate data from AD. The only problem is, I’m NOT getting the “onpremisessamaccountname”. We are receiving the “onpremisessamaccountname” from postman but not in the application.

Is there anything which I need to send in the request??