Аутентификация пользователя для ввода правильного адреса электронной почты и пароля и переход на целевую страницу через аутентификацию firebase на веб-сайте

Question

Проблема в том, что когда всплывающее окно на веб-сайте видно, мне нужно скрыть всплывающее окно формы входа, когда пользователь ввел правильный адрес электронной почты и пароль, я могу go перейти на другую страницу с помощью windows .alert ( page. html), но это не тот, который мне подходит, потому что пользователь может скопировать URL-адрес и без аутентификации он может go на страницу, например. html Так вот почему
I использовал всплывающее окно для входа в firebase, но всплывающее окно аутентифицирует пользователя, но не скрывает, когда аутентификация завершена, но мне нужно, чтобы оно аутентифицировалось, пока пользователь не введет правильный пароль. и нужно скрыть это всплывающее окно, чтобы предоставить доступ к моему веб-сайту Любая помощь и предложения приветствуются.
Ссылка для просмотра live: https://muhammad-bilal-7896.github.io/Firebase-Login-authentication-using-pop-up/

body{

    background-size: cover;
    background-position: center;
  }
  @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    user-select: text;
  }
  .btn{

    position: absolute;
    z-index: 1;

    top: 15px;
    left: 45px;
    height: 45px;
    width: 45px;
    text-align: center;
    background: #1b1b1b;
    border-radius: 3px;
    cursor: pointer;
    transition: left 0.4s ease;
  }
  .btn.click{
    left: 260px;
  }
  .btn span{
    position: relative;
    z-index: 1;
    color: white;
    font-size: 28px;
    line-height: 45px;
  }
  .btn.click span:before{
    position: relative;
    z-index: 1;

    content: '\f00d';
  }
  .sidebar{
    z-index: 1;
    position: relative;
    width: 250px;
  user-select: none;
    min-height: 100vmin;
    left: 0px;
    background:#063146;
    transition: left 0.4s ease;
  }
  /* This is glowing text */
  .glow {
    user-select: none;
    text-align: center;
    -webkit-animation: glow 1s ease-in-out infinite alternate;
    -moz-animation: glow 1s ease-in-out infinite alternate;
    animation: glow 1s ease-in-out infinite alternate;
    position: absolute;
     top: 10%;
      left: 25%;
        z-index: -0.5;
         color:#063146;
          font-size: 70px;
           font-family: Georgia, 'Times New Roman', Times, serif;
            user-select: none;

  }

  @keyframes glow{
    from {
      text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #063146, 0 0 40px #063146, 0 0 50px #063146, 0 0 60px #063146, 0 0 70px #063146;
    }

    to {
      text-shadow: 0 0 20px #fff, 0 0 30px #063146, 0 0 40px #063146, 0 0 50px #063146, 0 0 60px #063146, 0 0 70px #063146, 0 0 80px #063146;
    }
  }
  /* This is glowing text */
  .sidebar.show{
    left: 0px;
  }
  .sidebar .text{
    user-select: none;
    color: white;
    font-size: 25px;
    font-weight: 600;
    line-height: 65px;
    text-align: center;
    background:#063146;
    letter-spacing: 1px;
  }
  nav ul{
    user-select: none;
    background:#063146;
    height: 100%;
    width: 100%;
    list-style: none;
  }

  nav ul li{
    user-select: none;
    line-height: 60px;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  nav ul li:last-child{
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  nav ul li a{
    position: relative;
    color: white;
    text-decoration: none;
    font-size: 18px;
    padding-left: 40px;
    font-weight: 500;
    display: block;
    width: 100%;
    user-select: none;
    border-left: 3px solid transparent;
  }
  nav ul li.active a{
    color: cyan;
    user-select: none;
    background: #1e1e1e;
    border-left-color: cyan;
  }
  nav ul li a:hover{
    background:#063146;
    user-select: none;
  }
  nav ul ul{
    user-select: none;
    position: static;
    display: none;
  }
  nav ul .feat-show.show{
    display: block;
  }
  nav ul .serv-show.show1{
    display: block;
  }
  nav ul .prim-show.show2{
    display: block;
  }
  nav ul ul li{
    user-select: none;
    line-height: 42px;
    border-top: none;
  }
  nav ul ul li a{
    user-select: none;
    font-size: 17px;
    color: #e6e6e6;
    padding-left: 80px;
  }
  nav ul li.active ul li a{
    user-select: none;
    color: #e6e6e6;
    background: #1b1b1b;
    border-left-color: transparent;
  }
  nav ul ul li a:hover{
    color: cyan!important;
    background: #1e1e1e!important;
  }
  nav ul li a span{
    user-select: none;
    position: absolute;
    top: 50%;
    right: 20px;
    font-size: 22px;
    transition: transform 0.4s;
  }
  nav ul li a span.rotate{
    transform: translateY(-50%) rotate(-180deg);
  }

  /* togle hide show button effects */
  [id^=Prim] + *{
    display:none;
  }
  [id^=Prim]:target + *{
    display:block;
  }
  /* togle hide show button effects */

  /* togle hide show button effects */
  [id^=High] + *{
    display:none;
  }
  [id^=High]:target + *{
    display:block;
  }
  /* togle hide show button effects */


  /* togle hide show button effects for class three subjects*/
  [id^=PrimCS] + *{
    display:none;
  }
  [id^=PrimCS]:target + *{
    display:block;
  }
  /* togle hide show button effects */

  /* togle hide show button effects for class three subjects*/
  [id^=HighCS] + *{
    display:none;
  }
  [id^=HighCS]:target + *{
    display:block;
  }
  /* togle hide show button effects */

  /* togle hide show button effects for class three subjects*/
  [id^=Table] + *{
    display:none;
  }
  [id^=Table]:target + *{
    display:block;
  }
  /* togle hide show button effects */

  /* pop up */
  #popUpMain{
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0,0,0.6);
    z-index: 1001;
    font-family: 'Slabo 27px', serif;
  }
  #popup{
  width: 500px;
  height: 250px;
  background-image:url("background-green-grass-lawn.jpg");
  background-size: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  box-shadow: 1px 2px 5px 3px white;
  text-align: center;
  }

  #newsHeading{
    transform: translateY(10px);
    color: white;
    font-family: 'Slabo 27px', serif;
  }
  #email_field
  {
      border: 1px solid white;
      border-bottom: 1px solid #fff;
      background-color: #39dc79;
      outline: none;
      box-shadow: 1px 2px 5px 3px white;
      height: 40px;
      color: #063146;
      font-size: 16px;
  }
  #password_field
  {
    border: 1px solid white;
    border-bottom: 1px solid #fff;
    background-color: #39dc79;
    outline: none;
    box-shadow: 1px 2px 5px 3px white;
    height: 40px;
    color: #063146;
    font-size: 16px;
  }
  #submitId{
    width: 100px;
    height: fit-content;
    font-size: 30px;
    border: 1px solid #063146;
    box-shadow: 1px 2px 5px 3px aliceblue;
    color:white;
    background-color: #1c8adb;
  }
  /* pop up */


  #mainoptions{
    font-size: 100px;
  }


  #containerwork
  {
    user-select: none;
    z-index: -0.5;
    position: absolute;
    background-color:transparent;
    color: white;
    line-height: 100px;
    font-size: 30px;
    min-width: 50px;
    /* width: 800px; */
    top: 0%;
    margin-top: 0rem;
    margin-left: 250px;
    text-align: center;
    min-height: auto;
    border: 1px solid black;
    border-top: 50px solid #063146; 
  }
  #boxwork
  {
    user-select: none;
    border: 1 px solid black;
    display: inline-block;
    margin:50px;
    margin-top: 0px;
    width: fit-content;
    height: 50px;
    line-height: 50px;

  }
  #boxwork a
  {
    color: inherit;
    text-decoration: none;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  }
  #boxwork:hover
  {

    border-radius: 10%;
    padding-left: 10px;
    transition: 5s ease;
    color: aliceblue;
    background-color: #248d05;
    text-decoration: none;
  }

  /* This is the container table */
  .containertable{
    user-select: none;
    text-align: right; 
    position: absolute; 
    border: 1px solid black; 
    min-width: 50px;
    z-index:0;
    width: fit-content;
    top: 13%; 
    left: 30%;
  }
  .containeroptions{
    width: fit-content; border: 2px solid blue; background-color: rgb(40, 65, 87); min-width: 50px; user-select: none;
  }
  .boxoptions{
    border: 1px solid blue; font-size: 25px; background-color: green; color: aliceblue; user-select: none;
  }


  .containeroptions .boxoptions a{
    user-select: none;
  }

  .containertable h1{
    user-select: none;
  }

  .containertable table tr{
    user-select: none;
  }

  .containertable table tr td{
    user-select: none;
  }

  .containertable table tr td{
    user-select: none;
  }
  .containertable table tr a{
    user-select: none;
  }
  /* This is the container table */

  #imgschool{
    position: absolute;
     top: 0%; 
     z-index: -1;
      width: 100%;
      height: 625px;
  }


  /* login form */
  .login-box{
    width: 320px;
    height: 420px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%,-50%);
    box-sizing: border-box;
    padding: 70px 30px;
  }
  .avatar{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    top: -50px;
    left: calc(50% - 50px);
  }
  h1{
    margin: 0;
    padding: 0 0 20px;
    text-align: center;
    font-size: 22px;
  }
  .login-box p{
    margin: 0;
    padding: 0;
    font-weight: bold;
  }
  .login-box input{
    width: 100%;
    margin-bottom: 20px;
  }
  .login-box input[type="text"], input[type="password"]
  {
    border: none;
    border-bottom: 1px solid #fff;
    background: transparent;
    outline: none;
    height: 40px;
    color: #fff;
    font-size: 16px;
  }
  .login-box input[type="button"]
  {
    border: none;
    outline: none;
    height: 40px;
    background: #1c8adb;
    color: #fff;
    font-size: 18px;
    border-radius: 20px;
  }
  .login-box input[type="submit"]:hover
  {
    cursor: pointer;
    background: #39dc79;
    color: #000;
  }

  .login-box a{
    text-decoration: none;
    font-size: 14px;
    color: #fff;
  }
  .login-box a:hover
  {
    color: #39dc79;
  }
  /* login form */


  /* add responive media queries */
  @media screen and (max-width:700px){
    #imgschool{

    }
    .glow {
      left: 5%;
    }
    .sidebar{
      left: -250px;
    }
    #containerwork{
      margin-top: 0rem;
      margin-left: 0px;
    }
    .containertable{
      left: 8%;
    }
  }
  @media screen and (max-width:800px){
    .glow {
      left: 5%;
    }
    #containerwork{
      margin-top: 0rem;
      margin-left: 0px;
    }
    .containertable{
      left: 8%;
    }
  }
  @media screen and (max-width:500px){
    .glow {
      left: 5%;
    }
  .sidebar{
    height: fit-content;
  }
    #containerwork{
      /* margin-top: -10000px;
      margin-left: 0px; */
     position: absolute;
     margin-top: 0rem;
    }
    .containertable{
      left: 8%;
    }
  }
  @media all and (max-width:600px)
  {
    .glow {
      left: 5%;
    }
    .containertable{
      left: 5%;
    }
  }
  @media all and (max-width:400px)
  {
    #imgschool{
     height: 100%;
    }
    .glow {
      left: 5%;
      font-size: 600px;
    }
  }
  @media all and (max-width:350px)
  {
    #imgschool{
      height: 100%;
     }
    .glow {
      left: 2%;
      font-size: 60px;
    }
  }
  @media all and (max-width:290px)
  {
    #imgschool{
      height: 100%;
     }
    .glow {
      left: 2%;
      font-size: 60px;
    }
  }
  /* add responive media queries */

var signin=true;


//hide show pop up login
$(document).ready(function(){
  setTimeout(function(){

    $('#popUpMain').css('display','block');
  },5000);
});

// function getvalue()
// {
firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in

    // var x = document.getElementById("popUpMain");
    // x.style.display = "none"; 


    var user = firebase.auth().currentUser;


    if(user != null){
      // signin=true;
      var email_id = user.email;
      document.getElementById("user_para").innerHTML = "Welcome to E-learning Portal.You are welcome: " + email_id;

    }

  } else {
    // No user is signed in.

  // signin=false;

  }
});

// if(signin===true)
// {   alert("signed in now in E-learning Portal");
// var a=false;  
// // var x = document.getElementById("popUpMain");
// // x.style.display = "none"; 

//   return a;
// }
// else
// {   
// var b=true;  
//   return b;
// }
// }



function login(){
  // var check=getvalue();
  //hide show pop up login
  var userEmail = document.getElementById("email_field").value;
  var userPass = document.getElementById("password_field").value;
  // else{
  //   //var x = document.getElementById("popUpMain");
  //       x.style.display = "block";

  // }


  firebase.auth().signInWithEmailAndPassword(userEmail, userPass).catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;





    var ale=alert("Error : " + errorMessage);
    if(ale==="Error : ")
    {
      signin=true;
    }
    else{
      signin=false;
    }
    // ...
    alert(signin);
  while(signin==true)
  {
    alert("In In true condition if "+signin);
    var x = document.getElementById("popUpMain");
    x.style.display = "none";
    // var check=getvalue();
    if(signin==false)
    {
      alert("In false condition if "+signin);
      alert("Signed not in");
      document.getElementById("popUpMain").style.display="block";
      break;

    }
  }

  });


}

function logout(){
  firebase.auth().signOut();
}