@dynamic-labs/sdk-react-core/src/lib/utils/hooks/useSyncMfaFlow/useSyncMfaFlow.js

A React SDK for implementing wallet web3 authentication and authorization to your website.

'use client'
import { useRef, useEffect } from 'react';
import '../../../context/DynamicContext/DynamicContext.js';
import '../../../store/state/loadingAndLifecycle/loadingAndLifecycle.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 '@dynamic-labs/utils';
import '../../constants/colors.js';
import '../../constants/values.js';
import { hasPendingMfaAction } from '../../../shared/utils/functions/hasPendingMfaAction/hasPendingMfaAction.js';
import '../../../shared/consts/index.js';
import { useInternalDynamicEvents } from '../events/useDynamicEvents/useDynamicEvents.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 '../../../store/state/nonce/nonce.js';
import '../../../store/state/projectSettings/projectSettings.js';
import '../../../config/ApiEndpoint.js';
import '../../../store/state/user/user.js';
import '../../../locale/locale.js';
import '../../../store/state/dynamicContextProps/dynamicContextProps.js';
import '../../../store/state/primaryWalletId/primaryWalletId.js';
import '../../../store/state/connectedWalletsInfo/connectedWalletsInfo.js';
import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
import '../../../context/AccountExistsContext/AccountExistsContext.js';
import '../../../context/UserWalletsContext/UserWalletsContext.js';
import '../../../events/dynamicEvents.js';
import '../../../store/state/authMode/authMode.js';
import '../../../context/VerificationContext/VerificationContext.js';
import 'react-dom';
import '../../functions/compareChains/compareChains.js';
import '../../../views/Passkey/utils/findPrimaryEmbeddedChain/findPrimaryEmbeddedChain.js';
import '../../../context/ThemeContext/ThemeContext.js';
import '../useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
import 'bs58';
import '@dynamic-labs/types';
import '../../../context/SocialRedirectContext/SocialRedirectContext.js';
import '../../../context/LoadingContext/LoadingContext.js';
import '../../../context/WalletContext/WalletContext.js';
import '../useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.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 '../../../store/state/walletOptions/walletOptions.js';
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/OverlayCard/OverlayCard.js';
import '../../../components/Transition/ZoomTransition/ZoomTransition.js';
import '../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
import '../../../components/Transition/OpacityTransition/OpacityTransition.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 '../useSubdomainCheck/useSubdomainCheck.js';
import '../../../context/WalletGroupContext/WalletGroupContext.js';
import '../../../context/IpConfigurationContext/IpConfigurationContext.js';
import '../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
import '../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
import '@hcaptcha/react-hcaptcha';
import '../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
import '../../../context/FooterAnimationContext/index.js';
import '../../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
import { useMfa } from '../useMfa/useMfa.js';
import '../../../context/PasskeyContext/PasskeyContext.js';
import '../../../widgets/DynamicWidget/helpers/convertExchangeKeyAndProviderEnum.js';
import '../../../store/state/sendBalances.js';
import '../../../store/state/connectorsInitializing/connectorsInitializing.js';
import '../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';
import '../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
import '../../../views/TransactionConfirmationView/TransactionConfirmationView.js';
import '../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
import '../../../context/OnrampContext/OnrampContext.js';
import '../../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFunds.js';
import '../../../../index.js';
import '../../../store/state/tokenBalances.js';
import '../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
import { useInternalDynamicContext } from '../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.js';

/**
 * This hook is used to ensure we show the correct MFA view on page refresh
 */
const useSyncMfaFlow = ({ handler: headlessHandler, } = {}) => {
    const { setShowAuthFlow, userWithMissingInfo, sdkHasLoaded } = useInternalDynamicContext();
    const { pushView, clearStackAndPush } = useViewContext();
    const { getUserDevices } = useMfa();
    // this is used to make sure we only trigger the effect once
    const triggered = useRef(false);
    useInternalDynamicEvents('logout', () => {
        triggered.current = 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;
        // if a handler is provided, we assume "headless mode"
        if (headlessHandler) {
            setShowAuthFlow(false);
            headlessHandler();
            return;
        }
        /**
         * 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) {
                    pushView('mfa-choose-device');
                }
                else {
                    pushView('mfa-verification');
                }
            });
        }
        else {
            clearStackAndPush('mfa-display-backup-codes');
        }
    }, [
        getUserDevices,
        sdkHasLoaded,
        setShowAuthFlow,
        pushView,
        userWithMissingInfo,
        headlessHandler,
        clearStackAndPush,
    ]);
};

export { useSyncMfaFlow };