Javascript doesn't work for Firebase Authentication

I have a simple HTML:

<!DOCTYPE html>
<html lang="hu">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>BEJELENTKEZÉS AZ ADATBÁZISBA</title>
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4"></div>
            <div class="col-md-4" style="margin-top: 100px;">
                <form id="login_div" style="display: none;">
                    <div class="form-group">
                        
                        <input type="email" class="form-control" id="email-field" aria-describedby="emailHelp"
                            placeholder="E-mail">
                    </div>
                    <div class="form-group">
                        
                        <input type="password" class="form-control" id="password-field" placeholder="Jelszó">
                    </div>
                    
                    <button onclick="login()" class="btn btn-block btn-primary">BELÉPÉS</button>
                </form>
                <div id="user_div" class="form-group" style="display: none;">
                    <h3 class="text-center">Jelenleg be vagy lépve.</h3>
                    <button  type="submit" class="btn btn-block btn-danger">
                        KILÉPÉS
                    </button>
                </div>
            </div>
            <div class="col-md-4"></div>
        </div>
    </div>
    <script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-auth.js"></script>
    <script src="js/firebaseconfig.js"></script>
    

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"
        integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
        integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
        crossorigin="anonymous"></script>
        <script src="js/login.js"></script>


</body>

</html>

And a JS code:

firebase.auth().onAuthStateChanged(function (user) {
    if (user) {
        // User is signed in
        document.getElementById('user_div').style.display = "initial";
        document.getElementById('login_div').style.display = "none";
    } else {
        // No user is signed in
        document.getElementById('user_div').style.display = "none";
        document.getElementById('login_div').style.display = "initial";
    }
});

function login() {
    let userEmail = document.getElementById("email-field").value;
    let userPassword = document.getElementById("password-field").value;
    firebase.auth().signInWithEmailAndPassword(userEmail, userPassword).catch(function (error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;

        alert('Hiba: ' + errorMessage);

        // ...
    });
}

Page loads as is should: login form is visible, user div is not. If I type just an e-mail, alert pops up "The password is invalid or the user does not have a password", that's OK.

If I type an email, and a wrong password, it just reloads the page. No error message, nothing.

If I type the correct mail and password, the same happens: page reloading, no error message, no user div instead of the login form.

I can query the database with the attached firebaseconfig.js, so it must be okay.

What did I do wrong?

Thanks,