Log in with wallet not working [solved]

Hi,
when I try to logging in with MetaMask and WalletConnect it is not working. It worked a few weeks ago, and I didn’t change the code since then.

Error for MetaMask:

Error for WalletConnect:

Code:

async function init() {
    try{
        window.web3 = await Moralis.Web3.enable();
        const user = await Moralis.User.current();
        if(user){
            const _userAddress = user.get('ethAddress');
            userEthAddress = _userAddress;
            console.log("User:");
            console.log(user); 
            console.log(_userAddress);
        }else{
            console.log(user);
        }
    }catch (err) {
        console.log("Error Occured: " + err);
    }
}


async function logInMetaMask() {
    try{
        await Moralis.Web3.authenticate();
        console.log("logged");
        init();
    }catch (err){
        console.log("Error occured: " + err);
    }
}


async function logInWalletConnect() {
    try{
        await Moralis.Web3.authenticate({ provider: "walletconnect" });
        init();
    }catch (err){
        console.log(err);
    }
}


async function logOut() {
    try{
        await Moralis.User.logOut();
        console.log("user logged out");
        init();
    }catch(err){
        console.log("Error occured: " + err);
    }
}

Regards,
Tijan

1 Like

Hi,
Using your javascript code and the following HTML code everything works fine for me for MetaMask login. I also added the following lines in order to initialise Moralis first.

Moralis.initialize("...");
Moralis.serverURL = "...";

HTML code:

<html>
<head>
    <script src="https://npmcdn.com/[email protected]/dist/moralis.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>
</head>
<body>
    <script type="text/javascript" src="./a.js"></script>
</body>
</html>
2 Likes

Thanks, for answer.
If I repeat what you did it works, but in my main file it doesn’t for some strange reason.

In my old files where I was learning moralis that have remained untouched it also doent work enymore.

I also tried coping your html code and my js and put it between script tags, it also didnt work like that:

<html>
<head>
    <script src="https://npmcdn.com/[email protected]/dist/moralis.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>
</head>
<body>
    <script>
        Moralis.initialize("...");
        Moralis.serverURL = "...";
    async function init1() {
        try{
            window.web3 = await Moralis.Web3.enable();
            const user = await Moralis.User.current();
            if(user){
                const _userAddress = user.get('ethAddress');
                userEthAddress = _userAddress;
                console.log("User:");
                console.log(user); 
                console.log(_userAddress);
            }else{
                console.log(user);
            }
        }catch (err) {
            console.log("Error Occured: " + err);
        }
    }
    async function logInMetaMask1() {
        try{
            await Moralis.Web3.authenticate();
            console.log("logged");
            init1();
        }catch (err){
            console.log("Error occured: " + err);
        }
    }
    async function logInWalletConnect1() {
        try{
            await Moralis.Web3.authenticate({ provider: "walletconnect" });
            init1();
        }catch (err){
            console.log(err);
        }
    }
    async function logOut1() {
        try{
            await Moralis.User.logOut();
            console.log("user logged out");
            init1();
        }catch(err){
            console.log("Error occured: " + err);
        }
    }
    </script>
</body>
</html>

This is a complete example that works, but I added my personal moralis server info, you should use your own moralis key and server:

        Moralis.initialize("TAXZpkfV4FbCnoY592sUJuCXak26hdgBxUz5oqqU");
        Moralis.serverURL = "https://mtpbh2zhvqjd.moralis.io:2053/server";

When I added:

        Moralis.initialize("...");
        Moralis.serverURL = "...";

I wanted to say that you should replace those “…” with your own moralis server info

Full example:

<html>
<head>
    <script src="https://npmcdn.com/[email protected]/dist/moralis.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>
</head>
<body>
    <script>
        Moralis.initialize("TAXZpkfV4FbCnoY592sUJuCXak26hdgBxUz5oqqU");
        Moralis.serverURL = "https://mtpbh2zhvqjd.moralis.io:2053/server";
    async function init1() {
        try{
            window.web3 = await Moralis.Web3.enable();
            const user = await Moralis.User.current();
            if(user){
                const _userAddress = user.get('ethAddress');
                userEthAddress = _userAddress;
                console.log("User:");
                console.log(user); 
                console.log(_userAddress);
            }else{
                console.log(user);
            }
        }catch (err) {
            console.log("Error Occured: " + err);
        }
    }
    async function logInMetaMask1() {
        try{
            await Moralis.Web3.authenticate();
            console.log("logged");
            init1();
        }catch (err){
            console.log("Error occured: " + err);
        }
    }
    async function logInWalletConnect1() {
        try{
            await Moralis.Web3.authenticate({ provider: "walletconnect" });
            init1();
        }catch (err){
            console.log(err);
        }
    }
    async function logOut1() {
        try{
            await Moralis.User.logOut();
            console.log("user logged out");
            init1();
        }catch(err){
            console.log("Error occured: " + err);
        }
    }
    </script>
</body>
</html>
2 Likes

Thanks for the amazing support @cryptokid! Love the effort and enthusiasm! :raised_hands:

1 Like

Thanks for your help, but it is still not working.

I copied your code and changed server url and app id, but I get the same error.

Code:

<html>
<head>
    <script src="https://npmcdn.com/[email protected]/dist/moralis.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>
</head>
<body>
    <script>
        Moralis.initialize("aPEdF3Q4Hik0yOfasRo62zMNMEiUTGVgvGFHMQ2B");
        Moralis.serverURL = "https://dalcjv2firox.moralisweb3.com:2053/server";
    async function init1() {
        try{
            window.web3 = await Moralis.Web3.enable();
            const user = await Moralis.User.current();
            if(user){
                const _userAddress = user.get('ethAddress');
                userEthAddress = _userAddress;
                console.log("User:");
                console.log(user); 
                console.log(_userAddress);
            }else{
                console.log(user);
            }
        }catch (err) {
            console.log("Error Occured: " + err);
        }
    }
    async function logInMetaMask1() {
        try{
            await Moralis.Web3.authenticate();
            console.log("logged");
            init1();
        }catch (err){
            console.log("Error occured: " + err);
        }
    }
    async function logInWalletConnect1() {
        try{
            await Moralis.Web3.authenticate({ provider: "walletconnect" });
            init1();
        }catch (err){
            console.log(err);
        }
    }
    async function logOut1() {
        try{
            await Moralis.User.logOut();
            console.log("user logged out");
            init1();
        }catch(err){
            console.log("Error occured: " + err);
        }
    }
    </script>
</body>
</html>

Error:

It seems strange to me, because it worked 2 weeks ago and I didnt changed the code.

I also copied Moralis gas stats code - it didnt work. I got same error.

Hi,
Now it looks like it is a problem related to your Moralis server, as dalcjv2firox.moralisweb3.com doesn’t resolve. What you see for your server name now in Moralis interface?

1 Like

Please use the latest version where walletconnect is supported.

Please use the below src code -
<script src="https://unpkg.com/moralis/dist/moralis.js"></script>

Hope this helps.

Thanks!

1 Like

And also call the function init1() first so that the Moralis instance is initiated before calling logInWalletConnect1().

1 Like

@malik, @cryptokid Thank you both for taking time to help :pray: :+1:

1 Like

Very strange, sometimes works, sometimes not. :thinking:

This code (copied form build simple dapp in 3min) doesn’t:

<html>
  <head>
    <!-- Moralis SDK code -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>
    <script src="https://unpkg.com/moralis/dist/moralis.js"></script>
  </head>
  <body>
    <h1>Moralis Gas Stats</h1>

    <button id="btn-login">Moralis Login</button>
    <button id="btn-logout">Logout</button>
    <button id="btn-get-stats">Refresh Stats</button>

    <script>
    Moralis.initialize("BlytYLfqkxK2jrwHa1XuD38it1osbc5rbHBrf9Ku");
    Moralis.serverURL = "https://as3nthbh4hnd.moralisweb3.com:2053/server";

      async function login() {
        let user = Moralis.User.current();
        if (!user) {
          user = await Moralis.Web3.authenticate();
        }
        console.log("logged in user:", user);
        getStats();
      }

      async function logOut() {
        await Moralis.User.logOut();
        console.log("logged out");
      }

      // bind button click handlers
      document.getElementById("btn-login").onclick = login;
      document.getElementById("btn-logout").onclick = logOut;
      document.getElementById("btn-get-stats").onclick = getStats;

      function getStats() {
        const user = Moralis.User.current();
        if (user) {
          getUserTransactions(user);
        }
      }

      async function getUserTransactions(user) {
        // create query
        const query = new Moralis.Query("EthTransactions");
        query.equalTo("from_address", user.get("ethAddress"));

        // run query
        const results = await query.find();
        console.log("user transactions:", results);
      }

      //get stats on page load
      getStats();
    </script>
  </body>
</html>

Error when trying to log in:

Was something changed, because in all my projects log in was working 2 weeks ago and now it is not.

This example works fine for me.
How do you test it, what web browser do you use?

For me too… I’ve tried login-auth for about 10 times :face_with_monocle:

I use brave. I open it with live server extension in VS

Maybe it caches an older version of moralis javascript library. Can you clear the caches and restart the web server?

or try this as a way to force download the javascript:

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js?a=2"></script>
    <script src="https://unpkg.com/moralis/dist/moralis.js?a=2"></script>

Full code:

<html>
  <head>
    <!-- Moralis SDK code -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js?a=2"></script>
    <script src="https://unpkg.com/moralis/dist/moralis.js?a=2"></script>
  </head>
  <body>
    <h1>Moralis Gas Stats</h1>

    <button id="btn-login">Moralis Login</button>
    <button id="btn-logout">Logout</button>
    <button id="btn-get-stats">Refresh Stats</button>

    <script>
    Moralis.initialize("BlytYLfqkxK2jrwHa1XuD38it1osbc5rbHBrf9Ku");
    Moralis.serverURL = "https://as3nthbh4hnd.moralisweb3.com:2053/server";

      async function login() {
        let user = Moralis.User.current();
        if (!user) {
          user = await Moralis.Web3.authenticate();
        }
        console.log("logged in user:", user);
        getStats();
      }

      async function logOut() {
        await Moralis.User.logOut();
        console.log("logged out");
      }

      // bind button click handlers
      document.getElementById("btn-login").onclick = login;
      document.getElementById("btn-logout").onclick = logOut;
      document.getElementById("btn-get-stats").onclick = getStats;

      function getStats() {
        const user = Moralis.User.current();
        if (user) {
          getUserTransactions(user);
        }
      }

      async function getUserTransactions(user) {
        // create query
        const query = new Moralis.Query("EthTransactions");
        query.equalTo("from_address", user.get("ethAddress"));

        // run query
        const results = await query.find();
        console.log("user transactions:", results);
      }

      //get stats on page load
      getStats();
    </script>
  </body>
</html>

How do I do clear the caches and restart the web server?

Tried but it doesn’t work.

What happens if you try to use a python web server with:

py -3 -m http.server 81

and then access http://127.0.0.1:81/?