No login via MetaMask using WalletConnect on mobile, Android

Technical Issue Reporting
#1

Hi, I am trying to login via WC, then choose MetaMask, but it not show confirm window in MetaMask.
Checked rarible.com, it is working ok.
Tried logout/login.
I am using react-moralis

#2

Hey @HappyLoL

Change your code on

async function auth() {
    try {
      await authenticate({
        // provider: "walletconnect",
        onError: (error) => console.log(error.message),
      });
    } catch (e) {
      alert(e.message, e);
    }
  }

You will see the error in the console. Send it to me please

#3

If without walletconnect, error is ‘Non ethereum enabled browser’
I am debugging mobile

Via WC, MetaMask app not show confrim window, but for example Rarible, it shows

#5

@HappyLoL

Please share your authenticate code. Does it work correctly when you use PC browser?

#6

Yes, from PC MetaMask working ok, and WC show QR-code

const Login = () => {
  const { authenticate, isAuthenticated, user } = useMoralis();
  const history = useHistory();

  if (isAuthenticated) {
    alert("s");
    return <Redirect to="/" />;
  }
  async function loginHandler(provider) {
    try {
      authenticate({
        provider,
        onSuccess: () => {
          alert("success");
          history.push("/");
        },
        onError(error) {
          console.log(error);
          alert(error, JSON.stringify(error)); // TODO: show on UI
        },
      });
    } catch (error) {
      alert(error.message, error);
    }
  }
  return (
    <div className={styles.loginWrapper}>
      <div className={styles.mainTitle}>Tracker {JSON.stringify(user)}</div>
      <div className={styles.mainContent}>
        <div className={styles.textWrapper}>
          <span className={styles.hugeTitle}>Gallery</span>
          <span className={styles.hugeTitle}>of NFT works</span>
          <span className={styles.smallTitle}>Find tokens to your liking</span>
        </div>
        <div className={styles.buttonWrapper} onClick={() => loginHandler()}>
          <div>
            <div className={styles.buttonLogo} />
            <span className={styles.buttonLabelBold}>if desktop only</span>
            <span className={styles.buttonLabel}>
              {/* Choose your preferred wallet */}
            </span>
          </div>
        </div>
        <div className={styles.footer}>
          <span>
            We do not own your private keys and cannot access your funds without
            your confirmation.
          </span>
        </div>
        <div
          className={styles.buttonWrapper}
          onClick={() => loginHandler("walletconnect")}
        >
          <div>
            <div className={styles.buttonLogo} />
            <span className={styles.buttonLabelBold}>Wallet connect</span>
            <span className={styles.buttonLabel}>
              Choose your preferred wallet
            </span>
          </div>
        </div>
        <div className={styles.footer}>
          <span>
            We do not own your private keys and cannot access your funds without
            your confirmation.
          </span>
        </div>
      </div>
    </div>
  );
};
#7

Link - https://nft-tracker.netlify.app

Please check video https://www.dropbox.com/s/0btl8wllkgypw9p/metamask.mp4?dl=0

#9

Please send your walletconnect configuration :man_mechanic:

#10

Ok, I think I found the problem

#11

Hey @HappyLoL

I just tested walletconnect from the android mobile. In my frontend and it worked correctly.
Does it work correctly on your localhost?

Tried on your website and had the same problem

#12

Hi, no, it is not working correct both localhost and hosting.
After logout, and login again MetaMask don’t show confirm window.
What this problem you think?

Repo - https://github.com/happylolonly/nft-tracker/blob/main/src/pages/Login/Login.js

#13

Hey @HappyLoL

I’ve tried to fork your repo, but it didn’t work correctly. But I’ve checked your package.json. Please update Moralis and moralis-react to the latest versions

1 Like