Web3.eth.accounts[0] never updating

Question

I'm trying to use Web3 to access the current account I have selected on Metamask by doing web3.eth.accounts[0] in order to display it on my UI (in VueJS). However web3.eth.accounts[0] always returns the same account, the first one of the 10 given to me by Ganache TestRPC.

Even if I switch to the 8th account (screenshot below) and refresh the app, console.log(web3.eth.accounts[0]) still outputs the first account in the array.

Here's my code (in Vuejs, contract has already been created):

    var ethereumUri = 'http://127.0.0.1:7545';   
        let web3 = new Web3(new Web3.providers.HttpProvider(ethereumUri));
        if (!web3.isConnected()) {
            return 'Unable to connect to ethereum node at ' + ethereumUri
        }else{
          var escrowContract = web3.eth.contract(abi); //abi initalized at start
          var instance = escrowContract.at(this.contractAddress); //contractAddress is initialized at the start

          console.log(web3.eth.accounts);
          console.log(web3.eth.accounts[0]);
        }

How would I make web3 output the current selected account address in Metamask?

Thanks!

Answer 1

The http provider you are using is only connecting directly to ganache so it's bypassing the MetaMask web3 provider which is why you are always seeing account[0] from ganache. If you use web3 = new Web3(web3.currentProvider) it will pickup MetaMask as the active provider.

You can also check if MetaMask is enabled before defining your web3 variable with:

if(typeof web3 !== 'undefined') {
    web3 = new Web3(web3.currentProvider);
} else {
    web3 = new Web3(new Web3.providers.HttpProvider(ethereumUri);
}

This only runs on initial load. To monitor for changes in MetaMask you can use a monitoring function that runs an interval-based check to see if web3.eth.accounts[0] has changed. You need to hold the current active account in a variable (eg, currentAddress) to do this check.

watchAddress: function () {
    var checkAddress = setInterval (function() {
        if (web3.eth.accounts[0] !== currentAddress) {
            // Account has changed
            // set currentAddress = web3.eth.accounts[0];
            // Do something, eg reload
        }
    }, 100);
}

Answer 2

This is 100% as designed. web3.eth.accounts[index_num] will always refer to whatever account was created in that particular order. So web3.eth.accounts[8] would refer to the 9th account created, whileas we3.eth.accounts[7] will be the 8th account created. I'm not sure if you can use web3js to select the currently selected account in metamask, you would however be able to check the address of the 8th account from the eth.accounts array to whoever is attempting to send a transaction, or invoke a function call.