@dynamic-labs/sdk-react-core 0.18.5 → 0.18.6

package/CHANGELOG.md

@@ -1,4 +1,12 @@
 
+### [0.18.6](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.5...v0.18.6) (2023-08-21)
+
+
+### Bug Fixes
+
+* detect when user closes oauth window when linking social account  ([#3063](https://github.com/dynamic-labs/DynamicAuth/issues/3063)) ([1afa8f7](https://github.com/dynamic-labs/DynamicAuth/commit/1afa8f7b1c82759c90554fd4395d11779023f1ff))
+* sync connected wallets with wagmi client ([#3072](https://github.com/dynamic-labs/DynamicAuth/issues/3072)) ([570c83d](https://github.com/dynamic-labs/DynamicAuth/commit/570c83dd426862a2151c9858824a34d6b5133588))
+
 ### [0.18.5](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.4...v0.18.5) (2023-08-19)
 
 

package/package.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "0.18.5";
+var version = "0.18.6";
 var dependencies = {
 	"react-focus-lock": "2.9.2",
 	"@dynamic-labs/iconic": "0.1.23",

package/package.js

@@ -1,4 +1,4 @@
-var version = "0.18.5";
+var version = "0.18.6";
 var dependencies = {
 	"react-focus-lock": "2.9.2",
 	"@dynamic-labs/iconic": "0.1.23",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "0.18.5",
+  "version": "0.18.6",
   "repository": {
     "type": "git",
     "url": "https://github.com/dynamic-labs/DynamicAuth.git",
@@ -16,13 +16,13 @@
     "formik": "2.2.9",
     "qrcode": "1.5.1",
     "ethers": "5.7.2",
-    "@dynamic-labs/logger": "0.18.5",
-    "@dynamic-labs/multi-wallet": "0.18.5",
-    "@dynamic-labs/rpc-providers": "0.18.5",
-    "@dynamic-labs/types": "0.18.5",
-    "@dynamic-labs/utils": "0.18.5",
-    "@dynamic-labs/wallet-book": "0.18.5",
-    "@dynamic-labs/wallet-connector-core": "0.18.5",
+    "@dynamic-labs/logger": "0.18.6",
+    "@dynamic-labs/multi-wallet": "0.18.6",
+    "@dynamic-labs/rpc-providers": "0.18.6",
+    "@dynamic-labs/types": "0.18.6",
+    "@dynamic-labs/utils": "0.18.6",
+    "@dynamic-labs/wallet-book": "0.18.6",
+    "@dynamic-labs/wallet-connector-core": "0.18.6",
     "eventemitter3": "5.0.1"
   },
   "devDependencies": {

package/src/lib/context/DynamicContext/DynamicContext.cjs

@@ -94,6 +94,7 @@ var useVerificationInProgress = require('./hooks/useVerificationInProgress/useVe
 var useCustomerCallbacks = require('./useCustomerCallbacks/useCustomerCallbacks.cjs');
 var useCustomerAuthFlowCallbacks = require('./useCustomerCallbacks/useCustomerAuthFlowCallbacks.cjs');
 var validators = require('./validators.cjs');
+var internalEvents = require('./internalEvents/internalEvents.cjs');
 
 const PUBLIC_PROJECT_LIVE_ENVIRONMENT_ID = '2762a57b-faa4-41ce-9f16-abff9300e2c9';
 const EMPTY_INITIAL_USER = undefined;
@@ -101,6 +102,9 @@ const DynamicContext = React.createContext(undefined);
 const DynamicContextProvider = ({ children, theme, settings, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const { accessDeniedMessagePrimary, accessDeniedMessageSecondary, accessDeniedButton, apiBaseUrl, walletsByChain, cssOverrides, defaultNumberOfWalletsToShow = values.DEFAULT_NUMBER_OF_WALLETS_TO_SHOW, flowNetwork, initialAuthenticationMode = 'connect-and-sign', debugError = false, displaySiweStatement = true, newToWeb3WalletChainMap, enableVisitTrackingOnConnectOnly = true, environmentId, localStorageSuffix, eventsCallbacks, evmNetworks, walletsFilter, logLevel = 'WARN', notInTheListImageUrl, onboardingImageUrl, policiesConsentInnerComponent, customPrivacyPolicy, privacyPolicyUrl, signWithEmailWalletName, socialMediaLinkText, socialMediaIconUrl, socialMediaUrl, customTermsOfServices, termsOfServiceUrl, toolkitEnabled, siweStatement, shadowDOMEnabled = true, walletConnectors: walletConnectorsProp, socialProvidersFilter, } = settings;
+    // The following event related methods are temporary and should be removed after QNTM-180 is done
+    // ============ START REMOVE AFTER QNTM-180 ============
+    const internalEventsRef = React.useRef(internalEvents.getInternalEvents());
     let { walletConnectV1Bridge, appLogoUrl = 'https://demo.dynamic.xyz/assets/dynamic-logo.svg', appName = 'Dynamic Example', } = settings;
     if (!environmentId) {
         throw new utils.MissingEnvironmentIdError();
@@ -179,7 +183,7 @@ const DynamicContextProvider = ({ children, theme, settings, }) => {
         walletUiUtils,
     });
     const [authMode, setAuthMode] = useLocalStorage.useLocalStorage(localStorage$1.AUTH_MODE, initialAuthenticationMode);
-    const { clearPrimaryWalletId, primaryWalletId, setPrimaryWalletId } = usePrimaryWalletId.usePrimaryWalletId();
+    const { clearPrimaryWalletId, primaryWalletId, setPrimaryWalletId } = usePrimaryWalletId.usePrimaryWalletId(internalEventsRef.current);
     const { connectWallet, removeConnectedWalletsInfo, connectedWalletsInfo, connectedWallet, getConnectedWalletById, connectedWallets, unlinkConnectedWallet, refreshConnectedWallet, } = useConnectWallet.useConnectWallet({
         authMode,
         clearPrimaryWalletId,
@@ -446,6 +450,7 @@ const DynamicContextProvider = ({ children, theme, settings, }) => {
             handleUnlinkWallet: authMode === 'connect-only'
                 ? unlinkConnectedWallet
                 : handleUnlinkWallet,
+            internalEvents: internalEventsRef,
             isAuthenticated,
             isBridgeFlow,
             isFullyConnected,

package/src/lib/context/DynamicContext/DynamicContext.js

@@ -1,6 +1,6 @@
 import { __awaiter } from '../../../../_virtual/_tslib.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { createContext, useState, useEffect, useCallback, useMemo } from 'react';
+import { createContext, useRef, useState, useEffect, useCallback, useMemo } from 'react';
 import { ICONIC_SPRITE_URL } from '@dynamic-labs/iconic';
 import { MissingEnvironmentIdError } from '@dynamic-labs/utils';
 import { useWalletBookCdn, getWalletBookCdnUrl, WalletBookContextProvider } from '@dynamic-labs/wallet-book';
@@ -90,6 +90,7 @@ import { useVerificationInProgress } from './hooks/useVerificationInProgress/use
 import { useCustomerCallbacks } from './useCustomerCallbacks/useCustomerCallbacks.js';
 import { useCustomerAuthFlowCallbacks } from './useCustomerCallbacks/useCustomerAuthFlowCallbacks.js';
 import { validateAuthUser } from './validators.js';
+import { getInternalEvents } from './internalEvents/internalEvents.js';
 
 const PUBLIC_PROJECT_LIVE_ENVIRONMENT_ID = '2762a57b-faa4-41ce-9f16-abff9300e2c9';
 const EMPTY_INITIAL_USER = undefined;
@@ -97,6 +98,9 @@ const DynamicContext = createContext(undefined);
 const DynamicContextProvider = ({ children, theme, settings, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const { accessDeniedMessagePrimary, accessDeniedMessageSecondary, accessDeniedButton, apiBaseUrl, walletsByChain, cssOverrides, defaultNumberOfWalletsToShow = DEFAULT_NUMBER_OF_WALLETS_TO_SHOW, flowNetwork, initialAuthenticationMode = 'connect-and-sign', debugError = false, displaySiweStatement = true, newToWeb3WalletChainMap, enableVisitTrackingOnConnectOnly = true, environmentId, localStorageSuffix, eventsCallbacks, evmNetworks, walletsFilter, logLevel = 'WARN', notInTheListImageUrl, onboardingImageUrl, policiesConsentInnerComponent, customPrivacyPolicy, privacyPolicyUrl, signWithEmailWalletName, socialMediaLinkText, socialMediaIconUrl, socialMediaUrl, customTermsOfServices, termsOfServiceUrl, toolkitEnabled, siweStatement, shadowDOMEnabled = true, walletConnectors: walletConnectorsProp, socialProvidersFilter, } = settings;
+    // The following event related methods are temporary and should be removed after QNTM-180 is done
+    // ============ START REMOVE AFTER QNTM-180 ============
+    const internalEventsRef = useRef(getInternalEvents());
     let { walletConnectV1Bridge, appLogoUrl = 'https://demo.dynamic.xyz/assets/dynamic-logo.svg', appName = 'Dynamic Example', } = settings;
     if (!environmentId) {
         throw new MissingEnvironmentIdError();
@@ -175,7 +179,7 @@ const DynamicContextProvider = ({ children, theme, settings, }) => {
         walletUiUtils,
     });
     const [authMode, setAuthMode] = useLocalStorage(AUTH_MODE, initialAuthenticationMode);
-    const { clearPrimaryWalletId, primaryWalletId, setPrimaryWalletId } = usePrimaryWalletId();
+    const { clearPrimaryWalletId, primaryWalletId, setPrimaryWalletId } = usePrimaryWalletId(internalEventsRef.current);
     const { connectWallet, removeConnectedWalletsInfo, connectedWalletsInfo, connectedWallet, getConnectedWalletById, connectedWallets, unlinkConnectedWallet, refreshConnectedWallet, } = useConnectWallet({
         authMode,
         clearPrimaryWalletId,
@@ -442,6 +446,7 @@ const DynamicContextProvider = ({ children, theme, settings, }) => {
             handleUnlinkWallet: authMode === 'connect-only'
                 ? unlinkConnectedWallet
                 : handleUnlinkWallet,
+            internalEvents: internalEventsRef,
             isAuthenticated,
             isBridgeFlow,
             isFullyConnected,

package/src/lib/context/DynamicContext/internalEvents/index.d.ts

@@ -0,0 +1,2 @@
+export { getInternalEvents } from './internalEvents';
+export type { InternalEventEmitter } from './internalEvents';

package/src/lib/context/DynamicContext/internalEvents/internalEvents.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var EventEmitter = require('eventemitter3');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var EventEmitter__default = /*#__PURE__*/_interopDefaultLegacy(EventEmitter);
+
+// This file is temporary and should be removed after QNTM-180 is done
+const getInternalEvents = () => new EventEmitter__default["default"]();
+
+exports.getInternalEvents = getInternalEvents;

package/src/lib/context/DynamicContext/internalEvents/internalEvents.d.ts

@@ -0,0 +1,8 @@
+import EventEmitter from 'eventemitter3';
+/** Maps internal event names to their listeners */
+export type InternalEventMap = {
+    emailVerificationResult: (param: boolean) => void;
+    clearPrimaryWallet: () => void;
+};
+export type InternalEventEmitter = EventEmitter<InternalEventMap>;
+export declare const getInternalEvents: () => InternalEventEmitter;

package/src/lib/context/DynamicContext/internalEvents/internalEvents.js

@@ -0,0 +1,6 @@
+import EventEmitter from 'eventemitter3';
+
+// This file is temporary and should be removed after QNTM-180 is done
+const getInternalEvents = () => new EventEmitter();
+
+export { getInternalEvents };

package/src/lib/context/DynamicContext/types/index.d.ts

@@ -1,4 +1,4 @@
-import { Dispatch, ReactNode, SetStateAction } from 'react';
+import { Dispatch, MutableRefObject, ReactNode, SetStateAction } from 'react';
 import { DynamicJwt, NameServiceData, ProjectSettings } from '@dynamic-labs/sdk-api';
 import { NetworkConfigurationMap, SocialProviderFilter, WalletUiUtils } from '@dynamic-labs/types';
 import { Chain, FetchPublicAddressOpts, WalletConnector } from '@dynamic-labs/wallet-connector-core';
@@ -8,6 +8,7 @@ import { MultiWalletWidgetStateSetter } from '../../../utils/hooks/multiWallet';
 import { ThemeData, ThemeSetting } from '../../ThemeContext';
 import { DisplayOrder, SetDisplayOrderPriority } from '../hooks';
 import { Callback } from '../useCustomerCallbacks';
+import { InternalEventEmitter } from '../internalEvents';
 export type ChainsToConnect = {
     chain: Chain;
     numberOfWallets: number;
@@ -143,4 +144,6 @@ export interface IDynamicContext {
     legacyIsVerifying: boolean;
     /** Legacy setter for legacyIsVerifying */
     setLegacyIsVerifying: Dispatch<SetStateAction<boolean>>;
+    /** Temporary workaround, until QNTM-180 is complete */
+    internalEvents: MutableRefObject<InternalEventEmitter>;
 }

package/src/lib/context/DynamicContext/useDynamicContext.cjs

@@ -11,7 +11,7 @@ const useDynamicContext = () => {
     if (context === undefined) {
         throw new Error('useDynamicContext must be used within a DynamicContextProvider');
     }
-    const { accountSwitchState, authMode, authToken, awaitingSignatureState, connectedWallets, getNameService, handleLogOut, handleUnlinkWallet, isAuthenticated, isFullyConnected, isVerificationInProgress, linkedWallets, loadingNetwork, loginWithEmail, multiWalletWidgetState, network, networkConfigurations, qrcodeUri, rpcProviders, sdkHasLoaded, secondaryWallets, setLogInWithEmail, setMultiWalletWidgetState, setNetwork, setPrimaryWallet, setShowAuthFlow, setShowDynamicUserProfile, setShowQrcodeModal, shadowDOMEnabled, showAuthFlow, showQrcodeModal, user, walletConnector, wallets, walletsByChain, walletsToConnectByChain, primaryWallet, setShowBridgeWidget, sendWagmiSettings, } = context;
+    const { accountSwitchState, authMode, authToken, awaitingSignatureState, connectedWallets, getNameService, handleLogOut, handleUnlinkWallet, isAuthenticated, isFullyConnected, isVerificationInProgress, linkedWallets, loadingNetwork, loginWithEmail, multiWalletWidgetState, network, networkConfigurations, qrcodeUri, rpcProviders, sdkHasLoaded, secondaryWallets, setLogInWithEmail, setMultiWalletWidgetState, setNetwork, setPrimaryWallet, setShowAuthFlow, setShowDynamicUserProfile, setShowQrcodeModal, shadowDOMEnabled, showAuthFlow, showQrcodeModal, user, walletConnector, wallets, walletsByChain, walletsToConnectByChain, primaryWallet, setShowBridgeWidget, sendWagmiSettings, internalEvents, } = context;
     return {
         accountSwitchState,
         authMode,
@@ -21,6 +21,7 @@ const useDynamicContext = () => {
         getNameService,
         handleLogOut,
         handleUnlinkWallet,
+        internalEvents,
         isAuthenticated,
         isFullyConnected,
         isVerificationInProgress,

package/src/lib/context/DynamicContext/useDynamicContext.d.ts

@@ -1,3 +1,3 @@
 import { IDynamicContext } from './types';
-export type UseDynamicContext = Pick<IDynamicContext, 'accountSwitchState' | 'authMode' | 'authToken' | 'awaitingSignatureState' | 'connectedWallets' | 'getNameService' | 'handleLogOut' | 'handleUnlinkWallet' | 'isAuthenticated' | 'isFullyConnected' | 'isVerificationInProgress' | 'linkedWallets' | 'loadingNetwork' | 'loginWithEmail' | 'multiWalletWidgetState' | 'network' | 'networkConfigurations' | 'primaryWallet' | 'qrcodeUri' | 'rpcProviders' | 'sdkHasLoaded' | 'secondaryWallets' | 'setLogInWithEmail' | 'setMultiWalletWidgetState' | 'setNetwork' | 'setPrimaryWallet' | 'setShowAuthFlow' | 'setShowDynamicUserProfile' | 'setShowQrcodeModal' | 'shadowDOMEnabled' | 'showAuthFlow' | 'showQrcodeModal' | 'user' | 'walletConnector' | 'wallets' | 'walletsByChain' | 'walletsToConnectByChain' | 'setShowBridgeWidget' | 'sendWagmiSettings'>;
+export type UseDynamicContext = Pick<IDynamicContext, 'accountSwitchState' | 'authMode' | 'authToken' | 'awaitingSignatureState' | 'connectedWallets' | 'getNameService' | 'handleLogOut' | 'handleUnlinkWallet' | 'isAuthenticated' | 'isFullyConnected' | 'isVerificationInProgress' | 'linkedWallets' | 'loadingNetwork' | 'loginWithEmail' | 'multiWalletWidgetState' | 'network' | 'networkConfigurations' | 'primaryWallet' | 'qrcodeUri' | 'rpcProviders' | 'sdkHasLoaded' | 'secondaryWallets' | 'setLogInWithEmail' | 'setMultiWalletWidgetState' | 'setNetwork' | 'setPrimaryWallet' | 'setShowAuthFlow' | 'setShowDynamicUserProfile' | 'setShowQrcodeModal' | 'shadowDOMEnabled' | 'showAuthFlow' | 'showQrcodeModal' | 'user' | 'walletConnector' | 'wallets' | 'walletsByChain' | 'walletsToConnectByChain' | 'setShowBridgeWidget' | 'sendWagmiSettings' | 'internalEvents'>;
 export declare const useDynamicContext: () => UseDynamicContext;

package/src/lib/context/DynamicContext/useDynamicContext.js

@@ -7,7 +7,7 @@ const useDynamicContext = () => {
     if (context === undefined) {
         throw new Error('useDynamicContext must be used within a DynamicContextProvider');
     }
-    const { accountSwitchState, authMode, authToken, awaitingSignatureState, connectedWallets, getNameService, handleLogOut, handleUnlinkWallet, isAuthenticated, isFullyConnected, isVerificationInProgress, linkedWallets, loadingNetwork, loginWithEmail, multiWalletWidgetState, network, networkConfigurations, qrcodeUri, rpcProviders, sdkHasLoaded, secondaryWallets, setLogInWithEmail, setMultiWalletWidgetState, setNetwork, setPrimaryWallet, setShowAuthFlow, setShowDynamicUserProfile, setShowQrcodeModal, shadowDOMEnabled, showAuthFlow, showQrcodeModal, user, walletConnector, wallets, walletsByChain, walletsToConnectByChain, primaryWallet, setShowBridgeWidget, sendWagmiSettings, } = context;
+    const { accountSwitchState, authMode, authToken, awaitingSignatureState, connectedWallets, getNameService, handleLogOut, handleUnlinkWallet, isAuthenticated, isFullyConnected, isVerificationInProgress, linkedWallets, loadingNetwork, loginWithEmail, multiWalletWidgetState, network, networkConfigurations, qrcodeUri, rpcProviders, sdkHasLoaded, secondaryWallets, setLogInWithEmail, setMultiWalletWidgetState, setNetwork, setPrimaryWallet, setShowAuthFlow, setShowDynamicUserProfile, setShowQrcodeModal, shadowDOMEnabled, showAuthFlow, showQrcodeModal, user, walletConnector, wallets, walletsByChain, walletsToConnectByChain, primaryWallet, setShowBridgeWidget, sendWagmiSettings, internalEvents, } = context;
     return {
         accountSwitchState,
         authMode,
@@ -17,6 +17,7 @@ const useDynamicContext = () => {
         getNameService,
         handleLogOut,
         handleUnlinkWallet,
+        internalEvents,
         isAuthenticated,
         isFullyConnected,
         isVerificationInProgress,

package/src/lib/utils/hooks/usePrimaryWalletId/usePrimaryWalletId.cjs

@@ -20,11 +20,15 @@ require('../../../shared/consts/index.cjs');
 var primaryWalletIdValidator = require('../useWalletConnectors/utils/primaryWalletIdValidator/primaryWalletIdValidator.cjs');
 require('@dynamic-labs/multi-wallet');
 
-const usePrimaryWalletId = () => {
-    const [primaryWalletId, setPrimaryWalletIdState, clearPrimaryWalletId] = useLocalStorage.useLocalStorage(localStorage.PRIMARY_WALLET_ID, undefined, primaryWalletIdValidator.primaryWalletIdValidator);
+const usePrimaryWalletId = (internalEvents) => {
+    const [primaryWalletId, setPrimaryWalletIdState, clearPrimaryWalletIdStorage,] = useLocalStorage.useLocalStorage(localStorage.PRIMARY_WALLET_ID, undefined, primaryWalletIdValidator.primaryWalletIdValidator);
     const setPrimaryWalletId = React.useCallback((walletId) => {
         setPrimaryWalletIdState(walletId);
     }, [setPrimaryWalletIdState]);
+    const clearPrimaryWalletId = () => {
+        clearPrimaryWalletIdStorage();
+        internalEvents.emit('clearPrimaryWallet');
+    };
     return {
         clearPrimaryWalletId,
         primaryWalletId,

package/src/lib/utils/hooks/usePrimaryWalletId/usePrimaryWalletId.d.ts

@@ -1,4 +1,5 @@
-export declare const usePrimaryWalletId: () => {
+import { InternalEventEmitter } from '../../../context/DynamicContext/internalEvents';
+export declare const usePrimaryWalletId: (internalEvents: InternalEventEmitter) => {
     clearPrimaryWalletId: () => void;
     primaryWalletId: string | undefined;
     setPrimaryWalletId: (walletId: string) => void;

package/src/lib/utils/hooks/usePrimaryWalletId/usePrimaryWalletId.js

@@ -16,11 +16,15 @@ import '../../../shared/consts/index.js';
 import { primaryWalletIdValidator } from '../useWalletConnectors/utils/primaryWalletIdValidator/primaryWalletIdValidator.js';
 import '@dynamic-labs/multi-wallet';
 
-const usePrimaryWalletId = () => {
-    const [primaryWalletId, setPrimaryWalletIdState, clearPrimaryWalletId] = useLocalStorage(PRIMARY_WALLET_ID, undefined, primaryWalletIdValidator);
+const usePrimaryWalletId = (internalEvents) => {
+    const [primaryWalletId, setPrimaryWalletIdState, clearPrimaryWalletIdStorage,] = useLocalStorage(PRIMARY_WALLET_ID, undefined, primaryWalletIdValidator);
     const setPrimaryWalletId = useCallback((walletId) => {
         setPrimaryWalletIdState(walletId);
     }, [setPrimaryWalletIdState]);
+    const clearPrimaryWalletId = () => {
+        clearPrimaryWalletIdStorage();
+        internalEvents.emit('clearPrimaryWallet');
+    };
     return {
         clearPrimaryWalletId,
         primaryWalletId,

package/src/lib/utils/hooks/useSocialAccounts/useSocialAccounts.cjs

@@ -41,13 +41,17 @@ const socialProviders = [
 // pkce params are only required for twitter and break if added for other providers, like google
 // so we should only add provider that support pkce to this list
 const providersRequiringPkce = ['twitter', 'github'];
-const useSocialAccounts = () => {
+const providersWithoutWindowOpenerRefence = ['twitter'];
+const useSocialAccounts = ({ sessionTimeout } = {
+    sessionTimeout: 10000,
+}) => {
     var _a;
     const { environmentId, user, projectSettings, onboardingOnlyJwt } = useInternalDynamicContext.useInternalDynamicContext();
     const { updateUserProfileByJWT } = useUpdateUserProfileByJWTCallback.useUpdateUserProfileByJWTCallback();
     const [isProcessing, setIsProcessing] = React.useState(false);
     const [error, setError] = React.useState();
     const providersWaitingOauthMessages = React.useRef({});
+    const authWindowInterval = React.useRef();
     const userJwt = (_a = getAuthToken.getAuthToken()) !== null && _a !== void 0 ? _a : onboardingOnlyJwt;
     const oauthProviders = index.getEnabledOAuthProviders(projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers);
     const verifiedOAuthCredentialsMap = React.useMemo(() => {
@@ -116,6 +120,7 @@ const useSocialAccounts = () => {
     };
     const linkSocialAccount = (provider) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         var _b;
+        clearInterval(authWindowInterval.current);
         setError(undefined);
         setIsProcessing(true);
         // invalid linking request
@@ -124,7 +129,13 @@ const useSocialAccounts = () => {
         }
         const state = randomString.randomString(8);
         const verifier = randomString.randomString(43);
+        const clearListeners = () => {
+            removeOAuthIFrame();
+            window.removeEventListener('message', handleAuthWindowMessage);
+            providersWaitingOauthMessages.current = Object.assign(Object.assign({}, providersWaitingOauthMessages.current), { [provider]: false });
+        };
         const handleAuthWindowMessage = (event) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+            var _c;
             const message = event.data;
             const isAuthorizationMessage = (message === null || message === void 0 ? void 0 : message.type) === 'authorization_response';
             if (isAuthorizationMessage) {
@@ -135,9 +146,11 @@ const useSocialAccounts = () => {
             if (!isValidMessage) {
                 return;
             }
-            removeOAuthIFrame();
-            window.removeEventListener('message', handleAuthWindowMessage);
-            providersWaitingOauthMessages.current = Object.assign(Object.assign({}, providersWaitingOauthMessages.current), { [provider]: false });
+            if (!((_c = providersWaitingOauthMessages.current) === null || _c === void 0 ? void 0 : _c[provider])) {
+                handleError(`Linking ${provider} account session timeout.`);
+                return;
+            }
+            clearListeners();
             const { code, error } = message;
             if (error && error !== 'undefined') {
                 handleError(`Failed to link ${provider} social account: ${error}`);
@@ -183,10 +196,40 @@ const useSocialAccounts = () => {
             window.addEventListener('message', handleAuthWindowMessage);
             providersWaitingOauthMessages.current = Object.assign(Object.assign({}, providersWaitingOauthMessages.current), { [provider]: true });
         }
-        window.open(oauthLoginUrl, '_blank', 'width=500,height=600');
+        const authWindow = window.open(oauthLoginUrl, '_blank', 'width=500,height=600');
+        if (!providersWithoutWindowOpenerRefence.includes(provider)) {
+            // For provider that support window.opener, we need to clear all states/listeners when the window is closed
+            authWindowInterval.current = setInterval(() => {
+                var _a;
+                if (!(authWindow === null || authWindow === void 0 ? void 0 : authWindow.closed)) {
+                    return;
+                }
+                // window was closed by user, before completing oauth
+                if ((_a = providersWaitingOauthMessages.current) === null || _a === void 0 ? void 0 : _a[provider]) {
+                    clearListeners();
+                    handleError(`Linking ${provider} account window closed.`);
+                }
+                clearInterval(authWindowInterval.current);
+                setIsProcessing(false);
+            });
+        }
+        else {
+            // For provider that don't support window.opener, we need to use a timeout to try to detect when the
+            // window is closed
+            authWindowInterval.current = setInterval(() => {
+                var _a;
+                // user didn't complete oauth
+                if ((_a = providersWaitingOauthMessages.current) === null || _a === void 0 ? void 0 : _a[provider]) {
+                    clearListeners();
+                    handleError(`Linking ${provider} account window timeout.`);
+                }
+                setIsProcessing(false);
+                clearInterval(authWindowInterval.current);
+            }, sessionTimeout);
+        }
     });
     const unlinkSocialAccount = (provider) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        var _c;
+        var _d;
         setError(undefined);
         setIsProcessing(true);
         if (!checkValidProvider(provider)) {
@@ -200,7 +243,7 @@ const useSocialAccounts = () => {
         try {
             const jwt = yield api.unlinkOAuth({
                 environmentId,
-                verifiedCrentialId: (_c = verifiedCredential.id) !== null && _c !== void 0 ? _c : '',
+                verifiedCrentialId: (_d = verifiedCredential.id) !== null && _d !== void 0 ? _d : '',
             }, String(userJwt));
             if (!jwt) {
                 handleError(`Failed to unlink social account: ${provider} | ${verifiedCredential.id}`);

package/src/lib/utils/hooks/useSocialAccounts/useSocialAccounts.d.ts

@@ -1,6 +1,9 @@
 import { ProviderEnum } from '@dynamic-labs/sdk-api';
 import { SocialAccountInformation } from '@dynamic-labs/types';
-export declare const useSocialAccounts: () => {
+type UseSocialAccountsProps = {
+    sessionTimeout: number;
+};
+export declare const useSocialAccounts: ({ sessionTimeout }?: UseSocialAccountsProps) => {
     readonly error: string | undefined;
     readonly getLinkedAccountInformation: (provider: ProviderEnum) => SocialAccountInformation | undefined;
     readonly isLinked: (provider: ProviderEnum) => boolean;
@@ -8,3 +11,4 @@ export declare const useSocialAccounts: () => {
     readonly linkSocialAccount: (provider: ProviderEnum) => Promise<void>;
     readonly unlinkSocialAccount: (provider: ProviderEnum) => Promise<void>;
 };
+export {};

package/src/lib/utils/hooks/useSocialAccounts/useSocialAccounts.js

@@ -37,13 +37,17 @@ const socialProviders = [
 // pkce params are only required for twitter and break if added for other providers, like google
 // so we should only add provider that support pkce to this list
 const providersRequiringPkce = ['twitter', 'github'];
-const useSocialAccounts = () => {
+const providersWithoutWindowOpenerRefence = ['twitter'];
+const useSocialAccounts = ({ sessionTimeout } = {
+    sessionTimeout: 10000,
+}) => {
     var _a;
     const { environmentId, user, projectSettings, onboardingOnlyJwt } = useInternalDynamicContext();
     const { updateUserProfileByJWT } = useUpdateUserProfileByJWTCallback();
     const [isProcessing, setIsProcessing] = useState(false);
     const [error, setError] = useState();
     const providersWaitingOauthMessages = useRef({});
+    const authWindowInterval = useRef();
     const userJwt = (_a = getAuthToken()) !== null && _a !== void 0 ? _a : onboardingOnlyJwt;
     const oauthProviders = getEnabledOAuthProviders(projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers);
     const verifiedOAuthCredentialsMap = useMemo(() => {
@@ -112,6 +116,7 @@ const useSocialAccounts = () => {
     };
     const linkSocialAccount = (provider) => __awaiter(void 0, void 0, void 0, function* () {
         var _b;
+        clearInterval(authWindowInterval.current);
         setError(undefined);
         setIsProcessing(true);
         // invalid linking request
@@ -120,7 +125,13 @@ const useSocialAccounts = () => {
         }
         const state = randomString(8);
         const verifier = randomString(43);
+        const clearListeners = () => {
+            removeOAuthIFrame();
+            window.removeEventListener('message', handleAuthWindowMessage);
+            providersWaitingOauthMessages.current = Object.assign(Object.assign({}, providersWaitingOauthMessages.current), { [provider]: false });
+        };
         const handleAuthWindowMessage = (event) => __awaiter(void 0, void 0, void 0, function* () {
+            var _c;
             const message = event.data;
             const isAuthorizationMessage = (message === null || message === void 0 ? void 0 : message.type) === 'authorization_response';
             if (isAuthorizationMessage) {
@@ -131,9 +142,11 @@ const useSocialAccounts = () => {
             if (!isValidMessage) {
                 return;
             }
-            removeOAuthIFrame();
-            window.removeEventListener('message', handleAuthWindowMessage);
-            providersWaitingOauthMessages.current = Object.assign(Object.assign({}, providersWaitingOauthMessages.current), { [provider]: false });
+            if (!((_c = providersWaitingOauthMessages.current) === null || _c === void 0 ? void 0 : _c[provider])) {
+                handleError(`Linking ${provider} account session timeout.`);
+                return;
+            }
+            clearListeners();
             const { code, error } = message;
             if (error && error !== 'undefined') {
                 handleError(`Failed to link ${provider} social account: ${error}`);
@@ -179,10 +192,40 @@ const useSocialAccounts = () => {
             window.addEventListener('message', handleAuthWindowMessage);
             providersWaitingOauthMessages.current = Object.assign(Object.assign({}, providersWaitingOauthMessages.current), { [provider]: true });
         }
-        window.open(oauthLoginUrl, '_blank', 'width=500,height=600');
+        const authWindow = window.open(oauthLoginUrl, '_blank', 'width=500,height=600');
+        if (!providersWithoutWindowOpenerRefence.includes(provider)) {
+            // For provider that support window.opener, we need to clear all states/listeners when the window is closed
+            authWindowInterval.current = setInterval(() => {
+                var _a;
+                if (!(authWindow === null || authWindow === void 0 ? void 0 : authWindow.closed)) {
+                    return;
+                }
+                // window was closed by user, before completing oauth
+                if ((_a = providersWaitingOauthMessages.current) === null || _a === void 0 ? void 0 : _a[provider]) {
+                    clearListeners();
+                    handleError(`Linking ${provider} account window closed.`);
+                }
+                clearInterval(authWindowInterval.current);
+                setIsProcessing(false);
+            });
+        }
+        else {
+            // For provider that don't support window.opener, we need to use a timeout to try to detect when the
+            // window is closed
+            authWindowInterval.current = setInterval(() => {
+                var _a;
+                // user didn't complete oauth
+                if ((_a = providersWaitingOauthMessages.current) === null || _a === void 0 ? void 0 : _a[provider]) {
+                    clearListeners();
+                    handleError(`Linking ${provider} account window timeout.`);
+                }
+                setIsProcessing(false);
+                clearInterval(authWindowInterval.current);
+            }, sessionTimeout);
+        }
     });
     const unlinkSocialAccount = (provider) => __awaiter(void 0, void 0, void 0, function* () {
-        var _c;
+        var _d;
         setError(undefined);
         setIsProcessing(true);
         if (!checkValidProvider(provider)) {
@@ -196,7 +239,7 @@ const useSocialAccounts = () => {
         try {
             const jwt = yield unlinkOAuth({
                 environmentId,
-                verifiedCrentialId: (_c = verifiedCredential.id) !== null && _c !== void 0 ? _c : '',
+                verifiedCrentialId: (_d = verifiedCredential.id) !== null && _d !== void 0 ? _d : '',
             }, String(userJwt));
             if (!jwt) {
                 handleError(`Failed to unlink social account: ${provider} | ${verifiedCredential.id}`);