diff --git a/src/context/HubScriptInjector.tsx b/src/context/HubScriptInjector.tsx index 14f5e0c..111e2a9 100644 --- a/src/context/HubScriptInjector.tsx +++ b/src/context/HubScriptInjector.tsx @@ -2,30 +2,34 @@ import PropTypes from 'prop-types'; import { useEffect } from 'react'; import { HubListenerProps } from './RowndProvider'; +import { TargetWindow } from './types'; declare global { interface Window { _rphConfig: any; + rownd: any; } } -function setConfigValue(key: string, value: any) { +function setConfigValue(targetWindow: TargetWindow, key: string, value: any) { if (!value) { return; } - window?._rphConfig.push([key, value]); + targetWindow?._rphConfig.push([key, value]); } type HubScriptInjectorProps = { appKey: string; stateListener: ({ state, api }: HubListenerProps) => void; + useIframeParent?: boolean; hubUrlOverride?: string; locationHash?: string; }; export default function HubScriptInjector({ appKey, + useIframeParent, hubUrlOverride, stateListener, locationHash, @@ -36,48 +40,56 @@ export default function HubScriptInjector({ return; // compat with server-side rendering } - const _rphConfig = (window._rphConfig = window._rphConfig || []); - const baseUrl = - window.localStorage.getItem('rph_base_url_override') || - hubUrlOverride || - 'https://hub.rownd.io'; - _rphConfig.push(['setBaseUrl', baseUrl]); - const d = document, - g = d.createElement('script'), - m = d.createElement('script'), - s = d.getElementsByTagName('script')[0]; - g.noModule = true; - g.async = true; - g.src = baseUrl + '/static/scripts/rph.js'; - m.type = 'module'; - m.async = true; - m.src = baseUrl + '/static/scripts/rph.mjs'; + let targetWindow: typeof window.parent | typeof window = window; + if (useIframeParent) { + targetWindow = window.parent; + window._rphConfig = targetWindow._rphConfig; + } else if (!targetWindow._rphConfig && !targetWindow.rownd) { + const _rphConfig = (window._rphConfig = window._rphConfig || []); + const baseUrl = + window.localStorage.getItem('rph_base_url_override') || + hubUrlOverride || + 'https://hub.rownd.io'; + _rphConfig.push(['setBaseUrl', baseUrl]); + const d = document, + g = d.createElement('script'), + m = d.createElement('script'), + s = d.getElementsByTagName('script')[0]; + g.noModule = true; + g.async = true; + g.src = baseUrl + '/static/scripts/rph.js'; + m.type = 'module'; + m.async = true; + m.src = baseUrl + '/static/scripts/rph.mjs'; - if (s?.parentNode) { - s.parentNode.insertBefore(g, s); - s.parentNode.insertBefore(m, s); - } else { - d.body.appendChild(g); - d.body.appendChild(m); + if (s?.parentNode) { + s.parentNode.insertBefore(g, s); + s.parentNode.insertBefore(m, s); + } else { + d.body.appendChild(g); + d.body.appendChild(m); + } + + setConfigValue(targetWindow, 'setAppKey', appKey); + setConfigValue(targetWindow, 'setLocationHash', locationHash); } - setConfigValue('setAppKey', appKey); - setConfigValue('setStateListener', stateListener); - setConfigValue('setLocationHash', locationHash); + setConfigValue(targetWindow, 'setStateListener', stateListener); - if (window.localStorage.getItem('rph_log_level') === 'debug') { + if (targetWindow.localStorage.getItem('rph_log_level') === 'debug') { console.debug('[debug] rest:', rest); } if (rest) { Object.entries(rest).forEach(([key, value]) => { setConfigValue( + targetWindow, `set${key.charAt(0).toUpperCase() + key.substring(1)}`, value ); }); - if (window.localStorage.getItem('rph_log_level') === 'debug') { + if (targetWindow.localStorage.getItem('rph_log_level') === 'debug') { console.debug('[debug] hubConfig:', window._rphConfig); } } diff --git a/src/context/RowndProvider.tsx b/src/context/RowndProvider.tsx index 2178ee3..4dfa9c0 100644 --- a/src/context/RowndProvider.tsx +++ b/src/context/RowndProvider.tsx @@ -20,6 +20,7 @@ interface RowndProviderProps { apiUrl?: string; rootOrigin?: string; hubUrlOverride?: string; + useIframeParent?: boolean; postRegistrationUrl?: string; children: React.ReactNode; } diff --git a/src/context/types.ts b/src/context/types.ts index 51177f4..efecc1a 100644 --- a/src/context/types.ts +++ b/src/context/types.ts @@ -1,5 +1,7 @@ type AuthLevel = 'instant' | 'guest' | 'unverified' | 'verified'; +export type TargetWindow = typeof window.parent | typeof window; + export type TRowndContext = { requestSignIn: (e?: SignInProps) => void; signOut: () => void;