@dynamic-labs/sdk-react-core 2.5.3 → 2.6.1

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

@@ -1,9 +1,9 @@
 'use client'
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
-import { useState, useRef } from 'react';
+import { useMemo, useState, useRef } from 'react';
 import { ProviderEnum } from '@dynamic-labs/sdk-api-core';
 import { SocialOAuthErrorCode } from '@dynamic-labs/types';
-import { PlatformService, isMobile, SocialAccountAlreadyExistsError } from '@dynamic-labs/utils';
+import { isSafariBrowser, isIOS, PlatformService, isMobile, SocialAccountAlreadyExistsError } from '@dynamic-labs/utils';
 import '../../../context/DynamicContext/DynamicContext.js';
 import { logger } from '../../../shared/logger.js';
 import '@dynamic-labs/iconic';
@@ -31,8 +31,9 @@ import 'viem';
 import 'viem/chains';
 import '../../../config/ApiEndpoint.js';
 import '@dynamic-labs/store';
-import { signInOAuth, verifyOAuth, farcasterSignIn, farcasterVerify } from '../../../data/api/oauth/oauth.js';
+import { initAuth, signInOAuth, verifyOAuth, farcasterSignIn, farcasterVerify } from '../../../data/api/oauth/oauth.js';
 import '../../../locale/locale.js';
+import { setSocialStorageFor } from '../../functions/socialStorage/socialStorage.js';
 import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../../context/UserWalletsContext/UserWalletsContext.js';
@@ -43,6 +44,7 @@ import '../../../context/ThemeContext/ThemeContext.js';
 import '../useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
 import { useUserAuth } from '../useUserAuth/useUserAuth.js';
 import { connect, watchStatus } from './farcaster.js';
+import { connectWithAppleId } from './apple/connectWithAppleId.js';
 import 'yup';
 import '../../../context/MockContext/MockContext.js';
 import '../../../views/CollectUserDataView/useFields.js';
@@ -101,9 +103,13 @@ 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();
+    const { environmentId, setShowAuthFlow, projectSettings, consumeNonce, socialSettings, redirectUrl, } = useInternalDynamicContext();
+    /**
+     * Represents if the SDK will use a popup or redirect for social auth
+     */
+    const strategy = useMemo(() => (socialSettings === null || socialSettings === void 0 ? void 0 : socialSettings.strategy) || 'popup', [socialSettings]);
     const { setErrorMessage, setError: setContextError } = useErrorContext();
-    const { initAuth } = useUserAuth({
+    const { initAuth: initAuth$1 } = useUserAuth({
         authMethod: 'social',
     });
     const [isProcessing, setIsProcessing] = useState(false);
@@ -159,7 +165,7 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
         }
     });
     const signInAccount = (provider, apiCall) => __awaiter(void 0, void 0, void 0, function* () {
-        yield initAuth({
+        yield initAuth$1({
             onError: () => handleError(provider, SocialOAuthErrorCode.SIGNIN_ERROR, `Failed to sign-in with social account: ${provider}`, { raiseAuthFailure: true }),
             onSettled,
             options: { provider },
@@ -167,7 +173,7 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
         });
     });
     const connectSocialAccount = (_a) => __awaiter(void 0, [_a], void 0, function* ({ authMode, provider, validator, captchaToken, }) {
-        var _b, _c;
+        var _b, _c, _d;
         clearInterval(authWindowInterval.current);
         clearError();
         setIsProcessing(true);
@@ -189,17 +195,40 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
         });
         if (provider === ProviderEnum.Farcaster)
             return connectWithFarcaster(authMode, { captchaToken });
-        const authWindow = window.open('', '_blank', 'width=500,height=600');
+        let authWindow = null;
         const state = randomString(32);
         const verifier = randomString(43);
+        const apiProvider = getProviderByType((_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) !== null && _b !== void 0 ? _b : [], provider);
+        const loginUrl = 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);
+        setSocialStorageFor(provider, {
+            captchaToken,
+            codeVerifier: verifier,
+            state,
+        });
+        if (provider === ProviderEnum.Apple &&
+            (isSafariBrowser() || isIOS() || strategy === 'redirect')) {
+            yield 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({
+                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) => __awaiter(void 0, void 0, void 0, function* () {
-            var _d, _e;
+            var _e;
             const message = event.data;
-            const apiProvider = 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;
             }
@@ -256,31 +285,20 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
                 handleError(provider, SocialOAuthErrorCode.NO_AUTH_CODE, `Failed to connect ${provider} social account: no authorization code`, { raiseAuthFailure: authMode === 'signin' });
                 return;
             }
-            if (authMode === 'signin') {
-                const apiCall = () => signInOAuth(environmentId, provider, {
-                    captchaToken,
-                    code,
-                    codeVerifier: verifier,
-                    state,
-                });
-                yield signInAccount(provider, apiCall);
-            }
-            else {
-                const apiCall = () => 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((_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) !== null && _b !== void 0 ? _b : [], provider);
         if (!loginUrl) {
             handleError(provider, 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 });
         }
@@ -290,7 +308,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(verifier);
             const pkceParams = stringifyURIQuery({
                 code_challenge: encodeBase64URL(digest),
@@ -298,6 +316,19 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
             });
             oauthLoginUrl = `${oauthLoginUrl}&${pkceParams}`;
         }
+        yield 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(() => {
@@ -313,7 +344,27 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
             }
         }, 2000);
     });
-    const connectWithFarcaster = (authMode_1, _f) => __awaiter(void 0, [authMode_1, _f], void 0, function* (authMode, { captchaToken }) {
+    const completeConnection = (_f) => __awaiter(void 0, [_f], void 0, function* ({ authMode, provider, state, authCode, verifier, captchaToken, }) {
+        if (authMode === 'signin') {
+            const apiCall = () => signInOAuth(environmentId, provider, {
+                captchaToken,
+                code: authCode,
+                codeVerifier: verifier,
+                state,
+            });
+            yield signInAccount(provider, apiCall);
+        }
+        else {
+            const apiCall = () => verifyOAuth(environmentId, provider, {
+                code: authCode,
+                codeVerifier: verifier,
+                state,
+            });
+            yield linkAccount(provider, apiCall);
+        }
+        setIsProcessing(false);
+    });
+    const connectWithFarcaster = (authMode_1, _g) => __awaiter(void 0, [authMode_1, _g], void 0, function* (authMode, { captchaToken }) {
         const dynamicNonce = consumeNonce();
         const domain = PlatformService.getHost();
         const data = yield connect({
@@ -382,6 +433,7 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
     });
     return {
         checkValidProvider,
+        completeConnection,
         connectSocialAccount,
         error,
         handleError,
@@ -390,5 +442,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();
+};
 
 export { useSocialAuth };

package/src/lib/widgets/DynamicEmbeddedWidget/DynamicEmbeddedAuthFlow/DynamicEmbeddedAuthFlow.cjs

@@ -78,7 +78,6 @@ var PopperContext = require('../../../components/Popper/PopperContext/PopperCont
 require('qrcode');
 var RenderView = require('../../../components/RenderView/RenderView.cjs');
 var SandboxIndicatorWrapper = require('../../../components/SandboxIndicatorWrapper/SandboxIndicatorWrapper.cjs');
-var SocialRedirectContext = require('../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 
 const DynamicEmbeddedAuthFlow = ({ background = 'none', className, style, }) => {
     const hide = useIsLoggedIn.useIsLoggedIn();
@@ -109,7 +108,7 @@ const DynamicEmbeddedAuthFlow = ({ background = 'none', className, style, }) =>
     if (hide)
         return null;
     const content = (jsxRuntime.jsx(DynamicAuthLayout.DynamicAuthLayout, { className: className, style: style, projectSettings: projectSettings, children: jsxRuntime.jsx(RenderView.RenderView, {}) }));
-    return (jsxRuntime.jsx(ShadowDOM.ShadowDOM, { className: 'embedded-widget', children: jsxRuntime.jsx(PopperContext.PopperProvider, { children: jsxRuntime.jsx(SocialRedirectContext.SocialRedirectContextProvider, { children: jsxRuntime.jsx(index.FooterAnimationContextProvider, { children: jsxRuntime.jsx(SandboxIndicatorWrapper.SandboxIndicatorWrapper, { children: background === 'none' ? (content) : (jsxRuntime.jsx(ModalCard.ModalCard, { border: background === 'with-border', sharpBottomRadiusOnMobile: false, children: content })) }) }) }) }) }));
+    return (jsxRuntime.jsx(ShadowDOM.ShadowDOM, { className: 'embedded-widget', children: jsxRuntime.jsx(PopperContext.PopperProvider, { children: jsxRuntime.jsx(index.FooterAnimationContextProvider, { children: jsxRuntime.jsx(SandboxIndicatorWrapper.SandboxIndicatorWrapper, { children: background === 'none' ? (content) : (jsxRuntime.jsx(ModalCard.ModalCard, { border: background === 'with-border', sharpBottomRadiusOnMobile: false, children: content })) }) }) }) }));
 };
 
 exports.DynamicEmbeddedAuthFlow = DynamicEmbeddedAuthFlow;

package/src/lib/widgets/DynamicEmbeddedWidget/DynamicEmbeddedAuthFlow/DynamicEmbeddedAuthFlow.js

@@ -74,7 +74,6 @@ import { PopperProvider } from '../../../components/Popper/PopperContext/PopperC
 import 'qrcode';
 import { RenderView } from '../../../components/RenderView/RenderView.js';
 import { SandboxIndicatorWrapper } from '../../../components/SandboxIndicatorWrapper/SandboxIndicatorWrapper.js';
-import { SocialRedirectContextProvider } from '../../../context/SocialRedirectContext/SocialRedirectContext.js';
 
 const DynamicEmbeddedAuthFlow = ({ background = 'none', className, style, }) => {
     const hide = useIsLoggedIn();
@@ -105,7 +104,7 @@ const DynamicEmbeddedAuthFlow = ({ background = 'none', className, style, }) =>
     if (hide)
         return null;
     const content = (jsx(DynamicAuthLayout, { className: className, style: style, projectSettings: projectSettings, children: jsx(RenderView, {}) }));
-    return (jsx(ShadowDOM, { className: 'embedded-widget', children: jsx(PopperProvider, { children: jsx(SocialRedirectContextProvider, { children: jsx(FooterAnimationContextProvider, { children: jsx(SandboxIndicatorWrapper, { children: background === 'none' ? (content) : (jsx(ModalCard, { border: background === 'with-border', sharpBottomRadiusOnMobile: false, children: content })) }) }) }) }) }));
+    return (jsx(ShadowDOM, { className: 'embedded-widget', children: jsx(PopperProvider, { children: jsx(FooterAnimationContextProvider, { children: jsx(SandboxIndicatorWrapper, { children: background === 'none' ? (content) : (jsx(ModalCard, { border: background === 'with-border', sharpBottomRadiusOnMobile: false, children: content })) }) }) }) }));
 };
 
 export { DynamicEmbeddedAuthFlow };