├── README.md
├── metamask-auth.js
└── metamask-auth.module.css


/README.md:
--------------------------------------------------------------------------------
 1 | ## MetaMask React Auth Component
 2 | 
 3 | <img src="https://raw.githubusercontent.com/MetaMask/brand-resources/master/SVG/metamask-fox.svg" alt="MetaMask Fox logo" height="120" width="120">
 4 | 
 5 | ### Works on desktop and mobile!
 6 | <img src="https://res.cloudinary.com/inversia/image/upload/v1639043225/metamask-auth-component-demo_ppl9rs.gif" alt="MetaMask Fox logo" >
 7 | 
 8 | <br>
 9 | <br>
10 | 
11 | Just change your `dappUrl` in `metamask-auth.jsx`.
12 | 
13 | Demo: [metamask-auth.ilamanov.repl.co](https://metamask-auth.ilamanov.repl.co/) <br>
14 | Demo code: [replit.com/@ilamanov/metamask-auth](https://replit.com/@ilamanov/metamask-auth?v=1)
15 | 
16 | Code walkthrough: [Build a React Component For MetaMask Auth](https://betterprogramming.pub/build-a-react-component-for-metamask-auth-10b7ecba5c3f)
17 | 


--------------------------------------------------------------------------------
/metamask-auth.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from "react";
 2 | import styles from "./metamask-auth.module.css";
 3 | 
 4 | function isMobileDevice() {
 5 |   return 'ontouchstart' in window || 'onmsgesturechange' in window;
 6 | }
 7 | 
 8 | async function connect(onConnected) {
 9 |   if (!window.ethereum) {
10 |     alert("Get MetaMask!");
11 |     return;
12 |   }
13 | 
14 |   const accounts = await window.ethereum.request({
15 |     method: "eth_requestAccounts",
16 |   });
17 | 
18 |   onConnected(accounts[0]);
19 | }
20 | 
21 | async function checkIfWalletIsConnected(onConnected) {
22 |   if (window.ethereum) {
23 |     const accounts = await window.ethereum.request({
24 |       method: "eth_accounts",
25 |     });
26 | 
27 |     if (accounts.length > 0) {
28 |       const account = accounts[0];
29 |       onConnected(account);
30 |       return;
31 |     }
32 | 
33 |     if (isMobileDevice()) {
34 |       await connect(onConnected);
35 |     }
36 |   }
37 | }
38 | 
39 | 
40 | export default function MetaMaskAuth({ onAddressChanged }) {
41 |   const [userAddress, setUserAddress] = useState("");
42 | 
43 |   useEffect(() => {
44 |     checkIfWalletIsConnected(setUserAddress);
45 |   }, []);
46 | 
47 |   useEffect(() => {
48 |     onAddressChanged(userAddress);
49 |   }, [userAddress]);
50 | 
51 |   return userAddress ? (
52 |     <div>
53 |       Connected with <Address userAddress={userAddress} />
54 |     </div>
55 |   ) : (
56 |      <Connect setUserAddress={setUserAddress}/>
57 |   );
58 | }
59 | 
60 | 
61 | function Connect({ setUserAddress }) {
62 |   if (isMobileDevice()) {
63 |     const dappUrl = "metamask-auth.ilamanov.repl.co"; // TODO enter your dapp URL. For example: https://uniswap.exchange. (don't enter the "https://")
64 |     const metamaskAppDeepLink = "https://metamask.app.link/dapp/" + dappUrl;
65 |     return (
66 |       <a href={metamaskAppDeepLink}>
67 |          <button className={styles.button}>
68 |            Connect to MetaMask
69 |          </button>
70 |       </a>
71 |     );
72 |   }
73 | 
74 |   
75 |   return (
76 |     <button className={styles.button} onClick={() => connect(setUserAddress)}>
77 |       Connect to MetaMask
78 |     </button>
79 |   );
80 | }
81 | 
82 | 
83 | function Address({ userAddress }) {
84 |   return (
85 |     <span className={styles.address}>{userAddress.substring(0, 5)}…{userAddress.substring(userAddress.length - 4)}</span>
86 |   );
87 | }
88 | 


--------------------------------------------------------------------------------
/metamask-auth.module.css:
--------------------------------------------------------------------------------
 1 | .button {
 2 |   color: white;
 3 |   background: -webkit-linear-gradient(left, #e5771b, #753d16);
 4 |   background-size: 200% 200%;
 5 |   border: 1px solid #dbdbdb;
 6 |   border-radius: 4px;
 7 |   border-width: 1px;
 8 |   padding: 13px;
 9 |   cursor: pointer;
10 |   font-weight: 600;
11 |   font-size: 1.2em;
12 | }
13 | .button:hover {
14 |   background: -webkit-linear-gradient(left, #e5771b, #e5771b);
15 | }
16 | 
17 | .address {
18 |   background-color: #e5771b;
19 |   color: black;
20 |   padding: 5px;
21 |   border-radius: 5px;
22 |   border: none;
23 | }
24 | 


--------------------------------------------------------------------------------