@turnkey/react-wallet-kit 1.0.0-beta.4 → 1.0.0-beta.5

package/dist/providers/client/Provider.js

@@ -67,6 +67,9 @@ const ClientProvider = ({
   const [user, setUser] = react.useState(undefined);
   const [clientState, setClientState] = react.useState();
   const [authState, setAuthState] = react.useState(base.AuthState.Unauthenticated);
+  // we use this custom hook to only update the state if the value is different
+  // this is so our useEffect that calls `initializeWalletProviderListeners()` only runs when it needs to
+  const [walletProviders, setWalletProviders] = utils.useWalletProviderState();
   const expiryTimeoutsRef = react.useRef({});
   const proxyAuthConfigRef = react.useRef(null);
   const [allSessions, setAllSessions] = react.useState(undefined);
@@ -74,78 +77,6 @@ const ClientProvider = ({
     pushPage,
     closeModal
   } = Hook.useModal();
-  react.useEffect(() => {
-    if (proxyAuthConfigRef.current) return;
-    // Only fetch the proxy auth config once. Use that to build the master config.
-    const fetchProxyAuthConfig = async () => {
-      try {
-        let proxyAuthConfig;
-        if (config.authProxyConfigId) {
-          // Only fetch the proxy auth config if we have an authProxyId. This is a way for devs to explicitly disable the proxy auth.
-          proxyAuthConfig = await core.getAuthProxyConfig(config.authProxyConfigId, config.authProxyUrl);
-          proxyAuthConfigRef.current = proxyAuthConfig;
-        }
-        setMasterConfig(buildConfig(proxyAuthConfig));
-      } catch {
-        setClientState(base.ClientState.Error);
-      }
-    };
-    fetchProxyAuthConfig();
-  }, []);
-  react.useEffect(() => {
-    // Start the client initialization process once we have the master config.
-    if (!masterConfig) return;
-    initializeClient();
-  }, [masterConfig]);
-  react.useEffect(() => {
-    // Handle changes to the passed in config prop -- update the master config
-    // If the proxyAuthConfigRef is already set, we don't need to fetch it again. Rebuild the master config with the updated config and stored proxyAuthConfig
-    if (!proxyAuthConfigRef.current && config.authProxyConfigId) return;
-    setMasterConfig(buildConfig(proxyAuthConfigRef.current ?? undefined));
-  }, [config, proxyAuthConfigRef.current]);
-  /**
-   * @internal
-   * we use debouncedFetchWallets() to prevent multiple rapid wallet events
-   * like accountsChanged and disconnect from triggering fetchWallets repeatedly
-   * it must be defined outside the useEffect so all event listeners share the same
-   * debounced function instance - otherwise, a new one would be created on every render
-   */
-  const debouncedFetchWallets = utils.useDebouncedCallback(fetchWallets, 100);
-  react.useEffect(() => {
-    if (!client) return;
-    let cleanup = () => {};
-    initializeProviders(getWalletProviders, debouncedFetchWallets).then(fn => {
-      cleanup = fn;
-    }).catch(err => {
-      console.error("Failed to init providers:", err);
-    });
-    return () => {
-      cleanup();
-    };
-  }, [client, debouncedFetchWallets]);
-  react.useEffect(() => {
-    // authState must be consistent with session state. We found during testing that there are cases where the session and authState can be out of sync in very rare edge cases.
-    // This will ensure that they are always in sync and remove the need to setAuthState manually in other places.
-    if (session && utils.isValidSession(session)) {
-      setAuthState(base.AuthState.Authenticated);
-    } else {
-      setAuthState(base.AuthState.Unauthenticated);
-    }
-  }, [session]);
-  react.useEffect(() => {
-    // This will handle any redirect based oAuth. It then initializes the session. This is the last step before client is considered "ready"
-    if (!client || !masterConfig) return;
-    completeRedirectOauth().finally(() => {
-      clearSessionTimeouts();
-      initializeSessions().finally(() => {
-        // Set the client state to ready only after all initializations are done.
-        setClientState(base.ClientState.Ready);
-      });
-    });
-    return () => {
-      clearSessionTimeouts();
-    };
-  }, [client]);
   const completeRedirectOauth = async () => {
     // Check for either hash or search parameters that could indicate an OAuth redirect
     if (window.location.hash || window.location.search) {
@@ -436,6 +367,79 @@ const ClientProvider = ({
       }
     }
   };
+  /**
+   * @internal
+   * Attach listeners for connected wallet providers so we can refresh state on changes.
+   *
+   * - Ethereum: listens for disconnect and chain switches to trigger a refresh.
+   * - Solana: listens for disconnect via Wallet Standard `change` events to trigger a refresh.
+   * - WalletConnect: listens for disconnect via our custom wrapper’s `change` event to trigger a refresh.
+   *
+   * Notes:
+   * - Only providers that are connected are bound.
+   * - WalletConnect is excluded from the “native” paths and handled via its unified `change` event.
+   *
+   * @param walletProviders - Discovered providers; only connected ones are bound.
+   * @param onWalletsChanged - Invoked when a relevant provider event occurs.
+   * @returns Cleanup function that removes all listeners registered by this call.
+   */
+  async function initializeWalletProviderListeners(walletProviders, onWalletsChanged) {
+    if (walletProviders.length === 0) return () => {};
+    const cleanups = [];
+    // we only want to initialize these listeners for connected walletProviders
+    const nativeOnly = provider => provider.interfaceType !== core.WalletInterfaceType.WalletConnect;
+    const ethProviders = masterConfig?.walletConfig?.chains.ethereum?.native ? walletProviders.filter(provider => provider.chainInfo.namespace === core.Chain.Ethereum && nativeOnly(provider) && provider.connectedAddresses.length > 0) : [];
+    const solProviders = masterConfig?.walletConfig?.chains.solana?.native ? walletProviders.filter(provider => provider.chainInfo.namespace === core.Chain.Solana && nativeOnly(provider) && provider.connectedAddresses.length > 0) : [];
+    // we exclude WalletConnect from the native event wiring
+    // this is because WC is handled separately with a custom wrapper’s
+    //  `change` event
+    const wcProviders = walletProviders.filter(p => p.interfaceType === core.WalletInterfaceType.WalletConnect && p.connectedAddresses.length > 0);
+    function attachEthereumListeners(provider, onWalletsChanged) {
+      if (typeof provider.on !== "function") return;
+      const handleChainChanged = _chainId => onWalletsChanged();
+      const handleAccountsChanged = accounts => {
+        if (accounts.length === 0) onWalletsChanged();
+      };
+      const handleDisconnect = () => onWalletsChanged();
+      provider.on("chainChanged", handleChainChanged);
+      provider.on("accountsChanged", handleAccountsChanged);
+      provider.on("disconnect", handleDisconnect);
+      return () => {
+        provider.removeListener("chainChanged", handleChainChanged);
+        provider.removeListener("accountsChanged", handleAccountsChanged);
+        provider.removeListener("disconnect", handleDisconnect);
+      };
+    }
+    function attachSolanaListeners(provider, onWalletsChanged) {
+      const cleanups = [];
+      const walletEvents = provider?.features?.["standard:events"];
+      if (walletEvents?.on) {
+        const offChange = walletEvents.on("change", _evt => {
+          onWalletsChanged();
+        });
+        cleanups.push(offChange);
+      }
+      return () => cleanups.forEach(fn => fn());
+    }
+    ethProviders.forEach(p => {
+      const cleanup = attachEthereumListeners(p.provider, onWalletsChanged);
+      if (cleanup) cleanups.push(cleanup);
+    });
+    solProviders.forEach(p => {
+      const cleanup = attachSolanaListeners(p.provider, onWalletsChanged);
+      if (cleanup) cleanups.push(cleanup);
+    });
+    wcProviders.forEach(p => {
+      const standardEvents = p.provider?.features?.["standard:events"];
+      if (standardEvents?.on) {
+        const unsubscribe = standardEvents.on("change", onWalletsChanged);
+        cleanups.push(unsubscribe);
+      }
+    });
+    return () => {
+      cleanups.forEach(remove => remove());
+    };
+  }
   /**
    * @internal
    * Schedules a session expiration and warning timeout for the given session key.
@@ -609,23 +613,23 @@ const ClientProvider = ({
       callbacks?.onError?.(new sdkTypes.TurnkeyError(`Failed to initialize sessions`, sdkTypes.TurnkeyErrorCodes.HANDLE_POST_LOGOUT_ERROR, error));
     }
   };
-  async function createPasskey(params) {
+  const createPasskey = react.useCallback(async params => {
     if (!client) {
       throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     }
     return utils.withTurnkeyErrorHandling(() => client.createPasskey({
       ...params
     }), callbacks, "Failed to create passkey");
-  }
-  async function logout(params) {
+  }, [client, callbacks]);
+  const logout = react.useCallback(async params => {
     if (!client) {
       throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     }
-    utils.withTurnkeyErrorHandling(() => client.logout(params), callbacks, "Failed to logout");
+    await utils.withTurnkeyErrorHandling(() => client.logout(params), callbacks, "Failed to logout");
     handlePostLogout();
     return;
-  }
-  async function loginWithPasskey(params) {
+  }, [client, callbacks]);
+  const loginWithPasskey = react.useCallback(async params => {
     if (!client) {
       throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     }
@@ -638,8 +642,8 @@ const ClientProvider = ({
       await handlePostAuth();
     }
     return res;
-  }
-  async function signUpWithPasskey(params) {
+  }, [client, callbacks]);
+  const signUpWithPasskey = react.useCallback(async params => {
     if (!client) {
       throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     }
@@ -673,92 +677,54 @@ const ClientProvider = ({
       await handlePostAuth();
     }
     return res;
-  }
-  async function getWalletProviders(chain) {
+  }, [client, callbacks]);
+  const getWalletProviders = react.useCallback(async chain => {
     if (!client) {
       throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     }
-    return await client.getWalletProviders(chain);
-  }
-  async function connectWalletAccount(walletProvider) {
+    const newProviders = await client.getWalletProviders(chain);
+    // we update state with the latest providers
+    // we keep this state so that initializeWalletProviderListeners() re-runs
+    // whenever the list of connected providers changes
+    // this ensures we attach disconnect listeners for each connected provider
+    setWalletProviders(newProviders);
+    return newProviders;
+  }, [client, callbacks]);
+  const connectWalletAccount = react.useCallback(async walletProvider => {
     if (!client) {
       throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     }
     await client.connectWalletAccount(walletProvider);
+    // this will update our walletProvider state
     await refreshWallets();
-  }
-  async function disconnectWalletAccount(walletProvider) {
+  }, [client, callbacks]);
+  const disconnectWalletAccount = react.useCallback(async walletProvider => {
     if (!client) {
       throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     }
     await client.disconnectWalletAccount(walletProvider);
-    // we only refresh the wallets if there is an active session
-    // this is needed because for WalletConnect you can unlink a wallet before
-    // actually being logged in
-    if (session) {
+    // we only refresh the wallets if:
+    // 1. there is an active session. This is needed because for WalletConnect
+    //    you can unlink a wallet before actually being logged in
+    //
+    // 2. it was a WalletConnect provider that we just disconnected. Since
+    //    native providers emit a disconnect event which will already refresh
+    //    the wallets. This event is triggered in `initializeWalletProviderListeners()`
+    if (session && walletProvider.interfaceType === core.WalletInterfaceType.WalletConnect) {
+      // this will update our walletProvider state
       await refreshWallets();
     }
-  }
-  async function switchWalletProviderChain(walletProvider, chainOrId) {
+  }, [client, callbacks]);
+  const switchWalletAccountChain = react.useCallback(async params => {
     if (!client) {
       throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     }
-    await client.switchWalletProviderChain(walletProvider, chainOrId);
-  }
-  // TODO: MOE PLEASE COMMENT THESE
-  async function initializeProviders(getWalletProviders, onWalletsChanged) {
-    const cleanups = [];
-    // we only want to initialize these listeners for native wallet providers
-    // and not WalletConnect
-    const nativeOnly = p => p.interfaceType !== core.WalletInterfaceType.WalletConnect;
-    const ethProviders = masterConfig?.walletConfig?.chains.ethereum?.native ? (await getWalletProviders(core.Chain.Ethereum)).filter(nativeOnly) : [];
-    const solProviders = masterConfig?.walletConfig?.chains.solana?.native ? (await getWalletProviders(core.Chain.Solana)).filter(nativeOnly) : [];
-    function attachEthereumListeners(provider, onWalletsChanged) {
-      if (typeof provider.on !== "function") return;
-      const handleAccountsChanged = accounts => {
-        if (accounts.length === 0) onWalletsChanged();
-      };
-      const handleDisconnect = () => onWalletsChanged();
-      provider.on("accountsChanged", handleAccountsChanged);
-      provider.on("disconnect", handleDisconnect);
-      return () => {
-        provider.removeListener("accountsChanged", handleAccountsChanged);
-        provider.removeListener("disconnect", handleDisconnect);
-      };
-    }
-    function attachSolanaListeners(provider, onWalletsChanged) {
-      const cleanups = [];
-      const walletEvents = provider.features?.["standard:events"];
-      if (walletEvents?.on) {
-        const handleChange = event => {
-          if (event.type === "change" || event.type === "accountsChanged") {
-            onWalletsChanged();
-          }
-        };
-        walletEvents.on("change", handleChange);
-        walletEvents.on("accountsChanged", handleChange);
-        cleanups.push(() => {
-          walletEvents.off?.("change", handleChange);
-          walletEvents.off?.("accountsChanged", handleChange);
-        });
-      }
-      return cleanups.length > 0 ? () => {
-        cleanups.forEach(fn => fn());
-      } : () => {};
-    }
-    ethProviders.forEach(p => {
-      const cleanup = attachEthereumListeners(p.provider, onWalletsChanged);
-      if (cleanup) cleanups.push(cleanup);
-    });
-    solProviders.forEach(p => {
-      const cleanup = attachSolanaListeners(p.provider, onWalletsChanged);
-      if (cleanup) cleanups.push(cleanup);
+    await client.switchWalletAccountChain({
+      ...params,
+      walletProviders
     });
-    return () => {
-      cleanups.forEach(remove => remove());
-    };
-  }
-  async function loginWithWallet(params) {
+  }, [client, callbacks]);
+  const loginWithWallet = react.useCallback(async params => {
     if (!client) {
       throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     }
@@ -771,8 +737,8 @@ const ClientProvider = ({
       await handlePostAuth();
     }
     return res;
-  }
-  async function signUpWithWallet(params) {
+  }, [client, callbacks]);
+  const signUpWithWallet = react.useCallback(async params => {
     if (!client) {
       throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     }
@@ -796,8 +762,8 @@ const ClientProvider = ({
       await handlePostAuth();
     }
     return res;
-  }
-  async function loginOrSignupWithWallet(params) {
+  }, [client, callbacks, masterConfig]);
+  const loginOrSignupWithWallet = react.useCallback(async params => {
     if (!client) {
       throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     }
@@ -821,20 +787,20 @@ const ClientProvider = ({
       await handlePostAuth();
     }
     return res;
-  }
-  async function initOtp(params) {
+  }, [client, callbacks, masterConfig]);
+  const initOtp = react.useCallback(async params => {
     if (!client) {
       throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     }
     return utils.withTurnkeyErrorHandling(() => client.initOtp(params), callbacks, "Failed to initialize OTP");
-  }
-  async function verifyOtp(params) {
+  }, [client, callbacks]);
+  const verifyOtp = react.useCallback(async params => {
     if (!client) {
       throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     }
     return utils.withTurnkeyErrorHandling(() => client.verifyOtp(params), callbacks, "Failed to verify OTP");
-  }
-  async function loginWithOtp(params) {
+  }, [client, callbacks]);
+  const loginWithOtp = react.useCallback(async params => {
     if (!client) {
       throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     }
@@ -843,8 +809,8 @@ const ClientProvider = ({
       await handlePostAuth();
     }
     return res;
-  }
-  async function signUpWithOtp(params) {
+  }, [client, callbacks]);
+  const signUpWithOtp = react.useCallback(async params => {
     if (!client) {
       throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     }
@@ -871,8 +837,8 @@ const ClientProvider = ({
       await handlePostAuth();
     }
     return res;
-  }
-  async function completeOtp(params) {
+  }, [client, callbacks, masterConfig]);
+  const completeOtp = react.useCallback(async params => {
     if (!client) {
       throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     }
@@ -899,8 +865,8 @@ const ClientProvider = ({
       await handlePostAuth();
     }
     return res;
-  }
-  async function completeOauth(params) {
+  }, [client, callbacks, masterConfig]);
+  const completeOauth = react.useCallback(async params => {
     if (!client) {
       throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     }
@@ -920,8 +886,8 @@ const ClientProvider = ({
       await handlePostAuth();
     }
     return res;
-  }
-  async function loginWithOauth(params) {
+  }, [client, callbacks, masterConfig]);
+  const loginWithOauth = react.useCallback(async params => {
     if (!client) {
       throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     }
@@ -930,8 +896,8 @@ const ClientProvider = ({
       await handlePostAuth();
     }
     return res;
-  }
-  async function signUpWithOauth(params) {
+  }, [client, callbacks]);
+  const signUpWithOauth = react.useCallback(async params => {
     if (!client) {
       throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     }
@@ -951,24 +917,24 @@ const ClientProvider = ({
       await handlePostAuth();
     }
     return res;
-  }
-  async function fetchWallets(params) {
+  }, [client, callbacks, masterConfig]);
+  const fetchWallets = react.useCallback(async params => {
     if (!client) {
       throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     }
     return utils.withTurnkeyErrorHandling(() => client.fetchWallets(params), callbacks, "Failed to fetch wallets");
-  }
-  async function fetchWalletAccounts(params) {
+  }, [client, callbacks]);
+  const fetchWalletAccounts = react.useCallback(async params => {
     if (!client) {
       throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     }
     return utils.withTurnkeyErrorHandling(() => client.fetchWalletAccounts(params), callbacks, "Failed to fetch wallet accounts");
-  }
-  async function signMessage(params) {
+  }, [client, callbacks]);
+  const signMessage = react.useCallback(async params => {
     if (!client) throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     return utils.withTurnkeyErrorHandling(() => client.signMessage(params), callbacks, "Failed to sign message");
-  }
-  async function handleSignMessage(params) {
+  }, [client, callbacks]);
+  const handleSignMessage = react.useCallback(async params => {
     const {
       successPageDuration = 2000
     } = params;
@@ -1000,146 +966,146 @@ const ClientProvider = ({
         })
       });
     });
-  }
-  async function signTransaction(params) {
+  }, [client, callbacks]);
+  const signTransaction = react.useCallback(async params => {
     if (!client) throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     return utils.withTurnkeyErrorHandling(() => client.signTransaction(params), callbacks, "Failed to sign transaction");
-  }
-  async function signAndSendTransaction(params) {
+  }, [client, callbacks]);
+  const signAndSendTransaction = react.useCallback(async params => {
     if (!client) throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     return utils.withTurnkeyErrorHandling(() => client.signAndSendTransaction(params), callbacks, "Failed to sign transaction");
-  }
-  async function fetchUser(params) {
+  }, [client, callbacks]);
+  const fetchUser = react.useCallback(async params => {
     if (!client) throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     return utils.withTurnkeyErrorHandling(() => client.fetchUser(params), callbacks, "Failed to fetch user");
-  }
-  async function updateUserEmail(params) {
+  }, [client, callbacks]);
+  const updateUserEmail = react.useCallback(async params => {
     if (!client) throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     const res = await utils.withTurnkeyErrorHandling(() => client.updateUserEmail(params), callbacks, "Failed to update user email");
     if (res) await refreshUser({
       stampWith: params?.stampWith
     });
     return res;
-  }
-  async function removeUserEmail(params) {
+  }, [client, callbacks]);
+  const removeUserEmail = react.useCallback(async params => {
     if (!client) throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     const res = await utils.withTurnkeyErrorHandling(() => client.removeUserEmail(params), callbacks, "Failed to remove user email");
     if (res) await refreshUser({
       stampWith: params?.stampWith
     });
     return res;
-  }
-  async function updateUserPhoneNumber(params) {
+  }, [client, callbacks]);
+  const updateUserPhoneNumber = react.useCallback(async params => {
     if (!client) throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     const res = await utils.withTurnkeyErrorHandling(() => client.updateUserPhoneNumber(params), callbacks, "Failed to update user phone number");
     if (res) await refreshUser({
       stampWith: params?.stampWith
     });
     return res;
-  }
-  async function removeUserPhoneNumber(params) {
+  }, [client, callbacks]);
+  const removeUserPhoneNumber = react.useCallback(async params => {
     if (!client) throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     const res = await utils.withTurnkeyErrorHandling(() => client.removeUserPhoneNumber(params), callbacks, "Failed to remove user phone number");
     if (res) await refreshUser({
       stampWith: params?.stampWith
     });
     return res;
-  }
-  async function updateUserName(params) {
+  }, [client, callbacks]);
+  const updateUserName = react.useCallback(async params => {
     if (!client) throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     const res = await utils.withTurnkeyErrorHandling(() => client.updateUserName(params), callbacks, "Failed to update user name");
     if (res) await refreshUser({
       stampWith: params?.stampWith
     });
     return res;
-  }
-  async function addOauthProvider(params) {
+  }, [client, callbacks]);
+  const addOauthProvider = react.useCallback(async params => {
     if (!client) throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     const res = await utils.withTurnkeyErrorHandling(() => client.addOauthProvider(params), callbacks, "Failed to add OAuth provider");
     if (res) await refreshUser({
       stampWith: params?.stampWith
     });
     return res;
-  }
-  async function removeOauthProviders(params) {
+  }, [client, callbacks]);
+  const removeOauthProviders = react.useCallback(async params => {
     if (!client) throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     const res = await utils.withTurnkeyErrorHandling(() => client.removeOauthProviders(params), callbacks, "Failed to remove OAuth providers");
     if (res) await refreshUser({
       stampWith: params?.stampWith
     });
     return res;
-  }
-  async function addPasskey(params) {
+  }, [client, callbacks]);
+  const addPasskey = react.useCallback(async params => {
     if (!client) throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     const res = await utils.withTurnkeyErrorHandling(() => client.addPasskey(params), callbacks, "Failed to add passkey");
     if (res) await refreshUser({
       stampWith: params?.stampWith
     });
     return res;
-  }
-  async function removePasskeys(params) {
+  }, [client, callbacks]);
+  const removePasskeys = react.useCallback(async params => {
     if (!client) throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     const res = await utils.withTurnkeyErrorHandling(() => client.removePasskeys(params), callbacks, "Failed to remove passkeys");
     if (res) await refreshUser({
       stampWith: params?.stampWith
     });
     return res;
-  }
-  async function createWallet(params) {
+  }, [client, callbacks]);
+  const createWallet = react.useCallback(async params => {
     if (!client) throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     const res = await utils.withTurnkeyErrorHandling(() => client.createWallet(params), callbacks, "Failed to create wallet");
     if (res) await refreshWallets({
       stampWith: params?.stampWith
     });
     return res;
-  }
-  async function createWalletAccounts(params) {
+  }, [client, callbacks]);
+  const createWalletAccounts = react.useCallback(async params => {
     if (!client) throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     const res = await utils.withTurnkeyErrorHandling(() => client.createWalletAccounts(params), callbacks, "Failed to create wallet accounts");
     if (res) await refreshWallets({
       stampWith: params?.stampWith
     });
     return res;
-  }
-  async function exportWallet(params) {
+  }, [client, callbacks]);
+  const exportWallet = react.useCallback(async params => {
     if (!client) throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     const res = await utils.withTurnkeyErrorHandling(() => client.exportWallet(params), callbacks, "Failed to export wallet");
     if (res) await refreshWallets({
       stampWith: params?.stampWith
     });
     return res;
-  }
-  async function exportPrivateKey(params) {
+  }, [client, callbacks]);
+  const exportPrivateKey = react.useCallback(async params => {
     if (!client) throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     const res = await utils.withTurnkeyErrorHandling(() => client.exportPrivateKey(params), callbacks, "Failed to export private key");
     return res;
-  }
-  async function exportWalletAccount(params) {
+  }, [client, callbacks]);
+  const exportWalletAccount = react.useCallback(async params => {
     if (!client) throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     const res = await utils.withTurnkeyErrorHandling(() => client.exportWalletAccount(params), callbacks, "Failed to export wallet accounts");
     if (res) await refreshWallets({
       stampWith: params?.stampWith
     });
     return res;
-  }
-  async function importWallet(params) {
+  }, [client, callbacks]);
+  const importWallet = react.useCallback(async params => {
     if (!client) throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     const res = await utils.withTurnkeyErrorHandling(() => client.importWallet(params), callbacks, "Failed to import wallet");
     if (res) await refreshWallets({
       stampWith: params?.stampWith
     });
     return res;
-  }
-  async function importPrivateKey(params) {
+  }, [client, callbacks]);
+  const importPrivateKey = react.useCallback(async params => {
     if (!client) throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     const res = await utils.withTurnkeyErrorHandling(() => client.importPrivateKey(params), callbacks, "Failed to import private key");
     return res;
-  }
-  async function deleteSubOrganization(params) {
+  }, [client, callbacks]);
+  const deleteSubOrganization = react.useCallback(async params => {
     if (!client) throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     return utils.withTurnkeyErrorHandling(() => client.deleteSubOrganization(params), callbacks, "Failed to delete sub-organization");
-  }
-  async function storeSession(params) {
+  }, [client, callbacks]);
+  const storeSession = react.useCallback(async params => {
     if (!client) throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     await utils.withTurnkeyErrorHandling(() => client.storeSession(params), callbacks, "Failed to store session");
     const sessionKey = await getActiveSessionKey();
@@ -1156,8 +1122,8 @@ const ClientProvider = ({
     setSession(session);
     setAllSessions(allSessions);
     return;
-  }
-  async function clearSession(params) {
+  }, [client, callbacks]);
+  const clearSession = react.useCallback(async params => {
     if (!client) throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     await utils.withTurnkeyErrorHandling(() => client.clearSession(params), callbacks, "Failed to clear session");
     const session = await getSession();
@@ -1165,14 +1131,14 @@ const ClientProvider = ({
     setSession(session);
     setAllSessions(allSessions);
     return;
-  }
-  async function clearAllSessions() {
+  }, [client, callbacks]);
+  const clearAllSessions = react.useCallback(async () => {
     if (!client) throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     setSession(undefined);
     setAllSessions(undefined);
     return await utils.withTurnkeyErrorHandling(() => client.clearAllSessions(), callbacks, "Failed to clear all sessions");
-  }
-  async function refreshSession(params) {
+  }, [client, callbacks]);
+  const refreshSession = react.useCallback(async params => {
     if (!client) {
       throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     }
@@ -1200,16 +1166,16 @@ const ClientProvider = ({
     setSession(session);
     setAllSessions(allSessions);
     return res;
-  }
-  async function getSession(params) {
+  }, [client, callbacks]);
+  const getSession = react.useCallback(async params => {
     if (!client) throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     return utils.withTurnkeyErrorHandling(() => client.getSession(params), callbacks, "Failed to get session");
-  }
-  async function getAllSessions() {
+  }, [client, callbacks]);
+  const getAllSessions = react.useCallback(async () => {
     if (!client) throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     return utils.withTurnkeyErrorHandling(() => client.getAllSessions(), callbacks, "Failed to get all sessions");
-  }
-  async function setActiveSession(params) {
+  }, [client, callbacks]);
+  const setActiveSession = react.useCallback(async params => {
     if (!client) throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     const session = await utils.withTurnkeyErrorHandling(() => client.getSession({
       sessionKey: params.sessionKey
@@ -1220,24 +1186,24 @@ const ClientProvider = ({
     await utils.withTurnkeyErrorHandling(() => client.setActiveSession(params), callbacks, "Failed to set active session");
     setSession(session);
     return;
-  }
-  async function getActiveSessionKey() {
+  }, [client, callbacks]);
+  const getActiveSessionKey = react.useCallback(async () => {
     if (!client) throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     return utils.withTurnkeyErrorHandling(() => client.getActiveSessionKey(), callbacks, "Failed to get active session key");
-  }
-  async function clearUnusedKeyPairs() {
+  }, [client, callbacks]);
+  const clearUnusedKeyPairs = react.useCallback(async () => {
     if (!client) throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     return utils.withTurnkeyErrorHandling(() => client.clearUnusedKeyPairs(), callbacks, "Failed to clear unused key pairs");
-  }
-  async function createApiKeyPair(params) {
+  }, [client, callbacks]);
+  const createApiKeyPair = react.useCallback(async params => {
     if (!client) throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     return utils.withTurnkeyErrorHandling(() => client.createApiKeyPair(params), callbacks, "Failed to create API key pair");
-  }
-  async function getProxyAuthConfig() {
+  }, [client, callbacks]);
+  const getProxyAuthConfig = react.useCallback(async () => {
     if (!client) throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     return utils.withTurnkeyErrorHandling(() => client.getProxyAuthConfig(), callbacks, "Failed to get proxy auth config");
-  }
-  async function refreshUser(params) {
+  }, [client, callbacks]);
+  const refreshUser = react.useCallback(async params => {
     const {
       stampWith
     } = params || {};
@@ -1248,20 +1214,22 @@ const ClientProvider = ({
     if (user) {
       setUser(user);
     }
-  }
-  async function refreshWallets(params) {
+  }, [client, callbacks]);
+  const refreshWallets = react.useCallback(async params => {
     const {
       stampWith
     } = params || {};
     if (!client) throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
+    const walletProviders = await utils.withTurnkeyErrorHandling(() => getWalletProviders(), callbacks, "Failed to refresh wallets");
     const wallets = await utils.withTurnkeyErrorHandling(() => fetchWallets({
-      stampWith
+      stampWith,
+      walletProviders
     }), callbacks, "Failed to refresh wallets");
     if (wallets) {
       setWallets(wallets);
     }
-  }
-  async function handleGoogleOauth(params) {
+  }, [client, callbacks, getWalletProviders, fetchWallets]);
+  const handleGoogleOauth = react.useCallback(async params => {
     const {
       clientId = masterConfig?.auth?.oauthConfig?.googleClientId,
       openInPage = masterConfig?.auth?.oauthConfig?.openOauthInPage ?? false,
@@ -1377,8 +1345,8 @@ const ClientProvider = ({
     } catch (error) {
       throw error;
     }
-  }
-  async function handleAppleOauth(params) {
+  }, [client, callbacks]);
+  const handleAppleOauth = react.useCallback(async params => {
     const {
       clientId = masterConfig?.auth?.oauthConfig?.appleClientId,
       openInPage = masterConfig?.auth?.oauthConfig?.openOauthInPage ?? false,
@@ -1490,8 +1458,8 @@ const ClientProvider = ({
     } catch (error) {
       throw error;
     }
-  }
-  async function handleFacebookOauth(params) {
+  }, [client, callbacks]);
+  const handleFacebookOauth = react.useCallback(async params => {
     const {
       clientId = masterConfig?.auth?.oauthConfig?.facebookClientId,
       openInPage = masterConfig?.auth?.oauthConfig?.openOauthInPage ?? false,
@@ -1622,14 +1590,14 @@ const ClientProvider = ({
     } catch (error) {
       throw error;
     }
-  }
-  const handleLogin = async () => {
+  }, [client, callbacks]);
+  const handleLogin = react.useCallback(async () => {
     pushPage({
       key: "Log in or sign up",
       content: jsxRuntime.jsx(index.AuthComponent, {})
     });
-  };
-  const handleExportWallet = async params => {
+  }, [pushPage]);
+  const handleExportWallet = react.useCallback(async params => {
     const {
       walletId,
       targetPublicKey,
@@ -1648,8 +1616,8 @@ const ClientProvider = ({
         } : {})
       })
     });
-  };
-  const handleExportPrivateKey = async params => {
+  }, [pushPage]);
+  const handleExportPrivateKey = react.useCallback(async params => {
     const {
       privateKeyId,
       targetPublicKey,
@@ -1668,8 +1636,8 @@ const ClientProvider = ({
         } : {})
       })
     });
-  };
-  const handleExportWalletAccount = async params => {
+  }, [pushPage]);
+  const handleExportWalletAccount = react.useCallback(async params => {
     const {
       address,
       targetPublicKey,
@@ -1688,8 +1656,8 @@ const ClientProvider = ({
         } : {})
       })
     });
-  };
-  const handleImportWallet = async params => {
+  }, [pushPage]);
+  const handleImportWallet = react.useCallback(async params => {
     const {
       defaultWalletAccounts,
       successPageDuration = 2000,
@@ -1720,8 +1688,8 @@ const ClientProvider = ({
       }
       throw new sdkTypes.TurnkeyError("Failed to import wallet.", sdkTypes.TurnkeyErrorCodes.IMPORT_WALLET_ERROR, error);
     }
-  };
-  const handleUpdateUserName = async params => {
+  }, [pushPage]);
+  const handleUpdateUserName = react.useCallback(async params => {
     const {
       successPageDuration = 2000,
       subTitle,
@@ -1786,8 +1754,8 @@ const ClientProvider = ({
       }
       throw new sdkTypes.TurnkeyError("Failed to update user name.", sdkTypes.TurnkeyErrorCodes.UPDATE_USER_NAME_ERROR, error);
     }
-  };
-  const handleUpdateUserPhoneNumber = async params => {
+  }, [pushPage]);
+  const handleUpdateUserPhoneNumber = react.useCallback(async params => {
     const {
       successPageDuration = 2000,
       subTitle,
@@ -1890,8 +1858,8 @@ const ClientProvider = ({
       }
       throw new sdkTypes.TurnkeyError("Failed to initialize OTP for sms verification.", sdkTypes.TurnkeyErrorCodes.INIT_OTP_ERROR, error);
     }
-  };
-  const handleUpdateUserEmail = async params => {
+  }, [pushPage]);
+  const handleUpdateUserEmail = react.useCallback(async params => {
     const {
       successPageDuration = 2000,
       subTitle,
@@ -1987,8 +1955,8 @@ const ClientProvider = ({
       }
       throw new sdkTypes.TurnkeyError("Failed to initialize OTP for email verification.", sdkTypes.TurnkeyErrorCodes.INIT_OTP_ERROR, error);
     }
-  };
-  const handleAddEmail = async params => {
+  }, [pushPage]);
+  const handleAddEmail = react.useCallback(async params => {
     const {
       successPageDuration = 2000,
       subTitle,
@@ -2084,8 +2052,8 @@ const ClientProvider = ({
       }
       throw new sdkTypes.TurnkeyError("Failed to initialize OTP for email verification.", sdkTypes.TurnkeyErrorCodes.INIT_OTP_ERROR, error);
     }
-  };
-  const handleAddPhoneNumber = async params => {
+  }, [pushPage]);
+  const handleAddPhoneNumber = react.useCallback(async params => {
     const {
       successPageDuration = 2000,
       subTitle,
@@ -2192,8 +2160,8 @@ const ClientProvider = ({
       }
       throw new sdkTypes.TurnkeyError("Failed to initialize OTP for sms verification.", sdkTypes.TurnkeyErrorCodes.INIT_OTP_ERROR, error);
     }
-  };
-  const handleRemovePasskey = async params => {
+  }, [pushPage]);
+  const handleRemovePasskey = react.useCallback(async params => {
     const {
       authenticatorId,
       successPageDuration = 2000,
@@ -2233,8 +2201,8 @@ const ClientProvider = ({
         preventBack: true
       });
     }), callbacks, "Failed to remove passkey");
-  };
-  const handleAddPasskey = async params => {
+  }, [pushPage]);
+  const handleAddPasskey = react.useCallback(async params => {
     const {
       name,
       displayName,
@@ -2278,8 +2246,8 @@ const ClientProvider = ({
       }
       throw new sdkTypes.TurnkeyError("Failed to add passkey in handler.", sdkTypes.TurnkeyErrorCodes.ADD_PASSKEY_ERROR, error);
     }
-  };
-  const handleRemoveOauthProvider = async params => {
+  }, [pushPage]);
+  const handleRemoveOauthProvider = react.useCallback(async params => {
     const {
       providerId,
       successPageDuration = 2000,
@@ -2322,8 +2290,8 @@ const ClientProvider = ({
       }
       throw new sdkTypes.TurnkeyError("Failed to remove OAuth provider in handler.", sdkTypes.TurnkeyErrorCodes.REMOVE_OAUTH_PROVIDER_ERROR, error);
     }
-  };
-  const handleAddOauthProvider = async params => {
+  }, [pushPage]);
+  const handleAddOauthProvider = react.useCallback(async params => {
     if (!client) throw new sdkTypes.TurnkeyError("Client is not initialized.", sdkTypes.TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED);
     if (!session) {
       throw new sdkTypes.TurnkeyError("No active session found.", sdkTypes.TurnkeyErrorCodes.NO_SESSION_FOUND);
@@ -2381,8 +2349,8 @@ const ClientProvider = ({
           throw new sdkTypes.TurnkeyError(`Unsupported OAuth provider: ${providerName}`, sdkTypes.TurnkeyErrorCodes.NOT_FOUND);
         }
     }
-  };
-  const handleLinkExternalWallet = async params => {
+  }, [pushPage]);
+  const handleLinkExternalWallet = react.useCallback(async params => {
     const {
       successPageDuration = 2000
     } = params || {};
@@ -2401,8 +2369,8 @@ const ClientProvider = ({
         successPageDuration: successPageDuration
       })
     });
-  };
-  const handleRemoveUserEmail = async params => {
+  }, [pushPage]);
+  const handleRemoveUserEmail = react.useCallback(async params => {
     const {
       successPageDuration = 2000,
       stampWith,
@@ -2440,8 +2408,8 @@ const ClientProvider = ({
       }
       throw new sdkTypes.TurnkeyError("Failed to remove user email.", sdkTypes.TurnkeyErrorCodes.UPDATE_USER_EMAIL_ERROR, error);
     }
-  };
-  const handleRemoveUserPhoneNumber = async params => {
+  }, [pushPage]);
+  const handleRemoveUserPhoneNumber = react.useCallback(async params => {
     const {
       successPageDuration = 2000,
       stampWith,
@@ -2479,7 +2447,91 @@ const ClientProvider = ({
       }
       throw new sdkTypes.TurnkeyError("Failed to remove user phone number.", sdkTypes.TurnkeyErrorCodes.UPDATE_USER_PHONE_NUMBER_ERROR, error);
     }
-  };
+  }, [pushPage]);
+  react.useEffect(() => {
+    if (proxyAuthConfigRef.current) return;
+    // Only fetch the proxy auth config once. Use that to build the master config.
+    const fetchProxyAuthConfig = async () => {
+      try {
+        let proxyAuthConfig;
+        if (config.authProxyConfigId) {
+          // Only fetch the proxy auth config if we have an authProxyId. This is a way for devs to explicitly disable the proxy auth.
+          proxyAuthConfig = await core.getAuthProxyConfig(config.authProxyConfigId, config.authProxyUrl);
+          proxyAuthConfigRef.current = proxyAuthConfig;
+        }
+        setMasterConfig(buildConfig(proxyAuthConfig));
+      } catch {
+        setClientState(base.ClientState.Error);
+      }
+    };
+    fetchProxyAuthConfig();
+  }, []);
+  react.useEffect(() => {
+    // Start the client initialization process once we have the master config.
+    if (!masterConfig) return;
+    initializeClient();
+  }, [masterConfig]);
+  react.useEffect(() => {
+    // Handle changes to the passed in config prop -- update the master config
+    // If the proxyAuthConfigRef is already set, we don't need to fetch it again. Rebuild the master config with the updated config and stored proxyAuthConfig
+    if (!proxyAuthConfigRef.current && config.authProxyConfigId) return;
+    setMasterConfig(buildConfig(proxyAuthConfigRef.current ?? undefined));
+  }, [config, proxyAuthConfigRef.current]);
+  /**
+   * @internal
+   * We create `debouncedRefreshWallets()` so that multiple rapid wallet events
+   * (for example, on Solana a single disconnect can emit several events we listen for)
+   * only trigger `refreshWallets()` once.
+   *
+   * Defining the debounced function outside of the `useEffect` ensures all event
+   * listeners in `initializeProviders` share the same instance, instead of creating
+   * a new one on every render.
+   */
+  const debouncedRefreshWallets = utils.useDebouncedCallback(refreshWallets, 100);
+  react.useEffect(() => {
+    if (!client) return;
+    const handleRefreshWallets = async () => {
+      // we only refresh the wallets if there is an active session
+      // this is needed because a disconnect event can occur
+      // while the user is unauthenticated
+      if (session) {
+        // this will update our walletProvider state
+        await debouncedRefreshWallets();
+      }
+    };
+    let cleanup = () => {};
+    initializeWalletProviderListeners(walletProviders, handleRefreshWallets).then(fn => {
+      cleanup = fn;
+    }).catch(err => {
+      console.error("Failed to init providers:", err);
+    });
+    return () => {
+      cleanup();
+    };
+  }, [client, walletProviders]);
+  react.useEffect(() => {
+    // authState must be consistent with session state. We found during testing that there are cases where the session and authState can be out of sync in very rare edge cases.
+    // This will ensure that they are always in sync and remove the need to setAuthState manually in other places.
+    if (session && utils.isValidSession(session)) {
+      setAuthState(base.AuthState.Authenticated);
+    } else {
+      setAuthState(base.AuthState.Unauthenticated);
+    }
+  }, [session]);
+  react.useEffect(() => {
+    // This will handle any redirect based oAuth. It then initializes the session. This is the last step before client is considered "ready"
+    if (!client || !masterConfig) return;
+    completeRedirectOauth().finally(() => {
+      clearSessionTimeouts();
+      initializeSessions().finally(() => {
+        // Set the client state to ready only after all initializations are done.
+        setClientState(base.ClientState.Ready);
+      });
+    });
+    return () => {
+      clearSessionTimeouts();
+    };
+  }, [client]);
   return jsxRuntime.jsx(Types.ClientContext.Provider, {
     value: {
       session,
@@ -2497,7 +2549,7 @@ const ClientProvider = ({
       getWalletProviders,
       connectWalletAccount,
       disconnectWalletAccount,
-      switchWalletProviderChain,
+      switchWalletAccountChain,
       loginWithWallet,
       signUpWithWallet,
       loginOrSignupWithWallet,