User input not saving in Firebase DB

Programming
, ,
1

I am trying to create a sign-up and sign-in page for a web app, with the data to be stored in Firebase. I am following instructions from this tutorial, but it doesn’t work. I am using FirebaseJS version 9.23, while the tutorial uses version 9.15.

The other functions of my code work, such as an alert when the user inputs an email that doesn’t match the pattern for emails, or when the user inputs a password less than 7 characters according to what Firebase accepts. So I think the problem doesn’t come from reading user input, it comes from saving the input to Firebase.

Instead of seeing an alert according to the function I made and seeing the data saved to Firebase after clicking the submit button, what happens is that the page just refreshes and no notification or alert is shown – as in it just refreshes and all the user input is gone.

I have imported the following and made sure it is called before linking my JS file:

<script type="module">
  // Import the functions you need from the SDKs you need
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js";
  import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-analytics.js";
  import { getDatabase, set, ref } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-database.js";
  import { getAuth, createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-auth.js"
  // TODO: Add SDKs for Firebase products that you want to use
  // https://firebase.google.com/docs/web/setup#available-libraries

  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  const firebaseConfig = {
  //...
  };
  const app = initializeApp(firebaseConfig);
  const analytics = getAnalytics(app);
  // Initialize variables
  const auth = getAuth();
  const database = getDatabase(app);
  
</script>

The function that is supposed to set the data to Firebase is as follows:

function sendMessage (fname, lname, uname, email) {
      set(ref(database, 'users/' + Math.floor(Math.random() * 10000000)), {
        fname: fname,
        lname: lname,
        uname: uname,
        email: email,
        last_login: Date.now()
      }).then(() => {
        alert('Account created successfully')
        document.getElementById('registerform').reset()
      }).catch((error) => {
        alert(error)
      })
    }

What must have gone wrong?

2

The issue seems to be with the version mismatch of FirebaseJS. You are using version 9.23, while the tutorial uses version 9.15.

To fix the issue, you can try changing the version of FirebaseJS to match the version used in the tutorial (9.15) by modifying the import statements in your code.

Replace the following lines:

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-analytics.js";
import { getDatabase, set, ref } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-database.js";
import { getAuth, createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-auth.js";

with:

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-analytics.js";
import { getDatabase, set, ref } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-database.js";
import { getAuth, createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-auth.js";

After making this change, the code should work as expected and save the user input to Firebase.