@dynamic-labs/sdk-react-core 3.0.0-alpha.31 → 3.0.0-alpha.33

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

@@ -3,13 +3,19 @@ import { SocialAccountInformation } from '@dynamic-labs/types';
 type UseSocialAccountsProps = {
     sessionTimeout: number;
 };
+type ConnectSocialProps = {
+    /**
+     * Overrides the redirectUrl provided by DynamicContextProvider
+     */
+    redirectUrl?: string;
+};
 export declare const useSocialAccounts: ({ sessionTimeout }?: UseSocialAccountsProps) => {
     readonly error: import("@dynamic-labs/types").SocialOAuthError | undefined;
     readonly getLinkedAccountInformation: (provider: ProviderEnum) => SocialAccountInformation | undefined;
     readonly isLinked: (provider: ProviderEnum) => boolean;
     readonly isProcessing: boolean;
-    readonly linkSocialAccount: (provider: ProviderEnum) => Promise<void>;
-    readonly signInWithSocialAccount: (provider: ProviderEnum) => Promise<void>;
+    readonly linkSocialAccount: (provider: ProviderEnum, { redirectUrl }?: ConnectSocialProps) => Promise<void>;
+    readonly signInWithSocialAccount: (provider: ProviderEnum, { redirectUrl }?: ConnectSocialProps) => Promise<void>;
     readonly unlinkSocialAccount: (provider: ProviderEnum) => Promise<void>;
 };
 export {};

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

@@ -131,10 +131,11 @@ const useSocialAccounts = ({ sessionTimeout } = {
         }
         return true;
     }, [handleError, projectSettings, verifiedOAuthCredentialsMap]);
-    const linkSocialAccount = useCallback((provider) => __awaiter(void 0, void 0, void 0, function* () {
+    const linkSocialAccount = useCallback((provider_1, ...args_1) => __awaiter(void 0, [provider_1, ...args_1], void 0, function* (provider, { redirectUrl } = { redirectUrl: undefined }) {
         connectSocialAccount({
             authMode: 'link',
             provider,
+            redirectUrl,
             validator: checkValidOAuthLinking,
         });
     }), [checkValidOAuthLinking, connectSocialAccount]);
@@ -201,10 +202,11 @@ const useSocialAccounts = ({ sessionTimeout } = {
         }
         return true;
     }, [handleError, (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.socialSignIn) === null || _a === void 0 ? void 0 : _a.providers]);
-    const signInWithSocialAccount = useCallback((provider) => __awaiter(void 0, void 0, void 0, function* () {
+    const signInWithSocialAccount = useCallback((provider_2, ...args_2) => __awaiter(void 0, [provider_2, ...args_2], void 0, function* (provider, { redirectUrl } = { redirectUrl: undefined }) {
         return connectSocialAccount({
             authMode: 'signin',
             provider,
+            redirectUrl,
             validator: checkValidOAuthSignIn,
         });
     }), [checkValidOAuthSignIn, connectSocialAccount]);

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

@@ -178,7 +178,7 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
             verifyFunction: () => apiCall(),
         });
     });
-    const connectSocialAccount = (_a) => _tslib.__awaiter(void 0, [_a], void 0, function* ({ authMode, provider, validator, captchaToken, }) {
+    const connectSocialAccount = (_a) => _tslib.__awaiter(void 0, [_a], void 0, function* ({ authMode, provider, validator, captchaToken, redirectUrl, }) {
         var _b, _c;
         clearError();
         setIsProcessing(true);
@@ -199,8 +199,8 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
             type: 'social',
         });
         if (provider === sdkApiCore.ProviderEnum.Farcaster)
-            return connectWithFarcaster(authMode, { captchaToken });
-        const state = randomString.randomString(8);
+            return connectWithFarcaster(authMode, { captchaToken, redirectUrl });
+        const state = randomString.randomString(32);
         const verifier = randomString.randomString(43);
         const loginUrlString = getOauthLoginUrl.getOauthLoginUrl((_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) !== null && _b !== void 0 ? _b : [], provider);
         if (!loginUrlString) {
@@ -225,6 +225,7 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
                 oauthLoginUrl,
                 onSettled,
                 provider,
+                redirectUrl,
                 sessionTimeout,
                 setIsProcessing,
                 state,
@@ -274,13 +275,13 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
             }
         }
     });
-    const connectWithFarcaster = (authMode_1, _d) => _tslib.__awaiter(void 0, [authMode_1, _d], void 0, function* (authMode, { captchaToken }) {
+    const connectWithFarcaster = (authMode_1, _d) => _tslib.__awaiter(void 0, [authMode_1, _d], void 0, function* (authMode, { captchaToken, redirectUrl: redirectUrlOverride, }) {
         const dynamicNonce = consumeNonce();
         const domain = utils.PlatformService.getHost();
         const data = yield farcaster.connect({
             domain,
             nonce: dynamicNonce,
-            redirectUrl,
+            redirectUrl: redirectUrlOverride !== null && redirectUrlOverride !== void 0 ? redirectUrlOverride : redirectUrl,
             siweUri: utils.PlatformService.getOrigin(),
         });
         if (!(data === null || data === void 0 ? void 0 : data.url) || !(data === null || data === void 0 ? void 0 : data.channelToken)) {

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

@@ -13,10 +13,11 @@ export type ConnectSocialAccountProps = {
     provider: ProviderEnum;
     validator?: (provider: ProviderEnum) => boolean;
     captchaToken?: string;
+    redirectUrl?: string;
 };
 export declare const useSocialAuth: ({ sessionTimeout, onSettled, onError, onFarcasterUrl, }: UseSocialAuthProps) => {
     readonly checkValidProvider: (provider: ProviderEnum, authMode: SocialAuthMode) => boolean;
-    readonly connectSocialAccount: ({ authMode, provider, validator, captchaToken, }: ConnectSocialAccountProps) => Promise<void>;
+    readonly connectSocialAccount: ({ authMode, provider, validator, captchaToken, redirectUrl, }: ConnectSocialAccountProps) => Promise<void>;
     readonly error: SocialOAuthError | undefined;
     readonly handleError: (provider: ProviderEnum | undefined, code: SocialOAuthErrorCode, message: string, options?: {
         raiseAuthFailure?: boolean | undefined;

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

@@ -174,7 +174,7 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
             verifyFunction: () => apiCall(),
         });
     });
-    const connectSocialAccount = (_a) => __awaiter(void 0, [_a], void 0, function* ({ authMode, provider, validator, captchaToken, }) {
+    const connectSocialAccount = (_a) => __awaiter(void 0, [_a], void 0, function* ({ authMode, provider, validator, captchaToken, redirectUrl, }) {
         var _b, _c;
         clearError();
         setIsProcessing(true);
@@ -195,8 +195,8 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
             type: 'social',
         });
         if (provider === ProviderEnum.Farcaster)
-            return connectWithFarcaster(authMode, { captchaToken });
-        const state = randomString(8);
+            return connectWithFarcaster(authMode, { captchaToken, redirectUrl });
+        const state = randomString(32);
         const verifier = randomString(43);
         const loginUrlString = getOauthLoginUrl((_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) !== null && _b !== void 0 ? _b : [], provider);
         if (!loginUrlString) {
@@ -221,6 +221,7 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
                 oauthLoginUrl,
                 onSettled,
                 provider,
+                redirectUrl,
                 sessionTimeout,
                 setIsProcessing,
                 state,
@@ -270,13 +271,13 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
             }
         }
     });
-    const connectWithFarcaster = (authMode_1, _d) => __awaiter(void 0, [authMode_1, _d], void 0, function* (authMode, { captchaToken }) {
+    const connectWithFarcaster = (authMode_1, _d) => __awaiter(void 0, [authMode_1, _d], void 0, function* (authMode, { captchaToken, redirectUrl: redirectUrlOverride, }) {
         const dynamicNonce = consumeNonce();
         const domain = PlatformService.getHost();
         const data = yield connect({
             domain,
             nonce: dynamicNonce,
-            redirectUrl,
+            redirectUrl: redirectUrlOverride !== null && redirectUrlOverride !== void 0 ? redirectUrlOverride : redirectUrl,
             siweUri: PlatformService.getOrigin(),
         });
         if (!(data === null || data === void 0 ? void 0 : data.url) || !(data === null || data === void 0 ? void 0 : data.channelToken)) {

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

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

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

@@ -0,0 +1,152 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+require('../../../context/DynamicContext/DynamicContext.cjs');
+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('../../../context/ViewContext/ViewContext.cjs');
+require('@dynamic-labs/wallet-book');
+require('../../constants/colors.cjs');
+require('../../constants/values.cjs');
+require('../../../shared/utils/classes/storage/localStorage.cjs');
+require('../../../shared/utils/classes/storage/sessionStorage.cjs');
+var hasPendingMfaAction = require('../../../shared/utils/functions/hasPendingMfaAction/hasPendingMfaAction.cjs');
+require('@dynamic-labs/utils');
+require('../../../shared/consts/index.cjs');
+require('../../../events/dynamicEvents.cjs');
+require('../../../../../_virtual/_tslib.cjs');
+require('../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../context/ErrorContext/ErrorContext.cjs');
+require('@dynamic-labs/multi-wallet');
+require('react-international-phone');
+require('../../../config/ApiEndpoint.cjs');
+require('@dynamic-labs/store');
+require('../../../locale/locale.cjs');
+require('../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('../../../context/UserWalletsContext/UserWalletsContext.cjs');
+require('../../../context/VerificationContext/VerificationContext.cjs');
+require('react-dom');
+require('../../../context/WalletContext/WalletContext.cjs');
+require('../useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.cjs');
+require('../../../context/ThemeContext/ThemeContext.cjs');
+require('../useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
+require('@dynamic-labs/types');
+require('../../../context/LoadingContext/LoadingContext.cjs');
+require('yup');
+require('../../../context/MockContext/MockContext.cjs');
+require('../../../views/CollectUserDataView/useFields.cjs');
+require('../../../context/FieldsStateContext/FieldsStateContext.cjs');
+require('../../../context/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('../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
+require('../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('@hcaptcha/react-hcaptcha');
+require('../../../context/FooterAnimationContext/index.cjs');
+require('../../../context/WalletGroupContext/WalletGroupContext.cjs');
+var useMfa = require('../useMfa/useMfa.cjs');
+require('../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
+require('../../../context/PasskeyContext/PasskeyContext.cjs');
+require('../../../context/MfaSettingsContext/MfaSettingsContext.cjs');
+require('../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
+require('../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
+require('../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
+require('../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
+require('../../../../polyfills.cjs');
+require('../../../context/ErrorBoundary/ErrorBoundaryBase.cjs');
+require('../../../context/ErrorBoundary/ErrorBoundaryContext.cjs');
+require('../../../widgets/DynamicBridgeWidget/context/DynamicBridgeWidgetContext/DynamicBridgeWidgetContext.cjs');
+require('../../../widgets/DynamicWidget/components/DynamicWidgetCard/DynamicWidgetCard.cjs');
+require('../../../context/WidgetRegistry/WidgetRegistryContextProvider.cjs');
+require('../../../context/FundingContext/FundingContext.cjs');
+require('../../../context/SendBalanceContext/SendBalanceContext.cjs');
+require('../../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
+require('../../../context/ConnectWithOtpContext/constants.cjs');
+require('../../../context/ReinitializeContext/ReinitializeContextProvider.cjs');
+var useInternalDynamicContext = require('../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
+
+/**
+ * This hook is used to ensure we show the correct MFA view on page refresh
+ */
+const useSyncMfaFlow = () => {
+    const { setShowAuthFlow, userWithMissingInfo, sdkHasLoaded } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setView } = ViewContext.useViewContext();
+    const { getUserDevices } = useMfa.useMfa();
+    // this is used to make sure we only trigger the effect once
+    const triggered = React.useRef(false);
+    React.useEffect(() => {
+        var _a;
+        // boilterplate: we don't want to run the sync logic if the sdk hasn't finished loading,
+        // or if the effect has already been triggered
+        if (!sdkHasLoaded || triggered.current) {
+            return;
+        }
+        // this is the case when the user has fully logged in and completed all mfa steps if needed,
+        // like accepting their backup codes after enrolling
+        if (!userWithMissingInfo || !hasPendingMfaAction.hasPendingMfaAction(userWithMissingInfo)) {
+            return;
+        }
+        triggered.current = true;
+        /**
+         * There are two scenarios:
+         *   1. The user has not yet completed mfa
+         *   2. The user has completed mfa, but has not yet acknowledged their backup codes
+         *
+         * In scenario 1, the user scope will contain 'requiresAdditionalAuth'. In this case, we need
+         * to show the enrollment view or verification view, depending on whether the user has devices
+         *
+         * In scenario 2, the user scope will not contain 'requiresAdditionalAuth', and the user
+         * mfaBackupCodeAcknowledgement field will be 'pending'. In this case, we need to show the
+         * backup codes view
+         */
+        setShowAuthFlow(true);
+        if ((_a = userWithMissingInfo.scope) === null || _a === void 0 ? void 0 : _a.includes('requiresAdditionalAuth')) {
+            getUserDevices().then((devices) => {
+                if (devices.length === 0) {
+                    setView('mfa-choose-device');
+                }
+                else {
+                    setView('mfa-verification');
+                }
+            });
+        }
+        else {
+            setView('mfa-display-backup-codes');
+        }
+        // TODO: Add / call handler for customers using headless
+    }, [
+        getUserDevices,
+        sdkHasLoaded,
+        setShowAuthFlow,
+        setView,
+        userWithMissingInfo,
+    ]);
+};
+
+exports.useSyncMfaFlow = useSyncMfaFlow;

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

@@ -0,0 +1,4 @@
+/**
+ * This hook is used to ensure we show the correct MFA view on page refresh
+ */
+export declare const useSyncMfaFlow: () => void;

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

@@ -0,0 +1,148 @@
+'use client'
+import { useRef, useEffect } from 'react';
+import '../../../context/DynamicContext/DynamicContext.js';
+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 '../../../context/ViewContext/ViewContext.js';
+import '@dynamic-labs/wallet-book';
+import '../../constants/colors.js';
+import '../../constants/values.js';
+import '../../../shared/utils/classes/storage/localStorage.js';
+import '../../../shared/utils/classes/storage/sessionStorage.js';
+import { hasPendingMfaAction } from '../../../shared/utils/functions/hasPendingMfaAction/hasPendingMfaAction.js';
+import '@dynamic-labs/utils';
+import '../../../shared/consts/index.js';
+import '../../../events/dynamicEvents.js';
+import '../../../../../_virtual/_tslib.js';
+import '../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../context/ErrorContext/ErrorContext.js';
+import '@dynamic-labs/multi-wallet';
+import 'react-international-phone';
+import '../../../config/ApiEndpoint.js';
+import '@dynamic-labs/store';
+import '../../../locale/locale.js';
+import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../../context/AccountExistsContext/AccountExistsContext.js';
+import '../../../context/UserWalletsContext/UserWalletsContext.js';
+import '../../../context/VerificationContext/VerificationContext.js';
+import 'react-dom';
+import '../../../context/WalletContext/WalletContext.js';
+import '../useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.js';
+import '../../../context/ThemeContext/ThemeContext.js';
+import '../useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
+import '@dynamic-labs/types';
+import '../../../context/LoadingContext/LoadingContext.js';
+import 'yup';
+import '../../../context/MockContext/MockContext.js';
+import '../../../views/CollectUserDataView/useFields.js';
+import '../../../context/FieldsStateContext/FieldsStateContext.js';
+import '../../../context/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 '../../../context/SocialRedirectContext/SocialRedirectContext.js';
+import '../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import '@hcaptcha/react-hcaptcha';
+import '../../../context/FooterAnimationContext/index.js';
+import '../../../context/WalletGroupContext/WalletGroupContext.js';
+import { useMfa } from '../useMfa/useMfa.js';
+import '../../../context/IpConfigurationContext/IpConfigurationContext.js';
+import '../../../context/PasskeyContext/PasskeyContext.js';
+import '../../../context/MfaSettingsContext/MfaSettingsContext.js';
+import '../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
+import '../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
+import '../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
+import '../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
+import '../../../../polyfills.js';
+import '../../../context/ErrorBoundary/ErrorBoundaryBase.js';
+import '../../../context/ErrorBoundary/ErrorBoundaryContext.js';
+import '../../../widgets/DynamicBridgeWidget/context/DynamicBridgeWidgetContext/DynamicBridgeWidgetContext.js';
+import '../../../widgets/DynamicWidget/components/DynamicWidgetCard/DynamicWidgetCard.js';
+import '../../../context/WidgetRegistry/WidgetRegistryContextProvider.js';
+import '../../../context/FundingContext/FundingContext.js';
+import '../../../context/SendBalanceContext/SendBalanceContext.js';
+import '../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
+import '../../../context/ConnectWithOtpContext/constants.js';
+import '../../../context/ReinitializeContext/ReinitializeContextProvider.js';
+import { useInternalDynamicContext } from '../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
+
+/**
+ * This hook is used to ensure we show the correct MFA view on page refresh
+ */
+const useSyncMfaFlow = () => {
+    const { setShowAuthFlow, userWithMissingInfo, sdkHasLoaded } = useInternalDynamicContext();
+    const { setView } = useViewContext();
+    const { getUserDevices } = useMfa();
+    // this is used to make sure we only trigger the effect once
+    const triggered = useRef(false);
+    useEffect(() => {
+        var _a;
+        // boilterplate: we don't want to run the sync logic if the sdk hasn't finished loading,
+        // or if the effect has already been triggered
+        if (!sdkHasLoaded || triggered.current) {
+            return;
+        }
+        // this is the case when the user has fully logged in and completed all mfa steps if needed,
+        // like accepting their backup codes after enrolling
+        if (!userWithMissingInfo || !hasPendingMfaAction(userWithMissingInfo)) {
+            return;
+        }
+        triggered.current = true;
+        /**
+         * There are two scenarios:
+         *   1. The user has not yet completed mfa
+         *   2. The user has completed mfa, but has not yet acknowledged their backup codes
+         *
+         * In scenario 1, the user scope will contain 'requiresAdditionalAuth'. In this case, we need
+         * to show the enrollment view or verification view, depending on whether the user has devices
+         *
+         * In scenario 2, the user scope will not contain 'requiresAdditionalAuth', and the user
+         * mfaBackupCodeAcknowledgement field will be 'pending'. In this case, we need to show the
+         * backup codes view
+         */
+        setShowAuthFlow(true);
+        if ((_a = userWithMissingInfo.scope) === null || _a === void 0 ? void 0 : _a.includes('requiresAdditionalAuth')) {
+            getUserDevices().then((devices) => {
+                if (devices.length === 0) {
+                    setView('mfa-choose-device');
+                }
+                else {
+                    setView('mfa-verification');
+                }
+            });
+        }
+        else {
+            setView('mfa-display-backup-codes');
+        }
+        // TODO: Add / call handler for customers using headless
+    }, [
+        getUserDevices,
+        sdkHasLoaded,
+        setShowAuthFlow,
+        setView,
+        userWithMissingInfo,
+    ]);
+};
+
+export { useSyncMfaFlow };

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

@@ -18,6 +18,7 @@ require('../../constants/colors.cjs');
 require('../../constants/values.cjs');
 require('../../../shared/utils/classes/storage/localStorage.cjs');
 require('../../../shared/utils/classes/storage/sessionStorage.cjs');
+var hasPendingMfaAction = require('../../../shared/utils/functions/hasPendingMfaAction/hasPendingMfaAction.cjs');
 require('@dynamic-labs/utils');
 require('../../../shared/consts/index.cjs');
 require('../../../context/CaptchaContext/CaptchaContext.cjs');
@@ -93,7 +94,7 @@ require('../../../context/ReinitializeContext/ReinitializeContextProvider.cjs');
 var useInternalDynamicContext = require('../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
 
 const useSyncOnboardingFlow = () => {
-    const { setShowAuthFlow, unauthenticatedUser, handlers, headless, sdkHasLoaded, setSelectedWalletConnectorKey, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setShowAuthFlow, userWithMissingInfo, handlers, headless, sdkHasLoaded, setSelectedWalletConnectorKey, } = useInternalDynamicContext.useInternalDynamicContext();
     const { setView } = ViewContext.useViewContext();
     const { updateUser } = useUserUpdateRequest.useUserUpdateRequestInternal({
         validationSchemaStripUnknown: false,
@@ -113,12 +114,12 @@ const useSyncOnboardingFlow = () => {
         const handleHeadlessOnboarding = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
             var _b;
             if (!(handlers === null || handlers === void 0 ? void 0 : handlers.handleUserOnboarding) ||
-                !((_b = unauthenticatedUser === null || unauthenticatedUser === void 0 ? void 0 : unauthenticatedUser.missingFields) === null || _b === void 0 ? void 0 : _b.length)) {
+                !((_b = userWithMissingInfo === null || userWithMissingInfo === void 0 ? void 0 : userWithMissingInfo.missingFields) === null || _b === void 0 ? void 0 : _b.length)) {
                 return;
             }
             triggeredOnboarding.current = true;
             try {
-                const missingFieldsRequestInput = unauthenticatedUser.missingFields.map((field) => ({
+                const missingFieldsRequestInput = userWithMissingInfo.missingFields.map((field) => ({
                     isCustom: field.type === 'custom',
                     key: field.name,
                     label: field.label,
@@ -126,7 +127,7 @@ const useSyncOnboardingFlow = () => {
                 }));
                 const onboardingResponse = yield handlers.handleUserOnboarding(missingFieldsRequestInput);
                 const userFields = {};
-                const customFields = Object.assign({}, unauthenticatedUser === null || unauthenticatedUser === void 0 ? void 0 : unauthenticatedUser.metadata);
+                const customFields = Object.assign({}, userWithMissingInfo === null || userWithMissingInfo === void 0 ? void 0 : userWithMissingInfo.metadata);
                 onboardingResponse.forEach((field) => {
                     if (field.isCustom) {
                         customFields[field.key] = field.value;
@@ -147,7 +148,7 @@ const useSyncOnboardingFlow = () => {
         const handleOnboarding = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
             triggeredOnboarding.current = true;
             setShowAuthFlow(true);
-            const lastVerifiedCredential = unauthenticatedUser === null || unauthenticatedUser === void 0 ? void 0 : unauthenticatedUser.verifiedCredentials.find((vc) => vc.id === (unauthenticatedUser === null || unauthenticatedUser === void 0 ? void 0 : unauthenticatedUser.lastVerifiedCredentialId));
+            const lastVerifiedCredential = userWithMissingInfo === null || userWithMissingInfo === void 0 ? void 0 : userWithMissingInfo.verifiedCredentials.find((vc) => vc.id === (userWithMissingInfo === null || userWithMissingInfo === void 0 ? void 0 : userWithMissingInfo.lastVerifiedCredentialId));
             if (lastVerifiedCredential === null || lastVerifiedCredential === void 0 ? void 0 : lastVerifiedCredential.walletName) {
                 setSelectedWalletConnectorKey(lastVerifiedCredential === null || lastVerifiedCredential === void 0 ? void 0 : lastVerifiedCredential.walletName);
             }
@@ -170,7 +171,8 @@ const useSyncOnboardingFlow = () => {
         });
         if (!sdkHasLoaded ||
             triggeredOnboarding.current ||
-            !((_a = unauthenticatedUser === null || unauthenticatedUser === void 0 ? void 0 : unauthenticatedUser.missingFields) === null || _a === void 0 ? void 0 : _a.length)) {
+            !((_a = userWithMissingInfo === null || userWithMissingInfo === void 0 ? void 0 : userWithMissingInfo.missingFields) === null || _a === void 0 ? void 0 : _a.length) ||
+            hasPendingMfaAction.hasPendingMfaAction(userWithMissingInfo)) {
             return;
         }
         if (handlers === null || handlers === void 0 ? void 0 : handlers.handleUserOnboarding) {
@@ -185,7 +187,7 @@ const useSyncOnboardingFlow = () => {
         return;
     }, [
         sdkHasLoaded,
-        unauthenticatedUser,
+        userWithMissingInfo,
         handlers,
         completeAuth,
         updateUser,

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

@@ -14,6 +14,7 @@ import '../../constants/colors.js';
 import '../../constants/values.js';
 import '../../../shared/utils/classes/storage/localStorage.js';
 import '../../../shared/utils/classes/storage/sessionStorage.js';
+import { hasPendingMfaAction } from '../../../shared/utils/functions/hasPendingMfaAction/hasPendingMfaAction.js';
 import '@dynamic-labs/utils';
 import '../../../shared/consts/index.js';
 import '../../../context/CaptchaContext/CaptchaContext.js';
@@ -89,7 +90,7 @@ import '../../../context/ReinitializeContext/ReinitializeContextProvider.js';
 import { useInternalDynamicContext } from '../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
 
 const useSyncOnboardingFlow = () => {
-    const { setShowAuthFlow, unauthenticatedUser, handlers, headless, sdkHasLoaded, setSelectedWalletConnectorKey, } = useInternalDynamicContext();
+    const { setShowAuthFlow, userWithMissingInfo, handlers, headless, sdkHasLoaded, setSelectedWalletConnectorKey, } = useInternalDynamicContext();
     const { setView } = useViewContext();
     const { updateUser } = useUserUpdateRequestInternal({
         validationSchemaStripUnknown: false,
@@ -109,12 +110,12 @@ const useSyncOnboardingFlow = () => {
         const handleHeadlessOnboarding = () => __awaiter(void 0, void 0, void 0, function* () {
             var _b;
             if (!(handlers === null || handlers === void 0 ? void 0 : handlers.handleUserOnboarding) ||
-                !((_b = unauthenticatedUser === null || unauthenticatedUser === void 0 ? void 0 : unauthenticatedUser.missingFields) === null || _b === void 0 ? void 0 : _b.length)) {
+                !((_b = userWithMissingInfo === null || userWithMissingInfo === void 0 ? void 0 : userWithMissingInfo.missingFields) === null || _b === void 0 ? void 0 : _b.length)) {
                 return;
             }
             triggeredOnboarding.current = true;
             try {
-                const missingFieldsRequestInput = unauthenticatedUser.missingFields.map((field) => ({
+                const missingFieldsRequestInput = userWithMissingInfo.missingFields.map((field) => ({
                     isCustom: field.type === 'custom',
                     key: field.name,
                     label: field.label,
@@ -122,7 +123,7 @@ const useSyncOnboardingFlow = () => {
                 }));
                 const onboardingResponse = yield handlers.handleUserOnboarding(missingFieldsRequestInput);
                 const userFields = {};
-                const customFields = Object.assign({}, unauthenticatedUser === null || unauthenticatedUser === void 0 ? void 0 : unauthenticatedUser.metadata);
+                const customFields = Object.assign({}, userWithMissingInfo === null || userWithMissingInfo === void 0 ? void 0 : userWithMissingInfo.metadata);
                 onboardingResponse.forEach((field) => {
                     if (field.isCustom) {
                         customFields[field.key] = field.value;
@@ -143,7 +144,7 @@ const useSyncOnboardingFlow = () => {
         const handleOnboarding = () => __awaiter(void 0, void 0, void 0, function* () {
             triggeredOnboarding.current = true;
             setShowAuthFlow(true);
-            const lastVerifiedCredential = unauthenticatedUser === null || unauthenticatedUser === void 0 ? void 0 : unauthenticatedUser.verifiedCredentials.find((vc) => vc.id === (unauthenticatedUser === null || unauthenticatedUser === void 0 ? void 0 : unauthenticatedUser.lastVerifiedCredentialId));
+            const lastVerifiedCredential = userWithMissingInfo === null || userWithMissingInfo === void 0 ? void 0 : userWithMissingInfo.verifiedCredentials.find((vc) => vc.id === (userWithMissingInfo === null || userWithMissingInfo === void 0 ? void 0 : userWithMissingInfo.lastVerifiedCredentialId));
             if (lastVerifiedCredential === null || lastVerifiedCredential === void 0 ? void 0 : lastVerifiedCredential.walletName) {
                 setSelectedWalletConnectorKey(lastVerifiedCredential === null || lastVerifiedCredential === void 0 ? void 0 : lastVerifiedCredential.walletName);
             }
@@ -166,7 +167,8 @@ const useSyncOnboardingFlow = () => {
         });
         if (!sdkHasLoaded ||
             triggeredOnboarding.current ||
-            !((_a = unauthenticatedUser === null || unauthenticatedUser === void 0 ? void 0 : unauthenticatedUser.missingFields) === null || _a === void 0 ? void 0 : _a.length)) {
+            !((_a = userWithMissingInfo === null || userWithMissingInfo === void 0 ? void 0 : userWithMissingInfo.missingFields) === null || _a === void 0 ? void 0 : _a.length) ||
+            hasPendingMfaAction(userWithMissingInfo)) {
             return;
         }
         if (handlers === null || handlers === void 0 ? void 0 : handlers.handleUserOnboarding) {
@@ -181,7 +183,7 @@ const useSyncOnboardingFlow = () => {
         return;
     }, [
         sdkHasLoaded,
-        unauthenticatedUser,
+        userWithMissingInfo,
         handlers,
         completeAuth,
         updateUser,