Reports

I have added styles to the elements in the default HTML structure of Azure AD B2C, like this:

<div id="api" data-name="Unified" role="main"></div>

I also added a script file inside the body tag as shown below:

<script src="https://gfxvsstorage.blob.core.windows.net/gfxvscontainer/script.js" defer></script>

script.js:

function setupLoginUI() {
    console.log("Entered!");

    const mainContainer = document.getElementById("api");
    const localAccountForm = document.getElementById("localAccountForm");
    const divider = document.querySelector(".continue-with-line");
    const create = document.querySelector(".create");
    const claimsProviderListButtons = document.querySelector(".claims-provider-list-buttons");

    if (mainContainer && localAccountForm && divider && claimsProviderListButtons && create) {
        // Check if the elements are already in the correct order
        const children = Array.from(mainContainer.children);
        const isCorrectOrder =
            children[0] === localAccountForm &&
            children[1] === divider &&
            children[2] === claimsProviderListButtons &&
            children[3] === create;

        if (!isCorrectOrder) {
            mainContainer.innerHTML = '';
            mainContainer.append(localAccountForm);
            mainContainer.append(divider);
            mainContainer.append(claimsProviderListButtons);
            mainContainer.append(create);
        }
    } else if (divider) {
        divider.style.display = 'none';
    }
}

setupLoginUI();

After setting everything up, I tested the login page in Azure AD B2C. The styles were applied correctly, and the script injected the elements properly on the first load. However, after refreshing the page, the DOM manipulations did not apply.

The "Entered!" text is logged in the console, but the formatting of the elements is not applied.

Could someone please provide a solution to resolve this issue?

79230717