Save user to realtime database not working

Question

UPDATED

I have a function where it saves the user's data to my database and navigates to the dashboard, but it's not working. Once it sends the message that it has collected the data, it refreshes and doesn't save the user's info. I didn't get an error when I checked the console. I have provided my code below:

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
  
// Initialize variables
const auth = firebase.auth()
const database = firebase.database()


//Updated Save Data Function
function handleNewStudioFormSubmit() { // renamed from newStudio
  // don't use alert - it blocks the thread
  console.log('debug: retrieving data... please wait')
  
  // Get data
  studioName = document.getElementById("studioName").value;
  email = document.getElementById("email").value;
  password =  document.getElementById("password").value;
  firstName = document.getElementById("firstName").value;
  lastName = document.getElementById("lastName").value;
  phoneNumber = document.getElementById("phoneNumber").value;

  console.log({ studioName, firstName, email }); // note added braces here
  
  // Validate input fields
  if (
    !validate_email(email) || 
    !validate_password(password)
    ) {
    // TODO: replace this alert with updating the form with an error message
    alert('Error with email or password')
    return false // cancel submission
  }

  if (
    !validate_field(firstName) ||
    !validate_field(lastName) ||
    !validate_field(phoneNumber) ||
    !validate_field(studioName)
    ) {
    // TODO: replace this alert with updating the form with an error message
    alert('One or More Extra Fields is Outta Line!!')
    return false // cancel submission
  };

  return createStudioThenOpenDashboard({
    studioName,
    firstName,
    lastName,
    email,
    password,
    phoneNumber
  })
    .catch((err) => {
      console.error('failed to create studio: ', err);
      alert('Failed to create studio. Cause: ' + err.message);
    });
}

// ⇊ permits using await
async function createStudioThenOpenDashboard(data) {
  /* ... */

  const { email, password, firstName, lastName, phoneNumber } = data;

  // creates the user, and waits for it to finish being created
  const user = await auth.createUserWithEmailAndPassword(email, password);

  // writes data to the database, and waits for it to complete
  await firebase.database()
    .ref('/studiopick/studio/users/' + studioName) // <-- note fixed path
    .set({
      studioName : studioName,
      firstName : firstName,
      lastName : lastName,
      email : email,
      phoneNumber : phoneNumber,
      uid: user.uid
      // NEVER store passwords in plain text, even in testing
    });

  // once the above tasks succeed, navigate to the dashboard.
  window.location.href = "studiodash.html?id=" + uid
}

// Validate Functions
function validate_email(email) {
  expression = /^[^@]+@\w+(\.\w+)+\w$/
  if (expression.test(email) == true) {
    // Email is good
    return true
  } else {
    // Email is not good
    return false
  }
}

function validate_password(password) {
  // Firebase only accepts lengths greater than 6
  if (password < 6) {
    return false
  } else {
    return true
  }
}

function validate_field(field) {
  if (field == null) {
    return false
  }

  if (field.length <= 0) {
    return false
  } else {
    return true
  }
}

HTML



    
        
        
        
        
        
        
    
        
        
        
    
        
        
        
        
        StudioPick
        
    
    
        
            
                
                StudioPick
                    
                    
                    
                        
                        Home
                        
                        
                        Sign Up
                        
                        
                        Login
                        
                    
                    
                

            

        

        
            
                
                    
                        
                            
                                Sign Up
                                Please enter your email and password!

                                
                                    First Name*
                                    
                                
                                
                                    Last Name*
                                    
                                
                                
                                    Email*
                                    
                                
                                
                                    Phone Number*
                                    
                                
                                
                                    Studio Name*
                                    
                                
                                
                                    Enter a Password*
                                    
                                

                                
                                
                                
                                    
                                    
                                    
                                
                            
                        
                    
                
            
        

        
            © 2022 StudioPick.
            
              Privacy
              Terms
              Support

user_3068190 · Answer

In short, you are firing off asynchronous tasks, without waiting for them to finish. Additionally, by using alert() throughout your function, you are also blocking the thread which leads to confusing behaviour - such as asynchronous tasks never being executed properly.

Take a look at these parts of your code:

function newStudio() {
  /* ... */
  
  // ⇊ this is asynchronous, you should wait for it to finish
  auth.createUserWithEmailAndPassword(email, password)
    .then(function() {
      // Declare user variable
      var user = auth.currentUser
    })
    .catch(function(error) {
      // Firebase will use this to alert of its errors
      var error_code = error.code
      var error_message = error.message
 
      alert(error_message)
    });

  // ⇊ this is asynchronous, you should wait for it to finish
  firebase.database()
    .ref('/Studiopick/studio/users' + studioName)
    .set({ /* data */ });

  // this line gets called before any of the above tasks start firing
  alert("Studio Created");
  // followed by this line - which cancels everything above
  // before they complete
  window.location.href ="studiodash.html?id="+ uid;

  /* ... */
};

You must refactor your code to wait for the previous task to finish. To do this, first validate your form, and then afterwards call a new function that handles the leg work of creating the studio.

function handleNewStudioFormSubmit() { // renamed from newStudio
  // don't use alert - it blocks the thread
  console.log('debug: retrieving data... please wait')
  
  // Get data
  const studioName = document.getElementById("studioName").value,
    email = document.getElementById("email").value,
    password =  document.getElementById("password").value,
    firstName = document.getElementById("firstName").value,
    lastName = document.getElementById("lastName").value,
    phoneNumber = document.getElementById("phoneNumber").value;

  console.log({ studioName, firstName, email }); // note added braces here
  
  // Validate input fields
  if (!validate_email(email) || !validate_password(password)) {
    // TODO: replace this alert with updating the form with an error message
    alert('Error with email or password')
    return false // cancel submission
  }

  if (
    !validate_field(firstName) ||
    !validate_field(lastName) ||
    !validate_field(phoneNumber) ||
    !validate_field(studioName)
  ) {
    // TODO: replace this alert with updating the form with an error message
    alert('One or More Extra Fields is Outta Line!!')
    return false // cancel submission
  };

  createStudioThenOpenDashboard({
    studioName,
    firstName,
    lastName,
    email,
    password,
    phoneNumber
  })
    .catch((err) => {
      console.error('failed to create studio: ', err);
      alert('Failed to create studio. Cause: ' + err.message);
    });

  return false; // prevent form's default action (reload page), so that the async tasks above can complete.
}

// ⇊ permits using await
async function createStudioThenOpenDashboard(data) {
  const { email, password, studioName, ...otherData } = data;

  // creates the user, and waits for it to finish being created
  const { user } = await auth.createUserWithEmailAndPassword(email, password);

  // writes data to the database, and waits for it to complete
  await firebase.database()
    .ref('/studiopick/studio/users/' + studioName) // <-- note fixed path
    .set({
      ...otherData,
      studioName,
      email,
      uid: user.uid,
      // NEVER store passwords in plain text, even in testing
    });

  // once the above tasks succeed, navigate to the dashboard.
  window.location.href = "studiodash.html?id=" + user.uid
}

Don't forget to update

onclick="newStudio"

to

onclick="return handleNewStudioFormSubmit()"

Save user to realtime database not working

1 Answers