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

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()