Metamask doesn't open when using auth core on mobile browser

[whpoole]

Hi everyone,

Currently having an issue with using @web3auth/core and Metamask. It works fine on desktop browsers, but it fails to redirect to the Metamask app when attempting to authenticate on a mobile browser (eg IOS Safari).

I've got a pretty basic setup with a metamask adapter configured:

const metamaskAdapter = new MetamaskAdapter({})

web3auth.configureAdapter(metamaskAdapter)

and then connecting with auth.connectTo('metamask')

As I say, this works great on desktop browsers. On mobile, i'd expect metamask to open, ask to connect to the site, and then redirect to the site. However, nothing happens when running 'connectTo'. Social logins work fine, just not Metamask.

Looking at console logs from the mobile browser, it looks like it's not detecting any injected window.ethereum and, as a result, the adapter is not becoming 'ready' to run. Is there a way to get the expected redirect to metamask -> connect -> return to site functionality working?

Thanks!

[BboyStatix]

Hey there, that error occurs due to there not being any metamask extension installed on the browser. And if I'm not mistaken there is currently no metamask extension for Safari https://metamask.io/download/

EDIT: Answer in comment below

[whpoole]

Hi there,

You’re right that there isn’t a safari extension, however for most integrations when using safari on IOS you get redirected to the native MetaMask app to connect and sign transactions. Seems this works fine using the standard web3auth modal, judging by the example app, Just wondering if this is currently possible with web3auth core.

Thanks!

[BboyStatix]

@whpoole I've figured out the problem. Basically it works for the example app because it is utilising metamask via WalletConnect.
As you can see in the pic below, the metamask icon is inside the WalletConnect section

The metamask adapter on the other hand only works with the metamask extension installed. So on a browser without the metamask extension, you'd get the aforementioned error and the metamask icon wouldn't display (except for the one displayed via WalletConnect). You can try this out yourself by opening the demo app in an incognito window.

That's why in the demo app code, web3auth is being inited like so

web3auth-web/demo/vue-app/src/chains/ethereum.vue

Lines 159 to 166 in da7b8f8

	await this.web3auth.initModal({
	modalConfig: {
	[WALLET_ADAPTERS.METAMASK]: {
	showOnDesktop: true,
	showOnModal: true,
	showOnMobile: false,
	label: "Metamask",
	},

As you can see showOnMobile is set to false because it doesn't work on mobile browsers. You don't actually have to pass in these options yourself actually because the default values for metamask and phantom are already set to false for showOnMobile. This was just to give you an idea.