Issue with Passing Azure B2C Authentication Token to Embedded Power Pages Site

Question

Hi everyone,

We have a main site built with React and a Power Pages site. The Power Pages site is embedded in the main site via an iframe. The main site uses Azure B2C for authentication, and we want the Power Pages site to automatically log in using the same Azure B2C token.

I've implemented passing the authentication token from the main website to the embedded Power Pages site using the postMessage API. Here’s a brief summary of the approach I’ve followed:

---

Main Website Code (React):

iframe.contentWindow.postMessage({ authToken: authToken }, 'https://powerpages.example.com');

---

Power Pages Custom JavaScript:

window.addEventListener('message', function(event) {
    if (event.origin === 'https://mainwebsite.com') {
        var authToken = event.data.authToken;
        // Process token here
    }
});

---

Despite implementing this, the token is still not being passed correctly to the Power Pages iframe. Has anyone encountered a similar issue or have any suggestions on what might be going wrong?

Thanks in advance for your help!