Connecting MetaMask's web3 to a React app

If you want your React app to connect to MetaMask's web3, const web3 = new Web3(window.web3.currentProvider);will no longer work as suggested. We need to MetaMask to authorize the connection which is a manual process by clicking on a button to authorize like OAuth kind of process.

npm install web3

import Web3 from 'web3';

// This alone won't work anymore
// const web3 = new Web3(window.web3.currentProvider);

// Connect to metamask
window.ethereum.request({ method: 'eth_requestAccounts' });

const web3 = new Web3(Web3.givenProvider || 'ws://localhost:8545');

export default web3;

Thanks to Brian Marquis : https://www.udemy.com/user/brianmarquis/