How to generate working link to Azure B2C signin page with MSAL

[lfastrup]

I have a Power Pages sites configured with Azure B2C login for external users. It works fine when accessing the sign-in page by manually clicking the provider button on the /SignIn page.

However, we would also like to have a sign-in button directly on the front page. Having researched this topic, I learned this has to be implemented using MSAL. I get the link - but after a successful login I get back to a "page not found" error in the Power Pages site.

I generate the link as following in TypeScript using @azure/msal-node@2.7.0 and @azure/msal-browser@3.13.0

The code looks like this:

import { PublicClientApplication, AuthenticationResult } from "@azure/msal-browser";
const msalConfig = {
    auth: {
        clientId: "3d93b935-4bd2-4db1-b06c-911ea505ab36",
        authority: "https://[tenant].b2clogin.com/[tenant].onmicrosoft.com/B2C_1_[Policy]",
        redirectUri: "https://[sitename].powerappsportals.com/signin-aad-b2c_1",
        knownAuthorities: ["[tenant].b2clogin.com"]
    }
};
const msalInstance = new PublicClientApplication(msalConfig);

async function login() {
    try {
        await msalInstance.initialize();
        await msalInstance.handleRedirectPromise();
        const loginRequest = {
            scopes: ["openid"]
        };
        await msalInstance.loginRedirect(loginRequest);
    } catch (error) {
        console.error(error);
    }
}

Replace [tenant], [policy] and [sitename] with values from your own setup.

In the Html we then call the login method when the Sign-In button is clicked:

<button onclick="javascript&colon;login()">Sign-In</button>

Again, the link gets me to the sign-in page where I can successfully sign-in with MFA and all.

But when redirected back to the Power Pages site, it fails with a "Page not found" error.

Trying to navigate to the front page and I am still not signed in.

Any ideas how to configure MSAL with the correct parameters? 

I have tested various suggestions from articles and ChatGPT.

But none seems to work with Power Pages so far.

[OliverRodrigues]

I have done using MSAL before, but it adds extreme complexity to the Portal, it wouldn't be by recommended choice here.

Do you have B2C as the only + default option for authentication? If yes, all you need is to add your button in the home page and redirect to /account/signin

[lfastrup]

Thank you - we also have an option for internal employees to sign-in through our own Azure Entra Id. We do not need an extra button for this. I just wish MSAL and Power Pages would work better together like nice and smoothly. It does IMHO not add extreme complexity. It is literally not more code than I showed above.

The problem seems to arise when Azure B2C attempts to hand over the token to the Power Pages redirect uri. By default B2C uses a mode known as fragments. But Power Pages needs the mode form_post. Have not with any config options been able to get MSAL to use this mode instead of fragments.