@b3dotfun/sdk 0.1.68-alpha.8 → 0.1.68-alpha.9

package/dist/cjs/global-account/react/components/SignInWithB3/SignIn.js

@@ -19,7 +19,7 @@ function SignIn(props) {
     const { address: globalAddress, ensName, connectedSmartWallet, connectedEOAWallet, isActiveSmartWallet, isActiveEOAWallet, smartWalletIcon, } = (0, react_1.useAccountWallet)();
     const { data: walletImage } = (0, react_4.useWalletImage)(connectedEOAWallet?.id);
     const isMobile = (0, react_1.useIsMobile)();
-    const { logout } = (0, react_1.useAuthentication)(partnerId);
+    const { logout } = (0, react_1.useAuthentication)(partnerId, { skipAutoConnect: true });
     const onDisconnect = async () => {
         await logout();
     };

package/dist/cjs/global-account/react/components/SignInWithB3/SignInWithB3Flow.js

@@ -17,16 +17,23 @@ const MAX_REFETCH_ATTEMPTS = 20;
  */
 function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySuccess, onError, chain, sessionKeyAddress, partnerId, closeAfterLogin = false, source = "signInWithB3Button", signersEnabled = false, }) {
     const { automaticallySetFirstEoa } = (0, react_1.useB3Config)();
-    const { user, logout } = (0, react_1.useAuthentication)(partnerId);
-    // FIXME Logout before login to ensure a clean state
+    // skipAutoConnect: this component intentionally logs out on mount to show a fresh login screen.
+    // AuthenticationProvider is the sole owner of useAutoConnect to avoid competing auth cycles.
+    const { user, logout } = (0, react_1.useAuthentication)(partnerId, { skipAutoConnect: true });
+    // Tracks whether the pre-login logout has finished.
+    // We must not render ConnectEmbed until logout (wallet disconnect) completes,
+    // otherwise the wallet state disrupts ConnectEmbed causing a blank modal.
+    const [readyToShowLogin, setReadyToShowLogin] = (0, react_2.useState)(source === "requestPermissions");
     const hasLoggedOutRef = (0, react_2.useRef)(false);
     (0, react_2.useEffect)(() => {
         if (hasLoggedOutRef.current)
             return;
         if (source !== "requestPermissions") {
             debug("Logging out before login");
-            logout();
             hasLoggedOutRef.current = true;
+            logout().finally(() => {
+                setReadyToShowLogin(true);
+            });
         }
     }, [source, logout]);
     const [step, setStep] = (0, react_2.useState)(source === "requestPermissions" ? null : "login");
@@ -231,8 +238,9 @@ function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySuccess, onE
         content = ((0, jsx_runtime_1.jsx)(LoginStep_1.LoginStepContainer, { partnerId: partnerId, children: (0, jsx_runtime_1.jsx)("div", { className: "p-4 text-center text-red-500", children: refetchError }) }));
     }
     else if (step === "login") {
-        // Show loading spinner
-        if (isAuthenticating || (isFetchingSigners && step === "login") || source === "requestPermissions") {
+        // Show loading spinner while: authenticating, waiting for pre-login logout to finish,
+        // or fetching signers.
+        if (!readyToShowLogin || isAuthenticating || isFetchingSigners) {
             content = ((0, jsx_runtime_1.jsx)(LoginStep_1.LoginStepContainer, { partnerId: partnerId, children: (0, jsx_runtime_1.jsx)("div", { className: "my-8 flex min-h-[350px] items-center justify-center", children: (0, jsx_runtime_1.jsx)(react_1.Loading, { variant: "white", size: "lg" }) }) }));
         }
         else {

package/dist/cjs/global-account/react/components/SignInWithB3/SignInWithB3Privy.js

@@ -11,7 +11,7 @@ function SignInWithB3Privy({ onSuccess, onError, chain }) {
     const { isLoading, connectTw, fullToken } = (0, react_1.useHandleConnectWithPrivy)(chain, onSuccess);
     const setIsAuthenticating = (0, react_1.useAuthStore)(state => state.setIsAuthenticating);
     const setIsAuthenticated = (0, react_1.useAuthStore)(state => state.setIsAuthenticated);
-    const { logout } = (0, react_1.useAuthentication)(partnerId);
+    const { logout } = (0, react_1.useAuthentication)(partnerId, { skipAutoConnect: true });
     debug("@@SignInWithB3Privy", {
         isLoading,
         fullToken,

package/dist/cjs/global-account/react/components/SignInWithB3/steps/LoginStep.d.ts

@@ -19,5 +19,5 @@ interface LoginStepContainerProps {
     partnerId?: string;
 }
 export declare function LoginStepContainer({ children, partnerId }: LoginStepContainerProps): import("react/jsx-runtime").JSX.Element;
-export declare function LoginStep({ onSuccess, chain }: LoginStepProps): import("react/jsx-runtime").JSX.Element;
+export declare function LoginStep({ onSuccess, chain }: LoginStepProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/cjs/global-account/react/components/SignInWithB3/steps/LoginStep.js

@@ -7,6 +7,7 @@ const react_1 = require("../../../../../global-account/react");
 const constants_1 = require("../../../../../shared/constants");
 const thirdweb_1 = require("../../../../../shared/utils/thirdweb");
 const react_2 = require("thirdweb/react");
+const react_3 = require("react");
 const wallets_1 = require("thirdweb/wallets");
 function LoginStepContainer({ children, partnerId }) {
     const { data: partner } = (0, react_1.useQueryB3)("global-accounts-partners", "find", {
@@ -18,30 +19,17 @@ function LoginStepContainer({ children, partnerId }) {
     const partnerLogo = partner?.data?.[0]?.loginCustomization?.logoUrl;
     return ((0, jsx_runtime_1.jsxs)("div", { className: "bg-b3-react-background flex flex-col items-center justify-center pt-6", children: [partnerLogo && ((0, jsx_runtime_1.jsx)("img", { src: partnerLogo, alt: "Partner Logo", className: "partner-logo mb-6 h-12 w-auto object-contain" })), children] }));
 }
-function LoginStep({ onSuccess, chain }) {
-    const { partnerId, theme } = (0, react_1.useB3Config)();
-    const wallet = (0, wallets_1.ecosystemWallet)(constants_1.ecosystemWalletId, {
-        partnerId: partnerId,
-    });
-    const { onConnect } = (0, react_1.useAuthentication)(partnerId);
-    return ((0, jsx_runtime_1.jsx)(LoginStepContainer, { partnerId: partnerId, children: (0, jsx_runtime_1.jsx)(react_2.ConnectEmbed, { showThirdwebBranding: false, client: thirdweb_1.client, chain: chain, wallets: [wallet], theme: theme === "light"
-                ? (0, react_2.lightTheme)({
-                    colors: {
-                        modalBg: "hsl(var(--b3-react-background))",
-                    },
-                })
-                : (0, react_2.darkTheme)({
-                    colors: {
-                        modalBg: "hsl(var(--b3-react-background))",
-                    },
-                }), style: {
-                width: "100%",
-                height: "100%",
-                border: 0,
-            }, header: {
-                title: "Sign in with B3",
-                titleIcon: "https://cdn.b3.fun/b3_logo.svg",
-            }, className: "b3-login-step", onConnect: async (wallet, allConnectedWallets) => {
+/** Inner component that only mounts when partnerId is a non-empty string.
+ *  Keeps all hooks unconditional without calling useAuthentication(""). */
+function LoginStepContent({ onSuccess, chain, partnerId, theme, }) {
+    const wallet = (0, react_3.useMemo)(() => (0, wallets_1.ecosystemWallet)(constants_1.ecosystemWalletId, { partnerId }), [partnerId]);
+    // skipAutoConnect: AuthenticationProvider already owns the auto-connect instance.
+    // Creating another here would cause a second authentication cycle (another 401 attempt)
+    // that makes the modal flash between spinner and blank before finally showing the login form.
+    const { onConnect } = (0, react_1.useAuthentication)(partnerId, { skipAutoConnect: true });
+    return ((0, jsx_runtime_1.jsx)(LoginStepContainer, { partnerId: partnerId, children: (0, jsx_runtime_1.jsx)(react_2.ConnectEmbed, { showThirdwebBranding: false, autoConnect: false, client: thirdweb_1.client, chain: chain, wallets: [wallet], theme: theme === "light"
+                ? (0, react_2.lightTheme)({ colors: { modalBg: "hsl(var(--b3-react-background))" } })
+                : (0, react_2.darkTheme)({ colors: { modalBg: "hsl(var(--b3-react-background))" } }), style: { width: "100%", height: "100%", border: 0 }, header: { title: "Sign in with B3", titleIcon: "https://cdn.b3.fun/b3_logo.svg" }, className: "b3-login-step", onConnect: async (wallet, allConnectedWallets) => {
                 await onConnect(wallet, allConnectedWallets);
                 const account = wallet.getAccount();
                 if (!account)
@@ -49,3 +37,12 @@ function LoginStep({ onSuccess, chain }) {
                 await onSuccess(account);
             } }) }));
 }
+function LoginStep({ onSuccess, chain }) {
+    const { partnerId, theme } = (0, react_1.useB3Config)();
+    // partnerId may be undefined during the brief B3Provider hydration window.
+    // Return null rather than rendering ConnectEmbed with an invalid ecosystem
+    // wallet config (which causes a blank screen).
+    if (!partnerId)
+        return null;
+    return (0, jsx_runtime_1.jsx)(LoginStepContent, { onSuccess: onSuccess, chain: chain, partnerId: partnerId, theme: theme });
+}

package/dist/cjs/global-account/react/components/SignInWithB3/steps/LoginStepCustom.js

@@ -16,7 +16,7 @@ function LoginStepCustom({ onSuccess, onError, chain, strategies, maxInitialWall
     const { connect } = (0, react_1.useConnect)(partnerId, chain);
     const setIsAuthenticating = (0, react_1.useAuthStore)(state => state.setIsAuthenticating);
     const setIsAuthenticated = (0, react_1.useAuthStore)(state => state.setIsAuthenticated);
-    const { logout } = (0, react_1.useAuthentication)(partnerId);
+    const { logout } = (0, react_1.useAuthentication)(partnerId, { skipAutoConnect: true });
     const { connect: connectTW } = (0, react_3.useConnect)();
     // Split strategies into auth and wallet types
     const authStrategies = strategies.filter(s => !(0, react_1.isWalletType)(s));

package/dist/cjs/global-account/react/hooks/useAuthentication.d.ts

@@ -1,6 +1,8 @@
 import { Wallet } from "thirdweb/wallets";
 import { preAuthenticate } from "thirdweb/wallets/in-app";
-export declare function useAuthentication(partnerId: string): {
+export declare function useAuthentication(partnerId: string, { skipAutoConnect }?: {
+    skipAutoConnect?: boolean;
+}): {
     logout: (callback?: () => void) => Promise<void>;
     isAuthenticated: boolean;
     isReady: boolean;

package/dist/cjs/global-account/react/hooks/useAuthentication.js

@@ -21,11 +21,26 @@ const createWagmiConfig_1 = require("../utils/createWagmiConfig");
 const useTWAuth_1 = require("./useTWAuth");
 const useUserQuery_1 = require("./useUserQuery");
 const debug = (0, debug_1.debugB3React)("useAuthentication");
-function useAuthentication(partnerId) {
+function useAuthentication(partnerId, { skipAutoConnect = false } = {}) {
     const { onConnectCallback, onLogoutCallback } = (0, react_2.useContext)(LocalSDKProvider_1.LocalSDKContext);
     const { disconnect } = (0, react_3.useDisconnect)();
     const wallets = (0, react_3.useConnectedWallets)();
+    // Keep refs so logout() always disconnects current wallets, not stale closure values.
+    // autoConnectCore captures onConnect (and thus logout) from the first render before wallets
+    // are populated — without these refs, logout() would capture wallets=[] and disconnect nothing.
+    const walletsRef = (0, react_2.useRef)(wallets);
+    (0, react_2.useEffect)(() => {
+        walletsRef.current = wallets;
+    }, [wallets]);
     const activeWallet = (0, react_3.useActiveWallet)();
+    // Track the active wallet by ref so logout() can disconnect the exact reference
+    // stored in thirdweb's activeWalletStore. walletsRef.current (from useConnectedWallets)
+    // may hold a different object reference than what thirdweb considers "active",
+    // causing the identity check in onWalletDisconnect to fail silently.
+    const activeWalletRef = (0, react_2.useRef)(activeWallet);
+    (0, react_2.useEffect)(() => {
+        activeWalletRef.current = activeWallet;
+    }, [activeWallet]);
     const isAuthenticated = (0, react_1.useAuthStore)(state => state.isAuthenticated);
     const setIsAuthenticated = (0, react_1.useAuthStore)(state => state.setIsAuthenticated);
     const setIsConnected = (0, react_1.useAuthStore)(state => state.setIsConnected);
@@ -133,13 +148,26 @@ function useAuthentication(partnerId) {
     }, [activeWallet, partnerId, authenticate, setIsAuthenticated, setIsAuthenticating, setUser, setHasStartedConnecting]);
     const logout = (0, react_2.useCallback)(async (callback) => {
         // Only disconnect ecosystem/smart wallets, preserve EOA wallets (e.g. MetaMask)
-        // so they remain available after re-login
-        wallets.forEach(wallet => {
+        // so they remain available after re-login.
+        // Use walletsRef.current (not the stale closure value) so we always get current wallets —
+        // autoConnectCore captures logout from the first render when wallets is still [].
+        walletsRef.current.forEach(wallet => {
             debug("@@logout:wallet", wallet.id);
             if (wallet.id.startsWith("ecosystem.") || wallet.id === "smart") {
                 disconnect(wallet);
             }
         });
+        // Also disconnect the active wallet using the exact reference from thirdweb's
+        // activeWalletStore. The wallets in walletsRef (from useConnectedWallets) may be
+        // different object references than what thirdweb holds as "active". Thirdweb's
+        // onWalletDisconnect uses strict identity (===) to decide whether to clear
+        // activeAccountStore — if the reference doesn't match, activeAccount stays set
+        // and ConnectEmbed renders show=false (blank).
+        if (activeWalletRef.current &&
+            (activeWalletRef.current.id.startsWith("ecosystem.") || activeWalletRef.current.id === "smart")) {
+            debug("@@logout:disconnecting active wallet", activeWalletRef.current.id);
+            disconnect(activeWalletRef.current);
+        }
         // Clear user-specific storage but preserve wallet connection state
         // so EOA wallets (e.g. MetaMask) can auto-reconnect on next login
         if (typeof localStorage !== "undefined") {
@@ -150,12 +178,19 @@ function useAuthentication(partnerId) {
         debug("@@logout:loggedOut");
         setIsAuthenticated(false);
         setIsConnected(false);
+        // Reset isAuthenticating so any in-flight page-load auto-connect that set it true
+        // does not keep the login modal spinner stuck after logout() is called.
+        setIsAuthenticating(false);
         setUser();
         callback?.();
         if (onLogoutCallback) {
             await onLogoutCallback();
         }
-    }, [disconnect, wallets, setIsAuthenticated, setUser, setIsConnected, onLogoutCallback]);
+    }, 
+    // wallets intentionally omitted — we use walletsRef.current so this callback stays stable
+    // and always operates on current wallets even when captured in stale closures.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [disconnect, setIsAuthenticated, setIsAuthenticating, setUser, setIsConnected, onLogoutCallback]);
     const onConnect = (0, react_2.useCallback)(async (_walleAutoConnectedWith, allConnectedWallets) => {
         debug("@@useAuthentication:onConnect", { _walleAutoConnectedWith, allConnectedWallets });
         try {
@@ -203,23 +238,32 @@ function useAuthentication(partnerId) {
     ]);
     const { isLoading: useAutoConnectLoading } = (0, react_3.useAutoConnect)({
         client: thirdweb_1.client,
-        wallets: [wallet],
+        // When skipAutoConnect is true (e.g. LoginStepContent, SignInWithB3Flow), pass an empty
+        // wallets array so useAutoConnect completes immediately without firing onConnect.
+        // Only AuthenticationProvider (the primary instance) should own auto-connect.
+        wallets: skipAutoConnect ? [] : [wallet],
         onConnect,
         onTimeout: () => {
+            if (skipAutoConnect)
+                return;
             logout().catch(error => {
                 debug("@@useAuthentication:logout on timeout failed", { error });
             });
         },
     });
     /**
-     * useAutoConnectLoading starts as false
+     * useAutoConnectLoading starts as false.
+     * Only the primary (non-skip) instance manages isAuthenticating via this effect
+     * to avoid race conditions when multiple useAuthentication instances are mounted.
      */
     (0, react_2.useEffect)(() => {
+        if (skipAutoConnect)
+            return;
         if (!useAutoConnectLoading && useAutoConnectLoadingPrevious.current && !hasStartedConnecting) {
             setIsAuthenticating(false);
         }
         useAutoConnectLoadingPrevious.current = useAutoConnectLoading;
-    }, [useAutoConnectLoading, hasStartedConnecting, setIsAuthenticating]);
+    }, [useAutoConnectLoading, hasStartedConnecting, setIsAuthenticating, skipAutoConnect]);
     const isReady = isAuthenticated && !isAuthenticating;
     return {
         logout,

package/dist/cjs/global-account/react/hooks/useGetAllTWSigners.js

@@ -68,7 +68,8 @@ function useGetAllTWSigners({ chain, accountAddress, queryOptions }) {
             });
             return result;
         },
-        enabled: Boolean(chain && accountAddress),
+        // Respect queryOptions.enabled if explicitly set (e.g. signersEnabled=false from SignInWithB3Flow)
+        enabled: queryOptions?.enabled !== false && Boolean(chain && accountAddress),
         refetchOnMount: true,
         refetchOnWindowFocus: true,
         refetchOnReconnect: true,

package/dist/esm/global-account/react/components/SignInWithB3/SignIn.js

@@ -13,7 +13,7 @@ export function SignIn(props) {
     const { address: globalAddress, ensName, connectedSmartWallet, connectedEOAWallet, isActiveSmartWallet, isActiveEOAWallet, smartWalletIcon, } = useAccountWallet();
     const { data: walletImage } = useWalletImage(connectedEOAWallet?.id);
     const isMobile = useIsMobile();
-    const { logout } = useAuthentication(partnerId);
+    const { logout } = useAuthentication(partnerId, { skipAutoConnect: true });
     const onDisconnect = async () => {
         await logout();
     };

package/dist/esm/global-account/react/components/SignInWithB3/SignInWithB3Flow.js

@@ -14,16 +14,23 @@ const MAX_REFETCH_ATTEMPTS = 20;
  */
 export function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySuccess, onError, chain, sessionKeyAddress, partnerId, closeAfterLogin = false, source = "signInWithB3Button", signersEnabled = false, }) {
     const { automaticallySetFirstEoa } = useB3Config();
-    const { user, logout } = useAuthentication(partnerId);
-    // FIXME Logout before login to ensure a clean state
+    // skipAutoConnect: this component intentionally logs out on mount to show a fresh login screen.
+    // AuthenticationProvider is the sole owner of useAutoConnect to avoid competing auth cycles.
+    const { user, logout } = useAuthentication(partnerId, { skipAutoConnect: true });
+    // Tracks whether the pre-login logout has finished.
+    // We must not render ConnectEmbed until logout (wallet disconnect) completes,
+    // otherwise the wallet state disrupts ConnectEmbed causing a blank modal.
+    const [readyToShowLogin, setReadyToShowLogin] = useState(source === "requestPermissions");
     const hasLoggedOutRef = useRef(false);
     useEffect(() => {
         if (hasLoggedOutRef.current)
             return;
         if (source !== "requestPermissions") {
             debug("Logging out before login");
-            logout();
             hasLoggedOutRef.current = true;
+            logout().finally(() => {
+                setReadyToShowLogin(true);
+            });
         }
     }, [source, logout]);
     const [step, setStep] = useState(source === "requestPermissions" ? null : "login");
@@ -228,8 +235,9 @@ export function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySucce
         content = (_jsx(LoginStepContainer, { partnerId: partnerId, children: _jsx("div", { className: "p-4 text-center text-red-500", children: refetchError }) }));
     }
     else if (step === "login") {
-        // Show loading spinner
-        if (isAuthenticating || (isFetchingSigners && step === "login") || source === "requestPermissions") {
+        // Show loading spinner while: authenticating, waiting for pre-login logout to finish,
+        // or fetching signers.
+        if (!readyToShowLogin || isAuthenticating || isFetchingSigners) {
             content = (_jsx(LoginStepContainer, { partnerId: partnerId, children: _jsx("div", { className: "my-8 flex min-h-[350px] items-center justify-center", children: _jsx(Loading, { variant: "white", size: "lg" }) }) }));
         }
         else {

package/dist/esm/global-account/react/components/SignInWithB3/SignInWithB3Privy.js

@@ -8,7 +8,7 @@ export function SignInWithB3Privy({ onSuccess, onError, chain }) {
     const { isLoading, connectTw, fullToken } = useHandleConnectWithPrivy(chain, onSuccess);
     const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
     const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
-    const { logout } = useAuthentication(partnerId);
+    const { logout } = useAuthentication(partnerId, { skipAutoConnect: true });
     debug("@@SignInWithB3Privy", {
         isLoading,
         fullToken,

package/dist/esm/global-account/react/components/SignInWithB3/steps/LoginStep.d.ts

@@ -19,5 +19,5 @@ interface LoginStepContainerProps {
     partnerId?: string;
 }
 export declare function LoginStepContainer({ children, partnerId }: LoginStepContainerProps): import("react/jsx-runtime").JSX.Element;
-export declare function LoginStep({ onSuccess, chain }: LoginStepProps): import("react/jsx-runtime").JSX.Element;
+export declare function LoginStep({ onSuccess, chain }: LoginStepProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/esm/global-account/react/components/SignInWithB3/steps/LoginStep.js

@@ -3,6 +3,7 @@ import { useAuthentication, useB3Config, useQueryB3 } from "../../../../../globa
 import { ecosystemWalletId } from "../../../../../shared/constants/index.js";
 import { client } from "../../../../../shared/utils/thirdweb.js";
 import { ConnectEmbed, darkTheme, lightTheme } from "thirdweb/react";
+import { useMemo } from "react";
 import { ecosystemWallet } from "thirdweb/wallets";
 export function LoginStepContainer({ children, partnerId }) {
     const { data: partner } = useQueryB3("global-accounts-partners", "find", {
@@ -14,30 +15,17 @@ export function LoginStepContainer({ children, partnerId }) {
     const partnerLogo = partner?.data?.[0]?.loginCustomization?.logoUrl;
     return (_jsxs("div", { className: "bg-b3-react-background flex flex-col items-center justify-center pt-6", children: [partnerLogo && (_jsx("img", { src: partnerLogo, alt: "Partner Logo", className: "partner-logo mb-6 h-12 w-auto object-contain" })), children] }));
 }
-export function LoginStep({ onSuccess, chain }) {
-    const { partnerId, theme } = useB3Config();
-    const wallet = ecosystemWallet(ecosystemWalletId, {
-        partnerId: partnerId,
-    });
-    const { onConnect } = useAuthentication(partnerId);
-    return (_jsx(LoginStepContainer, { partnerId: partnerId, children: _jsx(ConnectEmbed, { showThirdwebBranding: false, client: client, chain: chain, wallets: [wallet], theme: theme === "light"
-                ? lightTheme({
-                    colors: {
-                        modalBg: "hsl(var(--b3-react-background))",
-                    },
-                })
-                : darkTheme({
-                    colors: {
-                        modalBg: "hsl(var(--b3-react-background))",
-                    },
-                }), style: {
-                width: "100%",
-                height: "100%",
-                border: 0,
-            }, header: {
-                title: "Sign in with B3",
-                titleIcon: "https://cdn.b3.fun/b3_logo.svg",
-            }, className: "b3-login-step", onConnect: async (wallet, allConnectedWallets) => {
+/** Inner component that only mounts when partnerId is a non-empty string.
+ *  Keeps all hooks unconditional without calling useAuthentication(""). */
+function LoginStepContent({ onSuccess, chain, partnerId, theme, }) {
+    const wallet = useMemo(() => ecosystemWallet(ecosystemWalletId, { partnerId }), [partnerId]);
+    // skipAutoConnect: AuthenticationProvider already owns the auto-connect instance.
+    // Creating another here would cause a second authentication cycle (another 401 attempt)
+    // that makes the modal flash between spinner and blank before finally showing the login form.
+    const { onConnect } = useAuthentication(partnerId, { skipAutoConnect: true });
+    return (_jsx(LoginStepContainer, { partnerId: partnerId, children: _jsx(ConnectEmbed, { showThirdwebBranding: false, autoConnect: false, client: client, chain: chain, wallets: [wallet], theme: theme === "light"
+                ? lightTheme({ colors: { modalBg: "hsl(var(--b3-react-background))" } })
+                : darkTheme({ colors: { modalBg: "hsl(var(--b3-react-background))" } }), style: { width: "100%", height: "100%", border: 0 }, header: { title: "Sign in with B3", titleIcon: "https://cdn.b3.fun/b3_logo.svg" }, className: "b3-login-step", onConnect: async (wallet, allConnectedWallets) => {
                 await onConnect(wallet, allConnectedWallets);
                 const account = wallet.getAccount();
                 if (!account)
@@ -45,3 +33,12 @@ export function LoginStep({ onSuccess, chain }) {
                 await onSuccess(account);
             } }) }));
 }
+export function LoginStep({ onSuccess, chain }) {
+    const { partnerId, theme } = useB3Config();
+    // partnerId may be undefined during the brief B3Provider hydration window.
+    // Return null rather than rendering ConnectEmbed with an invalid ecosystem
+    // wallet config (which causes a blank screen).
+    if (!partnerId)
+        return null;
+    return _jsx(LoginStepContent, { onSuccess: onSuccess, chain: chain, partnerId: partnerId, theme: theme });
+}

package/dist/esm/global-account/react/components/SignInWithB3/steps/LoginStepCustom.js

@@ -13,7 +13,7 @@ export function LoginStepCustom({ onSuccess, onError, chain, strategies, maxInit
     const { connect } = useConnect(partnerId, chain);
     const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
     const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
-    const { logout } = useAuthentication(partnerId);
+    const { logout } = useAuthentication(partnerId, { skipAutoConnect: true });
     const { connect: connectTW } = useConnectTW();
     // Split strategies into auth and wallet types
     const authStrategies = strategies.filter(s => !isWalletType(s));

package/dist/esm/global-account/react/hooks/useAuthentication.d.ts

@@ -1,6 +1,8 @@
 import { Wallet } from "thirdweb/wallets";
 import { preAuthenticate } from "thirdweb/wallets/in-app";
-export declare function useAuthentication(partnerId: string): {
+export declare function useAuthentication(partnerId: string, { skipAutoConnect }?: {
+    skipAutoConnect?: boolean;
+}): {
     logout: (callback?: () => void) => Promise<void>;
     isAuthenticated: boolean;
     isReady: boolean;

package/dist/esm/global-account/react/hooks/useAuthentication.js

@@ -15,11 +15,26 @@ import { createWagmiConfig } from "../utils/createWagmiConfig.js";
 import { useTWAuth } from "./useTWAuth.js";
 import { useUserQuery } from "./useUserQuery.js";
 const debug = debugB3React("useAuthentication");
-export function useAuthentication(partnerId) {
+export function useAuthentication(partnerId, { skipAutoConnect = false } = {}) {
     const { onConnectCallback, onLogoutCallback } = useContext(LocalSDKContext);
     const { disconnect } = useDisconnect();
     const wallets = useConnectedWallets();
+    // Keep refs so logout() always disconnects current wallets, not stale closure values.
+    // autoConnectCore captures onConnect (and thus logout) from the first render before wallets
+    // are populated — without these refs, logout() would capture wallets=[] and disconnect nothing.
+    const walletsRef = useRef(wallets);
+    useEffect(() => {
+        walletsRef.current = wallets;
+    }, [wallets]);
     const activeWallet = useActiveWallet();
+    // Track the active wallet by ref so logout() can disconnect the exact reference
+    // stored in thirdweb's activeWalletStore. walletsRef.current (from useConnectedWallets)
+    // may hold a different object reference than what thirdweb considers "active",
+    // causing the identity check in onWalletDisconnect to fail silently.
+    const activeWalletRef = useRef(activeWallet);
+    useEffect(() => {
+        activeWalletRef.current = activeWallet;
+    }, [activeWallet]);
     const isAuthenticated = useAuthStore(state => state.isAuthenticated);
     const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
     const setIsConnected = useAuthStore(state => state.setIsConnected);
@@ -127,13 +142,26 @@ export function useAuthentication(partnerId) {
     }, [activeWallet, partnerId, authenticate, setIsAuthenticated, setIsAuthenticating, setUser, setHasStartedConnecting]);
     const logout = useCallback(async (callback) => {
         // Only disconnect ecosystem/smart wallets, preserve EOA wallets (e.g. MetaMask)
-        // so they remain available after re-login
-        wallets.forEach(wallet => {
+        // so they remain available after re-login.
+        // Use walletsRef.current (not the stale closure value) so we always get current wallets —
+        // autoConnectCore captures logout from the first render when wallets is still [].
+        walletsRef.current.forEach(wallet => {
             debug("@@logout:wallet", wallet.id);
             if (wallet.id.startsWith("ecosystem.") || wallet.id === "smart") {
                 disconnect(wallet);
             }
         });
+        // Also disconnect the active wallet using the exact reference from thirdweb's
+        // activeWalletStore. The wallets in walletsRef (from useConnectedWallets) may be
+        // different object references than what thirdweb holds as "active". Thirdweb's
+        // onWalletDisconnect uses strict identity (===) to decide whether to clear
+        // activeAccountStore — if the reference doesn't match, activeAccount stays set
+        // and ConnectEmbed renders show=false (blank).
+        if (activeWalletRef.current &&
+            (activeWalletRef.current.id.startsWith("ecosystem.") || activeWalletRef.current.id === "smart")) {
+            debug("@@logout:disconnecting active wallet", activeWalletRef.current.id);
+            disconnect(activeWalletRef.current);
+        }
         // Clear user-specific storage but preserve wallet connection state
         // so EOA wallets (e.g. MetaMask) can auto-reconnect on next login
         if (typeof localStorage !== "undefined") {
@@ -144,12 +172,19 @@ export function useAuthentication(partnerId) {
         debug("@@logout:loggedOut");
         setIsAuthenticated(false);
         setIsConnected(false);
+        // Reset isAuthenticating so any in-flight page-load auto-connect that set it true
+        // does not keep the login modal spinner stuck after logout() is called.
+        setIsAuthenticating(false);
         setUser();
         callback?.();
         if (onLogoutCallback) {
             await onLogoutCallback();
         }
-    }, [disconnect, wallets, setIsAuthenticated, setUser, setIsConnected, onLogoutCallback]);
+    }, 
+    // wallets intentionally omitted — we use walletsRef.current so this callback stays stable
+    // and always operates on current wallets even when captured in stale closures.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [disconnect, setIsAuthenticated, setIsAuthenticating, setUser, setIsConnected, onLogoutCallback]);
     const onConnect = useCallback(async (_walleAutoConnectedWith, allConnectedWallets) => {
         debug("@@useAuthentication:onConnect", { _walleAutoConnectedWith, allConnectedWallets });
         try {
@@ -197,23 +232,32 @@ export function useAuthentication(partnerId) {
     ]);
     const { isLoading: useAutoConnectLoading } = useAutoConnect({
         client,
-        wallets: [wallet],
+        // When skipAutoConnect is true (e.g. LoginStepContent, SignInWithB3Flow), pass an empty
+        // wallets array so useAutoConnect completes immediately without firing onConnect.
+        // Only AuthenticationProvider (the primary instance) should own auto-connect.
+        wallets: skipAutoConnect ? [] : [wallet],
         onConnect,
         onTimeout: () => {
+            if (skipAutoConnect)
+                return;
             logout().catch(error => {
                 debug("@@useAuthentication:logout on timeout failed", { error });
             });
         },
     });
     /**
-     * useAutoConnectLoading starts as false
+     * useAutoConnectLoading starts as false.
+     * Only the primary (non-skip) instance manages isAuthenticating via this effect
+     * to avoid race conditions when multiple useAuthentication instances are mounted.
      */
     useEffect(() => {
+        if (skipAutoConnect)
+            return;
         if (!useAutoConnectLoading && useAutoConnectLoadingPrevious.current && !hasStartedConnecting) {
             setIsAuthenticating(false);
         }
         useAutoConnectLoadingPrevious.current = useAutoConnectLoading;
-    }, [useAutoConnectLoading, hasStartedConnecting, setIsAuthenticating]);
+    }, [useAutoConnectLoading, hasStartedConnecting, setIsAuthenticating, skipAutoConnect]);
     const isReady = isAuthenticated && !isAuthenticating;
     return {
         logout,

package/dist/esm/global-account/react/hooks/useGetAllTWSigners.js

@@ -62,7 +62,8 @@ export function useGetAllTWSigners({ chain, accountAddress, queryOptions }) {
             });
             return result;
         },
-        enabled: Boolean(chain && accountAddress),
+        // Respect queryOptions.enabled if explicitly set (e.g. signersEnabled=false from SignInWithB3Flow)
+        enabled: queryOptions?.enabled !== false && Boolean(chain && accountAddress),
         refetchOnMount: true,
         refetchOnWindowFocus: true,
         refetchOnReconnect: true,

package/dist/types/global-account/react/components/SignInWithB3/steps/LoginStep.d.ts

@@ -19,5 +19,5 @@ interface LoginStepContainerProps {
     partnerId?: string;
 }
 export declare function LoginStepContainer({ children, partnerId }: LoginStepContainerProps): import("react/jsx-runtime").JSX.Element;
-export declare function LoginStep({ onSuccess, chain }: LoginStepProps): import("react/jsx-runtime").JSX.Element;
+export declare function LoginStep({ onSuccess, chain }: LoginStepProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/types/global-account/react/hooks/useAuthentication.d.ts

@@ -1,6 +1,8 @@
 import { Wallet } from "thirdweb/wallets";
 import { preAuthenticate } from "thirdweb/wallets/in-app";
-export declare function useAuthentication(partnerId: string): {
+export declare function useAuthentication(partnerId: string, { skipAutoConnect }?: {
+    skipAutoConnect?: boolean;
+}): {
     logout: (callback?: () => void) => Promise<void>;
     isAuthenticated: boolean;
     isReady: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.1.68-alpha.8",
+  "version": "0.1.68-alpha.9",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",

package/src/global-account/react/components/SignInWithB3/SignIn.tsx

@@ -44,7 +44,7 @@ export function SignIn(props: SignInWithB3Props) {
   const { data: walletImage } = useWalletImage(connectedEOAWallet?.id);
 
   const isMobile = useIsMobile();
-  const { logout } = useAuthentication(partnerId);
+  const { logout } = useAuthentication(partnerId, { skipAutoConnect: true });
   const onDisconnect = async (): Promise<void> => {
     await logout();
   };

package/src/global-account/react/components/SignInWithB3/SignInWithB3Flow.tsx

@@ -35,16 +35,23 @@ export function SignInWithB3Flow({
   signersEnabled = false,
 }: SignInWithB3ModalProps) {
   const { automaticallySetFirstEoa } = useB3Config();
-  const { user, logout } = useAuthentication(partnerId);
+  // skipAutoConnect: this component intentionally logs out on mount to show a fresh login screen.
+  // AuthenticationProvider is the sole owner of useAutoConnect to avoid competing auth cycles.
+  const { user, logout } = useAuthentication(partnerId, { skipAutoConnect: true });
 
-  // FIXME Logout before login to ensure a clean state
+  // Tracks whether the pre-login logout has finished.
+  // We must not render ConnectEmbed until logout (wallet disconnect) completes,
+  // otherwise the wallet state disrupts ConnectEmbed causing a blank modal.
+  const [readyToShowLogin, setReadyToShowLogin] = useState(source === "requestPermissions");
   const hasLoggedOutRef = useRef(false);
   useEffect(() => {
     if (hasLoggedOutRef.current) return;
     if (source !== "requestPermissions") {
       debug("Logging out before login");
-      logout();
       hasLoggedOutRef.current = true;
+      logout().finally(() => {
+        setReadyToShowLogin(true);
+      });
     }
   }, [source, logout]);
 
@@ -275,8 +282,9 @@ export function SignInWithB3Flow({
       </LoginStepContainer>
     );
   } else if (step === "login") {
-    // Show loading spinner
-    if (isAuthenticating || (isFetchingSigners && step === "login") || source === "requestPermissions") {
+    // Show loading spinner while: authenticating, waiting for pre-login logout to finish,
+    // or fetching signers.
+    if (!readyToShowLogin || isAuthenticating || isFetchingSigners) {
       content = (
         <LoginStepContainer partnerId={partnerId}>
           <div className="my-8 flex min-h-[350px] items-center justify-center">

package/src/global-account/react/components/SignInWithB3/SignInWithB3Privy.tsx

@@ -23,7 +23,7 @@ export function SignInWithB3Privy({ onSuccess, onError, chain }: SignInWithB3Pri
   const { isLoading, connectTw, fullToken } = useHandleConnectWithPrivy(chain, onSuccess);
   const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
   const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
-  const { logout } = useAuthentication(partnerId);
+  const { logout } = useAuthentication(partnerId, { skipAutoConnect: true });
 
   debug("@@SignInWithB3Privy", {
     isLoading,

package/src/global-account/react/components/SignInWithB3/steps/LoginStep.tsx

@@ -3,6 +3,7 @@ import { ecosystemWalletId } from "@b3dotfun/sdk/shared/constants";
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
 import { Chain } from "thirdweb";
 import { ConnectEmbed, darkTheme, lightTheme } from "thirdweb/react";
+import { useMemo } from "react";
 import { Account, ecosystemWallet, SingleStepAuthArgsType } from "thirdweb/wallets";
 /**
  * Props for the LoginStep component
@@ -49,42 +50,40 @@ export function LoginStepContainer({ children, partnerId }: LoginStepContainerPr
   );
 }
 
-export function LoginStep({ onSuccess, chain }: LoginStepProps) {
-  const { partnerId, theme } = useB3Config();
-  const wallet = ecosystemWallet(ecosystemWalletId, {
-    partnerId: partnerId,
-  });
-  const { onConnect } = useAuthentication(partnerId);
+/** Inner component that only mounts when partnerId is a non-empty string.
+ *  Keeps all hooks unconditional without calling useAuthentication(""). */
+function LoginStepContent({
+  onSuccess,
+  chain,
+  partnerId,
+  theme,
+}: {
+  onSuccess: (account: Account) => Promise<void>;
+  chain: Chain;
+  partnerId: string;
+  theme: string;
+}) {
+  const wallet = useMemo(() => ecosystemWallet(ecosystemWalletId, { partnerId }), [partnerId]);
+  // skipAutoConnect: AuthenticationProvider already owns the auto-connect instance.
+  // Creating another here would cause a second authentication cycle (another 401 attempt)
+  // that makes the modal flash between spinner and blank before finally showing the login form.
+  const { onConnect } = useAuthentication(partnerId, { skipAutoConnect: true });
 
   return (
     <LoginStepContainer partnerId={partnerId}>
       <ConnectEmbed
         showThirdwebBranding={false}
+        autoConnect={false}
         client={client}
         chain={chain}
         wallets={[wallet]}
         theme={
           theme === "light"
-            ? lightTheme({
-                colors: {
-                  modalBg: "hsl(var(--b3-react-background))",
-                },
-              })
-            : darkTheme({
-                colors: {
-                  modalBg: "hsl(var(--b3-react-background))",
-                },
-              })
+            ? lightTheme({ colors: { modalBg: "hsl(var(--b3-react-background))" } })
+            : darkTheme({ colors: { modalBg: "hsl(var(--b3-react-background))" } })
         }
-        style={{
-          width: "100%",
-          height: "100%",
-          border: 0,
-        }}
-        header={{
-          title: "Sign in with B3",
-          titleIcon: "https://cdn.b3.fun/b3_logo.svg",
-        }}
+        style={{ width: "100%", height: "100%", border: 0 }}
+        header={{ title: "Sign in with B3", titleIcon: "https://cdn.b3.fun/b3_logo.svg" }}
         className="b3-login-step"
         onConnect={async (wallet, allConnectedWallets) => {
           await onConnect(wallet, allConnectedWallets);
@@ -96,3 +95,14 @@ export function LoginStep({ onSuccess, chain }: LoginStepProps) {
     </LoginStepContainer>
   );
 }
+
+export function LoginStep({ onSuccess, chain }: LoginStepProps) {
+  const { partnerId, theme } = useB3Config();
+
+  // partnerId may be undefined during the brief B3Provider hydration window.
+  // Return null rather than rendering ConnectEmbed with an invalid ecosystem
+  // wallet config (which causes a blank screen).
+  if (!partnerId) return null;
+
+  return <LoginStepContent onSuccess={onSuccess} chain={chain} partnerId={partnerId} theme={theme} />;
+}

package/src/global-account/react/components/SignInWithB3/steps/LoginStepCustom.tsx

@@ -43,7 +43,7 @@ export function LoginStepCustom({
   const { connect } = useConnect(partnerId, chain);
   const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
   const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
-  const { logout } = useAuthentication(partnerId);
+  const { logout } = useAuthentication(partnerId, { skipAutoConnect: true });
   const { connect: connectTW } = useConnectTW();
 
   // Split strategies into auth and wallet types

package/src/global-account/react/hooks/useAuthentication.ts

@@ -24,11 +24,26 @@ import { useUserQuery } from "./useUserQuery";
 
 const debug = debugB3React("useAuthentication");
 
-export function useAuthentication(partnerId: string) {
+export function useAuthentication(partnerId: string, { skipAutoConnect = false }: { skipAutoConnect?: boolean } = {}) {
   const { onConnectCallback, onLogoutCallback } = useContext(LocalSDKContext);
   const { disconnect } = useDisconnect();
   const wallets = useConnectedWallets();
+  // Keep refs so logout() always disconnects current wallets, not stale closure values.
+  // autoConnectCore captures onConnect (and thus logout) from the first render before wallets
+  // are populated — without these refs, logout() would capture wallets=[] and disconnect nothing.
+  const walletsRef = useRef(wallets);
+  useEffect(() => {
+    walletsRef.current = wallets;
+  }, [wallets]);
   const activeWallet = useActiveWallet();
+  // Track the active wallet by ref so logout() can disconnect the exact reference
+  // stored in thirdweb's activeWalletStore. walletsRef.current (from useConnectedWallets)
+  // may hold a different object reference than what thirdweb considers "active",
+  // causing the identity check in onWalletDisconnect to fail silently.
+  const activeWalletRef = useRef(activeWallet);
+  useEffect(() => {
+    activeWalletRef.current = activeWallet;
+  }, [activeWallet]);
   const isAuthenticated = useAuthStore(state => state.isAuthenticated);
   const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
   const setIsConnected = useAuthStore(state => state.setIsConnected);
@@ -154,14 +169,30 @@ export function useAuthentication(partnerId: string) {
   const logout = useCallback(
     async (callback?: () => void) => {
       // Only disconnect ecosystem/smart wallets, preserve EOA wallets (e.g. MetaMask)
-      // so they remain available after re-login
-      wallets.forEach(wallet => {
+      // so they remain available after re-login.
+      // Use walletsRef.current (not the stale closure value) so we always get current wallets —
+      // autoConnectCore captures logout from the first render when wallets is still [].
+      walletsRef.current.forEach(wallet => {
         debug("@@logout:wallet", wallet.id);
         if (wallet.id.startsWith("ecosystem.") || wallet.id === "smart") {
           disconnect(wallet);
         }
       });
 
+      // Also disconnect the active wallet using the exact reference from thirdweb's
+      // activeWalletStore. The wallets in walletsRef (from useConnectedWallets) may be
+      // different object references than what thirdweb holds as "active". Thirdweb's
+      // onWalletDisconnect uses strict identity (===) to decide whether to clear
+      // activeAccountStore — if the reference doesn't match, activeAccount stays set
+      // and ConnectEmbed renders show=false (blank).
+      if (
+        activeWalletRef.current &&
+        (activeWalletRef.current.id.startsWith("ecosystem.") || activeWalletRef.current.id === "smart")
+      ) {
+        debug("@@logout:disconnecting active wallet", activeWalletRef.current.id);
+        disconnect(activeWalletRef.current);
+      }
+
       // Clear user-specific storage but preserve wallet connection state
       // so EOA wallets (e.g. MetaMask) can auto-reconnect on next login
       if (typeof localStorage !== "undefined") {
@@ -174,6 +205,9 @@ export function useAuthentication(partnerId: string) {
 
       setIsAuthenticated(false);
       setIsConnected(false);
+      // Reset isAuthenticating so any in-flight page-load auto-connect that set it true
+      // does not keep the login modal spinner stuck after logout() is called.
+      setIsAuthenticating(false);
       setUser();
       callback?.();
 
@@ -181,7 +215,10 @@ export function useAuthentication(partnerId: string) {
         await onLogoutCallback();
       }
     },
-    [disconnect, wallets, setIsAuthenticated, setUser, setIsConnected, onLogoutCallback],
+    // wallets intentionally omitted — we use walletsRef.current so this callback stays stable
+    // and always operates on current wallets even when captured in stale closures.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [disconnect, setIsAuthenticated, setIsAuthenticating, setUser, setIsConnected, onLogoutCallback],
   );
 
   const onConnect = useCallback(
@@ -208,7 +245,6 @@ export function useAuthentication(partnerId: string) {
         debug("@@useAuthentication:onConnect:failed", { error });
         setIsAuthenticated(false);
         setUser(undefined);
-
         await logout();
       } finally {
         setIsAuthenticating(false);
@@ -238,9 +274,13 @@ export function useAuthentication(partnerId: string) {
 
   const { isLoading: useAutoConnectLoading } = useAutoConnect({
     client,
-    wallets: [wallet],
+    // When skipAutoConnect is true (e.g. LoginStepContent, SignInWithB3Flow), pass an empty
+    // wallets array so useAutoConnect completes immediately without firing onConnect.
+    // Only AuthenticationProvider (the primary instance) should own auto-connect.
+    wallets: skipAutoConnect ? [] : [wallet],
     onConnect,
     onTimeout: () => {
+      if (skipAutoConnect) return;
       logout().catch(error => {
         debug("@@useAuthentication:logout on timeout failed", { error });
       });
@@ -248,14 +288,17 @@ export function useAuthentication(partnerId: string) {
   });
 
   /**
-   * useAutoConnectLoading starts as false
+   * useAutoConnectLoading starts as false.
+   * Only the primary (non-skip) instance manages isAuthenticating via this effect
+   * to avoid race conditions when multiple useAuthentication instances are mounted.
    */
   useEffect(() => {
+    if (skipAutoConnect) return;
     if (!useAutoConnectLoading && useAutoConnectLoadingPrevious.current && !hasStartedConnecting) {
       setIsAuthenticating(false);
     }
     useAutoConnectLoadingPrevious.current = useAutoConnectLoading;
-  }, [useAutoConnectLoading, hasStartedConnecting, setIsAuthenticating]);
+  }, [useAutoConnectLoading, hasStartedConnecting, setIsAuthenticating, skipAutoConnect]);
 
   const isReady = isAuthenticated && !isAuthenticating;
 

package/src/global-account/react/hooks/useGetAllTWSigners.tsx

@@ -130,7 +130,8 @@ export function useGetAllTWSigners({ chain, accountAddress, queryOptions }: UseG
       });
       return result;
     },
-    enabled: Boolean(chain && accountAddress),
+    // Respect queryOptions.enabled if explicitly set (e.g. signersEnabled=false from SignInWithB3Flow)
+    enabled: queryOptions?.enabled !== false && Boolean(chain && accountAddress),
     refetchOnMount: true,
     refetchOnWindowFocus: true,
     refetchOnReconnect: true,