Logout function not working

Moralis General
#1

Hi there,
I have looked at old threads but didn’t solve my issue.
I cannot get the “logout” button to work.

Wanted behaviour: when logged in, click on logout and be logged out from metamask and automatically return to the page with the login.

Here is my main.js

const serverUrl = "https://tqefxh5ta0yr.usemoralis.com:2053/server";

const appId = "Diwxm07yNXDRH9DzLo53ukhOy5o33tiFIG1pq32y";

Moralis.start({ serverUrl, appId });

init = async () => {

    hideElement(userInfo);

    window.web3 = await Moralis.enableWeb3();

    initUser();

}

initUser = async () => {

    if (await Moralis.User.current()) {

        hideElement(userConnectButton)

        showElement(userProfileButton)

    }else{

        showElement(userConnectButton)

        hideElement(userProfileButton)

    }

}

login = async () => {

    try {

        await Moralis.Web3.authenticate();

        initUser();

    } catch (error) {

        alert(error)

    }

}

logout = async() => {

    await Moralis.User.logOut();

    hideElement(userInfo);

    initUser();

}

openUserInfo = async() => {

    user = await Moralis.User.current();

    if (user){

        showElement(userInfo);

    }else{

        login();

    }

}

hideElement = (element) => element.style.display = "none";

showElement = (element) => element.style.display = "block";

const userConnectButton = document.getElementById("btnConnect");

userConnectButton.onclick = login;

const userProfileButton = document.getElementById("btnUserInfo");

userProfileButton.onclick = openUserInfo;

const userInfo = document.getElementById("userInfo");

document.getElementById("btnCloseUserInfo").onclick = () => hideElement(userInfo);

document.getElementById("btnLogout").onclick = () => logout;

init();

here is my indext.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>NFT TEST</title>

</head>

<body>

    <div>

        <button id="btnConnect">Connect Wallet</button>

        <button id="btnUserInfo">Profile</button>

    </div>

    <div id="userInfo">

        <h4>User Profile</h4>

        <input type="text" id="txtUsername" required placeholder="Enter username">

        <input type="text" id="txtEmail" required placeholder="Enter email">

        <small>Optional</small>

        <img src="" id="imgAvatar" alt="">

        <label for="fileAvatar"Select Avatar></label>

        <input type="file" id="fileAvatar">

        <button id="btnLogout">Log out</button>

        <button id="btnCloseUserInfo">Close</button>

        <button id="btnSaveUserInfo">Save</button>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

    <script src="https://unpkg.com/moralis/dist/moralis.js"></script>

    <script src="main.js"></script>

</body>

</html>

can you please help me? I have tried with the following syntax as well but no luck:

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

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

      document.getElementById("btn-login").onclick = login;
      document.getElementById("btn-logout").onclick = logOut;
#2

Are you getting the “logged out” in your console? Nothing else will happen visually apart from that. If you want to go to the login page you could do window.location.replace('login') or reload the page with location.reload().

Also you can’t force a log out from MetaMask, that’s up to the user.

#3

Hi,
I have the button and when clicked doesn’t even print to console. It’s like there is no function connected.

Also in the sandbox environment you can actually logout from metamask from button. I guess you don’t “logout” from metamask but just disconnect metamask from the website.

Any suggestions?

Thank you

#4

How do you know that function is executed if it doesn’t print that on console?
Can you add more logging like using console.log before the logout function?

#5

Hi,
I think that this is not the point. The fact that there are no errors in the console and that when I click nothing happens should mean that there is a problem with the logOut function maybe? I don’t know but that doesn’t help tbh…

It just doesn’t work even if I could get it logged to console still wouldn’t do its job of disconnecting metamask from the website.

Any suggestions?

#6

logout does something different than disconnecting metamask from the website, if you want to deactivate web3, you can use this:
https://docs.moralis.io/moralis-dapp/web3/web3#deactivateweb3

      await Moralis.enableWeb3();
      console.log("ENABLED", Moralis.isWeb3Enabled());
      await Moralis.deactivateWeb3();
      console.log("DISABLED", Moralis.isWeb3Enabled());
#7

Hi there,
Again, this is not the point. I am talking about what the tutorial does not what you are referring to.

In the tutorial is shown that you can click logout and this will disconnect metamask and show the user with a login page.

Anyone else can help me please?

#8

So where are you stuck currently? Did you run a page reload when logout is clicked?