NextJS walletconnect login popping up after successful metamask login

[connordinnadge]

The issue I am having is that when I login using Metamask after signing with my wallet and it logging in the walletconnect login popup appears, I close it and refresh the page and it pops up again.

function Header() {
  const {
    authenticate,
    isWeb3Enabled,
    isAuthenticated,
    user,
    enableWeb3,
    Moralis,
  } = useMoralis();
  const { logout, isAuthenticating } = useMoralis();
  async function authWalletConnect() {
    const user = authenticate({
      provider: "walletconnect",
      chainId: 56,
      // mobileLinks: [
      //   "metamask",
      //   "trust",
      //   "rainbow",
      //   "argent",
      //   "imtoken",
      //   "pillar",
      // ],
      signingMessage: "Welcome!",
    });
    console.log(user);
  }

  useEffect(() => {
    if (!isWeb3Enabled && isAuthenticated) {
      enableWeb3({ provider: "walletconnect", chainId: 56 });
      console.log("web3 activated");
    }
  }, [isWeb3Enabled, isAuthenticated, enableWeb3]);
  if (typeof window === "object") {
    document.addEventListener("visibilitychange", () => {
      if (document.visibilityState === "hidden") {
        window.localStorage.removeItem("WALLETCONNECT_DEEPLINK_CHOICE");
      }
    });
  }
  const [click, setClick] = useState(false);
  const handleMenuClick = () => setClick(!click);
  if (!isAuthenticated && !user) {
    console.log(user);
    return (
      <FixedHeader>
        <HeaderContainer>
          <BrandingContainer>
            
            <HeaderList click={click}>
              <HeaderListItem>
                <Link href="/about">
                  <HeaderListLink>About</HeaderListLink>
                </Link>
              </HeaderListItem>
              {ProjectDetails.minting_menu_link && (
                <HeaderListItem>
                  <Link href="/minting">
                    <HeaderListLink>Minting</HeaderListLink>
                  </Link>
                </HeaderListItem>
              )}

              <HeaderListItem>
                <Link href="/roadmap">
                  <HeaderListLink>Roadmap</HeaderListLink>
                </Link>
              </HeaderListItem>
              <HeaderListItem>
                <Link href="/the-team">
                  <HeaderListLink>The Team</HeaderListLink>
                </Link>
              </HeaderListItem>
              <HeaderListItem>
                <Link href="/gallery">
                  <HeaderListLink>Gallery</HeaderListLink>
                </Link>
              </HeaderListItem>
            </HeaderList>
          </BrandingContainer>

          <ConnectContainer>
            <HeaderSocials>
              <SocialLinks
                twitterLink={ProjectDetails.social_links.twitter}
                openseaLink={ProjectDetails.social_links.opensea}
                discordLink={ProjectDetails.social_links.discord}
                bgColor="var(--purple)"
                bgHoverColor="var(--pink)"
                iconColor="var(--white-off)"
                iconHoverColor="var(--white-pure)"
              />
            </HeaderSocials>

            <MetaMaskIconBtn
              onClick={() =>
                authenticate({ signingMessage: "Connecting to Project" })
              }
            >
              <MetaMaskIcon
                src="/images/metamask_150px.png"
                alt="Metamask Icon"
              />
            </MetaMaskIconBtn>
            <MetaMaskIconBtn onClick={() => authWalletConnect()}>
              <MetaMaskIcon
                src="/images/walletconnect_150px.png"
                alt="Walletconnect Icon"
              />
            </MetaMaskIconBtn>
            <MobileMenuIcon onClick={handleMenuClick}>
              {click ? <FaTimes /> : <FaBars />}
            </MobileMenuIcon>
          </ConnectContainer>
        </HeaderContainer>
      </FixedHeader>
    );
  }
  return (
    <FixedHeader>
      <HeaderContainer>
        <BrandingContainer>
          <HeaderList click={click}>
            <MobileBranding>Project</MobileBranding>
            <HeaderListItem>
              <Link href="/about">
                <HeaderListLink>About</HeaderListLink>
              </Link>
            </HeaderListItem>
            {ProjectDetails.minting_menu_link && (
              <HeaderListItem>
                <Link href="/minting">
                  <HeaderListLink>Minting</HeaderListLink>
                </Link>
              </HeaderListItem>
            )}

            <HeaderListItem>
              <Link href="/roadmap">
                <HeaderListLink>Roadmap</HeaderListLink>
              </Link>
            </HeaderListItem>
            <HeaderListItem>
              <Link href="/the-team">
                <HeaderListLink>The Team</HeaderListLink>
              </Link>
            </HeaderListItem>
            <HeaderListItem>
              <Link href="/gallery">
                <HeaderListLink>Gallery</HeaderListLink>
              </Link>
            </HeaderListItem>
          </HeaderList>
        </BrandingContainer>

        <ConnectContainer>
          <HeaderSocials>
            <SocialLinks
              twitterLink={ProjectDetails.social_links.twitter}
              openseaLink={ProjectDetails.social_links.opensea}
              discordLink={ProjectDetails.social_links.discord}
              bgColor="var(--purple)"
              bgHoverColor="var(--pink)"
              iconColor="var(--white-off)"
              iconHoverColor="var(--white-pure)"
            />
          </HeaderSocials>
          <ConnectWalletButton
            isLoading={isAuthenticating}
            onClick={() => logout()}
            disabled={isAuthenticating}
          >
            Logout
          </ConnectWalletButton>
          <MobileMenuIcon onClick={handleMenuClick}>
            {click ? <FaTimes /> : <FaBars />}
          </MobileMenuIcon>
        </ConnectContainer>
      </HeaderContainer>
    </FixedHeader>
  );
}

export default Header;

[Yomoo]

Hi @connordinnadge

Sorry for the late reply, hope you already found a solution. I’ll share also our solution:

You need to add a new dependency isWeb3EnableLoading

useEffect(() => {
    if (!isWeb3Enabled && isAuthenticated && !isWeb3EnableLoading) {
      enableWeb3({ provider: "walletconnect", chainId: 56 });
      console.log("web3 activated");
    }
  }, [isWeb3Enabled, isAuthenticated, isWeb3EnableLoading]);

[connordinnadge]

This does not seem to have fixed the issue, I am stuck in a constant loop of the Wallet connect pop appearing after I have successfully logged in using the standard MetaMask authenticate.

I am also getting this appear in the console:
Moralis.enable() is deprecated and will be removed, use Moralis.enableWeb3() instead.

[cryptokid]

@connordinnadge

  useEffect(() => {
    if (!isWeb3Enabled && isAuthenticated) {
      enableWeb3({ provider: "walletconnect", chainId: 56 });
      console.log("web3 activated");
    }
  }, [isWeb3Enabled, isAuthenticated, enableWeb3]);

you are trying to use enableWeb3 with provider: "walletconnect" parameter no matter what was used for authentication?

what version of Moralis SDK are you using?

[connordinnadge]

I am using:

• react-moralis ^0.3.0
• moralis ^0.0.134
• @walletconnect/web3-provider ^1.6.6
  on my NextJS project

[iangriggs]

Was there a resolution to this as I see what sound like the same or very similar issue. I’ve incorporated the code recommendations above and still seeing this problem.

I can use WalletConnect with QR code on desktop…but on mobile browser (on Android) I end up back on the app, after what appears to be a successful “signing/approval” on the wallet, with the isAuthenticated flag still set to false and the login buttons still showing rather than the logged in address and blockie.

Any further ideas much appreciated!!!

• react-moralis ^0.3.11
• moralis ^0.0.182
• @walletconnect/web3-provider ^1.7.0
  on my NextJS project