Azure AD B2C Sign In On Cordova/Ionic App

Question

TL; DR - Is there a simple way to show a custom Azure B2C signup policy on an ionic app?

I am currently working on a hybrid ionic app which needs to use the Azure AD B2C APIs to show a custom sign-in page defined by some backend devs that I work with.

I've tried using the ADAL cordova plugin for this, but as far as I can tell, there is no way to add a custom policy for the new web view. I tried adding "p=B2C_1_sign-in-up-policy" as the extraQueryParameters option in the acquireTokenAsync() call, but that gives me a MethodNotAllowedHttpException.

I'm still unsure if/how ADAL relates to B2C, so I switched to trying the Azure B2C Oauth 2.0 implementation directly. This seems like a mistake though, because I'm doing manually what the ADAL plugin already appears to be doing.

Are either of these the correct option? Is there an alternative approach to Azure AD B2C sign-in for ionic apps?

Thanks in advance

EDIT: To clarify, I have ADAL working up to the point where the default microsoft web view login from ADAL pops up, but I'd like to show a custom Azure B2C policy in place of this. Is this possible?

EDIT 2: After messing with the ADAL AuthenticationContext parameters, the azquireTokenAsnyc() call no longer fails on the policy. The parameters look something like this:

    var authContextConstants = {
        tenant: "[TENANT].onmicrosoft.com",
        resourceUrl: "https://login.microsoftonline.com",
        redirectUrl: "https://[REPLY_URL]",
        clientId: "[AZURE_APP_ID]",
        authority: this.resourceUrl + "/" + this.tenant,
        extraQueryParams: {
            response_mode: "form_post",
            scope: "openid offline_access",
            p: "B2C_1_[SIGN_IN_POLICY]"
        }
    };

My issue now is that the webview overlay that pops up comes up blank. I've managed to track this down to this ADAL source file (testing on android) which uses "/oauth2/authorize" instead of "oauth2/v2.0/authorize" as described by the B2C Oauth2 Docs

It appears that there is not currently a way to customize this via the cordova plugin since it is hard-coded in the source libraries - I'm now stuck once again...

Answer 1

Turns out the 0.7.1 / 0.7.2-dev versions of the ADAL cordova plugin use ADAL libraries that do not meet the B2C handshake / Oauth2 requirements, so these versions always fail on the code -> token section for B2C endpoints.

I forked the plugin to make This ADAL plugin B2C Patch for now, until the plugin devs update the plugin's ADAL libraries