[bug] `getIsConnected()` returns `false` when user is logged in when called on page load

[Hunter Cote]

Link to minimal reproducible example

https://codesandbox.io/p/sandbox/mystifying-mirzakhani-xqnkt3

Summary

If you want to check if a user is connected to web3modal when the page loads, it returns false even though they are. If you set a timeout and make the call after one second, then it registers that a user is connected.

  const getIsConnected = () => {
    return getWeb3Modal().getIsConnected();
  };

  useEffect(() => {
    console.log("getIsConnected before timeout", getIsConnected()); // returns `false`
    setTimeout(() => {
      console.log("getIsConnected after timeout", getIsConnected()); // returns `true`
    }, 1000);
  }, []);

Is this the expected behavior? Is there an alternative for how to know on page load / modal initialization if a user is connected without using a timeout? (even though the reproducible example above is using react as a quick demonstration, I'm using JS https://docs.walletconnect.com/web3modal/javascript/about)

List of related npm package versions

@web3modal/ethers5@4.1.8
ethers@5.7.2

[Linear]

W3M-249 [bug] `getIsConnected()` returns `false` when user is logged in when called on page load

[Rio]

I wanted to submit this issue just now. I've tested so many techniques.
the problem is that the wab3modal will start the connection sometimes after the window is loaded. This makes impossible to write Auth Gaurd for routing systems like react router.