Ethereum Boilerplate: Metamask Authentication not working on Mobile, Wallet connect not working either

@Yomoo

I saw some threads here about this issue, everything works perfectly on desktop with metamask installed as an extension on chrome. Everything breaks when not using the extension, or on mobile,

This is what I am getting.

Screenshot 2021-12-10 at 03.37.36

Please help out, nothing seems to work

This is the error I get when accessing the website through local host on an incognito window (without metamask).

Access to XMLHttpRequest at 'https://speedy-nodes-nyc.moralis.io/WalletConnect/bsc/mainnet' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

In the code I am using as a provider wallet connect. This is an excerpt on the code in the Account.jsx component of the boilerplate template:

 if (!isAuthenticated) {
    return (
      <div style={styles.account} onClick={() => authenticate({ provider: 'walletconnect', chainId:56, signingMessage: "Hello World!" })}>
        <p style={styles.text}>Authenticate</p>
      </div>
    );
  }

Also it give me a rates exceeded problem, which is not present when I use the default metamask provider alone

@cryptokid could you please take a look at this issue?

1 Like

that rate limit exceeded error may be because it calls too many times per second getTokenPrice function

the other error with speedy nodes, that one is used by wallet connect, can you try http://127.0.0.1:3000/ instead of localhost?

@cryptokid same issue on http://127.0.0.1:3000/

I even deployed the website on heroku correctly, it only works on a chrome browser with metamask installed. it does not work on mobile, nor on chrome without metamask

@cryptokid I noticed the server asked to press a button to prevent it from going to sleep. I pressed it, now. the rate limit issue is gone but i still have the CORS issue

Access to XMLHttpRequest at 'https://speedy-nodes-nyc.moralis.io/WalletConnect/bsc/mainnet' from origin 'http://127.0.0.1:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
index.ts:74 POST https://speedy-nodes-nyc.moralis.io/WalletConnect/bsc/mainnet net::ERR_FAILED

It is an issue with the boilerplate code, I simply changed the authentication to have wallet connect as a provider

I don’t know yet why you get those cors errors there, I know that those urls will be accessed only when trying to authenticate with wallet connect and now when using metamask

are you connected to some vpn, or can you try from a different IP?

you could get CORS errors in case of timeout, or when those requests are blocked somehow

@cryptokid

I tested it out on a brand new server as well as changing IP (hotspot) nothing seems to work :confused: No i dont use any VPNs. I just downloaded the ethereum boilerplate from the github repo and changed the provider to wallet connect.

E142A61D-DF96-44F6-BFD4-E7E4BAEE8B61_4_5005_c

This is what I get now

and if you use it with metamask it works well?

If I do not put in a provider (so it defaults to metamask) and I use the a chrome browser with metamask installed it works, but does not work in a browser without metamask, which would be the case on a mobile phone or in incognito mode

ok, you could test it with metamask now, it should work with wallet connect, but I don’t know exactly why you get that error

@cryptokid

The issue is that I need to push a DApp to production, and most users do not use desktop but rather their phones. So it needs to work well on mobile. Do you have an example of the use of wallet connect within the ethereum boilerplate that works?

@LocoTheDev may know more than me about that ethereum boilerplate

1 Like

@LocoTheDev Hi! do you have any suggestions on why the boilerplate ethereum template’s wallet connect does not work on mobile correctly nor on an incognito chrome window

Wallet connect should work properly on eth boilerplate. I think it doesn’t work on incognito mode because of the session that needs to be stored locally

@LocoTheDev

What about on mobile?

@LocoTheDev @cryptokid @Yomoo I literally tried everything, used another computer, created another Moralis account with a new server, it still does not connect… I am using Trust Wallet from my phone and connecting through the Wallet Connect QR code scan. I dont know how to solve the issue other than not use Moralis and implement a different solution. Could you please look into the issue?

The issue is that the user is logged in, but none of the components update