Can i integrate custom B2C login page?

[sarathi0333]

Hi,

I am creating a Cordova iOS app. I tried to use the below options,

var options = {
                authorities: [{
                    type: 'B2C',
                    authorityUrl: 'https://url.b2clogin.com/url.onmicrosoft.com/B2C_1_endpoint2',
                }],
                scopes: ["https://yyy.onmicrosoft.com/B2CAPI/openid", "https://yyy.onmicrosoft.com/B2CAPI/read", "https://yyy.onmicrosoft.com/B2CAPI/user_impersonation"],
            }

Upon triggering signInInteractive I am getting the default Microsoft login screen.

Also is there way i can give redirect URL for iOS app like msauth.com.bundle.mobileapp://auth and the cache location as localstorage similar to the options in msal.js?

[wrobins]

Hello, and thanks for your questions!

Sometimes to get MSAL to redirect to your organization's login screen instead of the default Microsoft one, you need to add a domain hint to your options object which, in your case, would look something like this:

var options = {
    authorities: [
        {
            type: 'B2C',
            authorityUrl: 'https://url.b2clogin.com/url.onmicrosoft.com/B2C_1_endpoint2',
        }
    ],
    scopes: [
        "https://yyy.onmicrosoft.com/B2CAPI/openid",
        "https://yyy.onmicrosoft.com/B2CAPI/read",
        "https://yyy.onmicrosoft.com/B2CAPI/user_impersonation"
    ],
    authorizationQueryStringParameters: [
        {
            param: 'domain_hint',
            value: 'your-tenant-guid'
        }
    ]
};

By default, in iOS, it should be redirecting you to msauth.com.bundle.mobileapp://auth as-is, but you can control whether, upon redirect, to try to look in either the device's authentication broker (such as the Microsoft Authenticator app) or the browser's cache, which I assume is usually localstorage, by adding this flag to your options object:

brokerRedirectUri: true/false

My documentation says this is Android-only, but that's not true anymore as I did add handling of it to iOS's code, too. But it's more of a suggestion in either Android or iOS as the operating system looks at what's on your phone and tries to put the MSAL library in a stable configuration, but it will follow your hint if it can.

[sarathi0333]

Hi Wrobins, Thanks for answering my question.

Where can I find the domain_hint and tenant_guid? domain_hint is this the part of authority URL which I specified earlier. If that's the case, should it be {tenant_name}.b2clogin.com or {tenant_name}.onmicrosoft.com? I tried both but it still loads login.microsoftonlline.com tenant_guid whether tenant_guid and tenant_name are the same?

[wrobins]

Hi again,

'domain_hint' is the actual string literal to use, which is the key that you're setting in the request parameter. 'your-tenant-guid' is going to be a string in the format abc12345-abc1-1234-1234-abc123d4e56f or something similar. You can find it in your Azure portal under App Registrations>Your app as the "Application (client) ID".

[mustay]

Hi,

Facing the same issue and your suggestions above dont resolve it. Been trying to debug it for days now. It just keeps on sending me to login.microsoft and serves the generic page without my custom IDP

Below is my options object

options: {
        clientId: 'CLIENTID';

        authorities: [
            {
                type: 'B2C';
                authorityUrl: 'https://xxx.b2clogin.com/xxx.onmicrosoft.com/B2C_1_AppSignupSignin';
                default: true;
            }
        ],
        authorizationQueryStringParameters: [
            {
                param: 'domain_hint',
                value: 'CLIENTID / TENANT ID'
            }
        ];
    };

If you could please help.

[mustay]

Figured it out. For anyone else facing this, audience param is required.

[ronakpatel17]

@mustay My application is working fine for ios, But for android I am getting below error after closing and reopening the application.

"No cached accounts found for the supplied homeAccountId and clientId"

Do you have any idea? How can I solve it?

Thanks in advance!