Metamask React Login Hook

What it does?

With using this hook, You can easily manage your users' log in status. On accounts change hooks reflects realtime. Only with single line of code, you can simply use MetaMask wallet authentication. And it keeps user Logged In after you refresh the page. Until you completely log off.

Installation

NPM:

  npm install use-web3-authentication-react

All operating systems are supported, including Mac, Windows, and Linux.

Documentation

Import the package

import useWeb3Accounts from "use-web3-authentication-react";

Use in your App Component & Quick Start

function App() {
  const { accounts, setAccount } = useWeb3Accounts();
  return (
    <div className="App">
      <h1>Account: {accounts}</h1>
      <button onClick={setAccount}>Connect Your Account</button>
    </div>
  );
}

You can sign and make transactions with SIGNER // realtime

It is reflecting accounts changes realtime and gets correct and current signer everytime it changes.

function App() {
  const { accounts, connectAccount, signer, getSigner } = useWeb3Accounts();

  // Simple transcation example with signer
  async function txn() {
    // Get the contract with ethers library
    const contract = new ethers.Contract(addr, abi, signer);
    if (contract) {
      // Use the contract (this contract is an example.)
      const txc = await contract.recycle(selected);
      await txc.wait();
    } else {
      alert("ALERT!");
    }
  }

  return (
    <div className="App">
      <h1>Account: {accounts}</h1>
      <button onClick={connectAccount}>Connect Your Account</button>
      <button onClick={getSigner}>Get Signer</button>
      {/* Checking if there is signer*/}
      <h1>Signer: {signer?._isSigner && <div>Hello</div>}</h1>
    </div>
  );
}