Cross domain window.postMessage from child to parent in an iframe?

I have a parent window embedded in an iframe that opens up a child window on a button click. This is for a different domain. I need to figure out how to communicate from the child window so I can redirect the parent window once the user logs into the child popup.

The parent looks like this:

<div>
    <button data-cy="submit" data-loading-disable title="Continue" type="submit" onclick="window.open('{{ url }}', 'login', 'popup=true,rel=opener', 'width=300,height=300')"
    id="submit-button"
>
</div>

<script>
    window.addEventListener("message",
        (event) => {
            console.log("got here")
            window.location.href=event.data;
        }
    )

</script>

The child window does this when it opens:

<script>
function redirectParent(url) {
  parent.postMessage(url, "*");
}

if ("{{ redirect }}") {
  redirectParent("{{ redirect }}");
}


</script>

When I run everything, nothing seems to happen. No console logs and no redirect. Any help would be appreciated.

UPDATE: Might be worth mentioning that the child window is going throw an sso flow so there are a few redirects happening within that window.