How to enable Metamask connection for mobile?

[Carebear]

i have the following code for login:

login = async () => {
    await Moralis.Web3.authenticate({
        signingMessage: "Welcome to BUSDPlanet",
    })
    .then(async function (user) {
        window.location.href = "dashboard.html";
    })
}

its works for pc login, how do i edit it for mobile login?

[cryptokid]

that should work on mobile too if you use the internal browser from metamask, if you are using another browser, then you may need to use walletconnect as a method of authentication

[Carebear]

Hi, i created a login function that directs to a page, “dashboard.html”, its functioning in mac browser but i edited the code for mobile, which has no response, below is the code, what should i chnage?

login = async () => {
    try {
        if (typeof web3 !== 'undefined') {
          const user = await Moralis.authenticate({
            signingMessage: "Welcome to BUSDPlanet",
            chainID: "97",
          })
            .then(function (user) {
            console.log("logged in user:", user);
            console.log(user.get("ethAddress"));
            window.location.href = "dashboard.html";
        })
        .catch(function (error) {
            console.log(error);
            });
          
        //   web3 = await Moralis.enable();
      } else {
        const user = await Moralis.authenticate({  
            signingMessage: "Welcome to BUSDPlanet",
            chainID: "97",
            provider: "walletconnect",
        })
        .then(function (user) {
            console.log("logged in user:", user);
            console.log(user.get("ethAddress"));
            window.location.href = "dashboard.html";
        })
        .catch(function (error) {
            console.log(error);
            });
        web3 = await Moralis.enable({  
            provider: "walletconnect" });
      }
          walletAddress = user.get('ethAddress');
        } catch (error) {
          console.log('authenticate failed', error);
        }
}

[johnversus]

I think you are trying to connect to walletconnect only if the metamask login caused an error.

Instead, you can try await Moralis.isMetaMaskInstalled();, which will check if there is a metamask extension, and based on this you can choose either metamask or walletconnect.

[joaoalvesmarrucho]

Walleconnect feature seems to be a bit of a nightmare. My app was working perfectly until I tried this. Just installing it via NPM is throwing a bunch of warnings:

Then when I run de dev server this happens

I had to uninstall it and revert back to the default metamask login – which works well on desktop but doesn’t work on mobile…

[alex]

For those webpack errors you can install an older 4 version e.g. react-scripts 4.0.3, or include those polyfills as instructed in your project’s webpack configuration file.

For the warnings you can ignore these for now for development.

[joaoalvesmarrucho]

Thanks @alex but I’m working with Vue.js CLI PWA mode which uses the latest webpack stable version by default and hides the webpack config file under the hood. This is a perfect example of the complications associated with packages that like the one from walletconnect. It’s not impossible to use them, but you need to know exactly what you are doing, know your scaffolding in detail, and come up with cumbersome work arounds.

[alex]

I see, if that’s the case, have a try at installing the missing polyfills.