Search code examples
reactjsethereumsolidityweb3jsmetamask

How to Logout of MetaMask account Using web3.js


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)


Solution

  • 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.