Angular Firebase Error ---- Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field lastname)

Question

The error disappears if I comment out "lastname: this.newUser.lastName," (9 lines up from the bottom)

I'm truly stumped here. I've looked over all spelling etc and still can seem to find out why this happening.

With that being said is there an easier way to debug angular type script? I'm fairly new to this universe.

    import { Injectable } from '@angular/core';
    import { AngularFireAuth } from '@angular/fire/auth';
    import { AngularFirestore } from '@angular/fire/firestore';
    import { Router } from '@angular/router';
    import { ThrowStmt } from '@angular/compiler';
    import { BehaviorSubject } from 'rxjs';

    @Injectable({
      providedIn: 'root'
    })
    export class AuthService {

      private eventAuthError = new BehaviorSubject<string>("");
      eventAuthError$ = this.eventAuthError.asObservable();

      newUser: any;

      constructor(
       private afAuth: AngularFireAuth,
       private db: AngularFirestore,
       private router: Router) { }

      getUserState() {
        return this.afAuth.authState;
      }

login( email: string, password: string) {
 this.afAuth.auth.signInWithEmailAndPassword(email, password)
  .catch(error => {
    this.eventAuthError.next(error);
  })
  .then(userCredential => {
    if(userCredential) {
      this.router.navigate(['/home']);
    }
  })
}

createUser(user) {
console.log(user);
this.afAuth.auth.createUserWithEmailAndPassword( user.email, user.password)
  .then( userCredential => {
    this.newUser = user;
    console.log(userCredential);
    userCredential.user.updateProfile( {
      displayName: user.firstName + ' ' + user.lastName
    });

    this.insertUserData(userCredential)
      .then(() => {
        this.router.navigate(['/home']);
      });
  })
  .catch( error => {
    this.eventAuthError.next(error);
  });
 }

 insertUserData(userCredential: firebase.auth.UserCredential) {
  return this.db.doc(`Users/${userCredential.user.uid}`).set({
   email: this.newUser.email,
   firstname: this.newUser.firstName,
   lastname: this.newUser.lastName,
   role: 'network user'
   })
  }

  logout() {
    return this.afAuth.auth.signOut();
  }
}

Doug Stevenson Doug Stevenson · Accepted Answer · 2019-11-26T03:09:56

That error message is telling you that's you're passing the JavaScript value undefined as a property called "lastname" in a document. Firestore doesn't accept undefined values. You will have to assign lastname some other value. If you intend for there always to be a lastname value, you should be checking it for validity before trying to write it into a document field, or leave it out of the document altogether.

Angular Firebase Error ---- Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field lastname)

1 Answers