How to Logout of MetaMask account Using web3.js

Question

I am using MetaMask for sending transactions to contract in my DApp. I need help in How to Disconnect MetaMask account from my DApp when the user clicks on logout button.

Front-end: ReactJS

Back-end: Web3js, Solidity (Ethereum)

Answer 1

Once a wallet is connected it's up to the user to disconnect, you have no control over metamask. You essentially simulate the concept of logging in and logging out by checking if you can get access to their accounts.

const {ethereum} = window;
const accounts = await ethereum.request({method: 'eth_accounts'});
if (accounts && accounts.length > 0) {
    console.log("user is connected");
} else {
    console.log("user not connected");
}

One thing I do is to watch for any account changes:

window.ethereum.on('accountsChanged', async () => {
    // Do something
});

Typically in my app I have an initialise function that checks for metamask, is it installed? is it connected? then I store the state so the app can persist as though the user is logged in even on page refresh. If anything happens such as account change or disconnect the above script runs and I run my initialise script again to reset the state.

// Runs on page load
initialise();

// Runs whenever the user changes account state
window.ethereum.on('accountsChanged', async () => {
    initialise();
});

So, doesn't really answer your question, as far as I know there is now way to reach out and disconnect the user.

let connected = false;
let installed = false;

function isMetaMaskInstalled() {
    return Boolean(window.ethereum && window.ethereum.isMetaMask);
}

async function isMetaMaskConnected() {
    const {ethereum} = window;
    const accounts = await ethereum.request({method: 'eth_accounts'});
    return accounts && accounts.length > 0;
}

async function initialise() {
    connected = await isMetaMaskConnected();
    installed = isMetaMaskInstalled();
}

initialise();

window.ethereum.on('accountsChanged', async () => {
    initialise();
});

I then have my UI reactive to the installed and connected variables.

Answer 2

The user can disconnect MetaMask account using the account disconnect button within the MetaMask itself. Also any page refresh or reload automatically disconnects MetaMask.

Answer 3

There is a nice framework https://usedapp.io/ to set up frontend in typescript to interact with smart contracts. You basically wrap your top-level component with its Provider:

import { Mainnet,ChainId} from "@usedapp/core";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <DAppProvider
      config={{
        supportedChains: [ChainId.Kovan, ChainId.Rinkeby],
      }}
    >
      <Component {...pageProps} />
    </DAppProvider>
  );
}

Then write a Header component:

import { useEthers } from "@usedapp/core";

export const Header = () => {
  
  const { account, activateBrowserWallet, deactivate } = useEthers();
  const isConnected = account !== undefined;
  return (
    <div >
      {isConnected ? (
        <Button  onClick={deactivate}>
          Disconnect
        </Button>
      ) : (
        <Button onClick={() => activateBrowserWallet()}>
          Connect
        </Button>
      )}
    </div> );};

Be aware that this is not going to lock metamask it will just disconnect your app from the account.

Answer 4

I don't know if you still have the issue, but inside of an async function you can call clearCachedProvider. The web3Modal variable is cast to my instansiation of web3, e.g. const web3Modal = new Web3Modal...:

await web3Modal.clearCachedProvider()

Answer 5

The above problem can be solved by using wagmi.You jus need to import disconnect into your project along with other needed packages

import {
  useAccount,
  useConnect,
  useDisconnect,
  useNetwork,
  useSignMessage
} from "wagmi";

react:

const { disconnect } = useDisconnect();

const disconnectWallet = async () => {
    disconnect();
    refreshState();
  };

 <HStack>
          {!activeConnector ? (
            <Button onClick={connectWallet}>Connect Wallet</Button>
          ) : (
            <Button onClick={disconnectWallet}>Disconnect</Button>
          )}
 </HStack>

Answer 6

as attached on EIP-1193, web3.js currently still working for connections and events only, such as disconnect events, network changes and wallet account changes only.