CODEWITHSUNDEEP
javascriptfirebasefirebase-authentication
Gerard Edwards
Gerard Edwards

Reputation: 17

How to display firebase auth/wrong-password as window alert?

I'm trying to add an error checker whenever I place an invalid email and/or password. What I want to happen if I provide an invalid email or password the page should provide a window alert about the error.

My .js code

(function(){//initialize the firebase app
    var config = {
                  assume there are credentials here
        }; 

        firebase.initializeApp(config);
        var auth = null;
        var loginBtn= document.getElementById('btnLogin');
        firebase.auth.Auth.Persistence.SESSION;

    //Login
    loginBtn.addEventListener('click', e => {
        e.preventDefault();
        if( $('#email').val() != '' && $('#password').val() != '' ){
        //login the user
        var data = {
            email: $('#email').val(),
            password: $('#password').val()
        };

        firebase.auth().signInWithEmailAndPassword(data.email, data.password)
            .then(function(authData) {
            auth = authData;
            })
            .catch(function(error) {
            console.log("Login Failed!", error);
            window.alert("Login Failed!", error);
            });
        }
    });
})();

My issue is that the window alert does not execute. I already tried an else statement it won't work as well.

html code

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

<head>
    <title>Login | DIABEATIS by Team Buendia</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/png" href="images/icons/diabeatis.jpg" />
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/util.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
    <script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-app.js" ></script>
    <script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-firestore.js"></script> 
    <script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-database.js"></script> 
    <script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-storage.js"></script> 
</head>
    <body>
        <div class="limiter">
            <div class="container-login100">
                <div class="wrap-login100 p-t-30 p-b-20">
                    <form id="loginForm" method="POST">
                        <img src="images/icons/diabeatis.jpg" width="70%" style="margin: 0px auto 20px;display: block;" alt="AVATAR">
                        <span class="login100-form-title p-b-40">
                        <font face="Montserrat">By Team Buendia</font>
                        </span>

                        <div class="wrap-input100 validate-input m-t-25 m-b-35" data-validate="Enter username">
                            <font face="Montserrat">Email</font>
                            <input class="input100" type="text" name="loginEmail" style="font-family:Montserrat;" id="email">
                            <span class="focus-input100"></span>
                        </div>

                        <div class="wrap-input100 validate-input m-b-50" data-validate="Enter password" >
                            <font face="Montserrat">Password</font>
                            <input class="input100" type="password" name="loginPassword" id="password">
                            <span class="focus-input100"></span>
                        </div>

                        <button type="submit" class="login100-form-btn" style="background-color:blue; font-family:Montserrat; cursor:pointer; font-weight:bold" id="btnLogin">Login</button>

                        <ul class="login-more p-t-40">
                        <font face="Montserrat">Don't have an account?</font>
                            <li class="m-b-8">
                                <a href="signup.html" class="txt2" style="color:#01703D">
                                    <font face="Montserrat">Create Account</font>
                                </a>
                            </li>
                            <font face="Montserrat">Are you a doctor? Login here</font>
                            <li class="m-b-8">
                                <a href="" class="txt2" style="color:#01703D">
                                    <font face="Montserrat">DIABEATIS for Doctors</font>
                                </a>
                            </li>
                                <font face="Montserrat">By Logging in you agree to our Terms & Conditions, as well as, our privacy and policy</font>
                                <br>
                            <li class="m-b-8">
                                <a href="toc.html" class="txt2" style="color:#01703D">
                                    <font face="Montserrat">Terms & Conditions</font>
                                </a>
                            </li>
                            <li class="m-b-8">
                                <a href="privacypolicy.html" class="txt2" style="color:#01703D">
                                    <font face="Montserrat">Privacy and Policy</font>
                                </a>
                            </li>
                        </ul>
                    </form>
                </div>
            </div>
        </div>
    <script src="signin.js"></script>
    <script>
        firebase.auth().onAuthStateChanged(function(user){
            if(user){
                window.location.href = "patientDashboard.html";
                console.log(user);
            }
            else{
                console.log('no user present');
            }
        });
    </script>
    </body>
</html>

Upvotes: 0

Views: 852

Answers (1)

Renaud Tarnec
Renaud Tarnec

Reputation: 83181

It is probably because you assign the submit type to your button and the POST method to your form. Therefore your form is probably submitted before the signInWithEmailAndPassword() Firebase method is triggered and/or the Promise it returns is resolved.

Changing the type to button, as follows, should do the trick:

<button type="button" class="login100-form-btn" style="background-color:blue; font-family:Montserrat; cursor:pointer; font-weight:bold" id="btnLogin">Login</button>

See the W3 specification for more detail.

Upvotes: 1

Related Questions