Something Cool: Popup Callbacks

Problem

Imagine that you need to direct a user to a different web page/domain and would like to know when they’ve completed whatever it is that you needed them to do.

Background

I’m currently working on a WordPress plugin which requires OAuth so that I can allow them to do, well, stuff! (I don’t think I can disclose that right now…) While I could account for one or two redirect URIs, it would be IMPOSSIBLE for me to handle that for EVERY DOMAIN THAT MY WORDPRESS PLUG IN IS RUNNING ON!!!!

Solution

What I opted to do in the plugin is to open a page that I host when a user clicks on the OAuth button.
const newWindow = window.open(‘https://somesite.com/oauth’, ‘oauth’, ‘height=720,width=480’);

As soon as I create the new window I’m able to extend the current window object by adding a function:
window.popUpCallback = (code) => {
newWindow.close();
console.log(code)
};

Now on my pop up that will handle the authorization, after it gets the authorization code it can call the function I added to the window:
window.opener.popUpCallback(value)

What happened here is that my popup window will call the popUpCallback function that I added to the window that opened this current (new) window.
Looking back at my popUpCallback function you see that I close the newWindow (the popup) and then console.log the code I got back. However you can do anything you want now. What you’ve done is passed a value between windows!
For me this was perfect because now I only need have one redirect URI no matter where this plugin is run, but maybe this will be useful for you for some other reason.
Enjoy!

Link: https://dev.to/michaelsolati/something-cool-popup-callbacks-2jfo