I’m currently working on integrating my app with HubSpot. This new integration will be available for users throughout using public app integration, allowing them to access their HubSpot information through our platform.
The app is functioning well, but I’m encountering a small issue in the authentication flow. When a user attempts to enable the integration inside the platform, we open a popup with the URL (https://app.hubspot.com/oauth/authorize?client_id…). For users who haven’t authenticated (already authenticated works very well) with HubSpot yet, when the login page is opened, it executes a script (checkSafeOpener.ts) that sets a window.opener = null.
Our entire flow was created using the web API messageEvents of JavaScript. Since the login page removes the window.opener object created, The flow doesn’t work as expected.
Does anyone know if there is a workaround for this script?
Is there a way or other alternative page to skip this script?
I’m currently working on integrating my app with HubSpot. This new integration will be available for users throughout using public app integration, allowing them to access their HubSpot information through our platform.
The app is functioning well, but I’m encountering a small issue in the authentication flow. When a user attempts to enable the integration inside the platform, we open a popup with the URL (https://app.hubspot.com/oauth/authorize?client_id…). For users who haven’t authenticated (already authenticated works very well) with HubSpot yet, when the login page is opened, it executes a script (checkSafeOpener.ts) that sets a window.opener = null.
Our entire flow was created using the web API messageEvents of JavaScript. Since the login page removes the window.opener object created, The flow doesn’t work as expected.
Does anyone know if there is a workaround for this script?
Is there a way or other alternative page to skip this script?
One viable solution to this problem is to shift your strategy from using window.opener to employing the window.postMessage() method for cross-origin communication. This method is designed to allow safe communication between windows or frames that do not share the same origin, bypassing the limitations imposed by the modification of the window.opener property. When implementing window.postMessage(), you will need to carefully manage the message event listener to ensure it correctly handles the authentication tokens or other relevant information passed from the popup window.
Alternatively, reconsidering the use of popups for the OAuth flow and moving towards a full-page redirect approach can also circumvent this issue.
This method might offer a more straightforward flow and is less susceptible to being affected by security measures like the one you’ve encountered. While it changes the user experience slightly, it maintains the integrity of the authentication process without relying on window.opener, thereby avoiding the script’s interference.