title: How to add custom data in firebase database with email+pass firebase auth in angular
body: <p>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.</p>
  
  <p>I have tried adding more variables to the <code>this.afAuth.auth.createUserWithEmailAndPassword(email, password)</code> however it only works with two.</p>
  
  <p>Here is code from the auth.service.ts (the SignUp function and the functions that are also shown within it):</p>
  
  <pre><code>// Sign up with email/password
    SignUp(email, password) {
      return this.afAuth.auth.createUserWithEmailAndPassword(email, password)
        .then((result) =&gt; {
          /* Call the SendVerificaitonMail() function when new user sign 
          up and returns promise */
          this.SendVerificationMail();
          this.SetUserData(result.user);
        }).catch((error) =&gt; {
          window.alert(error.message)
        })
    }
  
  // Send email verfificaiton when new user sign up
    SendVerificationMail() {
      return this.afAuth.auth.currentUser.sendEmailVerification()
      .then(() =&gt; {
        this.router.navigate(['verify-email-address']);
      })
    }
  
  SetUserData(user) {
      const userRef: AngularFirestoreDocument&lt;User&gt; = 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
      })
    }
  
  </code></pre>
  
  <p>Here is data from the registration.component
  (TS File first)</p>
  
  <pre><code>// This is where the only modification in the TS file is - the rest is the default (CLI made)
  constructor(
      public authService: AuthService
    ) { }
  </code></pre>
  
  <p>(HTML File)</p>
  
  <pre><code>&lt;div class="displayTable"&gt;
    &lt;div class="displayTableCell"&gt;
  
      &lt;div class="authBlock"&gt;
        &lt;h3&gt;Sign Up&lt;/h3&gt;
  
        &lt;div class="formGroup"&gt;
          &lt;input type="email" class="formControl" placeholder="Email Address" #userEmail required&gt;
        &lt;/div&gt;
  
        &lt;div class="formGroup"&gt;
          &lt;input type="password" class="formControl" placeholder="Password" #userPwd required&gt;
        &lt;/div&gt;
        &lt;div class="formGroup"&gt;
            &lt;input type="text" class="formControl" placeholder="Department" #userDept required&gt;
        &lt;/div&gt;
        &lt;div class="formGroup"&gt;
          &lt;input type="button" class="btn btnPrimary" value="Sign Up" (click)="authService.SignUp(userEmail.value, userPwd.value, userDept.value)"&gt;
        &lt;/div&gt;
  
      &lt;div class="redirectToLogin"&gt;
        &lt;span&gt;Already have an account? &lt;span class="redirect" routerLink="/sign-in"&gt;Log In&lt;/span&gt;&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>The desired result:
  Have the department (and any other fields added) added to the database along with the email + password that is already there.</p>
  
  <p>The actual result:
  I an error (as shown below) get when trying to submit the department with the <code>authService.SignUp()</code> function. (Through the signup form on the website).
  <a href="https://imgur.com/a/VcZfLdx" rel="nofollow noreferrer">https://imgur.com/a/VcZfLdx</a></p>