i start to programm a chat but i became always this error:

Uncaught ReferenceError: username is not defined

But I defined const username = user.displayName;

this is a part of my code:

function authStateListener() {
  firebase.auth().onAuthStateChanged((user) => {
    if (user) {
      const username = user.displayName;
    } else {
      window.location.href = "../pages/login.html";
    }
  });
};

and there is the error:

fetchChat.on("child_added", function (snapshot) {
  const messages = snapshot.val();

  const now = (new Date().toLocaleDateString()).split(".");
  const t = (messages.date).split(".");

  if( t[0] < now[0]) {
      const message = `<li class=${username === messages.username ? "sent" : "receive"}><span class="name">${messages.username} </span><br>${messages.message}<br><span class="time">${t[0] - now[0]} Days ago</span></li>`;
      addMsg(message);
  } else {
      const message = `<li class=${username === messages.username ? "sent" : "receive"}><span class="name">${messages.username} </span><br>${messages.message}<br><span class="time">${messages.time}</span></li>`;
      addMsg(message);
  }
  //const message = `<li class=${username === messages.username ? "sent" : "receive"}></span>${messages.message}</li>`;
});

I hope you can help me