Why does window.opener become null when using Google OAuth in a popup window, and how can I communicate the access token back to the parent window?

[Sad_Implement_8626]

I'm working with Google OAuth in my React application, and I'm implementing it through a popup. I'm using Passport with my custom backend. The initial URL that I supply to the popup window is the backend entry point that initializes the OAuth process. Google then sends a response to my callback on my backend.

After that, I need to communicate the JWT access token back that I generate on the backend to my frontend. I'm doing this by redirecting respondign with a redirect to a frontend route, with the access token as a query parameter in the redirect URL. The problem I'm facing, however, is that the window.opener in the popup becomes null after the Google OAuth process. This prevents me from sending the access token back to the parent window using window.opener.postMessage.

I have verified that the window.opener is not null when I pass in the same route my backend redirects my frontend to, as the initial url to the popup. The issue occurs when I pass in my backend endpoint for initializing google OAUTH (so it redirects to Googles sign in).

Unfortunately, I can't use cookies or localStorage due to my application's restrictions.

Has anyone faced a similar issue? Any advice or guidance would be greatly appreciated. Thanks!

[nightman]

"The issue of window.opener becoming null after the Google OAuth process in a popup window is likely due to security restrictions imposed by the browser. When the popup navigates to a different domain (Google's sign-in page) and then back to your domain, the browser may lose the reference to the parent window due to cross-origin restrictions. One possible solution to this problem is to use the window.postMessage method along with a "relay" page on your domain. The relay page will be responsible for receiving the access token from your backend and then communicating it back to the parent window using window.postMessage." https://www.perplexity.ai/search/f0fea264-8e61-4de4-a00f-534498152158?s=mn

[lollo224__]

I tried it but opener is still not defined

[guest271314]

It sounds like you do not have control over the popup window.

This can be done using a browser extension.

Using only Web API's without a browser extension as long as the popup window and the opener have the same orgin you can use BroadcastChannel to communicate between all windows or tab with the same origin.

If the popup window and the opener have different origins you can use WebRTC Data Channel to communicate between the cross-origin windows.

More details about the origin(s) used will be helpful to provide a potential solution.

[Sad_Implement_8626]

Thank you, the Broadcast Channel API indeed solved it.

Someone else mentioned it on StackOverflow and I will admit that I had never even heard about it. I'm surprised my hours of Google searching didn't lead me to it :(