web3auth.on(ADAPTER_EVENTS.CONNECTED, handleConnected); handleConnected is getting called multiple times

Question

When I connect at first time that when I call loginWithGoogle or loginWithEmail and login. The console CONNECTING and CONNECTED is coming multiple times and fetchAddress is getting called multiple times.

Any solution for this?

• SDK Version(package.json):

"@web3auth/auth-adapter": "^9.4.0",
"@web3auth/base": "^9.4.0",
"@web3auth/base-provider": "^9.4.0",
"@web3auth/no-modal": "^9.4.0",

import { useCallback, useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { CommonPrivateKeyProvider } from "@web3auth/base-provider";
import { Web3AuthNoModal as Web3Auth } from "@web3auth/no-modal";
import { ADAPTER_EVENTS, WALLET_ADAPTERS, WEB3AUTH_NETWORK } from "@web3auth/base";
import { AuthAdapter } from "@web3auth/auth-adapter";
import {  UPDATE_AUTH_DETAILS } from "@reducers/account.reducer";
import { AUTH_TYPES, KEPLER_WEBSITE_LINK, chainID, web3AuthChainConfig, web3AuthCliedId } from "@root/constants";
import { getPublicCompressed } from "@toruslabs/eccrypto";
import accountServices from "@services/account.services";

let web3auth;

const initWeb3Auth = async () => {
  try {
    const privateKeyProvider = new CommonPrivateKeyProvider({
      config: { chainConfig: web3AuthChainConfig },
    });

    web3auth = new Web3Auth({
      clientId: web3AuthCliedId,
      privateKeyProvider,
      web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
    });

    const authAdapter = new AuthAdapter({
      adapterSettings: {},
    });

    web3auth.configureAdapter(authAdapter);
    await web3auth.init();
  } catch (error) {
    console.log("ERROR_INIT_WEB3AUTH", error);
  }
};
initWeb3Auth();

const useAuth = () => {
  const dispatch = useDispatch();
  const [loading, setLoading] = useState(false);
  const { accessToken, address,  authProvider } = useSelector(state => state.account.auth);

  const loginWithKeplr = async () => {
    try {
      if (!window.keplr) {
        window.open(KEPLER_WEBSITE_LINK);
        return;
      }
      await window.keplr.enable(chainID);
      const offlineSigner = window.keplr.getOfflineSigner(chainID);
      const accounts = await offlineSigner.getAccounts();
      const address = accounts[0].address;
      dispatch(UPDATE_AUTH_DETAILS({  accessToken: "", address, authProvider: AUTH_TYPES.KEPLR }));
    } catch (e) {
      console.log("ERROR_loginWithKeplr", e);
    }
  };
    
  const loginWithGoogle = async () => {
    try {
      if (!web3auth) { return;}
      await web3auth.connectTo(WALLET_ADAPTERS.AUTH, { loginProvider: "google" });
    } catch (e) {
      console.log("ERROR_loginWithGoogle", e);
    }
  };

  const loginWithEmail = async (email) => {
    try {
      if (!web3auth) { return;}
      await web3auth.connectTo(WALLET_ADAPTERS.AUTH, { extraLoginOptions: { login_hint: email }, loginProvider: "email_passwordless" });
    } catch (e) {
      console.log("ERROR_loginWithGoogle", e);
        
    }
  };

  const logout = useCallback( async () => {
    try {
      if (!web3auth) { return; }
      if (window.keplr) {
        await window.keplr.disable();
        dispatch(UPDATE_AUTH_DETAILS({  accessToken: "", address: "", authProvider: AUTH_TYPES.NONE  }));    
      }
      if (accessToken && accessToken.length > 0) {
        await web3auth.logout();
      }
    } catch (e) {
      console.log(e);
    }
  }, [accessToken, dispatch]);


    
  useEffect(() => {
    const fetchAddress = async () => {
      try {
        if (accessToken && accessToken.length > 0 && [AUTH_TYPES.EMAIL_PASSWORDLESS, AUTH_TYPES.GOOGLE].includes(authProvider)) {
          const details = await accountServices.fetchUserDetailsWithPublicKey({ publicKey: `${accessToken}` });
          const expiresIn = new Date(details?.expiredAt) - new Date();
          if (expiresIn > 0) {
            if (address.length === 0 && address !== details.sentinelAddress) {
              dispatch(UPDATE_AUTH_DETAILS({ address: details.sentinelAddress }));
            }
            return;
          }
          logout();
          return;
        }
      } catch (e) {
        console.log("ERROR_fetchAddress", e);
        return;
      } finally {
        setLoading(false);
      }
    };
    fetchAddress();
  }, [accessToken, address, authProvider, dispatch, logout]);

  const handleConnecting = () => {
    console.log("-- CONNECTING --");
    setLoading(true);
  };

  const handleConnected = useCallback(async () => {
    console.log("-- CONNECTED --");
    const user = await web3auth.getUserInfo();
    const idToken = await web3auth.authenticateUser();
    const privateKey = await web3auth.provider.request({ method: "private_key" });

    if (privateKey) {
      const appPubKey = getPublicCompressed(Buffer.from(privateKey.padStart(64, "0"), "hex")).toString("hex");
      const token = await accountServices.fetchPublicKey({ appPubKey, idToken: idToken.idToken });
      if (accessToken !== token && user.typeOfLogin !== authProvider) {
        dispatch(UPDATE_AUTH_DETAILS({ accessToken: token, authProvider: user.typeOfLogin }));
      }
    }
  }, [accessToken, authProvider, dispatch]);

  const handleDisconnected = useCallback(() => {
    console.log("-- DISCONNECTED --");
    dispatch(UPDATE_AUTH_DETAILS({ accessToken: "", address: "", authProvider: AUTH_TYPES.NONE }));
  }, [dispatch]);

  const handleErrored = () => {
    console.log("-- ERRORED --");
    setLoading(false);
  };

  useEffect(() => {
    web3auth.on(ADAPTER_EVENTS.CONNECTING, handleConnecting);
    web3auth.on(ADAPTER_EVENTS.CONNECTED, handleConnected);
    web3auth.on(ADAPTER_EVENTS.DISCONNECTED, handleDisconnected);
    web3auth.on(ADAPTER_EVENTS.ERRORED, handleErrored);

    return () => {
      web3auth.off(ADAPTER_EVENTS.CONNECTING, handleConnecting);
      web3auth.off(ADAPTER_EVENTS.CONNECTED, handleConnected);
      web3auth.off(ADAPTER_EVENTS.DISCONNECTED, handleDisconnected);
      web3auth.off(ADAPTER_EVENTS.ERRORED, handleErrored);
    };
  }, [dispatch, handleConnected, handleDisconnected]);


  return { loading, loginWithEmail, loginWithGoogle, loginWithKeplr, logout };
};


export default useAuth;

A Solution for the Problem of Multiple calls of a web3auth effect would be appreciated.