DocumentReference.set() called with invalid data. Unsupported field value: undefined

Question

I'm working on this signup with firebase and storing user details in the firestore.

I've been able to register user successfully but when I'm adding the details to the database, I get error on one of the fields. undefined. When i try without the catchPhrase field it works.

Here is my code: auth.service.ts

    emailSignUp(email: string, password: string) {
return this.afAuth.auth
  .createUserWithEmailAndPassword(email, password)
  .then(credential => {
    this.customSetUSerData(credential.user);
  })
  .catch(error => {
    console.log(error);
  });
}
customSetUSerData(user: User) {
const userRef: AngularFirestoreDocument<any> = this.afs.doc(`users/${user.uid}`);
const userData: User = {
  uid: user.uid,
  email: user.email,
  displayName: user.displayName,
  catchPhrase: user.catchPhrase
}; // photoURL: user.photoURL,
return userRef.set(userData).catch(err => console.log(err));
}

Here is register.component.html

      ngOnInit() {
this.signUpForm = this.fb.group({
  email: ['', [Validators.required, Validators.email]],
  password: [
    '',
    [
      Validators.pattern('^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$'),
      Validators.minLength(6),
      Validators.maxLength(25),
      Validators.required
    ]
  ],
  region: ['', []],
  catchPhrase: ['', [Validators.required]],
  photoUrl: []
});
   }

  get email() {
return this.signUpForm.get('email');
   }
   get password() {
return this.signUpForm.get('password');
   }

  get catchPhrase() {
return this.signUpForm.get('catchPhrase');
  }
   get photoUrl() {
return this.signUpForm.get('photoUrl');
  }
  signup() {
// console.log(this.email.value + this.password.value + this.catchPhrase.value);
return this.auth.emailSignUp(this.email.value, this.password.value);
  }
 }

And here is the error:

Error: Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field catchPhrase)

Frank van Puffelen Frank van Puffelen · Accepted Answer · 2018-10-03T03:29:15

The error message is quite explicit: you're trying to set a field catchPhrase to undefined, which is not a valid value.

This happens in this code:

catchPhrase: user.catchPhrase

So it seems that user.catchPhrase is undefined. This makes sense, since Firebase Authentication user does not have a catchPhrase property. You're probably looking to pass some catchphrase that the user entered/selected into your code, in which case you should pass it as a separate parameter or look it up like this:

catchPhrase: catchPhrase

This would call your (read only) getter for the catchPhrase property:

get catchPhrase() {
  return this.signUpForm.get('catchPhrase');
}

DocumentReference.set() called with invalid data. Unsupported field value: undefined

1 Answers