Issues with Web3Auth Modal Version and WAGMI Integration: Session Reauthentication and State Reset Problems

[cb1]

Hello Web3Auth Support Team,

We are currently utilizing the Web3Auth (modal version) alongside WAGMI, and are facing several issues that are affecting the user experience and functionality of our application.

1. Reauthentication Issue:

Problem: With the External Wallet login, the session gets terminated after a short period, prompting the user repeatedly reconnect. The popup/modal keeps reappearing until the user reconnect.

Expected Behavior: The session should remain active for a reasonable period without asking users to reconnect continuously.

2. Disconnection Issue:

Problem: When attempting to disconnect from the Web3Auth connector with WAGMI, the state does not reset correctly. Occasionally, the old wallet information persists, and the state remains unchanged when it should be cleared to idle.

Expected Behavior: The state should reset correctly, clearing all the old wallet information and returning to an idle state upon disconnection.

3. Modal Closing Issue:

Problem: When the modal is closed, the loading state does not revert back, seemingly frozen in the loading state. This issue persists until the page is refreshed.

Expected Behavior: The loading state should reset when the modal is closed, allowing for seamless further interactions without the need to refresh the page.

[vjgee]

@cb1 Welcome Aboard!

Which framework are you using? Are you on the latest SDK version? Are you using wagmi-connector V5.0.1 and set autoConnect: true ?

[cb1]

We use the latest version for everything.
This code fixes the issue for closing the modal and resetting the state to idle:

import { Web3AuthConnector } from ‘@web3auth/web3auth-wagmi-connector’;
import { useEffect } from ‘react’;
import { useAccount, useConnect, useDisconnect } from ‘wagmi’;

export const LOGIN_MODAL_EVENTS = {
INIT_EXTERNAL_WALLETS: ‘INIT_EXTERNAL_WALLETS’,
LOGIN: ‘LOGIN’,
DISCONNECT: ‘DISCONNECT’,
MODAL_VISIBILITY: ‘MODAL_VISIBILITY’,
};

export function useResetModal() {
const { connectors, reset } = useConnect();
const { disconnect } = useDisconnect();
const { isConnected } = useAccount();

useEffect(() => {
const connector = connectors[0] as Web3AuthConnector;
const web3Auth = connector.options.web3AuthInstance;

if (!web3Auth) return;

const onModalVisibility = (isVisible: boolean) => {
  if (isConnected || isVisible) {
    return;
  }

  disconnect();
};

web3Auth.on(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, onModalVisibility);

return () => {
  web3Auth.off(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, onModalVisibility);
};

}, [isConnected, disconnect, connectors, reset]);
}

[pepper]

hey @cb1 what kind of external wallet are you using?

there is an example which can use torus wallet as an external wallet login, which as no error at all.
Try refering to this code. thank you.

[cb1]

I have tested with Metamask and Rabby

[pepper]

@cb1 for the Reauthentication issue, this was happening due to the bug in the wallet connect

Session cleanup

got this resolved here and it’s expected to be released until this week