{"id":9195,"date":"2025-07-26T13:48:44","date_gmt":"2025-07-26T08:18:44","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=9195"},"modified":"2025-07-26T13:48:50","modified_gmt":"2025-07-26T08:18:50","slug":"connect-metamask-to-react-using-ethersjs","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/connect-metamask-to-react-using-ethersjs\/","title":{"rendered":"Using Ethers v6 library connect Metamask\u00a0 to React Application"},"content":{"rendered":"\n

Metamask is a well-known browser extension that allows users to interact with the Ethereum blockchain effortlessly. In this step-by-step guide, we’ll explore how to connect Metamask to\u00a0 React website using the ethers.js library<\/p>\n\n\n\n

By the end of this tutorial, you’ll be able to
\u2705 verify whether Metamask is installed
\u2705 connect to users’ wallets and fetch the user details\u00a0<\/p>\n\n\n\n

 Step 1: Install the Ethers Library
  The Ethers.js library must be installed in the React project. Either yarn or npm can be used:<\/p>\n\n\n\n

#Using npm
npm install ethers

#Using yarn
yarn add ethers<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n



Step 2: Checking Metamask Installation <\/p>\n\n\n\n

The first step the metamask extension is installed or not in the chrome brower or any other brower In case it’s not installed, we’ll prompt the user to install Metamask for a smooth experience.
<\/p>\n\n\n\n

const<\/strong> checkMetamaskInstallation = () => {
    if<\/strong> (window.ethereum == undefined) {
        alert(“Metamask wallet is not installed”);
        return<\/strong>;
    }
};<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

\u00a0The window.ethereum object is available, which is injected by MetaMask.<\/p>\n\n\n\n

Step 3 :\u00a0 Initiating Wallet Connection and fetch the user details\u00a0<\/p>\n\n\n\n

Once the Metamask is installed, the next step is to establish a connection between the user’s wallet and our metamask . With the connection established, we’ll have the user’s account address available for further interactions.<\/p>\n\n\n\n

const<\/strong> [account, setAccount] = useState<string | null>(null);
const<\/strong> [balance, setBalance] = useState<string | null>(null);
const<\/strong> connectToMetaMask = async<\/strong> () => {
  setIsLoading(true);
  try<\/strong> {
    if<\/strong> (window.ethereum?.isMetaMask) {
      const<\/strong> provider = new<\/strong> ethers.BrowserProvider(window.ethereum);
      const<\/strong> accounts = await<\/strong> provider.send(“eth_requestAccounts”, []);
      const<\/strong> account = accounts[0];
      setAccount(account);

      const<\/strong> balance = await<\/strong> provider.getBalance(account);
      const<\/strong> ethBalance = ethers.formatEther(balance);
      setBalance(ethBalance);
      setErrorMessage(“”);
    } else<\/strong> {
      setErrorMessage(“Please install MetaMask extension!”);
      setSnackbarOpen(true);
    }
  } catch<\/strong> (error: any) {
    setErrorMessage(`Error connecting to MetaMask: ${error.message}`);
    setSnackbarOpen(true);
  } finally<\/strong> {
    setIsLoading(false);
  }
};<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

How it operates:<\/p>\n\n\n\n

    \n
  1. We check window.ethereum?.isMetaMask to confirm MetaMask’s availability.<\/li>\n\n\n\n
  2. ethers.BrowserProvider(window.ethereum) is used to create a provider.<\/li>\n\n\n\n
  3. eth_requestAccounts is used to request account access.<\/li>\n\n\n\n
  4. Ethers are used to retrieve the ETH balance and account address.<\/li>\n\n\n\n
  5. ethers.formatEther() is used to convert the balance from Wei to ETH.<\/li>\n<\/ol>\n\n\n\n

    UI Implementation Example<\/h3>\n\n\n\n

    To connect MetaMask, we can add a straightforward button to the React component:<\/p>\n\n\n\n

    <button onClick={connectToMetaMask}>Connect Wallet<\/button>
    {account && <p>Account Connected:  {account}<\/p>}
    {balance && <p>Balance: {balance} ETH<\/p>}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    <\/p>\n","protected":false},"excerpt":{"rendered":"

    Metamask is a well-known browser extension that allows users to interact with the Ethereum blockchain effortlessly. In this step-by-step guide, we’ll explore how to connect Metamask to\u00a0 React website using the ethers.js library By the end of this tutorial, you’ll be able to\u2705 verify whether Metamask is installed\u2705 connect to… Continue Reading Using Ethers v6 library connect Metamask\u00a0 to React Application<\/span><\/i><\/a><\/p>\n","protected":false},"author":507,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-9195","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"hentry","6":"category-uncategorized","7":"h-entry","9":"h-as-article"},"yoast_head":"\nPheonix Solutions - We Empower Your Business Growth<\/title>\n<meta name=\"description\" content=\"Learn how to seamlessly connect MetaMask to your React application using ethers.js. This step-by-step guide covers MetaMask installation checks, wallet connection, and fetching user account details and balances \u2014 perfect for Web3 beginners and developers.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/pheonixsolutions.com\/blog\/connect-metamask-to-react-using-ethersjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pheonix Solutions - We Empower Your Business Growth\" \/>\n<meta property=\"og:description\" content=\"Learn how to seamlessly connect MetaMask to your React application using ethers.js. This step-by-step guide covers MetaMask installation checks, wallet connection, and fetching user account details and balances \u2014 perfect for Web3 beginners and developers.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pheonixsolutions.com\/blog\/connect-metamask-to-react-using-ethersjs\/\" \/>\n<meta property=\"og:site_name\" content=\"PHEONIXSOLUTIONS\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/PheonixSolutions-209942982759387\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-26T08:18:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-26T08:18:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2016\/09\/PX2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"3837\" \/>\n\t<meta property=\"og:image:height\" content=\"2540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"bharat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@pheonixsolution\" \/>\n<meta name=\"twitter:site\" content=\"@pheonixsolution\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"bharat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/connect-metamask-to-react-using-ethersjs\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/connect-metamask-to-react-using-ethersjs\\\/\"},\"author\":{\"name\":\"bharat\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/person\\\/5e146ea8682be704a2553a73c97c786b\"},\"headline\":\"Using Ethers v6 library connect Metamask\u00a0 to React Application\",\"datePublished\":\"2025-07-26T08:18:44+00:00\",\"dateModified\":\"2025-07-26T08:18:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/connect-metamask-to-react-using-ethersjs\\\/\"},\"wordCount\":455,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#organization\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/connect-metamask-to-react-using-ethersjs\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/connect-metamask-to-react-using-ethersjs\\\/\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/connect-metamask-to-react-using-ethersjs\\\/\",\"name\":\"Pheonix Solutions - We Empower Your Business Growth\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#website\"},\"datePublished\":\"2025-07-26T08:18:44+00:00\",\"dateModified\":\"2025-07-26T08:18:50+00:00\",\"description\":\"Learn how to seamlessly connect MetaMask to your React application using ethers.js. This step-by-step guide covers MetaMask installation checks, wallet connection, and fetching user account details and balances \u2014 perfect for Web3 beginners and developers.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/connect-metamask-to-react-using-ethersjs\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/connect-metamask-to-react-using-ethersjs\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/connect-metamask-to-react-using-ethersjs\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using Ethers v6 library connect Metamask\u00a0 to React Application\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/\",\"name\":\"Pheonix Solutions\",\"description\":\"We Empower Your Business Growth\",\"publisher\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#organization\",\"name\":\"PheonixSolutions\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/logo.png\",\"contentUrl\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/logo.png\",\"width\":454,\"height\":300,\"caption\":\"PheonixSolutions\"},\"image\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/PheonixSolutions-209942982759387\\\/\",\"https:\\\/\\\/x.com\\\/pheonixsolution\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/person\\\/5e146ea8682be704a2553a73c97c786b\",\"name\":\"bharat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d82d0f7350e396f4195f9cbac82c8173f0a2abae54e34fe15122bf92b23dca79?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d82d0f7350e396f4195f9cbac82c8173f0a2abae54e34fe15122bf92b23dca79?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d82d0f7350e396f4195f9cbac82c8173f0a2abae54e34fe15122bf92b23dca79?s=96&r=g\",\"caption\":\"bharat\"},\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/author\\\/bharat\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Pheonix Solutions - We Empower Your Business Growth","description":"Learn how to seamlessly connect MetaMask to your React application using ethers.js. This step-by-step guide covers MetaMask installation checks, wallet connection, and fetching user account details and balances \u2014 perfect for Web3 beginners and developers.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/pheonixsolutions.com\/blog\/connect-metamask-to-react-using-ethersjs\/","og_locale":"en_US","og_type":"article","og_title":"Pheonix Solutions - We Empower Your Business Growth","og_description":"Learn how to seamlessly connect MetaMask to your React application using ethers.js. This step-by-step guide covers MetaMask installation checks, wallet connection, and fetching user account details and balances \u2014 perfect for Web3 beginners and developers.","og_url":"https:\/\/pheonixsolutions.com\/blog\/connect-metamask-to-react-using-ethersjs\/","og_site_name":"PHEONIXSOLUTIONS","article_publisher":"https:\/\/www.facebook.com\/PheonixSolutions-209942982759387\/","article_published_time":"2025-07-26T08:18:44+00:00","article_modified_time":"2025-07-26T08:18:50+00:00","og_image":[{"width":3837,"height":2540,"url":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2016\/09\/PX2.png","type":"image\/png"}],"author":"bharat","twitter_card":"summary_large_image","twitter_creator":"@pheonixsolution","twitter_site":"@pheonixsolution","twitter_misc":{"Written by":"bharat","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/pheonixsolutions.com\/blog\/connect-metamask-to-react-using-ethersjs\/#article","isPartOf":{"@id":"https:\/\/pheonixsolutions.com\/blog\/connect-metamask-to-react-using-ethersjs\/"},"author":{"name":"bharat","@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/person\/5e146ea8682be704a2553a73c97c786b"},"headline":"Using Ethers v6 library connect Metamask\u00a0 to React Application","datePublished":"2025-07-26T08:18:44+00:00","dateModified":"2025-07-26T08:18:50+00:00","mainEntityOfPage":{"@id":"https:\/\/pheonixsolutions.com\/blog\/connect-metamask-to-react-using-ethersjs\/"},"wordCount":455,"commentCount":0,"publisher":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#organization"},"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/pheonixsolutions.com\/blog\/connect-metamask-to-react-using-ethersjs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/pheonixsolutions.com\/blog\/connect-metamask-to-react-using-ethersjs\/","url":"https:\/\/pheonixsolutions.com\/blog\/connect-metamask-to-react-using-ethersjs\/","name":"Pheonix Solutions - We Empower Your Business Growth","isPartOf":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#website"},"datePublished":"2025-07-26T08:18:44+00:00","dateModified":"2025-07-26T08:18:50+00:00","description":"Learn how to seamlessly connect MetaMask to your React application using ethers.js. This step-by-step guide covers MetaMask installation checks, wallet connection, and fetching user account details and balances \u2014 perfect for Web3 beginners and developers.","breadcrumb":{"@id":"https:\/\/pheonixsolutions.com\/blog\/connect-metamask-to-react-using-ethersjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pheonixsolutions.com\/blog\/connect-metamask-to-react-using-ethersjs\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/pheonixsolutions.com\/blog\/connect-metamask-to-react-using-ethersjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/pheonixsolutions.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Using Ethers v6 library connect Metamask\u00a0 to React Application"}]},{"@type":"WebSite","@id":"https:\/\/pheonixsolutions.com\/blog\/#website","url":"https:\/\/pheonixsolutions.com\/blog\/","name":"Pheonix Solutions","description":"We Empower Your Business Growth","publisher":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pheonixsolutions.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/pheonixsolutions.com\/blog\/#organization","name":"PheonixSolutions","url":"https:\/\/pheonixsolutions.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2016\/12\/logo.png","contentUrl":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2016\/12\/logo.png","width":454,"height":300,"caption":"PheonixSolutions"},"image":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/PheonixSolutions-209942982759387\/","https:\/\/x.com\/pheonixsolution"]},{"@type":"Person","@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/person\/5e146ea8682be704a2553a73c97c786b","name":"bharat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/d82d0f7350e396f4195f9cbac82c8173f0a2abae54e34fe15122bf92b23dca79?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/d82d0f7350e396f4195f9cbac82c8173f0a2abae54e34fe15122bf92b23dca79?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d82d0f7350e396f4195f9cbac82c8173f0a2abae54e34fe15122bf92b23dca79?s=96&r=g","caption":"bharat"},"url":"https:\/\/pheonixsolutions.com\/blog\/author\/bharat\/"}]}},"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p7F4uM-2oj","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/9195","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/507"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=9195"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/9195\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=9195"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=9195"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=9195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}