Implementing a login system within my website, for showing certain section of the webiste just once the user is logged in

I am trying to implementing a login system within my website leveraging the free authentication service in Firebase.

The problem is that, once I set up the pieces in place, inspecting my page with the console I see this error: "Uncaught TypeError: signupButton.addEventListener is not a function".

I am quite a newbe on the topic, so I will walk you through the whole process just to make sure I am setting up things correctly. Any kind of help you can give on the topic would awesome.

First setting up a simple HTML form in my website page

<form action="/action_page.php">
<label for="email">Sign Up Email:</label>
<input type="text" id="signupEmail" name="signupEmail"><br><br>
<label for="pwd">Sign Up Password:</label>
<input type="text" id="signupPassword" name="signupPassword"><br><br>
 </form>`<label for="email">Sign Up Email:</label>
<input type="text" id="signupEmail" name="signupEmail"><br><br>
<label for="pwd">Sign Up Password:</label>
<input type="text" id="signupPassword" name="signupPassword"><br><br>
 </form>

with my sign up button

<div class="w-container">
      <h1 class="heading-12-login2">Sign up<br></h1>
      <div id="signupButton" class="section-10">

I then set up my firebase auth library

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

<script>
  var firebaseConfig = {
    apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXXXXXXX.firebaseapp.com",
    databaseURL: "https://XXXXXXXXX.firebaseio.com",
    projectId: "XXXXXXXXXXXXX",
    storageBucket: "XXXXXXXXXXXXXXX.appspot.com",
    messagingSenderId: "XXXXXXXXXXXXXXXX",
    appId: "XXXXXXXXXXXXXXXXXXX"
  };

  firebase.initializeApp(firebaseConfig);
</script>

I then build the sign up engine

<script>
    signupButton.addEventListener('click', signup);

function signup() {
    signupButton.style.display = 'none';
    signupError.style.display = 'none';
    var email = signupEmail.value; 
    var password = signupPassword.value; 

    firebase.auth().createUserWithEmailAndPassword(email, password)
.then(function ()  {
window.location.replace('./personal');
})
.catch(function(error) {
  var errorCode = error.code;
  var errorMessage = error.message;
  console.log('Error code: ' + errorCode);
  console.log('Error message: ' + errorMessage);
  signupButton.style.display = 'block';
  signupError.innerText = errorMessage;
  signupError.style.display = 'block';
});
}
</script>

and the few codes for recognizing log in status:

<script>

firebase.auth().onAuthStateChanged(function(user) {
 if (user) {
   // User is signed in.
   console.log('User is logged in!');
   console.log('Email: ' + user.mail);
   console.log('UID: ' + user.uid);
 } else {
   // User is signed out.
   // ...
   console.log('No user is logged in');
 }
});
</script>

Then, when I try this on the console I got the pre-specified error:

sign-up:95 Uncaught TypeError: signupButton.addEventListener is not a function

No problem instead for the console to recognize that nobody is logged in so user log in recog seems to work properly. It seems that the sign up engine is not working properly. Any of you guys had any idea on how to fix this ?

Thanks so much in advance for your help, Dani