Can't connect metamask to React app in production

Question

I have a React app that can connect to my browser's Metamask in my development environment, but the version deployed on Netlify can't connect to Metamask. My code for getting my web3 provider is

import Web3 from "web3"; //get the browser's web 3 provider export const web3 = new Web3(window.ethereum);

This is the code I'm using to deploy a smart contract that works locally:

import { web3 } from "./web3";
import { getWarranty } from "./getWarranty";
import warrantyByteCode from "./warrantyByteCode";

export async function deployWarranty(warrantyArguments) {
    let warrantyContract = await getWarranty();
    let gas = await warrantyContract.deploy({data:warrantyByteCode, arguments: warrantyArguments}).estimateGas((err, g) => console.log(g));
    const accounts = await web3.eth.getAccounts((err, accounts) => { return accounts} );
    let params = {gas: gas, from: accounts[0]}
    return await warrantyContract.deploy({data:warrantyByteCode, arguments: warrantyArguments}).send(params)
    .then(function(newContractInstance){
        return newContractInstance.options.address // instance with the new contract address
    });
}

In production await web3.eth.getAccounts() returns an empty array, but in local development, it returns the account I have selected in my metamask instance. It should be the same in both environments, so I'm not sure why it's only working locally.

Answer 1

All I had to do was manually connect to metamask using the instructions here