How to add custom data in firebase database with email+pass firebase auth in angular

Question

I'm trying to take additional data from a user registration form and put it into a firebase users database. I am able to get the email+password, however, I am unable to get any other fields working.

I have tried adding more variables to the this.afAuth.auth.createUserWithEmailAndPassword(email, password) however it only works with two.

Here is code from the auth.service.ts (the SignUp function and the functions that are also shown within it):

// Sign up with email/password
  SignUp(email, password) {
    return this.afAuth.auth.createUserWithEmailAndPassword(email, password)
      .then((result) => {
        /* Call the SendVerificaitonMail() function when new user sign 
        up and returns promise */
        this.SendVerificationMail();
        this.SetUserData(result.user);
      }).catch((error) => {
        window.alert(error.message)
      })
  }

// Send email verfificaiton when new user sign up
  SendVerificationMail() {
    return this.afAuth.auth.currentUser.sendEmailVerification()
    .then(() => {
      this.router.navigate(['verify-email-address']);
    })
  }

SetUserData(user) {
    const userRef: AngularFirestoreDocument<User> = this.afs.doc(`users/${user.uid}`);
    const userData: User = {
      uid: user.uid,
      email: user.email,
      displayName: user.displayName,
      photoURL: user.photoURL,
      emailVerified: user.emailVerified,
      department: user.department
    }
    return userRef.set(userData, {
      merge: true
    })
  }

Here is data from the registration.component (TS File first)

// This is where the only modification in the TS file is - the rest is the default (CLI made)
constructor(
    public authService: AuthService
  ) { }

(HTML File)

<div class="displayTable">
  <div class="displayTableCell">

    <div class="authBlock">
      <h3>Sign Up</h3>

      <div class="formGroup">
        <input type="email" class="formControl" placeholder="Email Address" #userEmail required>
      </div>

      <div class="formGroup">
        <input type="password" class="formControl" placeholder="Password" #userPwd required>
      </div>
      <div class="formGroup">
          <input type="text" class="formControl" placeholder="Department" #userDept required>
      </div>
      <div class="formGroup">
        <input type="button" class="btn btnPrimary" value="Sign Up" (click)="authService.SignUp(userEmail.value, userPwd.value, userDept.value)">
      </div>

    <div class="redirectToLogin">
      <span>Already have an account? <span class="redirect" routerLink="/sign-in">Log In</span></span>
    </div>
  </div>

</div>

The desired result: Have the department (and any other fields added) added to the database along with the email + password that is already there.

The actual result: I an error (as shown below) get when trying to submit the department with the authService.SignUp() function. (Through the signup form on the website). https://i.sstatic.net/aOJ5J.jpg

Answer 1

The error is correct, department is undefined, thus firebase complains. You are in your template passing the department:

authService.SignUp(userEmail.value, userPwd.value, userDept.value)

But in your corresponding function, you have not added it as a parameter, so first add it and also pass it to SetUserData:

SignUp(email, password, department) { // add here!
  return this.afAuth.auth.createUserWithEmailAndPassword(email, password)
    .then((result) => {
      // ...
      this.SetUserData(result.user, department); // add as parameter also!
    })
    // ...
}

In SetUserData also add it as parameter, and now you have access to the value!

SetUserData(user, department) { // added as parameter
  // ...
  const userData: User = {
    uid: user.uid,
    email: user.email,
    displayName: user.displayName,
    photoURL: user.photoURL,
    emailVerified: user.emailVerified,
    department: department // HERE!
  }
  // ...
}