Vue Metamask Login App Can't Interact with Metamask Because The Store Components Won't Interact with The Frontend

Question

I followed this tutorial to try to create a Metamask login app with Vue https://duartefdias.medium.com/authenticating-users-to-your-web-app-using-metamask-and-nodejs-e920e45e358. The code is described in individual files but there isn't a defined project structure. I made my own github repo to try to organize the structure in terms of where each file should go in the project https://github.com/ChristianOConnor/metamask-vue-for-debug. The app compiles but the button to connect/install Metamask doesn't do anything.

This is the actual code that displays the connect to Metamask functionality:

<template>
  <div>
    <button
      color="primary"
      large
      :disabled="buttonDisabled"
      v-on:click="performAction"
    >
      <img src="../assets/metamaskloginbutton.png" class="metamask-logo" />
      <span v-if="isMetaMaskInstalled()">Login with Metamask</span>
      <span v-if="!isMetaMaskInstalled()">{{ buttonInstallText }}</span>
    </button>
  </div>
</template>

This is the function that's supposed to determine whether Metamask is installed:

isMetaMaskInstalled() {
      //Have to check the ethereum binding on the window object to see if it's installed
      if (process.client) {
        return Boolean(
          this.$store.getters["metamask/ethereum"] &&
            this.$store.getters["metamask/ethereum"].isMetaMask
        );
      }
      return false;
    },

This function always returns false even though Metamask IS installed in the browser through which I am accessing the site.

I spoke with the author of the code and he said that my problem is that I'm not accounting for the vue store and I need to add the code ethereum: state => { if(process.client) { return window.ethereum } } but he never specified where. I read up on the vue store with articles like this one https://www.digitalocean.com/community/tutorials/how-to-manage-state-in-a-vue-js-application-with-vuex. This article didn't help though. I tried to get the store to work by altering the store/index.js file like this

store/index.js

import { createStore } from "vuex";

export default createStore({
  state: {},
  getters: {
    ethereum: () => {
      if (process.client) {
        return window.ethereum;
      }
    },
  },
  mutations: {},
  actions: {},
  modules: {},
});

Btw I had to remove state from ethereum: state => { if(process.client) { return window.ethereum } } because prettier wouldn't allow the code to compile with an unused parameter.

Why does isMetaMaskInstalled() always return false even when I add ethereum: state => { if(process.client) { return window.ethereum } } to the store/index.js file?

I'm assuming this code is failing because I'm putting ethereum: state => { if(process.client) { return window.ethereum } } in the wrong spot. Where am I supposed to put this code?

Answer 1

The problem here was with process.client always returning false

ethereum: () => {
  if (process.client) {
    return window.ethereum;
}

I changed it to:

ethereum: () => {
  return window.ethereum;
}

And my metamask window popped up for login