Firebase Login using JavaScript – Email address is badly formatted error

Question

I am doing a restaurant app using JavaScript and jQuery mobile. It implements a user authentication using firebase for registering and signing the user. I am able to register a user and his details are stored in the database, but whenever I try to login with the same credentials, I have the error (‘Email address badly formatted’) in the console window.

Also, I want to be able to access the #homePage after successful login of the user.

Index.html

 <div data-role="page" id="login"  data-theme="a" data-rel = "#homePage"> 
                <div data-role="header" data-fullscreen="true" >
                    <a href="#homePage" data-icon="arrow-l" data-iconpos ="notext"></a>
                    <h1></h1>

                </div>
                <div role="main" class="ui-content" >


                        <div id="signup-form">
                          <h4>signup form</h4>
                          <input type="text" id="username" placeholder="enter your username"/><br/>
                          <input type="email" id="email" placeholder="enter your email"><br/>
                          <input type="password" id="password" placeholder="enter your password"/><br/>
                          <button type="button" name="button" id="signup">Signup</button>
                        </div>

                        <div id="signin">
                            <div id="signin">
                                <input type="email" id="signinEmail" placeholder="enter your email"><br/>
                                <input type="password" id="signinPassword" placeholder="enter your password"/><br/>
                                <button type="button" name="button" id="signin">Singin</button>
                                </div>
                        </div>
                        <hr/>                                       

                <div data-role="footer" data-position="fixed" >
                    <h1>&copy; 2018</h1>
                </div> -->

My second screen (where the user needs to be directed after successful login)

<div data-role="page" id="homePage" data-theme="a">
            <div data-role="header" data-fullscreen= "true" >
                <a href="#restoListDetails" data-icon="arrow-r" data-iconpos ="notext" data-transition="pop" >Home</a>                              
                <h1>Restaurant Near You</h1></div>
            <div role="main" class="ui-content" > 
                            <p>
                            <p id="current-email" style="display:none"></p>
                            <button type="button" id="signout" style="display:none">Signout</button>
                          </p>

                    <div id="map"></div> 
                    <br> 
                    <button id="getDetails"  data-role="button" data-icon="bars">Show Details</button>                  
            </div>

            <div data-role="footer" data-position="fixed" >
                    <h1>&copy; 2018</h1> 
            </div>
        </div>
    </div>

This is my app.js file (for authenticating the user)

function initFireBase() {
 // Initialize Firebase
 var config = {
apiKey: "**************************************",
authDomain: "restaurantapp-XXXXXX.firebaseapp.com",
databaseURL: "https://restaurantapp-XXXXXX.firebaseio.com",
projectId: "restaurantapp-XXXXXX",
storageBucket: "restaurantapp-XXXXXX.appspot.com",
messagingSenderId: "00000000000"
};

firebase.initializeApp(config);
var auth = firebase.auth();

// Firebase Variables
var auth = firebase.auth();

firebase.auth().onAuthStateChanged(function(user) {
if (user) {
 // User is signed in.
 } else {
// No user is signed in.
}
});

auth.onAuthStateChanged(firebaseUser => {
 // check email
if(firebaseUser){
currentEmail.innerHTML = auth.currentUser.email
currentEmail.style.display = 'block';
signoutButton.style.display = 'block';
// signupForm.style.display = 'none';
} else{
signoutButton.style.display = 'none';
// signupForm.style.display = 'block';
currentEmail.style.display = 'none';
}
});


//       ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
// signup form
// •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••

 var currentEmail = document.querySelector("#current-email");

 var signupForm = document.querySelector("#signup-form");
 var userName = document.querySelector("#username");
 var email = document.querySelector("#email");
 var password = document.querySelector("#password");
 var signupButton = document.querySelector("#signup");

 signupButton.addEventListener("click", clickSignupButton);
 function clickSignupButton(){
 //signup firebase method
  auth.createUserWithEmailAndPassword(email.value, password.value).
 then(function(user){
  console.log(auth.currentUser.email)
 }, function(error) {
 console.log(error.message);
 });
 }

 var signoutButton = document.querySelector("#signout");
 var currentEmail = document.querySelector("#current-email");
 // Signout function
 function clickSignoutButton(){
 auth.signOut()
 }
 // •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
 // singin form
 // •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••

var signinEmail = document.querySelector("#signinEmail");
var signinPassword = document.querySelector("#signinPassword");
var signinButton = document.querySelector("#signin");
signinButton.addEventListener("click", clickSigninButton);
function clickSigninButton() {
auth.signInWithEmailAndPassword(signinEmail.value.trim(),                     signinPassword.value).
 then(function(user){
   console.log(user)
 }, function(error) {
  console.log(error.message);
  // error message show that you need to enable that authentication in     firebase
 });
}
}