How to send data from parent(outlook add-in) window to a pop up window in javascript?

Question

I'm trying to send data from outlook add-in window to a pop up window. I have tried postMessage in several different ways, but somehow the pop up window is not able to listen to the message successfully.
window.addEventListener('message', function (event) { doesnt not even get triggered. it just skips over this.

I don't know what I'm doing wrong.

function makeApiCallAndAuthenticate() {
    fetch(Office.context.roamingSettings.get("userInput") + "api/.configuration?tenantId=")
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(response => {
            const idpEnabled = response.IdentityProvider && response.IdentityProvider.Enabled;
            sessionStorage.setItem('IdPEnabled', idpEnabled);

            if (idpEnabled) {
                const endpoint = response.IdentityProvider.Endpoint;
                const webAppId = response.IdentityProvider.WebAppID;
                openIdpPopup(endpoint, webAppId);
            } else if (response.BasicAuthentication && response.BasicAuthentication.Enabled) {
                window.location.href = "ep-collaborate-login.html";
            } else {
                console.log("IdP and Basic Auth are not enabled.");
            }
        })
        .catch(error => {
            console.error("Error making API call:", error);
        });
}

function openIdpPopup(endpoint, webAppId) {
    const popupWidth = 500;
    const popupHeight = 400;
    const popupLeft = (window.screen.width - popupWidth) / 2;
    const popupTop = (window.screen.height - popupHeight) / 2;

    const popup = window.open('ep-collaborate-idp-login.html', '_blank', `width=${popupWidth},height=${popupHeight},left=${popupLeft},top=${popupTop}`);
    console.log(endpoint);
    console.log(webAppId);

    if (popup) {
        const message = {
        endpoint: endpoint,
        webAppId: webAppId
    };
        popup.postMessage(message, 'https://localhost:44343');

        window.addEventListener('message', function (event) {
            const data = event.data;

            if (data && data.token && data.email) {
                sessionStorage.setItem('idp_token', data.token);
                sessionStorage.setItem('email', data.email);
                console.log('Token received:', data.token);
                console.log('Email received:', data.email);
                popup.close();
                window.location.href = "ep-col-apicalls.html";
            }
        });
    } else {
        console.error('Failed to open pop-up window. Ensure pop-ups are not blocked by the browser.');
    }
}

The above is the parent window code, where I first check if i need to open the pop up or not. Then I'm sending data to the pop up after opening it.

This is the pop up window code, and it does not even get triggered. It just gets skipped. Breakpoints do not get hit. I even tried checking the origin , it doesn't work

if (event.origin === 'https://outlook.office.com') {
    console.log('Message received in pop-up window:', even.data);
}

   document.addEventListener('DOMContentLoaded', function () {

    console.log('DOM is ready');
     window.addEventListener('message', function (event) {
        const data = event.data;
        console.log('message');
       if (data && data.endpoint && data.webAppId) {
           const endpoint = data.endpoint;
           const webAppId = data.webAppId;

           console.log('Endpoint received:', endpoint);
           console.log('Client ID received:', webAppId);

        } else {
            console.error('Received invalid data from parent window:', data);
        }
});
...
...
......