How do I do a user authentication and if it is true it draws main content

I have this code that what I am trying to do is that when userLoggin is true, it does not draw the loggin page but main content, it is a simple application without backend, so I don’t know how to do it when userloggin is true it simply changes to drawing main content
any advice or help?

userData comes from another page saved as a cookie where the user’s registration data is saved and I request it in this script

const mainContainer = document.getElementById("main-container");
const loginContainer = document.getElementById("login-form");
const cookies = document.cookie;
const cookieArray = cookies.split(";");
let userData = null;
let UserLoggin = {
 loggin: false,
};

function toggleContainers() {
 if (UserLoggin.loggin) {
   loginContainer.style.display = "none";
   mainContainer.style.display = "grid";
 } else {
   loginContainer.style.display = "block";
   mainContainer.style.display = "none";
 }
}

for (const cookie of cookieArray) {
 const trimmedCookie = cookie.trim();
 if (trimmedCookie.startsWith("userData=")) {
   const userDataString = trimmedCookie.split("=")[1];
   userData = JSON.parse(decodeURIComponent(userDataString));
   break;
 }
}

if (UserLoggin.loggin) {
 toggleContainers();
}

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

btnLoggin.addEventListener("click", () => {
 const password = document.getElementById("password").value;
 const username = document.getElementById("username").value;

 if (
   userData &&
   password === userData.password &&
   username === userData.username
 ) {
   console.log("¡Inicio de sesión exitoso!");
   password.value = "";
   username.value = "";
   UserLoggin.loggin = true;

   toggleContainers();

   const userLoginJSON = JSON.stringify(UserLoggin);
   function setCookie(name, value, daysToExpire) {
     const expirationDate = new Date();
     expirationDate.setDate(expirationDate.getDate() + daysToExpire);

     const cookieValue = `${name}=${encodeURIComponent(
       value
     )}; expires=${expirationDate.toUTCString()}; path=/`;
     document.cookie = cookieValue;
   }
   setCookie("userLogginData", userLoginJSON, 30);

   console.log(UserLoggin);
 } else {
   console.log("Nombre de usuario o contraseña incorrectos.");
 }
});

mainContainer.addEventListener("load", () => {
 const addTableComponent = document.getElementById("addTableComponent");
 const tablecontainer = document.getElementById("table-container");

 addTableComponent.addEventListener("click", () => {
   const tableComponent = document.createElement("column-table");
   tablecontainer.insertBefore(tableComponent, addTableComponent);
 });
});