FIREBASE issues

Question

Please need help with configuring my app with firbase, I have created project and registered it . I have got configuration code and can manaully sign in new user but I cant sign in from front end. please I will include my javascript code if it will help and my html code

import { initializeApp } from 'gstatic.com/firebasejs/9.6.10/firebase/app.js'; 
import { getAuth, onAuthStateChanged} from 'gstatic.com/firebasejs/9.6.10/firebase/auth.js'; // Your web app's Firebase configuration 

const firebaseConfig = { }; // Initialize Firebase 
const app = initializeApp(firebaseConfig); // Initialize Firebase Authentication 
const auth = firebase.auth(app); // takes information to the firebase server 

const txtEmail = document.getElementById("txtemail"); 
const txtPassword = document.getElementById("txtpassword"); 
const btnLogin = document.getElementById("btnlogin"); 
const btnSignup = document.getElementById("btnsignup"); 
const btnLogout = document.getElementById("btnlogout"); 
const loginStatus = document.getElementById("loginstatus"); 
const txtEmailLabel = document.getElementById("txtemaillabel"); 
const txtPasswordLabel = document.getElementById("txtpasswordlabel");

btnSignup.addEventListener("click", e => { 
  const enteredEmail = txtEmail.value; 
  const enteredPassword = txtPassword.value; 
  const auth = firebase.auth(); 
  const promise = auth.createUserWithEmailAndPassword(enteredEmail, enteredPassword); 
  promise.catch(e => alert(" We could process your transaction at this time. \n" + e.message)); 
});

btnLogin.addEventListener("click", e => { 
  const enteredEmail = txtEmail.value; 
  const enteredPassword = txtPassword.value; 
  const auth = firebase.auth(); 
  const promise = auth.signInWithEmailAndPassword(enteredEmail, enteredPassword); 
  document.cookie="validSession=true"; 
  promise.catch(e => alert("Could not log you in at this time. \n" + e.message)); 
});

btnLogout.addEventListener("click", e => { 
  firebase.auth().signOut(); 
  document.cookie="validSession=false"; 
});

firebase.auth().onAuthStateChanged(firebaseUser => { 
  if (firebaseUser) { 
    document.cookie = "validSession=true"; 
    console.log("Logged in"); 
    btnLogout.style.display = "block"; 
    btnSignup.style.display = "none"; 
    txtEmail.style.display = "none"; 
    btnLogin.style.display = "none"; 
    txtPassword.style.display = "none"; 
    txtEmailLabel.style.display = "none"; 
    txtPasswordLabel.style.display = "none"; 
    loginStatus.innerHTML = "You are currently logged in."; 
  } else {
    document.cookie = "validSession=false"; 
    console.log("Not logged in"); 
    btnLogout.style.display = "none"; 
    btnSignup.style.display = "block"; 
    txtEmail.style.display = "block"; 
    btnLogin.style.display = "block"; 
    txtPassword.style.display = "block"; 
    txtEmailLabel.style.display = "block"; 
    txtPasswordLabel.style.display = "block"; 
    loginStatus.innerHTML = "You are not currently logged in. Please log in."; 
  } 
});

<div class="container"> 
    <div class="row"> 
        <div class="col"> 
            <h2>Login</h2> 
            <div class="alert alert-info" role="alert"> 
                <h5 id="loginstatus" class="mt-2 hide"></h5> 
            </div> 
        </div> 
    </div> 
</div> 
<div class="container border p-4 rounded"> 
    <div class="row mb-2"> 
        <div class="col-sm-2"> 
            <label id="txtemaillabel" for="txtemail">Email Address:</label> 
        </div> 
        <div class="col-sm-10"> 
            <input class="form-control" type="email" id="txtemail"> 
        </div> 
    </div>
    <div class="row mb-2"> 
        <div class="col-sm-2"> 
            <label id="txtpasswordlabel" for="txtpassword">Password:</label> 
        </div> 
        <div class="col-sm-10"> 
            <input class="form-control" type="password" id="txtpassword" required> 
        </div> 
    </div> 
    <div class="row mb-2"> 
        <div class="col-md-2"> </div> 
        <div class="col-md-10"> 
            <button class="btn btn-primary w-100" id="btnlogin">Log In</button> 
        </div>
    </div>
    <div class="row mb-2"> 
        <div class="col-md-2"> </div> 
        <div class="col-md-10"> 
            <button class="btn btn-primary w-100" id="btnsignup">Sign Up</button> 
        </div> 
    </div> 
    <div class="row mt-2"> 
        <div class="col-md-2"> </div> 
        <div class="col-md-10"> 
            <button class="btn btn-primary w-100" id="btnlogout">Log Out</button> 
        </div> 
    </div>
</div>

Answer 1

you are using firebase version 9 so instead of firebase.auth().onAuthStateChanged(user => {...}) you should use onAuthStateChanged(auth, user => {...})

you have already imported onAuthStateChanged ;)