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??

Hey, nowadays are you using MS ADAL plugin with ionic 3? It’s not working with ionic 5.

UI Error : AADSTS9002325: Proof Key for Code Exchange is required for cross-origin authorization code redemption

Console Error: he request body must contain the following parameter: ‘client_secret or client_assertion’

We are using below technical specifications for the ionic App.

IONIC: 5

Angular: 9

@ionic-native/ms-adal: 5.27.0

cordova-plugin-ms-adal: 0.10.2

Cordova version : 9.0.0

“msal”: “^1.3.3”

In Ionic 3, its working fine in my project. As per your Ionic 5 console log error, you need to pass the “client_secret” id in the request parameter. Could you share the request parameters?