@abstraxn/signer-react 2.1.4 → 2.2.0

package/dist/src/components/AbstraxnProvider/AbstraxnProviderInner.js

@@ -11,6 +11,7 @@ import { parseEther, createPublicClient, http } from "viem";
 import { ExternalWalletButtons } from "../../ExternalWalletButtons";
 import { EVM_CHAINS, SOLANA_CHAINS, getChainById, toCoreChain, } from "../../chains";
 import { AbstraxnContext } from "./context";
+import { isLinkAuthCallback } from "./utils";
 /** Syncs wagmi disconnect to external wallet state; only rendered when wagmi is available (under WagmiProvider). */
 function WagmiConnectionEffectSync({ onDisconnect, }) {
     useConnectionEffect({ onDisconnect });
@@ -47,6 +48,72 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
     useEffect(() => {
         isExternalWalletConnectedRef.current = isExternalWalletConnected;
     }, [isExternalWalletConnected]);
+    // Detect link-auth error in popup: notify opener and close (run first so popup closes on error)
+    useEffect(() => {
+        if (typeof window === "undefined" || !window.opener)
+            return;
+        const urlParams = new URLSearchParams(window.location.search);
+        const errorParam = urlParams.get("error");
+        if (!errorParam)
+            return;
+        let provider = "google";
+        try {
+            const linkingMetadataRaw = urlParams.get("linkingMetadata");
+            if (linkingMetadataRaw) {
+                const linkingMetadata = JSON.parse(decodeURIComponent(linkingMetadataRaw));
+                const authProvider = linkingMetadata?.authProvider;
+                if (authProvider) {
+                    provider = String(authProvider).toLowerCase();
+                }
+            }
+        }
+        catch {
+            // keep default provider
+        }
+        let errorMessage;
+        try {
+            errorMessage = decodeURIComponent(errorParam);
+        }
+        catch {
+            errorMessage = errorParam;
+        }
+        try {
+            window.opener.postMessage({ type: "abstraxn-auth-link-error", provider, error: errorMessage }, window.location.origin);
+        }
+        finally {
+            window.close();
+        }
+    }, []);
+    // Detect link-auth callback in popup: notify opener and close (run early, no wallet dependency)
+    useEffect(() => {
+        if (typeof window === "undefined" || !window.opener)
+            return;
+        const urlParams = new URLSearchParams(window.location.search);
+        const stampingRequired = urlParams.get("stampingRequired") === "true";
+        const activityBody = urlParams.get("activityBody");
+        if (!stampingRequired || !activityBody)
+            return;
+        let provider = "google";
+        try {
+            const linkingMetadataRaw = urlParams.get("linkingMetadata");
+            if (linkingMetadataRaw) {
+                const linkingMetadata = JSON.parse(decodeURIComponent(linkingMetadataRaw));
+                const authProvider = linkingMetadata?.authProvider;
+                if (authProvider) {
+                    provider = String(authProvider).toLowerCase();
+                }
+            }
+        }
+        catch {
+            // keep default provider
+        }
+        try {
+            window.opener.postMessage({ type: "abstraxn-auth-link-done", provider, activityBody }, window.location.origin);
+        }
+        finally {
+            window.close();
+        }
+    }, []);
     // Track Solana state changes
     useEffect(() => {
         if (solana?.wallet?.connected && solana?.wallet?.publicKey) {
@@ -156,20 +223,37 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
             return;
         requestAnimationFrame(() => {
             if (externalWalletsEnabled) {
-                // Show external wallet container when enabled
-                if (onboardingAny.externalWalletContainer) {
+                // Don't show external wallet on OTP or MFA (auth code) screen
+                const isOtpScreen = onboardingAny.otpVerificationScreen &&
+                    onboardingAny.otpVerificationScreen.parentElement &&
+                    onboardingAny.otpVerificationScreen.offsetParent !== null;
+                const isMfaScreen = onboardingAny.mfaVerificationScreen &&
+                    onboardingAny.mfaVerificationScreen.parentElement &&
+                    onboardingAny.mfaVerificationScreen.offsetParent !== null;
+                if (!isOtpScreen && !isMfaScreen && onboardingAny.externalWalletContainer) {
                     onboardingAny.externalWalletContainer.style.display = "";
                 }
-                // Show divider if email/Google are also visible
-                const authMethods = onboardingAny.config?.authMethods || [
-                    "otp",
-                    "google",
-                ];
-                const showEmail = authMethods.includes("otp");
-                const showGoogle = authMethods.includes("google");
-                const hasEmailOrGoogle = showEmail || showGoogle;
-                if (onboardingAny.externalWalletDivider && hasEmailOrGoogle) {
-                    onboardingAny.externalWalletDivider.style.display = "";
+                else if (onboardingAny.externalWalletContainer) {
+                    onboardingAny.externalWalletContainer.style.display = "none";
+                }
+                // Show divider only if email/Google are also visible (and not on OTP/MFA)
+                if (!isOtpScreen && !isMfaScreen) {
+                    const authMethods = onboardingAny.config?.authMethods || [
+                        "otp",
+                        "google",
+                    ];
+                    const showEmail = authMethods.includes("otp");
+                    const showGoogle = authMethods.includes("google");
+                    const hasEmailOrGoogle = showEmail || showGoogle;
+                    if (onboardingAny.externalWalletDivider && hasEmailOrGoogle) {
+                        onboardingAny.externalWalletDivider.style.display = "";
+                    }
+                    else if (onboardingAny.externalWalletDivider) {
+                        onboardingAny.externalWalletDivider.style.display = "none";
+                    }
+                }
+                else if (onboardingAny.externalWalletDivider) {
+                    onboardingAny.externalWalletDivider.style.display = "none";
                 }
             }
             else {
@@ -513,6 +597,12 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
                     const authManager = walletInstance.getAuthManager();
                     const user = await authManager.verifyOTP(otpIdRef.current, otp);
                     otpIdRef.current = null;
+                    const lastAuthState = authManager.getLastAuthState();
+                    if (lastAuthState?.mfaRequired === true) {
+                        // Show MFA verification screen; do not connect until MFA is verified
+                        setError(null);
+                        return { success: true, user, mfaRequired: true };
+                    }
                     // Connect wallet after successful authentication
                     await walletInstance.connect();
                     // Clear any previous errors on successful verification
@@ -526,6 +616,51 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
                     return { success: false, error: errorMessage };
                 }
             },
+            onMfaVerify: async (code) => {
+                try {
+                    if (!walletInstance)
+                        throw new Error("Wallet not initialized");
+                    await walletInstance.verifyMfa(code);
+                    await walletInstance.connect();
+                    setError(null);
+                    // Explicitly refresh provider state so OnboardingUI / app re-renders as connected without relying on connect event
+                    try {
+                        const whoamiInfo = await walletInstance.getWhoami();
+                        if (whoamiInfo) {
+                            setIsConnected(true);
+                            const userInfo = await walletInstance.getUserInfo();
+                            setUser(userInfo);
+                            setWhoami(whoamiInfo);
+                            try {
+                                const addr = await walletInstance.getAddress();
+                                setAddress(addr);
+                            }
+                            catch (_e) { /* optional */ }
+                            try {
+                                const cid = await walletInstance.getChainId();
+                                setChainId(cid);
+                            }
+                            catch (_e) { /* optional */ }
+                        }
+                    }
+                    catch (refreshErr) {
+                        console.warn("Post-MFA state refresh:", refreshErr);
+                    }
+                    // Clear OAuth callback params from URL so app shows connected state without refresh
+                    if (typeof window !== "undefined") {
+                        const url = new URL(window.location.href);
+                        const keys = ["success", "mfaRequired", "user", "accessToken", "refreshToken", "turnkeyPublicKey", "error", "provider", "authProvider"];
+                        keys.forEach((k) => url.searchParams.delete(k));
+                        window.history.replaceState({}, document.title, url.pathname + url.search);
+                    }
+                    return { success: true };
+                }
+                catch (err) {
+                    console.error("MFA Verify Error:", err);
+                    const errorMessage = err instanceof Error ? err.message : "MFA verification failed";
+                    return { success: false, error: errorMessage };
+                }
+            },
             onGoogleLogin: async () => {
                 if (!walletInstance)
                     throw new Error("Wallet not initialized");
@@ -535,6 +670,7 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
                 try {
                     localStorage.setItem("abstraxn_connection_type", connectionTypeValue);
                     localStorage.setItem("abstraxn_oauth_pending", "google");
+                    localStorage.setItem("abstraxn_oauth_ui", "modal");
                 }
                 catch (e) {
                     // Ignore localStorage errors
@@ -563,6 +699,7 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
                 try {
                     localStorage.setItem("abstraxn_connection_type", connectionTypeValue);
                     localStorage.setItem("abstraxn_oauth_pending", "twitter");
+                    localStorage.setItem("abstraxn_oauth_ui", "modal");
                 }
                 catch (e) {
                     // Ignore localStorage errors
@@ -591,6 +728,7 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
                 try {
                     localStorage.setItem("abstraxn_connection_type", connectionTypeValue);
                     localStorage.setItem("abstraxn_oauth_pending", "discord");
+                    localStorage.setItem("abstraxn_oauth_ui", "modal");
                 }
                 catch (e) {
                     // Ignore localStorage errors
@@ -651,6 +789,16 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
             onLoginSuccess: async (_data) => {
                 // Clear any previous errors on successful login
                 setError(null);
+                // Clear URL params (e.g. after OAuth MFA verification so success/user/accessToken are removed)
+                if (typeof window !== "undefined") {
+                    window.history.replaceState({}, document.title, window.location.pathname);
+                }
+                // Set user from wallet (covers OAuth MFA path where we did not call setUser in the callback)
+                if (walletInstance) {
+                    const currentUser = walletInstance.getAuthManager().getCurrentUser();
+                    if (currentUser)
+                        setUser(currentUser);
+                }
                 // Restore connection type from localStorage for OAuth logins (Google, X, Discord)
                 // This ensures connectionType is set after OAuth redirects
                 try {
@@ -804,16 +952,18 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
             onboardingAny.modalOverlay.style.display = "none";
             document.body.style.overflow = "";
         }
-        else if (hasSuccess) {
-            // If success=true is in URL, show loading modal
-            // Use setTimeout to ensure onboarding is fully initialized
-            setTimeout(() => {
-                const onboardingInstance = onboardingRef.current;
-                if (onboardingInstance && onboardingInstance.showLoadingModal) {
-                    // Directly show loading modal - it creates its own overlay with header and footer
-                    onboardingInstance.showLoadingModal();
-                }
-            }, 150);
+        else if (hasSuccess && !isLinkAuthCallback(urlParams)) {
+            // If success=true is in URL (login flow only), show loading modal. Skip for link-auth callback (popup handles it).
+            // Skip when mfaRequired=true so MFA verification screen can show instead.
+            const mfaRequired = urlParams.get("mfaRequired") === "true";
+            if (!mfaRequired) {
+                setTimeout(() => {
+                    const onboardingInstance = onboardingRef.current;
+                    if (onboardingInstance && onboardingInstance.showLoadingModal) {
+                        onboardingInstance.showLoadingModal();
+                    }
+                }, 150);
+            }
         }
         onboardingRef.current = onboarding;
         // Handle Google OAuth callback (only in useEffect, not exposed)
@@ -821,6 +971,8 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
             if (googleCallbackHandledRef.current)
                 return;
             const urlParams = new URLSearchParams(window.location.search);
+            if (isLinkAuthCallback(urlParams))
+                return;
             if (!hasAuthParams(urlParams) ||
                 matchesProvider("twitter", urlParams) ||
                 matchesProvider("discord", urlParams)) {
@@ -839,9 +991,9 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
                 localStorage.removeItem("abstraxn_oauth_pending");
             }
             catch (e) { }
-            // Show loading modal if success=true is in URL
             const hasSuccess = urlParams.get("success") === "true";
-            if (hasSuccess && onboardingRef.current) {
+            const mfaRequired = urlParams.get("mfaRequired") === "true";
+            if (hasSuccess && !mfaRequired && onboardingRef.current) {
                 const onboardingAny = onboardingRef.current;
                 if (onboardingAny.showLoadingScreen) {
                     onboardingAny.showLoadingScreen();
@@ -854,6 +1006,24 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
             try {
                 const user = await walletInstance.handleGoogleCallback();
                 if (user) {
+                    const lastAuthState = walletInstance.getAuthManager().getLastAuthState();
+                    if (lastAuthState?.mfaRequired === true) {
+                        try {
+                            if (localStorage.getItem("abstraxn_oauth_ui") !== "inline") {
+                                showOnboarding();
+                                if (onboardingRef.current && typeof onboardingRef.current.showMfaVerificationScreenForOAuth === "function") {
+                                    onboardingRef.current.showMfaVerificationScreenForOAuth();
+                                }
+                            }
+                        }
+                        finally {
+                            try {
+                                localStorage.removeItem("abstraxn_oauth_ui");
+                            }
+                            catch (e) { }
+                        }
+                        return;
+                    }
                     setUser(user);
                     window.history.replaceState({}, document.title, window.location.pathname);
                     // Hide loading modal and close modal on success
@@ -895,6 +1065,8 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
             if (discordCallbackHandledRef.current)
                 return;
             const urlParams = new URLSearchParams(window.location.search);
+            if (isLinkAuthCallback(urlParams))
+                return;
             if (!hasAuthParams(urlParams) || !matchesProvider("discord", urlParams)) {
                 return;
             }
@@ -911,9 +1083,10 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
                 localStorage.removeItem("abstraxn_oauth_pending");
             }
             catch (e) { }
-            // Show loading modal if success=true is in URL
+            // Show loading modal if success=true is in URL (skip when mfaRequired so MFA screen can show)
             const hasSuccess = urlParams.get("success") === "true";
-            if (hasSuccess && onboardingRef.current) {
+            const mfaRequired = urlParams.get("mfaRequired") === "true";
+            if (hasSuccess && !mfaRequired && onboardingRef.current) {
                 const onboardingAny = onboardingRef.current;
                 if (onboardingAny.showLoadingScreen) {
                     onboardingAny.showLoadingScreen();
@@ -926,6 +1099,24 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
             try {
                 const user = await walletInstance.handleDiscordCallback();
                 if (user) {
+                    const lastAuthState = walletInstance.getAuthManager().getLastAuthState();
+                    if (lastAuthState?.mfaRequired === true) {
+                        try {
+                            if (localStorage.getItem("abstraxn_oauth_ui") !== "inline") {
+                                showOnboarding();
+                                if (onboardingRef.current && typeof onboardingRef.current.showMfaVerificationScreenForOAuth === "function") {
+                                    onboardingRef.current.showMfaVerificationScreenForOAuth();
+                                }
+                            }
+                        }
+                        finally {
+                            try {
+                                localStorage.removeItem("abstraxn_oauth_ui");
+                            }
+                            catch (e) { }
+                        }
+                        return;
+                    }
                     setUser(user);
                     window.history.replaceState({}, document.title, window.location.pathname);
                     // Hide loading modal and close modal on success
@@ -969,6 +1160,8 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
             if (twitterCallbackHandledRef.current)
                 return;
             const urlParams = new URLSearchParams(window.location.search);
+            if (isLinkAuthCallback(urlParams))
+                return;
             if (!hasAuthParams(urlParams) || !matchesProvider("twitter", urlParams)) {
                 return;
             }
@@ -985,9 +1178,10 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
                 localStorage.removeItem("abstraxn_oauth_pending");
             }
             catch (e) { }
-            // Show loading modal if success=true is in URL
+            // Show loading modal if success=true is in URL (skip when mfaRequired so MFA screen can show)
             const hasSuccess = urlParams.get("success") === "true";
-            if (hasSuccess && onboardingRef.current) {
+            const mfaRequired = urlParams.get("mfaRequired") === "true";
+            if (hasSuccess && !mfaRequired && onboardingRef.current) {
                 const onboardingAny = onboardingRef.current;
                 if (onboardingAny.showLoadingScreen) {
                     onboardingAny.showLoadingScreen();
@@ -1000,6 +1194,24 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
             try {
                 const user = await walletInstance.handleTwitterCallback();
                 if (user) {
+                    const lastAuthState = walletInstance.getAuthManager().getLastAuthState();
+                    if (lastAuthState?.mfaRequired === true) {
+                        try {
+                            if (localStorage.getItem("abstraxn_oauth_ui") !== "inline") {
+                                showOnboarding();
+                                if (onboardingRef.current && typeof onboardingRef.current.showMfaVerificationScreenForOAuth === "function") {
+                                    onboardingRef.current.showMfaVerificationScreenForOAuth();
+                                }
+                            }
+                        }
+                        finally {
+                            try {
+                                localStorage.removeItem("abstraxn_oauth_ui");
+                            }
+                            catch (e) { }
+                        }
+                        return;
+                    }
                     setUser(user);
                     window.history.replaceState({}, document.title, window.location.pathname);
                     // Hide loading modal and close modal on success
@@ -1133,13 +1345,15 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
                             // Ensure external wallet container is visible when modal opens
                             if (externalWalletsEnabledRef.current &&
                                 onboarding.externalWalletContainer) {
-                                // Check if we're on OTP screen - if so, don't show external wallets
-                                // Check if OTP screen exists AND is actually visible in the DOM
+                                // Check if we're on OTP or MFA screen - if so, don't show external wallets
                                 const isOtpScreen = onboarding.otpVerificationScreen &&
                                     onboarding.otpVerificationScreen.parentElement &&
                                     onboarding.otpVerificationScreen.offsetParent !== null;
-                                if (!isOtpScreen) {
-                                    // Only show external wallets if not on OTP screen
+                                const isMfaScreen = onboarding.mfaVerificationScreen &&
+                                    onboarding.mfaVerificationScreen.parentElement &&
+                                    onboarding.mfaVerificationScreen.offsetParent !== null;
+                                if (!isOtpScreen && !isMfaScreen) {
+                                    // Only show external wallets if not on OTP or MFA (auth code) screen
                                     onboarding.externalWalletContainer.style.display = "";
                                     // Show divider only if both email/Google AND external wallets are visible
                                     const authMethods = onboarding.config?.authMethods || [
@@ -1157,7 +1371,7 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
                                     }
                                 }
                                 else {
-                                    // On OTP screen - hide external wallets
+                                    // On OTP or MFA screen - hide external wallets
                                     onboarding.externalWalletContainer.style.display = "none";
                                     if (onboarding.externalWalletDivider) {
                                         onboarding.externalWalletDivider.style.display = "none";
@@ -1181,10 +1395,13 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
                 // Modal already exists, just show it
                 // Use requestAnimationFrame to prevent blinking
                 requestAnimationFrame(() => {
-                    // Check if we're on OTP screen - if so, ensure social buttons stay hidden
+                    // Check if we're on OTP or MFA screen - if so, ensure social buttons stay hidden
                     const isOtpScreen = onboarding.otpVerificationScreen &&
                         onboarding.otpVerificationScreen.parentElement &&
                         onboarding.otpVerificationScreen.offsetParent !== null;
+                    const isMfaScreen = onboarding.mfaVerificationScreen &&
+                        onboarding.mfaVerificationScreen.parentElement &&
+                        onboarding.mfaVerificationScreen.offsetParent !== null;
                     onboarding.modalOverlay.classList.remove("onboarding-modal-closing");
                     onboarding.modalOverlay.classList.add("onboarding-modal-open");
                     onboarding.modalOverlay.style.display = "flex";
@@ -1195,8 +1412,8 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
                     if (emailForOtp && typeof onboarding.setPreFillEmail === "function") {
                         onboarding.setPreFillEmail(emailForOtp, { readOnly: true });
                     }
-                    // If on OTP screen, ensure all login elements (social buttons, etc.) are hidden
-                    if (isOtpScreen) {
+                    // If on OTP or MFA screen, ensure all login elements (social buttons, etc.) are hidden
+                    if (isOtpScreen || isMfaScreen) {
                         // On OTP screen - ensure all login elements are hidden
                         if (onboarding.hideLoginElements &&
                             typeof onboarding.hideLoginElements === "function") {
@@ -1229,9 +1446,9 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
                     // CRITICAL: Always ensure external wallets are mounted when modal reopens
                     if (externalWalletsEnabledRef.current &&
                         onboarding.externalWalletContainer) {
-                        // Check if we're on OTP screen - if so, don't show external wallets
-                        if (!isOtpScreen) {
-                            // Only show external wallets if not on OTP screen
+                        // Check if we're on OTP or MFA screen - if so, don't show external wallets
+                        if (!isOtpScreen && !isMfaScreen) {
+                            // Only show external wallets if not on OTP or MFA (auth code) screen
                             onboarding.externalWalletContainer.style.display = "";
                             // Show divider only if both email/Google AND external wallets are visible
                             const authMethods = onboarding.config?.authMethods || [
@@ -1249,7 +1466,7 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
                             }
                         }
                         else {
-                            // On OTP screen - hide external wallets
+                            // On OTP or MFA screen - hide external wallets
                             onboarding.externalWalletContainer.style.display = "none";
                             if (onboarding.externalWalletDivider) {
                                 onboarding.externalWalletDivider.style.display = "none";
@@ -2130,6 +2347,138 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
             setLoading(false);
         }
     }, [isExternalWalletConnected]);
+    const getSupportedAuthMethods = useCallback(async () => {
+        if (!walletRef.current?.isConnected) {
+            throw new Error("Wallet not connected");
+        }
+        return await walletRef.current.getSupportedAuthMethods();
+    }, []);
+    const getLinkedAuthMethods = useCallback(async () => {
+        if (!walletRef.current?.isConnected) {
+            throw new Error("Wallet not connected");
+        }
+        return await walletRef.current.getLinkedAuthMethods();
+    }, []);
+    const linkAuthMethod = useCallback(async (provider) => {
+        if (!walletRef.current?.isConnected) {
+            throw new Error("Wallet not connected");
+        }
+        if (provider.toLowerCase() === "passkey") {
+            await walletRef.current.linkPasskey();
+            return;
+        }
+        if (provider.toLowerCase() === "email") {
+            throw new Error("Email linking uses the in-page form. Use the Auth Methods screen and click Connect for Email, then enter your email and OTP.");
+        }
+        const { authUrl } = await walletRef.current.initiateLinkAuth(provider);
+        const width = 500;
+        const height = 600;
+        const left = Math.round((window.screen.width - width) / 2);
+        const top = Math.round((window.screen.height - height) / 2);
+        const popup = window.open(authUrl, "abstraxn-auth-link", `width=${width},height=${height},left=${left},top=${top},scrollbars=yes,resizable=yes`);
+        if (!popup) {
+            throw new Error("Popup blocked. Please allow popups for this site.");
+        }
+        return new Promise((resolve, reject) => {
+            let settled = false;
+            const maybeSubmit = (data) => {
+                if (settled)
+                    return;
+                settled = true;
+                cleanup();
+                if (data?.activityBody) {
+                    walletRef.current
+                        ?.submitLinkAuthStamped(provider, data.activityBody)
+                        .then(resolve)
+                        .catch((err) => {
+                        settled = false;
+                        reject(err);
+                    });
+                }
+                else {
+                    reject(new Error("Linking was cancelled"));
+                }
+            };
+            const handleMessage = (event) => {
+                if (event.data?.type === "abstraxn-auth-link-done" &&
+                    event.data?.provider === provider) {
+                    maybeSubmit(event.data);
+                    return;
+                }
+                if (event.data?.type === "abstraxn-auth-link-error") {
+                    if (settled)
+                        return;
+                    settled = true;
+                    cleanup();
+                    reject(new Error(event.data.error));
+                }
+            };
+            let intervalId = null;
+            const cleanup = () => {
+                window.removeEventListener("message", handleMessage);
+                if (intervalId)
+                    clearInterval(intervalId);
+            };
+            window.addEventListener("message", handleMessage);
+            intervalId = setInterval(() => {
+                if (popup.closed) {
+                    cleanup();
+                    if (!settled) {
+                        reject(new Error("Linking was cancelled"));
+                    }
+                }
+            }, 200);
+        });
+    }, []);
+    const unlinkAuthMethod = useCallback(async (provider) => {
+        if (!walletRef.current?.isConnected) {
+            throw new Error("Wallet not connected");
+        }
+        await walletRef.current.unlinkAuthMethod(provider);
+    }, []);
+    const requestOtpForEmailLink = useCallback(async (email) => {
+        if (!walletRef.current?.isConnected) {
+            throw new Error("Wallet not connected");
+        }
+        return await walletRef.current.requestOtpForEmailLink(email);
+    }, []);
+    const linkEmail = useCallback(async (otpId, otpCode) => {
+        if (!walletRef.current?.isConnected) {
+            throw new Error("Wallet not connected");
+        }
+        await walletRef.current.linkEmail(otpId, otpCode);
+    }, []);
+    // MFA helpers (delegating to core wallet/AuthManager)
+    const getMfaStatus = useCallback(async () => {
+        if (!walletRef.current?.isConnected) {
+            throw new Error("Wallet not connected");
+        }
+        return await walletRef.current.getMfaStatus();
+    }, []);
+    const enableMfa = useCallback(async () => {
+        if (!walletRef.current?.isConnected) {
+            throw new Error("Wallet not connected");
+        }
+        return await walletRef.current.enableMfa();
+    }, []);
+    const verifySetupMfa = useCallback(async (code) => {
+        if (!walletRef.current?.isConnected) {
+            throw new Error("Wallet not connected");
+        }
+        return await walletRef.current.verifySetupMfa(code);
+    }, []);
+    const verifyMfa = useCallback(async (code) => {
+        if (!walletRef.current?.isConnected) {
+            throw new Error("Wallet not connected");
+        }
+        return await walletRef.current.verifyMfa(code);
+    }, []);
+    const disableMfaWithSignedPayload = useCallback(async () => {
+        if (!walletRef.current?.isConnected) {
+            throw new Error("Wallet not connected");
+        }
+        return await walletRef.current.disableMfaWithSignedPayload();
+    }, []);
     // Sync external wallet state from wagmi
     useEffect(() => {
         let checkAddressTimeout = null;
@@ -2864,44 +3213,52 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
     const currentChainId = isExternalWalletConnected && externalWalletChainId
         ? externalWalletChainId
         : chainId;
-    // Fetch balance for Abstraxn wallet (not external wallet)
-    useEffect(() => {
+    // Fetch balance for Abstraxn wallet (not external wallet) - reusable for on-demand refetch
+    const refetchWalletBalance = useCallback(async () => {
         if (isExternalWalletConnected || !address || !currentChainId) {
             setWalletBalance(null);
             return;
         }
-        const fetchBalance = async () => {
-            try {
-                const currentChain = getChainById(currentChainId);
-                if (!currentChain || currentChain.type !== "evm") {
-                    setWalletBalance(null);
-                    return;
-                }
-                const publicClient = createPublicClient({
-                    chain: {
-                        id: currentChain.id,
-                        name: currentChain.name,
-                        nativeCurrency: currentChain.nativeCurrency,
-                        rpcUrls: {
-                            default: {
-                                http: [currentChain.rpcUrl],
-                            },
-                        },
-                    },
-                    transport: http(currentChain.rpcUrl),
-                });
-                const balance = await publicClient.getBalance({
-                    address: address,
-                });
-                setWalletBalance(balance);
-            }
-            catch (error) {
-                console.error("Failed to fetch balance:", error);
+        try {
+            const currentChain = getChainById(currentChainId);
+            if (!currentChain || currentChain.type !== "evm") {
                 setWalletBalance(null);
+                return;
             }
-        };
-        fetchBalance();
+            const publicClient = createPublicClient({
+                chain: {
+                    id: currentChain.id,
+                    name: currentChain.name,
+                    nativeCurrency: currentChain.nativeCurrency,
+                    rpcUrls: {
+                        default: {
+                            http: [currentChain.rpcUrl],
+                        },
+                    },
+                },
+                transport: http(currentChain.rpcUrl),
+            });
+            const balance = await publicClient.getBalance({
+                address: address,
+            });
+            setWalletBalance(balance);
+        }
+        catch (error) {
+            console.error("Failed to fetch balance:", error);
+            setWalletBalance(null);
+        }
     }, [address, currentChainId, isExternalWalletConnected]);
+    useEffect(() => {
+        refetchWalletBalance();
+    }, [refetchWalletBalance]);
+    // Single refetch for UI: Abstraxn wallet = RPC call, external wallet = wagmi refetch
+    const refetchBalance = useCallback(() => {
+        if (isExternalWalletConnected && wagmiBalance?.refetch) {
+            void wagmiBalance.refetch();
+            return;
+        }
+        void refetchWalletBalance();
+    }, [isExternalWalletConnected, wagmiBalance, refetchWalletBalance]);
     // Compute available chains from config - supports both legacy and new format
     const availableChains = useMemo(() => {
         const chains = [];
@@ -3042,6 +3399,109 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
     const setEmailForOtp = useCallback((email) => {
         setEmailForOtpState(email);
     }, []);
+    // Enriched uiConfig with auth callbacks so <OnboardingUI /> (OnboardingUIReact) gets full flow including MFA
+    const enrichedUiConfig = useMemo(() => ({
+        ...config.ui,
+        onEmailOtpInitiate: async (email) => {
+            try {
+                if (!walletRef.current)
+                    throw new Error("Wallet not initialized");
+                const authManager = walletRef.current.getAuthManager();
+                const connectionTypeValue = "email";
+                setConnectionType(connectionTypeValue);
+                try {
+                    localStorage.setItem("abstraxn_connection_type", connectionTypeValue);
+                }
+                catch (e) {
+                    // Ignore
+                }
+                const result = await authManager.loginWithOTP(email);
+                otpIdRef.current = result.otpId;
+            }
+            catch (err) {
+                console.error("OTP Init Error:", err);
+                throw err;
+            }
+        },
+        onEmailOtpVerify: async (_email, otp) => {
+            try {
+                if (!walletRef.current)
+                    throw new Error("Wallet not initialized");
+                if (!otpIdRef.current)
+                    throw new Error("OTP ID not found");
+                const connectionTypeValue = "email";
+                setConnectionType(connectionTypeValue);
+                try {
+                    localStorage.setItem("abstraxn_connection_type", connectionTypeValue);
+                }
+                catch (e) {
+                    // Ignore
+                }
+                const authManager = walletRef.current.getAuthManager();
+                const user = await authManager.verifyOTP(otpIdRef.current, otp);
+                otpIdRef.current = null;
+                const lastAuthState = authManager.getLastAuthState();
+                if (lastAuthState?.mfaRequired === true) {
+                    setError(null);
+                    return { success: true, user, mfaRequired: true };
+                }
+                await walletRef.current.connect();
+                setError(null);
+                return { success: true, user };
+            }
+            catch (err) {
+                console.error("OTP Verify Error:", err);
+                const errorMessage = err instanceof Error ? err.message : "Failed to verify OTP";
+                return { success: false, error: errorMessage };
+            }
+        },
+        onMfaVerify: async (code) => {
+            try {
+                if (!walletRef.current)
+                    throw new Error("Wallet not initialized");
+                const wallet = walletRef.current;
+                await wallet.verifyMfa(code);
+                await wallet.connect();
+                setError(null);
+                // Explicitly refresh provider state so OnboardingUI / app re-renders as connected without relying on connect event
+                try {
+                    const whoamiInfo = await wallet.getWhoami();
+                    if (whoamiInfo) {
+                        setIsConnected(true);
+                        const userInfo = await wallet.getUserInfo();
+                        setUser(userInfo);
+                        setWhoami(whoamiInfo);
+                        try {
+                            const addr = await wallet.getAddress();
+                            setAddress(addr);
+                        }
+                        catch (_e) { /* optional */ }
+                        try {
+                            const cid = await wallet.getChainId();
+                            setChainId(cid);
+                        }
+                        catch (_e) { /* optional */ }
+                    }
+                }
+                catch (refreshErr) {
+                    console.warn("Post-MFA state refresh:", refreshErr);
+                }
+                // Clear OAuth callback params from URL so app shows connected state without refresh
+                if (typeof window !== "undefined") {
+                    const url = new URL(window.location.href);
+                    const keys = ["success", "mfaRequired", "user", "accessToken", "refreshToken", "turnkeyPublicKey", "error", "provider", "authProvider"];
+                    keys.forEach((k) => url.searchParams.delete(k));
+                    window.history.replaceState({}, document.title, url.pathname + url.search);
+                }
+                return { success: true };
+            }
+            catch (err) {
+                console.error("MFA Verify Error:", err);
+                const errorMessage = err instanceof Error ? err.message : "MFA verification failed";
+                return { success: false, error: errorMessage };
+            }
+        },
+    }), [config.ui]);
     const value = {
         wallet: walletRef.current,
         isInitialized,
@@ -3076,7 +3536,18 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
         loginWithGoogle,
         handleGoogleCallback: () => handleGoogleCallback(true),
         refreshWhoami,
-        uiConfig: config.ui,
+        getMfaStatus,
+        enableMfa,
+        verifySetupMfa,
+        verifyMfa,
+        disableMfaWithSignedPayload,
+        getSupportedAuthMethods,
+        getLinkedAuthMethods,
+        linkAuthMethod,
+        requestOtpForEmailLink,
+        linkEmail,
+        unlinkAuthMethod,
+        uiConfig: enrichedUiConfig,
         // External wallet methods
         connectExternalWallet: externalWalletsEnabled
             ? connectExternalWallet
@@ -3115,6 +3586,7 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
         availableChains,
         // Balance (for Abstraxn wallet)
         walletBalance: !isExternalWalletConnected ? walletBalance : undefined,
+        refetchBalance,
         // Connection type
         connectionType,
         // Pre-fill email for email-OTP flow
@@ -3142,12 +3614,15 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
         if (!container) {
             return;
         }
-        // Check if we're on OTP screen - if so, don't show external wallets
+        // Check if we're on OTP or MFA screen - if so, don't show external wallets
         const isOtpScreen = onboardingAny.otpVerificationScreen &&
             onboardingAny.otpVerificationScreen.parentElement &&
             onboardingAny.otpVerificationScreen.offsetParent !== null;
-        if (!isOtpScreen) {
-            // Only show external wallets if not on OTP screen
+        const isMfaScreen = onboardingAny.mfaVerificationScreen &&
+            onboardingAny.mfaVerificationScreen.parentElement &&
+            onboardingAny.mfaVerificationScreen.offsetParent !== null;
+        if (!isOtpScreen && !isMfaScreen) {
+            // Only show external wallets if not on OTP or MFA (auth code) screen
             container.style.display = "";
             // Show divider only if both email/Google AND external wallets are visible
             const authMethods = onboardingAny.config?.authMethods || [
@@ -3165,7 +3640,7 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
             }
         }
         else {
-            // On OTP screen - hide external wallets
+            // On OTP or MFA screen - hide external wallets
             container.style.display = "none";
             if (onboardingAny.externalWalletDivider) {
                 onboardingAny.externalWalletDivider.style.display = "none";
@@ -3330,14 +3805,15 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, solana, }
                     console.warn("External wallet container is null");
                     return;
                 }
-                // Check if we're on OTP screen - if so, don't show external wallets
-                // Check if OTP screen exists AND is actually visible in the DOM
+                // Check if we're on OTP or MFA screen - if so, don't show external wallets
                 const isOtpScreen = onboardingAny.otpVerificationScreen &&
                     onboardingAny.otpVerificationScreen.parentElement &&
                     onboardingAny.otpVerificationScreen.offsetParent !== null;
-                if (!isOtpScreen) {
-                    // Only show external wallets if not on OTP screen
-                    // Force container to be visible when external wallets are enabled
+                const isMfaScreen = onboardingAny.mfaVerificationScreen &&
+                    onboardingAny.mfaVerificationScreen.parentElement &&
+                    onboardingAny.mfaVerificationScreen.offsetParent !== null;
+                if (!isOtpScreen && !isMfaScreen) {
+                    // Only show external wallets if not on OTP or MFA (auth code) screen
                     container.style.display = "";
                     // Show divider only if both email/Google AND external wallets are visible
                     const authMethods = onboardingAny.config?.authMethods || [