Any way for React in a popup to communicate with parent window?

Question

I've got an OAuth process that pops up a window, but when I log in, the redirect to the OAuth callback page happens within the popup rather than the parent window (window.opener). This might be a bit hacky, but I'd like a way for the popup window to tell the parent "we're authorized!"

This actually works:

OAuthCallback = React.createClass({
  displayName: 'OAuthCallback',

  render() {
    window.opener.console.log('hello parent window');

    return (
      <div>
        Hi, OAuth is process is done.
      </div>
    )
  }
});

But I'm wondering if there's some way I can have the popup window tell the parent window to call a prop function, e.g. this.props.oauthSucceeded().

Answer 1

Eelke's suggestion was spot on.

I used window.postMessage() in the child window, then window.close(), then added a window.addEventListener('message', function(){}) in the componentDidMount method of of main/master component.

Check out https://facebook.github.io/react/tips/dom-event-listeners.html for more information!

Answer 2

When you are unable to establish any parent-child or sibling relationship between the components, React recommends setting up an event system.

For communication between two components that don't have a parent-child relationship, you can set up your own global event system. Subscribe to events in componentDidMount(), unsubscribe in componentWillUnmount(), and call setState() when you receive an event. Flux pattern is one of the possible ways to arrange this.

see https://facebook.github.io/react/tips/communicate-between-components.html

Have a look at window.postMessage for cross window communication (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)