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

package/CHANGELOG.md

@@ -1,4 +1,11 @@
 
+## [2.6.0](https://github.com/dynamic-labs/DynamicAuth/compare/v2.5.3...v2.6.0) (2024-09-03)
+
+
+### Features
+
+* adds social redirect option and improve apple id login ([#6717](https://github.com/dynamic-labs/DynamicAuth/issues/6717)) ([500e70c](https://github.com/dynamic-labs/DynamicAuth/commit/500e70cb446b75a6264b566c7adc7cd9a0c89264))
+
 ### [2.5.3](https://github.com/dynamic-labs/DynamicAuth/compare/v2.5.2...v2.5.3) (2024-09-02)
 
 

package/package.cjs

@@ -3,9 +3,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "2.5.3";
+var version = "2.6.0";
 var dependencies = {
-	"@dynamic-labs/sdk-api-core": "0.0.497",
+	"@dynamic-labs/sdk-api-core": "0.0.510",
 	"@hcaptcha/react-hcaptcha": "1.4.4",
 	"country-list": "2.3.0",
 	formik: "2.2.9",

package/package.js

@@ -1,7 +1,7 @@
 'use client'
-var version = "2.5.3";
+var version = "2.6.0";
 var dependencies = {
-	"@dynamic-labs/sdk-api-core": "0.0.497",
+	"@dynamic-labs/sdk-api-core": "0.0.510",
 	"@hcaptcha/react-hcaptcha": "1.4.4",
 	"country-list": "2.3.0",
 	formik: "2.2.9",

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "2.5.3",
+  "version": "2.6.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/dynamic-labs/dynamic-auth.git",
     "directory": "packages/sdk-react-core"
   },
   "dependencies": {
-    "@dynamic-labs/sdk-api-core": "0.0.497",
+    "@dynamic-labs/sdk-api-core": "0.0.510",
     "@hcaptcha/react-hcaptcha": "1.4.4",
     "country-list": "2.3.0",
     "formik": "2.2.9",
@@ -17,18 +17,18 @@
     "react-i18next": "13.5.0",
     "yup": "0.32.11",
     "react-international-phone": "4.2.5",
-    "@dynamic-labs/iconic": "2.5.3",
-    "@dynamic-labs/logger": "2.5.3",
-    "@dynamic-labs/multi-wallet": "2.5.3",
-    "@dynamic-labs/rpc-provider-ethereum": "2.5.3",
-    "@dynamic-labs/rpc-provider-solana": "2.5.3",
-    "@dynamic-labs/rpc-providers": "2.5.3",
-    "@dynamic-labs/store": "2.5.3",
-    "@dynamic-labs/types": "2.5.3",
-    "@dynamic-labs/utils": "2.5.3",
-    "@dynamic-labs/viem-utils": "2.5.3",
-    "@dynamic-labs/wallet-book": "2.5.3",
-    "@dynamic-labs/wallet-connector-core": "2.5.3",
+    "@dynamic-labs/iconic": "2.6.0",
+    "@dynamic-labs/logger": "2.6.0",
+    "@dynamic-labs/multi-wallet": "2.6.0",
+    "@dynamic-labs/rpc-provider-ethereum": "2.6.0",
+    "@dynamic-labs/rpc-provider-solana": "2.6.0",
+    "@dynamic-labs/rpc-providers": "2.6.0",
+    "@dynamic-labs/store": "2.6.0",
+    "@dynamic-labs/types": "2.6.0",
+    "@dynamic-labs/utils": "2.6.0",
+    "@dynamic-labs/viem-utils": "2.6.0",
+    "@dynamic-labs/wallet-book": "2.6.0",
+    "@dynamic-labs/wallet-connector-core": "2.6.0",
     "eventemitter3": "5.0.1"
   },
   "devDependencies": {

package/src/lib/components/QRCode/QRCode.d.ts

@@ -0,0 +1,15 @@
+import { ReactElement } from 'react';
+import { QRCodeErrorCorrectionLevel } from 'qrcode';
+type QRCodeProps = {
+    Icon: ReactElement;
+    accentColor?: string;
+    ecl?: QRCodeErrorCorrectionLevel;
+    logoMargin?: number;
+    logoSize?: number;
+    size?: number;
+    value: string;
+    walletKey?: string;
+    showQrCodeImage?: boolean;
+};
+export declare const QRCode: ({ ecl, Icon, logoMargin, logoSize, size, value, accentColor, walletKey, showQrCodeImage, }: QRCodeProps) => JSX.Element;
+export {};

package/src/lib/components/UserProfile/parts/UserProfileSocialAccount/UserProfileSocialAccount.cjs

@@ -108,7 +108,7 @@ const UserProfileSocialAccount = ({ provider, }) => {
         }, startSlot: 
         // eslint-disable-next-line react/jsx-wrap-multilines
         jsxRuntime.jsx(Icon.Icon, { color: 'text-tertiary', size: 'small', children: isProviderLinked ? jsxRuntime.jsx(unlink.ReactComponent, {}) : jsxRuntime.jsx(add.ReactComponent, {}) }), children: isProviderLinked ? null : 'Connect' }));
-    return (jsxRuntime.jsxs("div", { className: 'user-profile-social-account', "data-testid": `social-account-${provider}`, children: [jsxRuntime.jsx("div", { className: 'user-profile-social-account__icon', children: isProviderLinked ? (jsxRuntime.jsx(ConnectedAccountAvatar.ConnectedAccountAvatar, { provider: provider, avatarUrl: connectedAccountInfo === null || connectedAccountInfo === void 0 ? void 0 : connectedAccountInfo.avatar })) : (jsxRuntime.jsx(iconic.SocialIcon, { name: provider, variant: iconThemeVariant })) }), jsxRuntime.jsx("div", { className: 'user-profile-social-account__label', children: jsxRuntime.jsx(Typography.Typography, { weight: 'medium', variant: 'body_normal', color: 'primary', children: (_a = connectedAccountInfo === null || connectedAccountInfo === void 0 ? void 0 : connectedAccountInfo.publicIdentifier) !== null && _a !== void 0 ? _a : providerLabel.providerLabel(getSocialSignInProviderForProviderEnum.getSocialSignInProviderForProviderEnum(provider)) }) }), !isActiveCredential ? renderButton() : null] }));
+    return (jsxRuntime.jsxs("div", { className: 'user-profile-social-account', "data-testid": `social-account-${provider}`, children: [jsxRuntime.jsx("div", { className: 'user-profile-social-account__icon', children: isProviderLinked ? (jsxRuntime.jsx(ConnectedAccountAvatar.ConnectedAccountAvatar, { provider: provider, avatarUrl: connectedAccountInfo === null || connectedAccountInfo === void 0 ? void 0 : connectedAccountInfo.avatar })) : (jsxRuntime.jsx(iconic.SocialIcon, { name: provider, variant: iconThemeVariant })) }), jsxRuntime.jsx(Typography.Typography, { weight: 'medium', variant: 'body_normal', color: 'primary', truncate: true, className: 'user-profile-social-account__label', children: (_a = connectedAccountInfo === null || connectedAccountInfo === void 0 ? void 0 : connectedAccountInfo.publicIdentifier) !== null && _a !== void 0 ? _a : providerLabel.providerLabel(getSocialSignInProviderForProviderEnum.getSocialSignInProviderForProviderEnum(provider)) }), !isActiveCredential ? renderButton() : null] }));
 };
 
 exports.UserProfileSocialAccount = UserProfileSocialAccount;

package/src/lib/components/UserProfile/parts/UserProfileSocialAccount/UserProfileSocialAccount.js

@@ -104,7 +104,7 @@ const UserProfileSocialAccount = ({ provider, }) => {
         }, startSlot: 
         // eslint-disable-next-line react/jsx-wrap-multilines
         jsx(Icon, { color: 'text-tertiary', size: 'small', children: isProviderLinked ? jsx(SvgUnlink, {}) : jsx(SvgAdd, {}) }), children: isProviderLinked ? null : 'Connect' }));
-    return (jsxs("div", { className: 'user-profile-social-account', "data-testid": `social-account-${provider}`, children: [jsx("div", { className: 'user-profile-social-account__icon', children: isProviderLinked ? (jsx(ConnectedAccountAvatar, { provider: provider, avatarUrl: connectedAccountInfo === null || connectedAccountInfo === void 0 ? void 0 : connectedAccountInfo.avatar })) : (jsx(SocialIcon, { name: provider, variant: iconThemeVariant })) }), jsx("div", { className: 'user-profile-social-account__label', children: jsx(Typography, { weight: 'medium', variant: 'body_normal', color: 'primary', children: (_a = connectedAccountInfo === null || connectedAccountInfo === void 0 ? void 0 : connectedAccountInfo.publicIdentifier) !== null && _a !== void 0 ? _a : providerLabel(getSocialSignInProviderForProviderEnum(provider)) }) }), !isActiveCredential ? renderButton() : null] }));
+    return (jsxs("div", { className: 'user-profile-social-account', "data-testid": `social-account-${provider}`, children: [jsx("div", { className: 'user-profile-social-account__icon', children: isProviderLinked ? (jsx(ConnectedAccountAvatar, { provider: provider, avatarUrl: connectedAccountInfo === null || connectedAccountInfo === void 0 ? void 0 : connectedAccountInfo.avatar })) : (jsx(SocialIcon, { name: provider, variant: iconThemeVariant })) }), jsx(Typography, { weight: 'medium', variant: 'body_normal', color: 'primary', truncate: true, className: 'user-profile-social-account__label', children: (_a = connectedAccountInfo === null || connectedAccountInfo === void 0 ? void 0 : connectedAccountInfo.publicIdentifier) !== null && _a !== void 0 ? _a : providerLabel(getSocialSignInProviderForProviderEnum(provider)) }), !isActiveCredential ? renderButton() : null] }));
 };
 
 export { UserProfileSocialAccount };

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

@@ -565,6 +565,7 @@ const InnerDynamicContextProvider = ({ children, theme, settings: settings$1, lo
             socialMediaLinkText,
             socialMediaUrl,
             socialProvidersFilter,
+            socialSettings: settings$1.social,
             tabsItems,
             termsOfServiceUrl,
             theme,
@@ -646,6 +647,7 @@ const InnerDynamicContextProvider = ({ children, theme, settings: settings$1, lo
         removeConnectedWalletsInfo,
         rpcProviders,
         sdkHasLoaded,
+        settings$1.social,
         secondaryWallets,
         selectedTabIndex,
         selectedTabSettings,

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

@@ -9,6 +9,7 @@ import { DynamicHandlers } from '../../shared/types/dynamicHandlers';
 import { SocialNetworkIconType } from '../../utils/functions/getSocialNetworkIcon';
 import { ThemeData, ThemeSetting } from '../ThemeContext';
 import { ChainsToConnect, IDynamicContext, NetworkValidationMode, SettingsOverrides } from './types';
+import { SocialSettings } from './types/SocialSettings';
 export declare const PUBLIC_PROJECT_LIVE_ENVIRONMENT_ID = "2762a57b-faa4-41ce-9f16-abff9300e2c9";
 export interface DynamicContextProps {
     children: ReactNode;
@@ -41,6 +42,7 @@ export interface DynamicContextProps {
         enableConnectOnlyFallback?: boolean;
         enableVisitTrackingOnConnectOnly?: boolean;
         environmentId: string;
+        social?: SocialSettings;
         /**
          * @deprecated Use events instead
          */

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

@@ -561,6 +561,7 @@ const InnerDynamicContextProvider = ({ children, theme, settings, locale, enable
             socialMediaLinkText,
             socialMediaUrl,
             socialProvidersFilter,
+            socialSettings: settings.social,
             tabsItems,
             termsOfServiceUrl,
             theme,
@@ -642,6 +643,7 @@ const InnerDynamicContextProvider = ({ children, theme, settings, locale, enable
         removeConnectedWalletsInfo,
         rpcProviders,
         sdkHasLoaded,
+        settings.social,
         secondaryWallets,
         selectedTabIndex,
         selectedTabSettings,

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

@@ -0,0 +1,7 @@
+export type SocialSettings = {
+    /**
+     * @description The strategy to use for social auth.
+     * @default 'redirect'
+     */
+    strategy?: 'popup' | 'redirect';
+};

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

@@ -14,6 +14,7 @@ import { ThemeData, ThemeSetting } from '../../ThemeContext';
 import { DisplayOrder, SetDisplayOrderPriority, SetShowAuthFlow } from '../hooks';
 import { SetCallbackType } from '../useCustomerCallbacks';
 import { SetUserAction } from '../../../store';
+import { SocialSettings } from './SocialSettings';
 export type ChainsToConnect = {
     chain: Chain;
     chainId?: number;
@@ -67,6 +68,7 @@ export interface IDynamicContext {
     accessDeniedMessagePrimary?: string;
     accessDeniedMessageSecondary?: string;
     accountSwitchState: AccountSwitchState;
+    socialSettings?: SocialSettings;
     appLogoUrl?: string;
     appName?: string;
     defaultPhoneInputIso2?: CountryIso2;

package/src/lib/context/SocialRedirectContext/SocialRedirectContext.cjs

@@ -80,6 +80,7 @@ require('../PasskeyContext/PasskeyContext.cjs');
 require('../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
+var useRedirectSocialHandler = require('./hooks/useRedirectSocialHandler/useRedirectSocialHandler.cjs');
 
 const SocialRedirectContext = React.createContext(undefined);
 const SocialRedirectContextProvider = ({ children, }) => {
@@ -252,6 +253,9 @@ const SocialRedirectContextProvider = ({ children, }) => {
         primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.id,
         getCaptchaToken,
     ]);
+    useRedirectSocialHandler.useRedirectSocialHandler({
+        setSocialProvider,
+    });
     return (jsxRuntime.jsx(SocialRedirectContext.Provider, { value: {
             enabledSocialProviders,
             redirectStatus,

package/src/lib/context/SocialRedirectContext/SocialRedirectContext.js

@@ -76,6 +76,7 @@ import '../PasskeyContext/PasskeyContext.js';
 import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
 import '../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
+import { useRedirectSocialHandler } from './hooks/useRedirectSocialHandler/useRedirectSocialHandler.js';
 
 const SocialRedirectContext = createContext(undefined);
 const SocialRedirectContextProvider = ({ children, }) => {
@@ -248,6 +249,9 @@ const SocialRedirectContextProvider = ({ children, }) => {
         primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.id,
         getCaptchaToken,
     ]);
+    useRedirectSocialHandler({
+        setSocialProvider,
+    });
     return (jsx(SocialRedirectContext.Provider, { value: {
             enabledSocialProviders,
             redirectStatus,

package/src/lib/context/SocialRedirectContext/hooks/useRedirectSocialHandler/index.d.ts

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

package/src/lib/context/SocialRedirectContext/hooks/useRedirectSocialHandler/useRedirectSocialHandler.cjs

@@ -0,0 +1,150 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../../_virtual/_tslib.cjs');
+var React = require('react');
+require('@dynamic-labs/sdk-api-core');
+require('../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('react/jsx-runtime');
+var ViewContext = require('../../../ViewContext/ViewContext.cjs');
+require('@dynamic-labs/wallet-book');
+var isSSR = require('../../../../shared/utils/functions/isSSR/isSSR.cjs');
+require('../../../../utils/constants/colors.cjs');
+require('../../../../utils/constants/values.cjs');
+require('../../../../shared/utils/classes/storage/localStorage.cjs');
+var useEffectOnce = require('../../../../shared/utils/hooks/useEffectOnce/useEffectOnce.cjs');
+require('@dynamic-labs/logger');
+require('@dynamic-labs/utils');
+var useEffectOnceCondition = require('../../../../shared/utils/hooks/useEffectOnceCondition/useEffectOnceCondition.cjs');
+require('../../../../shared/consts/index.cjs');
+require('../../../DynamicContext/DynamicContext.cjs');
+require('../../../../events/dynamicEvents.cjs');
+require('../../../CaptchaContext/CaptchaContext.cjs');
+require('../../../ErrorContext/ErrorContext.cjs');
+require('@dynamic-labs/multi-wallet');
+require('react-international-phone');
+var getSocialSignInProviderForProviderEnum = require('../../../../utils/functions/getSocialSignInProviderForProviderEnum/getSocialSignInProviderForProviderEnum.cjs');
+require('viem');
+require('viem/chains');
+require('../../../../config/ApiEndpoint.cjs');
+require('@dynamic-labs/store');
+require('../../../../locale/locale.cjs');
+var socialStorage = require('../../../../utils/functions/socialStorage/socialStorage.cjs');
+require('../../../AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../../AccountExistsContext/AccountExistsContext.cjs');
+require('../../../UserWalletsContext/UserWalletsContext.cjs');
+require('../../../VerificationContext/VerificationContext.cjs');
+require('react-dom');
+require('../../../WalletContext/WalletContext.cjs');
+require('../../../ThemeContext/ThemeContext.cjs');
+require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
+require('@dynamic-labs/types');
+var useSocialAuth = require('../../../../utils/hooks/useSocialAuth/useSocialAuth.cjs');
+require('yup');
+require('../../../MockContext/MockContext.cjs');
+require('../../../../views/CollectUserDataView/useFields.cjs');
+require('../../../FieldsStateContext/FieldsStateContext.cjs');
+require('../../../UserFieldEditorContext/UserFieldEditorContext.cjs');
+require('@dynamic-labs/rpc-providers');
+require('react-i18next');
+require('../../../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
+require('../../../../components/Alert/Alert.cjs');
+require('../../../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../../../components/IconButton/IconButton.cjs');
+require('../../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../../components/Input/Input.cjs');
+require('../../../../components/IsBrowser/IsBrowser.cjs');
+require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.cjs');
+require('../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
+require('react-focus-lock');
+require('qrcode');
+require('formik');
+require('../../../../views/WalletList/WalletList.cjs');
+require('../../SocialRedirectContext.cjs');
+require('../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('@hcaptcha/react-hcaptcha');
+require('../../../LoadingContext/LoadingContext.cjs');
+var DynamicWidgetContext = require('../../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
+require('../../../FooterAnimationContext/index.cjs');
+require('../../../WalletGroupContext/WalletGroupContext.cjs');
+require('../../../MfaSettingsContext/MfaSettingsContext.cjs');
+require('../../../IpConfigurationContext/IpConfigurationContext.cjs');
+require('../../../PasskeyContext/PasskeyContext.cjs');
+require('../../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
+require('../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
+require('../../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
+var useInternalDynamicContext = require('../../../DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
+
+const useRedirectSocialHandler = ({ setSocialProvider, }) => {
+    const { setView } = ViewContext.useViewContext();
+    const { setDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
+    const [socialStorageItem, setSocialStorageItem] = React.useState(null);
+    const { sdkHasLoaded, user, setShowAuthFlow, isRenderingEmbeddedAuthFlow, setShowDynamicUserProfile, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { completeConnection } = useSocialAuth.useSocialAuth({
+        sessionTimeout: 10000,
+    });
+    const updateInterfaceStateForSignIn = React.useCallback((socialStorageItem) => {
+        const socialSignInProvider = getSocialSignInProviderForProviderEnum.getSocialSignInProviderForProviderEnum(socialStorageItem.provider);
+        setSocialProvider(socialSignInProvider);
+        setView('social-redirect-view');
+        // Only open the auth flow when the embedded widget is not rendered
+        if (!isRenderingEmbeddedAuthFlow.current) {
+            setShowAuthFlow(true);
+        }
+    }, [setSocialProvider, setView, isRenderingEmbeddedAuthFlow, setShowAuthFlow]);
+    const updateInterfaceStateForLink = React.useCallback(() => {
+        setDynamicWidgetView('profile');
+        setShowDynamicUserProfile(true);
+    }, [setDynamicWidgetView, setShowDynamicUserProfile]);
+    useEffectOnce.useEffectOnce(() => {
+        // Do not run on server side
+        if (isSSR.isSSR())
+            return;
+        const url = new URL(window.location.href);
+        const dynamicOauthState = url.searchParams.get('dynamicOauthState');
+        const dynamicOauthCode = url.searchParams.get('dynamicOauthCode');
+        if (!dynamicOauthState || !dynamicOauthCode) {
+            return;
+        }
+        const socialStorageItem = socialStorage.searchSocialStorageByState(dynamicOauthState);
+        if (!socialStorageItem)
+            return;
+        // we got back the dynamicOauthCode from the oauth provider, set it here so we can use it to sign in
+        socialStorageItem.code = dynamicOauthCode;
+        setSocialStorageItem(socialStorageItem);
+        // Clear the state from local storage
+        socialStorage.deleteSocialStorage(socialStorageItem.provider);
+    });
+    useEffectOnceCondition.useEffectOnceCondition(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        if (!socialStorageItem)
+            return;
+        const authMode = user ? 'link' : 'signin';
+        // Update UI to reflect the original state
+        if (authMode === 'signin') {
+            updateInterfaceStateForSignIn(socialStorageItem);
+        }
+        else if (authMode === 'link') {
+            updateInterfaceStateForLink();
+        }
+        yield completeConnection({
+            authCode: socialStorageItem.code,
+            authMode,
+            captchaToken: socialStorageItem.captchaToken,
+            provider: socialStorageItem.provider,
+            state: socialStorageItem.state,
+            verifier: socialStorageItem.codeVerifier,
+        });
+    }), Boolean(socialStorageItem) && sdkHasLoaded);
+};
+
+exports.useRedirectSocialHandler = useRedirectSocialHandler;

package/src/lib/context/SocialRedirectContext/hooks/useRedirectSocialHandler/useRedirectSocialHandler.d.ts

@@ -0,0 +1,7 @@
+import { Dispatch, SetStateAction } from 'react';
+import { SocialSignInProviderEnum } from '@dynamic-labs/sdk-api-core';
+type UseRedirectSocialHandlerProps = {
+    setSocialProvider: Dispatch<SetStateAction<SocialSignInProviderEnum | undefined>>;
+};
+export declare const useRedirectSocialHandler: ({ setSocialProvider, }: UseRedirectSocialHandlerProps) => void;
+export {};

package/src/lib/context/SocialRedirectContext/hooks/useRedirectSocialHandler/useRedirectSocialHandler.js

@@ -0,0 +1,146 @@
+'use client'
+import { __awaiter } from '../../../../../../_virtual/_tslib.js';
+import { useState, useCallback } from 'react';
+import '@dynamic-labs/sdk-api-core';
+import '../../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import 'react/jsx-runtime';
+import { useViewContext } from '../../../ViewContext/ViewContext.js';
+import '@dynamic-labs/wallet-book';
+import { isSSR } from '../../../../shared/utils/functions/isSSR/isSSR.js';
+import '../../../../utils/constants/colors.js';
+import '../../../../utils/constants/values.js';
+import '../../../../shared/utils/classes/storage/localStorage.js';
+import { useEffectOnce } from '../../../../shared/utils/hooks/useEffectOnce/useEffectOnce.js';
+import '@dynamic-labs/logger';
+import '@dynamic-labs/utils';
+import { useEffectOnceCondition } from '../../../../shared/utils/hooks/useEffectOnceCondition/useEffectOnceCondition.js';
+import '../../../../shared/consts/index.js';
+import '../../../DynamicContext/DynamicContext.js';
+import '../../../../events/dynamicEvents.js';
+import '../../../CaptchaContext/CaptchaContext.js';
+import '../../../ErrorContext/ErrorContext.js';
+import '@dynamic-labs/multi-wallet';
+import 'react-international-phone';
+import { getSocialSignInProviderForProviderEnum } from '../../../../utils/functions/getSocialSignInProviderForProviderEnum/getSocialSignInProviderForProviderEnum.js';
+import 'viem';
+import 'viem/chains';
+import '../../../../config/ApiEndpoint.js';
+import '@dynamic-labs/store';
+import '../../../../locale/locale.js';
+import { searchSocialStorageByState, deleteSocialStorage } from '../../../../utils/functions/socialStorage/socialStorage.js';
+import '../../../AccessDeniedContext/AccessDeniedContext.js';
+import '../../../AccountExistsContext/AccountExistsContext.js';
+import '../../../UserWalletsContext/UserWalletsContext.js';
+import '../../../VerificationContext/VerificationContext.js';
+import 'react-dom';
+import '../../../WalletContext/WalletContext.js';
+import '../../../ThemeContext/ThemeContext.js';
+import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
+import '@dynamic-labs/types';
+import { useSocialAuth } from '../../../../utils/hooks/useSocialAuth/useSocialAuth.js';
+import 'yup';
+import '../../../MockContext/MockContext.js';
+import '../../../../views/CollectUserDataView/useFields.js';
+import '../../../FieldsStateContext/FieldsStateContext.js';
+import '../../../UserFieldEditorContext/UserFieldEditorContext.js';
+import '@dynamic-labs/rpc-providers';
+import 'react-i18next';
+import '../../../../components/Accordion/components/AccordionItem/AccordionItem.js';
+import '../../../../components/Alert/Alert.js';
+import '../../../../components/ShadowDOM/ShadowDOM.js';
+import '../../../../components/IconButton/IconButton.js';
+import '../../../../components/InlineWidget/InlineWidget.js';
+import '../../../../components/Input/Input.js';
+import '../../../../components/IsBrowser/IsBrowser.js';
+import '../../../../components/MenuList/Dropdown/Dropdown.js';
+import '../../../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.js';
+import '../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
+import 'react-focus-lock';
+import 'qrcode';
+import 'formik';
+import '../../../../views/WalletList/WalletList.js';
+import '../../SocialRedirectContext.js';
+import '../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import '@hcaptcha/react-hcaptcha';
+import '../../../LoadingContext/LoadingContext.js';
+import { useWidgetContext } from '../../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
+import '../../../FooterAnimationContext/index.js';
+import '../../../WalletGroupContext/WalletGroupContext.js';
+import '../../../MfaSettingsContext/MfaSettingsContext.js';
+import '../../../IpConfigurationContext/IpConfigurationContext.js';
+import '../../../PasskeyContext/PasskeyContext.js';
+import '../../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
+import '../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
+import '../../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
+import { useInternalDynamicContext } from '../../../DynamicContext/useDynamicContext/useInternalDynamicContext.js';
+
+const useRedirectSocialHandler = ({ setSocialProvider, }) => {
+    const { setView } = useViewContext();
+    const { setDynamicWidgetView } = useWidgetContext();
+    const [socialStorageItem, setSocialStorageItem] = useState(null);
+    const { sdkHasLoaded, user, setShowAuthFlow, isRenderingEmbeddedAuthFlow, setShowDynamicUserProfile, } = useInternalDynamicContext();
+    const { completeConnection } = useSocialAuth({
+        sessionTimeout: 10000,
+    });
+    const updateInterfaceStateForSignIn = useCallback((socialStorageItem) => {
+        const socialSignInProvider = getSocialSignInProviderForProviderEnum(socialStorageItem.provider);
+        setSocialProvider(socialSignInProvider);
+        setView('social-redirect-view');
+        // Only open the auth flow when the embedded widget is not rendered
+        if (!isRenderingEmbeddedAuthFlow.current) {
+            setShowAuthFlow(true);
+        }
+    }, [setSocialProvider, setView, isRenderingEmbeddedAuthFlow, setShowAuthFlow]);
+    const updateInterfaceStateForLink = useCallback(() => {
+        setDynamicWidgetView('profile');
+        setShowDynamicUserProfile(true);
+    }, [setDynamicWidgetView, setShowDynamicUserProfile]);
+    useEffectOnce(() => {
+        // Do not run on server side
+        if (isSSR())
+            return;
+        const url = new URL(window.location.href);
+        const dynamicOauthState = url.searchParams.get('dynamicOauthState');
+        const dynamicOauthCode = url.searchParams.get('dynamicOauthCode');
+        if (!dynamicOauthState || !dynamicOauthCode) {
+            return;
+        }
+        const socialStorageItem = searchSocialStorageByState(dynamicOauthState);
+        if (!socialStorageItem)
+            return;
+        // we got back the dynamicOauthCode from the oauth provider, set it here so we can use it to sign in
+        socialStorageItem.code = dynamicOauthCode;
+        setSocialStorageItem(socialStorageItem);
+        // Clear the state from local storage
+        deleteSocialStorage(socialStorageItem.provider);
+    });
+    useEffectOnceCondition(() => __awaiter(void 0, void 0, void 0, function* () {
+        if (!socialStorageItem)
+            return;
+        const authMode = user ? 'link' : 'signin';
+        // Update UI to reflect the original state
+        if (authMode === 'signin') {
+            updateInterfaceStateForSignIn(socialStorageItem);
+        }
+        else if (authMode === 'link') {
+            updateInterfaceStateForLink();
+        }
+        yield completeConnection({
+            authCode: socialStorageItem.code,
+            authMode,
+            captchaToken: socialStorageItem.captchaToken,
+            provider: socialStorageItem.provider,
+            state: socialStorageItem.state,
+            verifier: socialStorageItem.codeVerifier,
+        });
+    }), Boolean(socialStorageItem) && sdkHasLoaded);
+};
+
+export { useRedirectSocialHandler };

package/src/lib/data/api/embeddedWallets/embeddedWallets.cjs

@@ -24,7 +24,7 @@ var storeAuthTokenAndUser = require('../../../store/utils/storeAuthTokenAndUser/
 const createTurnkeyEmbeddedWallet = (_a) => _tslib.__awaiter(void 0, [_a], void 0, function* ({ attestation, challenge, environmentId, chains = [sdkApiCore.ChainEnum.Evm], passkeyAlias, }) {
     const embeddedWallets = [
         {
-            chains,
+            chains: chains,
             embeddedWalletProvider: sdkApiCore.EmbeddedWalletProviderEnum.Turnkeyhd,
             isAuthenticatorAttached: false,
             passkeyAlias,

package/src/lib/data/api/embeddedWallets/embeddedWallets.js

@@ -20,7 +20,7 @@ import { storeAuthTokenAndUser } from '../../../store/utils/storeAuthTokenAndUse
 const createTurnkeyEmbeddedWallet = (_a) => __awaiter(void 0, [_a], void 0, function* ({ attestation, challenge, environmentId, chains = [ChainEnum.Evm], passkeyAlias, }) {
     const embeddedWallets = [
         {
-            chains,
+            chains: chains,
             embeddedWalletProvider: EmbeddedWalletProviderEnum.Turnkeyhd,
             isAuthenticatorAttached: false,
             passkeyAlias,

package/src/lib/data/api/oauth/oauth.cjs

@@ -21,6 +21,18 @@ require('../../../shared/consts/index.cjs');
 var api = require('../api.cjs');
 var storeAuthTokenAndUser = require('../../../store/utils/storeAuthTokenAndUser/storeAuthTokenAndUser.cjs');
 
+const initAuth = (environmentId, providerType, oauthInitAuthRequest) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    try {
+        yield api.sdkApi().initAuth({
+            environmentId,
+            oauthInitAuthRequest,
+            providerType,
+        });
+    }
+    catch (e) {
+        logger.logger.error(e);
+    }
+});
 const verifyOAuth = (environmentId_1, providerType_1, _a) => _tslib.__awaiter(void 0, [environmentId_1, providerType_1, _a], void 0, function* (environmentId, providerType, { code, codeVerifier, state }) {
     const oauthRequest = {
         code,
@@ -134,6 +146,7 @@ const farcasterVerify = (farcasterVerifyRequest) => _tslib.__awaiter(void 0, voi
 
 exports.farcasterSignIn = farcasterSignIn;
 exports.farcasterVerify = farcasterVerify;
+exports.initAuth = initAuth;
 exports.signInOAuth = signInOAuth;
 exports.unlinkOAuth = unlinkOAuth;
 exports.verifyOAuth = verifyOAuth;

package/src/lib/data/api/oauth/oauth.d.ts

@@ -1,6 +1,7 @@
-import { FarcasterSignInRequest, OauthRequest, OauthResultRequest, OauthResultResponse, ProviderEnum, FarcasterVerifyRequest } from '@dynamic-labs/sdk-api-core';
+import { FarcasterSignInRequest, OauthRequest, OauthResultRequest, OauthResultResponse, ProviderEnum, FarcasterVerifyRequest, OauthInitAuthRequest } from '@dynamic-labs/sdk-api-core';
 import { UserProfile } from '../../../..';
 export declare const getOauthLoginUrl: (environmentId: string, providerType: ProviderEnum) => Promise<string | undefined>;
+export declare const initAuth: (environmentId: string, providerType: ProviderEnum, oauthInitAuthRequest: OauthInitAuthRequest) => Promise<void>;
 export declare const verifyOAuth: (environmentId: string, providerType: ProviderEnum, { code, codeVerifier, state }: OauthRequest) => Promise<UserProfile | undefined>;
 export declare const unlinkOAuth: ({ environmentId, primaryWalletId, verifiedCrentialId, }: {
     environmentId: string;

package/src/lib/data/api/oauth/oauth.js

@@ -17,6 +17,18 @@ import '../../../shared/consts/index.js';
 import { sdkApi } from '../api.js';
 import { storeAuthTokenAndUser } from '../../../store/utils/storeAuthTokenAndUser/storeAuthTokenAndUser.js';
 
+const initAuth = (environmentId, providerType, oauthInitAuthRequest) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        yield sdkApi().initAuth({
+            environmentId,
+            oauthInitAuthRequest,
+            providerType,
+        });
+    }
+    catch (e) {
+        logger.error(e);
+    }
+});
 const verifyOAuth = (environmentId_1, providerType_1, _a) => __awaiter(void 0, [environmentId_1, providerType_1, _a], void 0, function* (environmentId, providerType, { code, codeVerifier, state }) {
     const oauthRequest = {
         code,
@@ -128,4 +140,4 @@ const farcasterVerify = (farcasterVerifyRequest) => __awaiter(void 0, void 0, vo
     }
 });
 
-export { farcasterSignIn, farcasterVerify, signInOAuth, unlinkOAuth, verifyOAuth };
+export { farcasterSignIn, farcasterVerify, initAuth, signInOAuth, unlinkOAuth, verifyOAuth };