metamask-mobile Android browser missing `window.ethereum`

Describe the bug

The window.ethereum object appears to always be undefined, and ethereum#initialized is never dispatched.

To Reproduce Steps to reproduce the behavior

Run a local HTTP server: python -m SimpleHTTPServer
Run an HTTPS tunnel: npx localtunnel --port 8000
Create the following file called index.html (the contents are based off of MetaMask Docs -> Best Practices -> Provider Availability).
Open the HTTPS URL in the MetaMask in-app embedded browser on Android.
You will see an alert say "Please install MetaMask!"

<html>
  <body>
    <h1>Hi</h1>
  </body>

  <script>
    if (window.ethereum) {
      handleEthereum();
    } else {
      window.addEventListener('ethereum#initialized', handleEthereum, {
        once: true,
      });

      // If the event is not dispatched by the end of the timeout,
      // the user probably doesn't have MetaMask installed.
      setTimeout(handleEthereum, 3000); // 3 seconds
    }

    function handleEthereum() {
      const { ethereum } = window;
      if (ethereum && ethereum.isMetaMask) {
        alert('Ethereum successfully detected!');
        // Access the decentralized web!
      } else {
        alert('Please install MetaMask!');
      }
    }
  </script>
</html>

Expected behavior

Expected to see "Ethereum successfully detected!". Found while debugging the same issue in a real-world application.

Smartphone (please complete the following information):

Device: Samsung Galaxy s10e
OS: Android 11 - One UI 3.1
App Version: MetaMask v3.3.0 (777) from Google Play Store

I can confirm that the above steps alert "Ethereum successfully detected!" on:

Brave Version 1.30.86 Chromium: 94.0.4606.61 (Official Build) (x86_64) with MetaMask extension 10.1.1
iPhone 11 - iOS 14.7.1 - MetaMask app v2.5.0 (750) from Apple App Store

Screenshots Android iOS Brave

to be added after bug submission by internal support / PM Severity

How critical is the impact of this bug on a user?
Add stats if available on % of customers impacted
Is this visible to all users?
Is this tech debt?

Oct 04 '21 23:10 andrewrothman

Related: https://github.com/MetaMask/metamask-mobile/issues/1975 https://github.com/MetaMask/metamask-mobile/issues/1956 https://github.com/MetaMask/metamask-mobile/issues/1931 https://github.com/MetaMask/metamask-mobile/issues/1140 https://community.metamask.io/t/window-ethereum-is-not-being-injected-on-android-metamask-mobile/3932

Oct 04 '21 23:10 andrewrothman

One thing to mention, I found this demo app repo with this live deployment link which does work on my Android phone. I'm not sure why this is.

The code for the login button appears to access the same window.ethereum object:

const handleClick = async () => {
		// Check if MetaMask is installed
		if (!(window as any).ethereum) {
			window.alert('Please install MetaMask first.');
			return;
		}

However it still does't work for the code provided in the issue description.

Oct 04 '21 23:10 andrewrothman

Having the same issue @andrewrothman !

Oct 07 '21 03:10 bcamacho

I am also experiencing this issue.

Using the recommended method described here.

Oct 07 '21 07:10 soulofmischief

Issue experienced on emulated v3.4.1 (785)

Oct 07 '21 15:10 WycliffeDan

I've been playing with this for awhile, and though I have no solution, I have confirmed some behaviour that may be helpful to someone:

1. The `ethereum` object is never attached to `window` on an HTTP redirect.

I discovered this problem while implementing session-managed authentication on my latest app. A redirect after a successful POST request results in window.ethereum being undefined. I rejigged the same authentication step to use a GET with params sent via querystring. Rather than redirecting, it returns the rendered page (200 status) with window.ethereum ready to rock and/or roll. (Interestingly, if you return a 201 from the same call window.ethereum will again be undefined).

2. Cookies are not being sent on regular `GET` requests, but they do get sent on redirects.

This seems hard to believe. I discovered it by accident. Having successfully authenticated (with brute-force metamask-mobile hacks in place), I can now successfully navigate my app as an authenticated user. This is a total fluke. Since no cookie is being sent with a GET request, my app sends a redirect to the homepage because it believes the user needs to log in. Upon receiving the redirect, metamask-mobile will make the subsequent request with cookie attached. My app sees the user has logged in and redirects to the authenticated views... window.ethereum being undefined, of course.

Though I'm not entirely new to react-native, I'm at a loss as to where the ethereum object is supposed to be injected. I've poked around a bit inside react-native-webview and android.webkit.WebView, but am not familiar enough with the platform or its testing tools to report anything useful yet.

There are some other weird things happening, but I don't want to confuse the issue with too many details. Hopefully this is helpful to someone more familiar with the project. I'll keep messing around, as time allows.

Oct 28 '21 15:10 WycliffeDan

Hey !

Anyone still facing the issue ? How do you solved?

Help! !

Jan 09 '22 22:01 cquex

Getting Same Issue with my react website. But in my case it only fails when using react router Dom. When I am on homepage I get window.ethereum as true but when I am on routed urls (eg.domain.com/id/2) then window.ethereum becomes false. Works on desktop.

Feb 11 '22 06:02 HarshalKudale

Getting Same Issue with my react website. But in my case it only fails when using react router Dom. When I am on homepage I get window.ethereum as true but when I am on routed urls (eg.domain.com/id/2) then window.ethereum becomes false. Works on desktop.

Hi ! you need to open your website in the explorer of metamask, and metamask mobile needs to be an https sites, i published my website and configure https on my host. That solves my issue, to connect metamask on mobile.

Feb 11 '22 23:02 cquex

This still seems to be an issue. Can this please be looked at?

Mar 22 '22 10:03 jellesiderius

I am also experiencing the same issue with an HTTPS dApp.

Mar 29 '22 11:03 R-Santev

You need to make sure that your html page has a <head> tag in it. The mobile app browser injects the script inside that tag. based on the html shown by the OP there is no head tag in the document.

Apr 28 '22 21:04 rphuber

Hello,

For issues related to cookies on Android please follow this issue https://github.com/MetaMask/metamask-mobile/issues/4245, it's already in place PR#4407 to solve this problem.

May 26 '22 11:05 Fatxx

This: "You need to make sure that your html page has a <head> tag in it." Was one of the reasons I wasn't able to connect on a test page. Is this in the official documentation?

Jun 24 '22 08:06 dzimbeck

This: "You need to make sure that your html page has a <head> tag in it." Was one of the reasons I wasn't able to connect on a test page. Is this in the official documentation?

totally agree, wasting my time @rphuber

Jul 01 '22 10:07 geraldchen890806

another case, if html loaded a and iframe has a head tag, MetaMask Android App will unload window.ethereum

Jul 04 '22 08:07 geraldchen890806

another case, if html loaded a and iframe has a head tag, MetaMask Android App will unload window.ethereum

@geraldchen890806 this is interesting. Any way to get around this behavior? I have multiple iframes but I can't afford metamask to unload the provider...

Jul 31 '22 20:07 danbrud

I wouldn't want to get up that topic, but is there anyone to found solution for that "android doesn't get window.etherium on sub-pages" problem.

I tried many solutions on the internet but Metamask never sees the provider in the browser. I checked another web3 website. It works on some websites. From what I understand there is a solution but what?

I don't have any iframe. I'm using nextjs. I am using "@metamask/detect-provider". On main page everythings good working. But if i try to open "www.myweb.com/blabla", only android metamask browser doesn't find to provider. Iphone okay, web okay, only android.

Oct 04 '22 15:10 tuncakyazi

Having path via react-router doesn't seem to pose a issue. Here is example of it: https://codesandbox.io/s/stoic-murdock-67r563

Navigating to both https://67r563.csb.app/ and https://67r563.csb.app/anyPage/anySubpage/ via the mobile browser yields the same result, the ethereum provider being detected.

Oct 27 '22 09:10 antonio-ivanovski

Still experiencing this in 2023. What's odd is I have 2 dapps. One works fine and they use basically the same code. This is really pretty unacceptable. And I have customers that cannot connect sometimes and there's no way to diagnose the problem for them. Really need to step up the game on mobile or some other wallet is just going to take the market share.

May 12 '23 07:05 flcoder

Did you remember to have a head tag on the site? Otherwise it won't detect window.ethereum

May 16 '23 22:05 dzimbeck

Facing similar issue, developing using Angular, on Android Mobile App if I try to access window.ethereum inside https://example.com/subroute it is never injected, https://example.com works fine

Jul 31 '23 00:07 AntonioRitucci

This issue has been automatically marked as stale because it has not had recent activity in the last 90 days. It will be closed in 7 days. Thank you for your contributions.

Oct 29 '23 00:10 github-actions[bot]

This issue was closed because there has been no follow activity in 7 days. If you feel this was closed in error please provide evidence on the current production app in a new issue or comment in the existing issue to a maintainer. Thank you for your contributions.

Nov 05 '23 01:11 github-actions[bot]

This problem still exists to this day, and it cannot be solved by integrating the SDK either.

Jan 10 '24 05:01 kylinso

some issue

Mar 01 '24 08:03 YanYuanFE

metamask-mobile metamask-mobile copied to clipboard

Android browser missing `window.ethereum`

1. The ethereum object is never attached to window on an HTTP redirect.

2. Cookies are not being sent on regular GET requests, but they do get sent on redirects.

metamask-mobile
metamask-mobile copied to clipboard

1. The `ethereum` object is never attached to `window` on an HTTP redirect.

2. Cookies are not being sent on regular `GET` requests, but they do get sent on redirects.