[FIXED] How to pass data from popup window to parent window?

Issue

Basically I want to create something like this skyweaver when clicking login it opens sequence app auth flow completes, then in skyweaver we are logged in, How do I mimic that feature.

I'm not sure this was implemented using iframe.

Any help would be appreciated.

Solution

It isn't an iframe, but a popup window with its controls hidden. Those are spawned via window.open. Underneath the hood, the JS loaded inside this window will be using window.postMessage to inform the parent window of certain events -- like passing auth tokens around.

In react, things get a bit easier since you can use Portals to load a React component in your parent app into the popup window. If you google around "react portal popup window" you'll get a lot of guidance on how to do this.

Typically, you wouldn't implement all this yourself as Auth is well-trodden ground with many open source libraries to lean on. The most popular is auth0. But it depends on your requirements, for example, if you need the social login or you are just logging into an existing auth system. If the latter you could layer on the window.open and window.postMessage stuff on top of what you already have.

Answered By - adsy

Answer Checked By - Cary Denson (PHPFixing Admin)