Streaming live at 10am (PST)

Sign Up experience for my user on webflow using Firebase: uknown error

Hi team,

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,
DaniPreformatted text


Here is my public share link: LINK
(how to access public share link)

Hey Daniele :slight_smile:

From what I can see, your code is attaching an event listener to signupButton before defining what signupButton actually is.

There should be a line before the current first line (in your sign up engine) which points to the signupButton.

var signupButton = document.getElementById("buttonIdGoesHere")

So your first few lines would then look like this:

<script>
    var signupButton = document.getElementById("signupButton")
    signupButton.addEventListener('click', signup);

    function signup() {
    ...
</script>

Hope that helps!

P.S. Your link isn’t working for me :sweat_smile:

1 Like

Hi Sarwech,

Thanks so much! super helpful!I did not specify the variable! Now it is currently working!

Thank you!

I take the chance to ask you if, maybe, do you know a useful set of resources (like a articles/books/whatever) which would help in developing also a user page profile experience ?

Thanks!
Dani

You’re welcome :slight_smile:

Do you mean how to build an actual profile page visually or getting the data?

In terms of the data, the official Firebase docs are a good start! It shows what you can do to pull user information so you can retrieve that in script tags or embed code which you can then display where necessary. :slight_smile:

I also did a quick search and found this course on YouTube which looks quite relevant to what you’re doing!

Hi Sarwech,
Thanks so much! I managed to build the whole experience using those videos!

Best,
Daniele

2 Likes

You’re welcome :slight_smile: shoot if you have any more questions.

Hi Daniele,

How did you deal with creating the custom forms? It seems like webflow doesn’t allow the trick on dragging the input box using options or alt

  • Vicente
1 Like

Hi Vicente!

I simply dragged in a code block and paste within it a HTML form.

You can copy this code, paste in your code block and having your form-block ready

<form action="/action_page.php">
<label for="email">Email:</label>
<input type="email" id="signupEmail" name="signupEmail"><br><br>
<label for="password">Password:</label>
<input type="password" id="signupPassword" name="signupPassword"><br><br>
</form>

Let me know if you need further help!

Best,
Dani

Hi Dani,

Thanks for the help. I was able to use the regular form and follow a tutorial on youtube. However, I’m getting a pop up that says “Passwords cannot be submitted.” It’s a different problem so I’ll probably as on my own thread lol Thanks again!

Vicente

Hi, this code was helpful - thanks!

Where are you putting the button? Did you manage to get the whole thing working?

1 Like

Hi!

Yes, just need to put a normal button (link block and follow the instruction on the tutorial).

Let me know if you can do it!

Thanks,
Dani