Handling callback from Azure AD in Ionic 4 with MSAL Angular wrapper

Question

We're building an Ionic 4 app with angular 7 and we want to authenticate against Azure AD v2 endpoints. We're using msal-angular wrapper for the msal.js library. We're hitting the endpoints successfully and the authentication provider responds with a token in our callback.

Here begins our problem. The msal library doesn't handle this token automatically in a mobile-app context, so we have to try and handle this manually. When we're debugging the application in a browser, the msal library automatically saves the token and we're logged in correctly.

In order to redirect to a page within our mobile application we're using Applinks/Deeplinks cordova plugin, to provide a callback URI that is accepted by the authentication provider as a valid URI and enables us to redirect to the application (and to the correct page in the application). However with Deeplinks, we're hitting our callback, but the MSAL library is not able to identify the callback and thus is not able to continue it's login process to save the token and set it's state to logged in (we're leveraging this library to also guard routes in our application).

This works as intended without Deeplinks debugging in a browser. How can we make the MSAL library continue with it's login-process when the callback is hit?

MSAL config:

MsalModule.forRoot({
   clientID: '******',
   authority: "https://login.microsoftonline.com/********", // (Optional) It is the authority URL as described in the configuration section above to support account types. The default authority is https://login.microsoftonline.com/common.
   validateAuthority: true,
   redirectUri: "https://example.com/callback",
   cacheLocation : "localStorage",
   postLogoutRedirectUri: "https://example.com/home",
   navigateToLoginRequestUrl: false,
   popUp: false,
   consentScopes: [ "user.read", "api://*************/user_read"],
   unprotectedResources: ["https://www.microsoft.com/en-us/"],
   correlationId: '1234',
   piiLoggingEnabled: true
})

Deeplinks:

this.platform.ready().then(() => {
   this.deeplinks.route({
      '/home': HomePage,
      '/callback': CallbackPage
    }).subscribe((match) => {
       const idToken = match.$link.fragment;
       this.router.navigate(['/callback', {key: idToken}])

    },
    (nomatch) => {
       console.error('Got a deeplink that didn\'t match', nomatch);
    });
 });

did reached the same as you but not sure how to proceed further, if anyone knows how to solve this please let me know — Daniel C
Check this out: forum.ionicframework.com/t/ionic-msal-integration/183252/4 see if this helps — vbRocks

Daniel C Daniel C · Accepted Answer · 2020-05-15T15:20:42

I had the same problem a you and seems that the cordova msal plugin is no longer supported so as an alternative to what you have done follow these steps (not a fix for the mentioned issue on this post)

I have ended up implementing this plugin: Capacitor OAuth 2 client plugin git: https://github.com/moberwasserlechner/capacitor-oauth2

To install it do the following:

npm i -E @byteowls/capacitor-oauth2

Please note that the minimum Capacitor version is 2.0.0

The plugin configurations might change, I suggest you have a read throught their initial setup before doing these steps, but for the azure configurations you should do the following:

oauth2config

(...) // other configs
android: {
      pkceEnabled: true,
      responseType: 'code',
      redirectUrl: 'com.company.testapp://oauth/redirect',
      accessTokenEndpoint: 'https://TENANT.b2clogin.com/TENANT.onmicrosoft.com/B2C_1_policy-signin-signup-web',
      handleResultOnNewIntent: true,
      handleResultOnActivityResult: true
    },
(...) // other configs

strings.xml:

<string name="custom_url_scheme">com.company.testapp://oauth/redirect</string>

AndroidManifest:

<data android:scheme="com.company.testapp" android:host="auth" />

build.gradle:

defaultConfig {
        // other stuff
        manifestPlaceholders = [
            "appAuthRedirectScheme": "com.company.testapp"
        ]

On the Azure portal:

Include web app / web API: YES
Allow implicit flow: YES
Include native client: YES
Custom Redirect URI: com.company.testapp://oauth/redirect

Created a repo that has a azure b2c example of this implementation (you will only need to change the com.c.... and the configs to match yours): https://github.com/loonix/capacitor-oauth2-azure-example

If you have any issues implementing this refer to the following issues: https://github.com/moberwasserlechner/capacitor-oauth2/issues/96 https://github.com/moberwasserlechner/capacitor-oauth2/issues/91

Handling callback from Azure AD in Ionic 4 with MSAL Angular wrapper

1 Answers