@dynamic-labs/sdk-react-core 0.19.0-alpha.7 → 0.19.0-alpha.8

package/src/lib/utils/functions/getSocialSignInProviderFromString/getSocialSignInProviderFromString.js

@@ -0,0 +1,15 @@
+import { SocialSignInProviderEnum } from '@dynamic-labs/sdk-api';
+
+const getSocialSignInProviderFromString = (provider) => {
+    if (!provider)
+        return;
+    const values = Object.values(SocialSignInProviderEnum);
+    for (const value of values) {
+        if (value === provider) {
+            return value;
+        }
+    }
+    return undefined;
+};
+
+export { getSocialSignInProviderFromString };

package/src/lib/utils/functions/getSocialSignInProviderFromString/index.d.ts

@@ -0,0 +1 @@
+export { getSocialSignInProviderFromString } from './getSocialSignInProviderFromString';

package/src/lib/utils/functions/index.d.ts

@@ -29,3 +29,8 @@ export * from './digestSHA256';
 export * from './encodeBase64URL';
 export * from './getRedirectURIOrigin';
 export * from './sendTransactionWithAutoNonce';
+export * from './getProviderEnumForSocialSignInProvider';
+export * from './getEnabledSocialSignInProvidersAsProviderEnum';
+export * from './getActiveOauthCredential';
+export * from './getSocialSignInProviderForProviderEnum';
+export * from './getSocialSignInProviderFromString';

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

@@ -39,7 +39,8 @@ const useAuthLayoutChecks = (walletConnector) => {
         view !== 'email-wallet-otp-verification-view' &&
         view !== 'bridge-welcome' &&
         view !== 'bridge-summary' &&
-        view !== 'bridge-next-wallet-connection';
+        view !== 'bridge-next-wallet-connection' &&
+        view !== 'social-redirect-view';
     const showConnectedWalletProgress = isBridgeFlow &&
         (view === 'wallet-list' ||
             view === 'qr-code' ||

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

@@ -35,7 +35,8 @@ const useAuthLayoutChecks = (walletConnector) => {
         view !== 'email-wallet-otp-verification-view' &&
         view !== 'bridge-welcome' &&
         view !== 'bridge-summary' &&
-        view !== 'bridge-next-wallet-connection';
+        view !== 'bridge-next-wallet-connection' &&
+        view !== 'social-redirect-view';
     const showConnectedWalletProgress = isBridgeFlow &&
         (view === 'wallet-list' ||
             view === 'qr-code' ||

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

@@ -37,7 +37,7 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
             return;
         }
         const nextConnectedWallets = (yield Promise.all(connectedWalletsInfo.map((storedConnectedWalletInfo) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-            const walletConnector = walletConnectorCore.getWalletConnectorByName(walletConnectors, storedConnectedWalletInfo.walletConnectorKey);
+            const walletConnector = walletConnectorCore.getWalletConnectorByKey(walletConnectors, storedConnectedWalletInfo.walletConnectorKey);
             if (!walletConnector) {
                 walletConnectorCore.logger.error('Could not find walletConnector: ' +
                     storedConnectedWalletInfo.walletConnectorKey);
@@ -149,7 +149,7 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
             setPrimaryWalletId(walletId);
         }
         const walletChain = walletConnector.connectedChain;
-        const isWalletStored = connectedWalletsInfo.some(({ walletConnectorKey: storedWalletConnectorKey }) => storedWalletConnectorKey === walletConnector.name);
+        const isWalletStored = connectedWalletsInfo.some(({ walletConnectorKey: storedWalletConnectorKey }) => storedWalletConnectorKey === walletConnector.key);
         if (isWalletStored) {
             yield updateConnectedWalletsList();
         }
@@ -158,7 +158,7 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
                 provider: getWalletProvider.getWalletProvider(walletConnector),
                 walletAddress: publicWalletAddress,
                 walletChain,
-                walletConnectorKey: walletConnector.name,
+                walletConnectorKey: walletConnector.key,
                 walletId,
             });
             if (!shouldSkipCreatingVisit) {

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

@@ -1,6 +1,6 @@
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
 import { useState, useCallback, useEffect } from 'react';
-import { getWalletConnectorByName, logger } from '@dynamic-labs/wallet-connector-core';
+import { getWalletConnectorByKey, logger } from '@dynamic-labs/wallet-connector-core';
 import '@dynamic-labs/sdk-api';
 import '../../../shared/logger.js';
 import '@dynamic-labs/iconic';
@@ -33,7 +33,7 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
             return;
         }
         const nextConnectedWallets = (yield Promise.all(connectedWalletsInfo.map((storedConnectedWalletInfo) => __awaiter(void 0, void 0, void 0, function* () {
-            const walletConnector = getWalletConnectorByName(walletConnectors, storedConnectedWalletInfo.walletConnectorKey);
+            const walletConnector = getWalletConnectorByKey(walletConnectors, storedConnectedWalletInfo.walletConnectorKey);
             if (!walletConnector) {
                 logger.error('Could not find walletConnector: ' +
                     storedConnectedWalletInfo.walletConnectorKey);
@@ -145,7 +145,7 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
             setPrimaryWalletId(walletId);
         }
         const walletChain = walletConnector.connectedChain;
-        const isWalletStored = connectedWalletsInfo.some(({ walletConnectorKey: storedWalletConnectorKey }) => storedWalletConnectorKey === walletConnector.name);
+        const isWalletStored = connectedWalletsInfo.some(({ walletConnectorKey: storedWalletConnectorKey }) => storedWalletConnectorKey === walletConnector.key);
         if (isWalletStored) {
             yield updateConnectedWalletsList();
         }
@@ -154,7 +154,7 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
                 provider: getWalletProvider(walletConnector),
                 walletAddress: publicWalletAddress,
                 walletChain,
-                walletConnectorKey: walletConnector.name,
+                walletConnectorKey: walletConnector.key,
                 walletId,
             });
             if (!shouldSkipCreatingVisit) {

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

@@ -44,7 +44,16 @@ const useFetchProjectSettings = ({ authToken, environmentId, maxRetries = 2, dyn
             environmentId &&
             retries < maxRetries) {
             setLoading(true);
-            api.sendDynamicProps(environmentId, { dynamicContextProps });
+            // we ReactNode components are not being serialized properly
+            // remove them for now and deal with them later
+            // context: https://linear.app/dynamic-labs/issue/GVTY-328/[starknet]-sdk-api-is-not-serializing-react-components
+            // future work: https://linear.app/dynamic-labs/issue/GVTY-330/bug-figure-out-why-react-components-are-not
+            const updatedDynamicProps = {
+                settings: Object.assign(Object.assign({}, dynamicContextProps.settings), { customPrivacyPolicy: Boolean(dynamicContextProps.settings.customPrivacyPolicy), customTermsOfServices: Boolean(dynamicContextProps.settings.customTermsOfServices), policiesConsentInnerComponent: Boolean(dynamicContextProps.settings.policiesConsentInnerComponent) }),
+            };
+            api.sendDynamicProps(environmentId, {
+                dynamicContextProps: updatedDynamicProps,
+            });
             api.fetchProjectSettings(environmentId)
                 .then((response) => {
                 if (!response)

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

@@ -40,7 +40,16 @@ const useFetchProjectSettings = ({ authToken, environmentId, maxRetries = 2, dyn
             environmentId &&
             retries < maxRetries) {
             setLoading(true);
-            sendDynamicProps(environmentId, { dynamicContextProps });
+            // we ReactNode components are not being serialized properly
+            // remove them for now and deal with them later
+            // context: https://linear.app/dynamic-labs/issue/GVTY-328/[starknet]-sdk-api-is-not-serializing-react-components
+            // future work: https://linear.app/dynamic-labs/issue/GVTY-330/bug-figure-out-why-react-components-are-not
+            const updatedDynamicProps = {
+                settings: Object.assign(Object.assign({}, dynamicContextProps.settings), { customPrivacyPolicy: Boolean(dynamicContextProps.settings.customPrivacyPolicy), customTermsOfServices: Boolean(dynamicContextProps.settings.customTermsOfServices), policiesConsentInnerComponent: Boolean(dynamicContextProps.settings.policiesConsentInnerComponent) }),
+            };
+            sendDynamicProps(environmentId, {
+                dynamicContextProps: updatedDynamicProps,
+            });
             fetchProjectSettings(environmentId)
                 .then((response) => {
                 if (!response)

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

@@ -9,7 +9,7 @@ var useInternalDynamicContext = require('../../../context/DynamicContext/useInte
 var api = require('../../../data/api.cjs');
 var useUpdateUserProfileByJWTCallback = require('../useUpdateUserProfileByJWTCallback/useUpdateUserProfileByJWTCallback.cjs');
 require('@dynamic-labs/sdk-api');
-var logger = require('../../../shared/logger.cjs');
+require('../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('react/jsx-runtime');
@@ -24,35 +24,19 @@ require('@dynamic-labs/multi-wallet');
 var getAuthToken = require('../../functions/getAuthToken/getAuthToken.cjs');
 var index = require('../../functions/getEnabledOAuthProviders/index.cjs');
 var isSocialKycEnabled = require('../../functions/isSocialKycEnabled/isSocialKycEnabled.cjs');
-var randomString = require('../../functions/randomString/randomString.cjs');
-var stringifyURIQuery = require('../../functions/stringifyURIQuery/stringifyURIQuery.cjs');
-var digestSHA256 = require('../../functions/digestSHA256/digestSHA256.cjs');
-var encodeBase64URL = require('../../functions/encodeBase64URL/encodeBase64URL.cjs');
-var getRedirectURIOrigin = require('../../functions/getRedirectURIOrigin/getRedirectURIOrigin.cjs');
+var useSocialAuth = require('../useSocialAuth/useSocialAuth.cjs');
 
-const socialProviders = [
-    'discord',
-    'facebook',
-    'github',
-    'google',
-    'instagram',
-    'twitch',
-    'twitter',
-];
-// 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 providersWithoutWindowOpenerRefence = ['twitter'];
+// Hook exposed to customers and used internally to handle social account linking
 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 { handleError, setError, setIsProcessing, checkValidProvider, error, isProcessing, connectSocialAccount, } = useSocialAuth.useSocialAuth({
+        authMode: 'link',
+        sessionTimeout,
+    });
     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(() => {
@@ -66,47 +50,11 @@ const useSocialAccounts = ({ sessionTimeout } = {
             ];
         })));
     }, [user === null || user === void 0 ? void 0 : user.verifiedCredentials]);
-    const handleError = (code, message) => {
-        logger.logger.error(message);
-        setIsProcessing(false);
-        setError({ code, message });
-    };
-    const addOAuthIFrame = (url) => {
-        const container = document.getElementById('oauth-iframe-container');
-        let oauthIFrame = document.getElementById('oauth-iframe');
-        if (!container || oauthIFrame) {
-            return;
-        }
-        oauthIFrame = document.createElement('iframe');
-        oauthIFrame.setAttribute('id', 'oauth-iframe');
-        oauthIFrame.setAttribute('src', url);
-        container.appendChild(oauthIFrame);
-    };
-    const removeOAuthIFrame = () => {
-        const oauthIFrame = document.getElementById('oauth-iframe');
-        if (oauthIFrame) {
-            oauthIFrame.remove();
-        }
-    };
-    const checkValidProvider = (provider) => {
-        if (!provider) {
-            handleError(types.SocialOAuthErrorCode.NO_PROVIDER, 'Provider is required');
-            return false;
-        }
-        if (!socialProviders.includes(provider)) {
-            handleError(types.SocialOAuthErrorCode.INVALID_PROVIDER, `Invalid social provider. Valid providers are: ${socialProviders.join(', ')}`);
-            return false;
-        }
-        return true;
-    };
     const checkValidOAuthLinking = (provider) => {
         if (!isSocialKycEnabled.isSocialKycEnabled(projectSettings)) {
             handleError(types.SocialOAuthErrorCode.SOCIAL_LINKING_NOT_ENABLED, 'Social linking is not enabled on the dashboard');
             return false;
         }
-        if (!checkValidProvider(provider)) {
-            return false;
-        }
         const verifiedCredential = verifiedOAuthCredentialsMap[provider];
         if (verifiedCredential) {
             handleError(types.SocialOAuthErrorCode.ACCOUNT_ALREADY_LINKED, `Account already linked for provider: ${provider}`);
@@ -120,112 +68,10 @@ const useSocialAccounts = ({ sessionTimeout } = {
         return true;
     };
     const linkSocialAccount = (provider) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        var _b;
-        clearInterval(authWindowInterval.current);
-        setError(undefined);
-        setIsProcessing(true);
-        // invalid linking request
-        if (!checkValidOAuthLinking(provider)) {
-            return;
-        }
-        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) {
-                logger.logger.debug('Message received', { data: message });
-            }
-            const isValidMessage = isAuthorizationMessage && (message === null || message === void 0 ? void 0 : message.provider) === provider;
-            // don't process imvalid messages for provider
-            if (!isValidMessage) {
-                return;
-            }
-            setIsProcessing(true);
-            if (!((_c = providersWaitingOauthMessages.current) === null || _c === void 0 ? void 0 : _c[provider])) {
-                handleError(types.SocialOAuthErrorCode.SESSION_TIMEOUT, `Linking ${provider} account session timeout.`);
-                return;
-            }
-            clearListeners();
-            const { code, error } = message;
-            if (error && error !== 'undefined') {
-                handleError(types.SocialOAuthErrorCode.OAUTH_ERROR, `Failed to link ${provider} social account: ${error}`);
-                return;
-            }
-            if (!code) {
-                handleError(types.SocialOAuthErrorCode.NO_AUTH_CODE, `Failed to link ${provider} social account: no authorization code`);
-                return;
-            }
-            const jwt = yield api.verifyOAuth(environmentId, provider, {
-                code,
-                codeVerifier: verifier,
-                state,
-            }, String(userJwt));
-            if (!jwt) {
-                handleError(types.SocialOAuthErrorCode.VERIFICATION_ERROR, `Failed to link social account: ${provider}`);
-                return;
-            }
-            yield updateUserProfileByJWT(jwt);
-            setIsProcessing(false);
-        });
-        const loginUrl = yield api.getOauthLoginUrl(environmentId, provider, String(userJwt));
-        if (!loginUrl) {
-            handleError(types.SocialOAuthErrorCode.NO_OAUTH_URL, `Failed to get login url to link social account: ${provider}`);
-            return;
-        }
-        // we need to use an iframe to be the intermediary in communications between the popup and the sdk
-        // because of twitter limitations with accessing the window.opener and BroadcastChannel not working between
-        // different origins (our api redirect page and the app where the sdk is running)
-        const oauthIFrameUrl = `${getRedirectURIOrigin.getRedirectURIOrigin(loginUrl)}/sdkoauth`;
-        addOAuthIFrame(oauthIFrameUrl);
-        let oauthLoginUrl = loginUrl;
-        if (providersRequiringPkce.includes(provider)) {
-            const digest = yield digestSHA256.digestSHA256(verifier);
-            const pkceParams = stringifyURIQuery.stringifyURIQuery({
-                code_challenge: encodeBase64URL.encodeBase64URL(digest),
-                code_challenge_method: 'S256',
-                state: state,
-            });
-            oauthLoginUrl = `${loginUrl}&${pkceParams}`;
-        }
-        if (!((_b = providersWaitingOauthMessages.current) === null || _b === void 0 ? void 0 : _b[provider])) {
-            window.addEventListener('message', handleAuthWindowMessage);
-            providersWaitingOauthMessages.current = Object.assign(Object.assign({}, providersWaitingOauthMessages.current), { [provider]: true });
-        }
-        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(() => {
-                if (!(authWindow === null || authWindow === void 0 ? void 0 : authWindow.closed)) {
-                    return;
-                }
-                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(types.SocialOAuthErrorCode.OAUTH_WINDOW_TIMEOUT, `Linking ${provider} account window timeout.`);
-                }
-                setIsProcessing(false);
-                clearInterval(authWindowInterval.current);
-            }, sessionTimeout);
-        }
+        connectSocialAccount(provider, checkValidOAuthLinking);
     });
     const unlinkSocialAccount = (provider) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        var _d;
+        var _b;
         setError(undefined);
         setIsProcessing(true);
         if (!checkValidProvider(provider)) {
@@ -239,7 +85,7 @@ const useSocialAccounts = ({ sessionTimeout } = {
         try {
             const jwt = yield api.unlinkOAuth({
                 environmentId,
-                verifiedCrentialId: (_d = verifiedCredential.id) !== null && _d !== void 0 ? _d : '',
+                verifiedCrentialId: (_b = verifiedCredential.id) !== null && _b !== void 0 ? _b : '',
             }, String(userJwt));
             if (!jwt) {
                 handleError(types.SocialOAuthErrorCode.UNLINK_ERROR, `Failed to unlink social account: ${provider} | ${verifiedCredential.id}`);

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

@@ -1,10 +1,10 @@
 import { ProviderEnum } from '@dynamic-labs/sdk-api';
-import { SocialAccountInformation, SocialOAuthError } from '@dynamic-labs/types';
+import { SocialAccountInformation } from '@dynamic-labs/types';
 type UseSocialAccountsProps = {
     sessionTimeout: number;
 };
 export declare const useSocialAccounts: ({ sessionTimeout }?: UseSocialAccountsProps) => {
-    readonly error: SocialOAuthError | undefined;
+    readonly error: import("@dynamic-labs/types").SocialOAuthError | undefined;
     readonly getLinkedAccountInformation: (provider: ProviderEnum) => SocialAccountInformation | undefined;
     readonly isLinked: (provider: ProviderEnum) => boolean;
     readonly isProcessing: boolean;

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

@@ -1,11 +1,11 @@
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
-import { useState, useRef, useMemo } from 'react';
+import { useMemo } from 'react';
 import { SocialOAuthErrorCode } from '@dynamic-labs/types';
 import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.js';
-import { getOauthLoginUrl, unlinkOAuth, verifyOAuth } from '../../../data/api.js';
+import { unlinkOAuth } from '../../../data/api.js';
 import { useUpdateUserProfileByJWTCallback } from '../useUpdateUserProfileByJWTCallback/useUpdateUserProfileByJWTCallback.js';
 import '@dynamic-labs/sdk-api';
-import { logger } from '../../../shared/logger.js';
+import '../../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import 'react/jsx-runtime';
@@ -20,35 +20,19 @@ import '@dynamic-labs/multi-wallet';
 import { getAuthToken } from '../../functions/getAuthToken/getAuthToken.js';
 import { getEnabledOAuthProviders } from '../../functions/getEnabledOAuthProviders/index.js';
 import { isSocialKycEnabled } from '../../functions/isSocialKycEnabled/isSocialKycEnabled.js';
-import { randomString } from '../../functions/randomString/randomString.js';
-import { stringifyURIQuery } from '../../functions/stringifyURIQuery/stringifyURIQuery.js';
-import { digestSHA256 } from '../../functions/digestSHA256/digestSHA256.js';
-import { encodeBase64URL } from '../../functions/encodeBase64URL/encodeBase64URL.js';
-import { getRedirectURIOrigin } from '../../functions/getRedirectURIOrigin/getRedirectURIOrigin.js';
+import { useSocialAuth } from '../useSocialAuth/useSocialAuth.js';
 
-const socialProviders = [
-    'discord',
-    'facebook',
-    'github',
-    'google',
-    'instagram',
-    'twitch',
-    'twitter',
-];
-// 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 providersWithoutWindowOpenerRefence = ['twitter'];
+// Hook exposed to customers and used internally to handle social account linking
 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 { handleError, setError, setIsProcessing, checkValidProvider, error, isProcessing, connectSocialAccount, } = useSocialAuth({
+        authMode: 'link',
+        sessionTimeout,
+    });
     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(() => {
@@ -62,47 +46,11 @@ const useSocialAccounts = ({ sessionTimeout } = {
             ];
         })));
     }, [user === null || user === void 0 ? void 0 : user.verifiedCredentials]);
-    const handleError = (code, message) => {
-        logger.error(message);
-        setIsProcessing(false);
-        setError({ code, message });
-    };
-    const addOAuthIFrame = (url) => {
-        const container = document.getElementById('oauth-iframe-container');
-        let oauthIFrame = document.getElementById('oauth-iframe');
-        if (!container || oauthIFrame) {
-            return;
-        }
-        oauthIFrame = document.createElement('iframe');
-        oauthIFrame.setAttribute('id', 'oauth-iframe');
-        oauthIFrame.setAttribute('src', url);
-        container.appendChild(oauthIFrame);
-    };
-    const removeOAuthIFrame = () => {
-        const oauthIFrame = document.getElementById('oauth-iframe');
-        if (oauthIFrame) {
-            oauthIFrame.remove();
-        }
-    };
-    const checkValidProvider = (provider) => {
-        if (!provider) {
-            handleError(SocialOAuthErrorCode.NO_PROVIDER, 'Provider is required');
-            return false;
-        }
-        if (!socialProviders.includes(provider)) {
-            handleError(SocialOAuthErrorCode.INVALID_PROVIDER, `Invalid social provider. Valid providers are: ${socialProviders.join(', ')}`);
-            return false;
-        }
-        return true;
-    };
     const checkValidOAuthLinking = (provider) => {
         if (!isSocialKycEnabled(projectSettings)) {
             handleError(SocialOAuthErrorCode.SOCIAL_LINKING_NOT_ENABLED, 'Social linking is not enabled on the dashboard');
             return false;
         }
-        if (!checkValidProvider(provider)) {
-            return false;
-        }
         const verifiedCredential = verifiedOAuthCredentialsMap[provider];
         if (verifiedCredential) {
             handleError(SocialOAuthErrorCode.ACCOUNT_ALREADY_LINKED, `Account already linked for provider: ${provider}`);
@@ -116,112 +64,10 @@ const useSocialAccounts = ({ sessionTimeout } = {
         return true;
     };
     const linkSocialAccount = (provider) => __awaiter(void 0, void 0, void 0, function* () {
-        var _b;
-        clearInterval(authWindowInterval.current);
-        setError(undefined);
-        setIsProcessing(true);
-        // invalid linking request
-        if (!checkValidOAuthLinking(provider)) {
-            return;
-        }
-        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) {
-                logger.debug('Message received', { data: message });
-            }
-            const isValidMessage = isAuthorizationMessage && (message === null || message === void 0 ? void 0 : message.provider) === provider;
-            // don't process imvalid messages for provider
-            if (!isValidMessage) {
-                return;
-            }
-            setIsProcessing(true);
-            if (!((_c = providersWaitingOauthMessages.current) === null || _c === void 0 ? void 0 : _c[provider])) {
-                handleError(SocialOAuthErrorCode.SESSION_TIMEOUT, `Linking ${provider} account session timeout.`);
-                return;
-            }
-            clearListeners();
-            const { code, error } = message;
-            if (error && error !== 'undefined') {
-                handleError(SocialOAuthErrorCode.OAUTH_ERROR, `Failed to link ${provider} social account: ${error}`);
-                return;
-            }
-            if (!code) {
-                handleError(SocialOAuthErrorCode.NO_AUTH_CODE, `Failed to link ${provider} social account: no authorization code`);
-                return;
-            }
-            const jwt = yield verifyOAuth(environmentId, provider, {
-                code,
-                codeVerifier: verifier,
-                state,
-            }, String(userJwt));
-            if (!jwt) {
-                handleError(SocialOAuthErrorCode.VERIFICATION_ERROR, `Failed to link social account: ${provider}`);
-                return;
-            }
-            yield updateUserProfileByJWT(jwt);
-            setIsProcessing(false);
-        });
-        const loginUrl = yield getOauthLoginUrl(environmentId, provider, String(userJwt));
-        if (!loginUrl) {
-            handleError(SocialOAuthErrorCode.NO_OAUTH_URL, `Failed to get login url to link social account: ${provider}`);
-            return;
-        }
-        // we need to use an iframe to be the intermediary in communications between the popup and the sdk
-        // because of twitter limitations with accessing the window.opener and BroadcastChannel not working between
-        // different origins (our api redirect page and the app where the sdk is running)
-        const oauthIFrameUrl = `${getRedirectURIOrigin(loginUrl)}/sdkoauth`;
-        addOAuthIFrame(oauthIFrameUrl);
-        let oauthLoginUrl = loginUrl;
-        if (providersRequiringPkce.includes(provider)) {
-            const digest = yield digestSHA256(verifier);
-            const pkceParams = stringifyURIQuery({
-                code_challenge: encodeBase64URL(digest),
-                code_challenge_method: 'S256',
-                state: state,
-            });
-            oauthLoginUrl = `${loginUrl}&${pkceParams}`;
-        }
-        if (!((_b = providersWaitingOauthMessages.current) === null || _b === void 0 ? void 0 : _b[provider])) {
-            window.addEventListener('message', handleAuthWindowMessage);
-            providersWaitingOauthMessages.current = Object.assign(Object.assign({}, providersWaitingOauthMessages.current), { [provider]: true });
-        }
-        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(() => {
-                if (!(authWindow === null || authWindow === void 0 ? void 0 : authWindow.closed)) {
-                    return;
-                }
-                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(SocialOAuthErrorCode.OAUTH_WINDOW_TIMEOUT, `Linking ${provider} account window timeout.`);
-                }
-                setIsProcessing(false);
-                clearInterval(authWindowInterval.current);
-            }, sessionTimeout);
-        }
+        connectSocialAccount(provider, checkValidOAuthLinking);
     });
     const unlinkSocialAccount = (provider) => __awaiter(void 0, void 0, void 0, function* () {
-        var _d;
+        var _b;
         setError(undefined);
         setIsProcessing(true);
         if (!checkValidProvider(provider)) {
@@ -235,7 +81,7 @@ const useSocialAccounts = ({ sessionTimeout } = {
         try {
             const jwt = yield unlinkOAuth({
                 environmentId,
-                verifiedCrentialId: (_d = verifiedCredential.id) !== null && _d !== void 0 ? _d : '',
+                verifiedCrentialId: (_b = verifiedCredential.id) !== null && _b !== void 0 ? _b : '',
             }, String(userJwt));
             if (!jwt) {
                 handleError(SocialOAuthErrorCode.UNLINK_ERROR, `Failed to unlink social account: ${provider} | ${verifiedCredential.id}`);

package/src/lib/utils/hooks/useSocialAuth/index.d.ts

@@ -0,0 +1 @@
+export { useSocialAuth } from './useSocialAuth';