Firebase auth (email and password) not authenticating

Question

I'm not able to get the firebase auth working. User auth is enabled in the DB and login ID has been created. When is use the debug console of the browser, there is only 1 warning:

It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import the individual SDK components you intend to use.

I'm not sure what I'm missing here. any help is greatly appreciated.

 function login(){ const userEmail = document.getElementById('userEmail'); const userPassword = document.getElementById('userPassword'); const loginBtn = document.getElementById('loginBtn'); loginBtn.addEvenListener('click'), e => { const email = userEmail.value; const pass = userPassword.value; } firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) { var errorCode = error.code; var errorMessage = error.message; if (errorCode === 'auth/wrong-password') { alert('Wrong password.'); } else { alert(errorMessage); } console.log(error); }); firebase.auth().onAuthStateChanged(user => { if (user) { window.location = 'secondpage.html'; } }); }

 <!DOCTYPE html> <html> <head> <title>TEST</title> <h1>TESTING</h1> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="author" content="Name" <link rel="stylesheet" href="style.css" /> </head> <body> <div id="login_div" class="main-div"> <h3>Welcome</h3> <input id="userEmail" type="email" placeholder="Email..." /> <input id="userPassword" type="password" placeholder="Password..." /> <button click="login()">Login to Account</button> </div> <script src="https://www.gstatic.com/firebasejs/5.11.0/firebase.js"></script> <script> // Initialize Firebase var config = { apiKey: "KEY", authDomain: "name.firebaseapp.com", databaseURL: "https://name.firebaseio.com", projectId: "testlist", storageBucket: "testlist.appspot.com", messagingSenderId: "111111111111" }; firebase.initializeApp(config); </script> <script src="test.js"></script> </body> </html>

Answer 1

try this code!

the issue with with your button.

<button click="login()">Login to Account</button>

click is not a valid event, onclick is valid. so your button will look like this:

<button onclick="login()">Login to Account</button>

<html>
<head>
<title>TEST</title>
<h1>TESTING</h1>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Name"
<link rel="stylesheet" href="style.css" />
</head>

<body>
<div id="login_div" class="main-div">
<h3>Welcome</h3>
<input id="userEmail" type="email" placeholder="Email..." />
<input id="userPassword" type="password" placeholder="Password..." />

<button onclick="login()">Login to Account</button>
</div>

<script src="https://www.gstatic.com/firebasejs/5.11.0/firebase.js"></script>
   <script>
//   Initialize Firebase
    var config = {
    apiKey: "KEY",
    authDomain: "name.firebaseapp.com",
    databaseURL: "https://name.firebaseio.com",
    projectId: "testlist",
    storageBucket: "testlist.appspot.com",
    messagingSenderId: "111111111111"
    };
    firebase.initializeApp(config);
  firebase.initializeApp(config);
    </script>

    <script src="test.js"></script>
    </body>
  </html>

<_TEST.js-> 


function login() {
  const userEmail = document.getElementById("userEmail");
  const userPassword = document.getElementById("userPassword");

  const email = userEmail.value;
  console.log("TCL: login -> email", email);
  const pass = userPassword.value;
  console.log("TCL: login -> pass", pass);

  firebase
    .auth()
    .signInWithEmailAndPassword(email, pass)
    .catch(function(error) {
      var errorCode = error.code;
      var errorMessage = error.message;
      if (errorCode === "auth/wrong-password") {
        alert("Wrong password.");
      } else {
        alert(errorMessage);
      }
      console.log(error);
    });
  firebase.auth().onAuthStateChanged(user => {
    console.log("TCL: login -> user", user);
    if (user) {
       window.location = "secondpage.html";
    }
  });
}

Answer 2

You are using the wrong script. You are using:

<script src="https://www.gstatic.com/firebasejs/5.11.0/firebase.js"></script>

But you need to use:

<script src="https://www.gstatic.com/firebasejs/5.11.0/firebase-app.js"></script>

It's been pointed out in many forums that the /firebase one gives this error since you need the /firebase-app one. Just getting the firebase one is probably importing way more then you actually need and it is bloating your app size

Also for your authentication you probably also need:

<script src="https://www.gstatic.com/firebasejs/5.11.0/firebase-auth.js"></script>


<script src="https://www.gstatic.com/firebasejs/5.11.0/firebase-database.js"></script>

Firebase auth (email and password) not authenticating

Question

2 answers

solution1
0 ACCPTED 2019-05-02 07:47:05

solution2
0 2019-05-02 08:31:33

Firebase auth (email and password) not authenticating

Question

2 answers

solution1 0 ACCPTED 2019-05-02 07:47:05

solution2 0 2019-05-02 08:31:33

solution1
0 ACCPTED 2019-05-02 07:47:05

solution2
0 2019-05-02 08:31:33