@dynamic-labs/sdk-react-core 2.5.2 → 2.6.0

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

@@ -80,3 +80,4 @@ export * from './getSupportedCountriesForVerificationFromProjectSettings';
 export * from './getDefaultCountriesIfEmpty';
 export * from './logVerboseTroubleshootingMessage';
 export * from './getPlatformForConnector';
+export * from './socialStorage';

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

@@ -0,0 +1 @@
+export * from './socialStorage';

package/src/lib/utils/functions/socialStorage/socialStorage.cjs

@@ -0,0 +1,36 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var localStorage = require('../../../shared/utils/classes/storage/localStorage.cjs');
+
+const SOCIAL_STORAGE_KEY = 'dynamic_social_storage';
+const searchSocialStorageByState = (targetState) => {
+    var _a;
+    const socialStorage = localStorage.LocalStorage.getFromLS(SOCIAL_STORAGE_KEY);
+    if (!socialStorage)
+        return undefined;
+    const storageEntries = Object.entries(socialStorage);
+    const [provider] = (_a = storageEntries.find(([, { state }]) => state === targetState)) !== null && _a !== void 0 ? _a : [];
+    if (!provider)
+        return undefined;
+    return socialStorage[provider];
+};
+const setSocialStorageFor = (provider, socialStorageItem) => {
+    var _a;
+    const socialStorage = (_a = localStorage.LocalStorage.getFromLS(SOCIAL_STORAGE_KEY)) !== null && _a !== void 0 ? _a : {};
+    socialStorage[provider] = Object.assign({ provider }, socialStorageItem);
+    localStorage.LocalStorage.setToLS(SOCIAL_STORAGE_KEY, socialStorage);
+};
+const deleteSocialStorage = (provider) => {
+    var _a;
+    const socialStorage = (_a = localStorage.LocalStorage.getFromLS(SOCIAL_STORAGE_KEY)) !== null && _a !== void 0 ? _a : {};
+    delete socialStorage[provider];
+    localStorage.LocalStorage.setToLS(SOCIAL_STORAGE_KEY, socialStorage);
+};
+
+exports.SOCIAL_STORAGE_KEY = SOCIAL_STORAGE_KEY;
+exports.deleteSocialStorage = deleteSocialStorage;
+exports.searchSocialStorageByState = searchSocialStorageByState;
+exports.setSocialStorageFor = setSocialStorageFor;

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

@@ -0,0 +1,17 @@
+import { ProviderEnum } from '@dynamic-labs/sdk-api-core';
+export declare const SOCIAL_STORAGE_KEY = "dynamic_social_storage";
+export type SocialStorageItem = {
+    provider: ProviderEnum;
+    /** State issued to IDP on social authentication */
+    state: string;
+    /** Code verifier used to generate the code challenge for PKCE */
+    codeVerifier: string | undefined;
+    /** Captcha token used to verify the user is not a bot */
+    captchaToken?: string;
+    /** Oauth code from redirect from oauth provider, this will be provided on response from redirect endpoint **/
+    code?: string;
+};
+export type SocialStorage = Partial<Record<ProviderEnum, SocialStorageItem>>;
+export declare const searchSocialStorageByState: (targetState: string) => SocialStorageItem | undefined;
+export declare const setSocialStorageFor: (provider: ProviderEnum, socialStorageItem: Omit<SocialStorageItem, 'provider'>) => void;
+export declare const deleteSocialStorage: (provider: ProviderEnum) => void;

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

@@ -0,0 +1,29 @@
+'use client'
+import { LocalStorage } from '../../../shared/utils/classes/storage/localStorage.js';
+
+const SOCIAL_STORAGE_KEY = 'dynamic_social_storage';
+const searchSocialStorageByState = (targetState) => {
+    var _a;
+    const socialStorage = LocalStorage.getFromLS(SOCIAL_STORAGE_KEY);
+    if (!socialStorage)
+        return undefined;
+    const storageEntries = Object.entries(socialStorage);
+    const [provider] = (_a = storageEntries.find(([, { state }]) => state === targetState)) !== null && _a !== void 0 ? _a : [];
+    if (!provider)
+        return undefined;
+    return socialStorage[provider];
+};
+const setSocialStorageFor = (provider, socialStorageItem) => {
+    var _a;
+    const socialStorage = (_a = LocalStorage.getFromLS(SOCIAL_STORAGE_KEY)) !== null && _a !== void 0 ? _a : {};
+    socialStorage[provider] = Object.assign({ provider }, socialStorageItem);
+    LocalStorage.setToLS(SOCIAL_STORAGE_KEY, socialStorage);
+};
+const deleteSocialStorage = (provider) => {
+    var _a;
+    const socialStorage = (_a = LocalStorage.getFromLS(SOCIAL_STORAGE_KEY)) !== null && _a !== void 0 ? _a : {};
+    delete socialStorage[provider];
+    LocalStorage.setToLS(SOCIAL_STORAGE_KEY, socialStorage);
+};
+
+export { SOCIAL_STORAGE_KEY, deleteSocialStorage, searchSocialStorageByState, setSocialStorageFor };

package/src/lib/utils/hooks/useSocialAuth/apple/connectWithAppleId.cjs

@@ -0,0 +1,26 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../../_virtual/_tslib.cjs');
+var loadAppleId = require('./loadAppleId.cjs');
+
+const connectWithAppleId = (_a) => _tslib.__awaiter(void 0, [_a], void 0, function* ({ clientId, oauthLoginUrl, state, }) {
+    yield loadAppleId.loadAppleId();
+    // Because the AppleID is loaded from a script tag, there is not type for it
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    AppleID.auth.init({
+        clientId,
+        redirectURI: oauthLoginUrl.searchParams.get('redirect_uri'),
+        scope: 'name email',
+        state,
+        usePopup: false,
+    });
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    AppleID.auth.signIn();
+});
+
+exports.connectWithAppleId = connectWithAppleId;

package/src/lib/utils/hooks/useSocialAuth/apple/connectWithAppleId.d.ts

@@ -0,0 +1,7 @@
+type ConnectWithAppleIdOptions = {
+    clientId: string | undefined;
+    oauthLoginUrl: URL;
+    state: string;
+};
+export declare const connectWithAppleId: ({ clientId, oauthLoginUrl, state, }: ConnectWithAppleIdOptions) => Promise<void>;
+export {};

package/src/lib/utils/hooks/useSocialAuth/apple/connectWithAppleId.js

@@ -0,0 +1,22 @@
+'use client'
+import { __awaiter } from '../../../../../../_virtual/_tslib.js';
+import { loadAppleId } from './loadAppleId.js';
+
+const connectWithAppleId = (_a) => __awaiter(void 0, [_a], void 0, function* ({ clientId, oauthLoginUrl, state, }) {
+    yield loadAppleId();
+    // Because the AppleID is loaded from a script tag, there is not type for it
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    AppleID.auth.init({
+        clientId,
+        redirectURI: oauthLoginUrl.searchParams.get('redirect_uri'),
+        scope: 'name email',
+        state,
+        usePopup: false,
+    });
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    AppleID.auth.signIn();
+});
+
+export { connectWithAppleId };

package/src/lib/utils/hooks/useSocialAuth/apple/loadAppleId.cjs

@@ -0,0 +1,34 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const appleIdScriptSrc = 'https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js';
+const loadAppleId = () => new Promise((resolve, reject) => {
+    const script = document.querySelector('script[data-apple-sdk]');
+    if (script) {
+        // Script already exists, attach event listeners
+        if (script.hasAttribute('data-loaded')) {
+            resolve();
+        }
+        else {
+            script.addEventListener('load', () => resolve());
+            script.addEventListener('error', () => reject(new Error('Failed to load Apple SDK')));
+        }
+    }
+    else {
+        // If the script does not exist, create and add it
+        const script = document.createElement('script');
+        script.type = 'text/javascript';
+        script.src = appleIdScriptSrc;
+        script.setAttribute('data-apple-sdk', 'true');
+        script.onload = () => {
+            script === null || script === void 0 ? void 0 : script.setAttribute('data-loaded', 'true');
+            resolve();
+        };
+        script.onerror = () => reject(new Error('Failed to load Apple SDK'));
+        window.document.head.appendChild(script);
+    }
+});
+
+exports.loadAppleId = loadAppleId;

package/src/lib/utils/hooks/useSocialAuth/apple/loadAppleId.d.ts

@@ -0,0 +1 @@
+export declare const loadAppleId: () => Promise<void>;

package/src/lib/utils/hooks/useSocialAuth/apple/loadAppleId.js

@@ -0,0 +1,30 @@
+'use client'
+const appleIdScriptSrc = 'https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js';
+const loadAppleId = () => new Promise((resolve, reject) => {
+    const script = document.querySelector('script[data-apple-sdk]');
+    if (script) {
+        // Script already exists, attach event listeners
+        if (script.hasAttribute('data-loaded')) {
+            resolve();
+        }
+        else {
+            script.addEventListener('load', () => resolve());
+            script.addEventListener('error', () => reject(new Error('Failed to load Apple SDK')));
+        }
+    }
+    else {
+        // If the script does not exist, create and add it
+        const script = document.createElement('script');
+        script.type = 'text/javascript';
+        script.src = appleIdScriptSrc;
+        script.setAttribute('data-apple-sdk', 'true');
+        script.onload = () => {
+            script === null || script === void 0 ? void 0 : script.setAttribute('data-loaded', 'true');
+            resolve();
+        };
+        script.onerror = () => reject(new Error('Failed to load Apple SDK'));
+        window.document.head.appendChild(script);
+    }
+});
+
+export { loadAppleId };

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

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

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

@@ -37,6 +37,7 @@ require('../../../config/ApiEndpoint.cjs');
 require('@dynamic-labs/store');
 var oauth = require('../../../data/api/oauth/oauth.cjs');
 require('../../../locale/locale.cjs');
+var socialStorage = require('../../functions/socialStorage/socialStorage.cjs');
 require('../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../../context/UserWalletsContext/UserWalletsContext.cjs');
@@ -47,6 +48,7 @@ require('../../../context/ThemeContext/ThemeContext.cjs');
 require('../useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
 var useUserAuth = require('../useUserAuth/useUserAuth.cjs');
 var farcaster = require('./farcaster.cjs');
+var connectWithAppleId = require('./apple/connectWithAppleId.cjs');
 require('yup');
 require('../../../context/MockContext/MockContext.cjs');
 require('../../../views/CollectUserDataView/useFields.cjs');
@@ -105,7 +107,11 @@ const socialProviders = [
 const providersRequiringPkce = ['twitter', 'github'];
 // Hook to handle common social auth logic (for social linking and social sign in)
 const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, }) => {
-    const { environmentId, setShowAuthFlow, projectSettings, consumeNonce, redirectUrl, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { environmentId, setShowAuthFlow, projectSettings, consumeNonce, socialSettings, redirectUrl, } = useInternalDynamicContext.useInternalDynamicContext();
+    /**
+     * Represents if the SDK will use a popup or redirect for social auth
+     */
+    const strategy = React.useMemo(() => (socialSettings === null || socialSettings === void 0 ? void 0 : socialSettings.strategy) || 'popup', [socialSettings]);
     const { setErrorMessage, setError: setContextError } = ErrorContext.useErrorContext();
     const { initAuth } = useUserAuth.useUserAuth({
         authMethod: 'social',
@@ -171,7 +177,7 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
         });
     });
     const connectSocialAccount = (_a) => _tslib.__awaiter(void 0, [_a], void 0, function* ({ authMode, provider, validator, captchaToken, }) {
-        var _b, _c;
+        var _b, _c, _d;
         clearInterval(authWindowInterval.current);
         clearError();
         setIsProcessing(true);
@@ -193,17 +199,40 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
         });
         if (provider === sdkApiCore.ProviderEnum.Farcaster)
             return connectWithFarcaster(authMode, { captchaToken });
-        const authWindow = window.open('', '_blank', 'width=500,height=600');
+        let authWindow = null;
         const state = randomString.randomString(32);
         const verifier = randomString.randomString(43);
+        const apiProvider = getProviderByType.getProviderByType((_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) !== null && _b !== void 0 ? _b : [], provider);
+        const loginUrl = getOauthLoginUrl.getOauthLoginUrl((_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) !== null && _c !== void 0 ? _c : [], provider);
+        // Whether we will use PKCE (code verifier/challenge) for this provider
+        const usingPkce = providersRequiringPkce.includes(provider);
+        socialStorage.setSocialStorageFor(provider, {
+            captchaToken,
+            codeVerifier: verifier,
+            state,
+        });
+        if (provider === sdkApiCore.ProviderEnum.Apple &&
+            (utils.isSafariBrowser() || utils.isIOS() || strategy === 'redirect')) {
+            yield oauth.initAuth(environmentId, provider, {
+                // When we set the redirectUrl, the backend gives preference to a redirect
+                // experience, which is only desired for mobile
+                redirectUrl: removeDynamicOauthParamsFromUrl(redirectUrl || window.location.href),
+                state,
+            });
+            yield connectWithAppleId.connectWithAppleId({
+                clientId: apiProvider === null || apiProvider === void 0 ? void 0 : apiProvider.clientId,
+                oauthLoginUrl: new URL(loginUrl),
+                state,
+            });
+            return;
+        }
         const clearListeners = () => {
             window.removeEventListener('message', handleAuthWindowMessage);
             providersWaitingOauthMessage.current = Object.assign(Object.assign({}, providersWaitingOauthMessage.current), { [provider]: false });
         };
         const handleAuthWindowMessage = (event) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-            var _d, _e;
+            var _e;
             const message = event.data;
-            const apiProvider = getProviderByType.getProviderByType((_d = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) !== null && _d !== void 0 ? _d : [], provider);
             if (!(apiProvider === null || apiProvider === void 0 ? void 0 : apiProvider.redirectUrl)) {
                 return;
             }
@@ -260,31 +289,20 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
                 handleError(provider, types.SocialOAuthErrorCode.NO_AUTH_CODE, `Failed to connect ${provider} social account: no authorization code`, { raiseAuthFailure: authMode === 'signin' });
                 return;
             }
-            if (authMode === 'signin') {
-                const apiCall = () => oauth.signInOAuth(environmentId, provider, {
-                    captchaToken,
-                    code,
-                    codeVerifier: verifier,
-                    state,
-                });
-                yield signInAccount(provider, apiCall);
-            }
-            else {
-                const apiCall = () => oauth.verifyOAuth(environmentId, provider, {
-                    code,
-                    codeVerifier: verifier,
-                    state,
-                });
-                yield linkAccount(provider, apiCall);
-            }
-            setIsProcessing(false);
+            yield completeConnection({
+                authCode: code,
+                authMode,
+                captchaToken,
+                provider,
+                state,
+                verifier,
+            });
         });
-        const loginUrl = getOauthLoginUrl.getOauthLoginUrl((_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) !== null && _b !== void 0 ? _b : [], provider);
         if (!loginUrl) {
             handleError(provider, types.SocialOAuthErrorCode.NO_OAUTH_URL, `Failed to get login url to connect social account: ${provider}`, { raiseAuthFailure: authMode === 'signin' });
             return;
         }
-        if (!((_c = providersWaitingOauthMessage.current) === null || _c === void 0 ? void 0 : _c[provider])) {
+        if (!((_d = providersWaitingOauthMessage.current) === null || _d === void 0 ? void 0 : _d[provider])) {
             window.addEventListener('message', handleAuthWindowMessage);
             providersWaitingOauthMessage.current = Object.assign(Object.assign({}, providersWaitingOauthMessage.current), { [provider]: true });
         }
@@ -294,7 +312,7 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
         });
         let oauthLoginUrl = `${loginUrl}&${stateParam}`;
         // only add pkce params for providers that support/require it
-        if (providersRequiringPkce.includes(provider)) {
+        if (usingPkce) {
             const digest = yield digestSHA256.digestSHA256(verifier);
             const pkceParams = stringifyURIQuery.stringifyURIQuery({
                 code_challenge: encodeBase64URL.encodeBase64URL(digest),
@@ -302,6 +320,19 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
             });
             oauthLoginUrl = `${oauthLoginUrl}&${pkceParams}`;
         }
+        yield oauth.initAuth(environmentId, provider, {
+            // When we set the redirectUrl, the backend gives preference to a redirect
+            // experience, which is only desired for mobile
+            redirectUrl: strategy === 'redirect'
+                ? removeDynamicOauthParamsFromUrl(redirectUrl || window.location.href)
+                : undefined,
+            state,
+        });
+        if (strategy === 'redirect') {
+            window.location.assign(oauthLoginUrl);
+            return;
+        }
+        authWindow = window.open('', '_blank', 'width=500,height=600');
         authWindow === null || authWindow === void 0 ? void 0 : authWindow.location.assign(oauthLoginUrl);
         // For provider that support window.opener, we need to clear all states/listeners when the window is closed
         authWindowInterval.current = setInterval(() => {
@@ -317,7 +348,27 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
             }
         }, 2000);
     });
-    const connectWithFarcaster = (authMode_1, _f) => _tslib.__awaiter(void 0, [authMode_1, _f], void 0, function* (authMode, { captchaToken }) {
+    const completeConnection = (_f) => _tslib.__awaiter(void 0, [_f], void 0, function* ({ authMode, provider, state, authCode, verifier, captchaToken, }) {
+        if (authMode === 'signin') {
+            const apiCall = () => oauth.signInOAuth(environmentId, provider, {
+                captchaToken,
+                code: authCode,
+                codeVerifier: verifier,
+                state,
+            });
+            yield signInAccount(provider, apiCall);
+        }
+        else {
+            const apiCall = () => oauth.verifyOAuth(environmentId, provider, {
+                code: authCode,
+                codeVerifier: verifier,
+                state,
+            });
+            yield linkAccount(provider, apiCall);
+        }
+        setIsProcessing(false);
+    });
+    const connectWithFarcaster = (authMode_1, _g) => _tslib.__awaiter(void 0, [authMode_1, _g], void 0, function* (authMode, { captchaToken }) {
         const dynamicNonce = consumeNonce();
         const domain = utils.PlatformService.getHost();
         const data = yield farcaster.connect({
@@ -386,6 +437,7 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
     });
     return {
         checkValidProvider,
+        completeConnection,
         connectSocialAccount,
         error,
         handleError,
@@ -394,5 +446,11 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
         setIsProcessing,
     };
 };
+const removeDynamicOauthParamsFromUrl = (url) => {
+    const urlObject = new URL(url);
+    urlObject.searchParams.delete('dynamicOauthState');
+    urlObject.searchParams.delete('dynamicOauthCode');
+    return urlObject.toString();
+};
 
 exports.useSocialAuth = useSocialAuth;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ProviderEnum } from '@dynamic-labs/sdk-api-core';
 import { SocialOAuthError, SocialOAuthErrorCode } from '@dynamic-labs/types';
-type SocialAuthMode = 'link' | 'signin' | 'unlink';
+export type SocialAuthMode = 'link' | 'signin' | 'unlink';
 type UseSocialAuthProps = {
     sessionTimeout: number;
     onSettled?: () => void;
@@ -16,6 +16,14 @@ export type ConnectSocialAccountProps = {
 };
 export declare const useSocialAuth: ({ sessionTimeout, onSettled, onError, onFarcasterUrl, }: UseSocialAuthProps) => {
     readonly checkValidProvider: (provider: ProviderEnum, authMode: SocialAuthMode) => boolean;
+    readonly completeConnection: ({ authMode, provider, state, authCode, verifier, captchaToken, }: {
+        authMode: SocialAuthMode;
+        provider: ProviderEnum;
+        state: string;
+        captchaToken?: string | undefined;
+        authCode?: string | undefined;
+        verifier?: string | undefined;
+    }) => Promise<void>;
     readonly connectSocialAccount: ({ authMode, provider, validator, captchaToken, }: ConnectSocialAccountProps) => Promise<void>;
     readonly error: SocialOAuthError | undefined;
     readonly handleError: (provider: ProviderEnum | undefined, code: SocialOAuthErrorCode, message: string, options?: {