Need help with Current user and logout button

Hello everybody,
Please i need help in this code, even if i signed to metamask using button ( Sign with Metamask ) and i refresh the page it always still connected and i should click on logout button
what i want to do
1 - when you refresh the page it logout automatically.
2 - display logout button only if it is signed in
and thank you in advance!

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>
    <script src="https://unpkg.com/moralis/dist/moralis.js"></script>
    <title>Metamask Login</title>
</head>
<body>
    <h1>Login with metamask :</h1>
    <button id="login">Login with Metamask</button>
    <button id="logout">Logout</button>

<script>
    //Connect SDK MORALIS
const serverUrl = "https://jt9kvea7eitk.usemoralis.com:2053/server";
const appId = "2FE0jmEybp6PgKfbetNpzq8BoTNF8f4uQgDd2xY5";
Moralis.start({ serverUrl, appId });

    //Login function
async function login() {
  let user = Moralis.User.current();
  if (!user) {
   try {
      user = await Moralis.authenticate({ signingMessage: "Hello World!" })
      document.getElementById('login').innerHTML = user.get('ethAddress')
      document.getElementById('logout').style.display = "block"
   } catch(error) {
     console.log(error)
   }
  }
}

    //Logout function
async function logOut() {
  await Moralis.User.logOut();
  document.getElementById('logout').style.display = "none"
  document.getElementById('login').innerHTML = "Login with Metamask"
}


document.getElementById("login").onclick = login;
document.getElementById("logout").onclick = logOut;
</script>
</body>
</html>

what is the expected behaviour, the user will be logged in until the logout is used, so that he doesn’t have to login on every page refresh

The expected behaviour from the logged users is to display the contract address instead on the login button every time they come back to the website + loggout button i need help for this please and thank you bro


like this

I don’t understand what is the problem

when you refresh the page i want to display the contract address in the login button if you already loggin in

  • display logout button only for logged users

ok, what doesn’t work, you get any error in your browser console?

i solved the problem of displaying the contract for logged users
now i need just to display the logout button only for the logged user, here is the code if any help

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>
    <script src="https://unpkg.com/moralis/dist/moralis.js"></script>
    <title>Metamask Login</title>
</head>
<body>
    <h1>Login with metamask :</h1>
    <button id="login">Login with Metamask</button>
    <button id="logout">Logout</button>

<script>
    //Connect SDK MORALIS
const serverUrl = "https://jt9kvea7eitk.usemoralis.com:2053/server";
const appId = "2FE0jmEybp6PgKfbetNpzq8BoTNF8f4uQgDd2xY5";
Moralis.start({ serverUrl, appId });
checkuser()

    //Login function
async function login() {
  let user = Moralis.User.current();
  if (!user) {
   try {
      user = await Moralis.authenticate({ signingMessage: "Hello World!" })
      document.getElementById('login').innerHTML = user.get('ethAddress')
      document.getElementById('logout').style.display = "block"
   } catch(error) {
     console.log(error)
   }
  }
}

    //Logout function
async function logOut() {
  await Moralis.User.logOut();
  document.getElementById('logout').style.display = "none"
  document.getElementById('login').innerHTML = "Login with Metamask"
}

  // checkuser function
function checkuser(){
  Moralis.User.currentAsync().then(function(user) {
  document.getElementById('login').innerHTML = user.get('ethAddress')
});
}

document.getElementById("login").onclick = login;
document.getElementById("logout").onclick = logOut;
</script>
</body>
</html>

Now I think that I understand what you wanted to say, I usually have something like this:

    user = await Moralis.User.current();
    if (!user) {
        document.getElementById("login_button").style.display = "block";
        document.getElementById("logout_button").style.display = "none";

    } else {
        document.getElementById("login_button").style.display = "none";
        document.getElementById("logout_button").style.display = "block";
    }

i tried but it doesn’t work, can you please check

<script>
    //Connect SDK MORALIS
const serverUrl = "https://jt9kvea7eitk.usemoralis.com:2053/server";
const appId = "2FE0jmEybp6PgKfbetNpzq8BoTNF8f4uQgDd2xY5";
Moralis.start({ serverUrl, appId });
checkuser()

  //Condition Logout button
user = await Moralis.User.current();
    if (!user) {
        document.getElementById("login_button").style.display = "block";
        document.getElementById("logout_button").style.display = "none";

    } else {
        document.getElementById("login_button").style.display = "none";
        document.getElementById("logout_button").style.display = "block";
    }

    //Login function
async function login() {
  let user = Moralis.User.current();
  if (!user) {
   try {
      user = await Moralis.authenticate({ signingMessage: "Hello World!" })
      document.getElementById('login').innerHTML = user.get('ethAddress')
   } catch(error) {
     console.log(error)
   }
  }
}

    //Logout function
async function logOut() {
  await Moralis.User.logOut();
  document.getElementById('login').innerHTML = "Login with Metamask"
}

  // checkuser function
function checkuser(){
  Moralis.User.currentAsync().then(function(user) {
  document.getElementById('login').innerHTML = user.get('ethAddress')
});
}

document.getElementById("login").onclick = login;
document.getElementById("logout").onclick = logOut;
</script>

you don’t have to copy the code that I pasted, you have to understand it and modify it to work in your case