Moralis Wallet Connect auth in mobile

Moralis General
#1

I am using react-moralis and trying to authenticate from mobile. Everything works fine but auth is working a bit strange. When pressing authenticate I fire a function authenticate from react-moralis.

await authenticate({
  provider: "walletConnect",
  chainId: globalChainId,
  onSuccess: () => {
    localStorage.setItem("provider", "walletconnect")
  },
  onError: () => {
    localStorage.clear()
  }
})

The browser asks to choose a wallet and then opens it. Wallet asks to connect it with the website and on click redirects back to the browser.

And it should ask another time to choose the wallet but it does not, in the console, I get navigation blocked.

photo_2022-09-21_18-57-10

dependencies

{
  "@walletconnect/web3-provider": "^1.8.0",
  "moralis": "^2.5.5",
  "moralis-v1": "^1.11.0",
  "react-moralis": "^1.4.2",
}
#2

And it should ask another time to choose the wallet but it does not, in the console, I get navigation blocked.

The wallet has already been chosen when you connect it to the site. When you say authenticate from mobile, are you:

running the site from a desktop browser and connecting from mobile (scanning QR code)

or

running the site from your mobile browser and then connecting to your mobile wallet (where you choose the wallet)? Because you seem to be using a desktop browser.

Also you do not need [email protected] package unless you’re specifically using 2.0 features - react-moralis uses moralis-v1.

#3

I am running the site from a mobile browser.
I am clicking the wallet connect button and it shows connect button.

photo_2022-09-23_12-54-14
photo_2022-09-23_12-54-14576×1280 33.2 KB

After clicking connect I have this:

photo_2022-09-23_12-55-47
photo_2022-09-23_12-55-47576×1280 37.5 KB

I connected my phone to my laptop and used chrome://inspect/#devices to see the logs.

Actually, I do not need moralis package.
Yes, you are right react-moralis uses moralis-v1 so I thought maybe the problem is in there.

#4

That seems to be the default behaviour when you have to return to the wallet to sign the message for WalletConnect. You can check out this demo page source for a different way of handling it.

#5

Yes, it is the default behaviour.
But I am talking about that react-moralis should automatically redirect me to sign the message, but I get error navigation blocked.

Demo app seems not working.
Is there a github repo of this app?

#6

Which part of the demo is not working? It is just regular HTML/JS, the source code is available in the page source to get an idea.

#7

I could not connect my wallet to it.
Used mobile browser.

#8

I’m not sure - it is working on my end with the MetaMask app and Edge mobile browser. Just look at the use of enableWeb3() (connect site) and authenticate() (sign message) to try and change the way it works.

But I am talking about that react-moralis should automatically redirect me to sign the message

It doesn’t by default - I’m not sure if that error is related.

#9

image_2022-09-24_10-49-46
image_2022-09-24_10-49-461920×1200 67.2 KB

#10

same error getting navigation blocked

#11

Try using a VPN - since you also have the same problem with your own site, there is maybe some issue with your connection. Make sure you disable any extensions for the browser.

#12

Didn’t you think that I tried everything already?

#13

I finally found the right discussion! Having the exact same problem, after connecting dapp to wallet I am redirected to mobile browser without sign transaction.

@alex I tested your demo on Firefox, I get redirected to website after connecting wallet (which is wrong) BUT after 5 seconds browser asks again to open wallet to finish signing transaction which works fine.

On Chrome same thing happens, but once redirected to website after connecting dapp the popup which appears on Firefox doesn’t show up…

Even if Firefox gives option to open again wallet after 5 sec, delay and signing process makes it impossible to use in production… I guess the problem comes from walletconnect which doesn’t handle properly redirections?

#14

Can you make a new topic please with more details.

#15