auth.createUser does not only create a user

Question

I know how to create user with Email and Password, I try to create user with other properties(username,gender,DOB).

I get error like below in console.

Failed to login!
register.component.ts:62 TypeError: Cannot read property 
'createUserWithEmailAndPassword' of undefined
    at Observable._subscribe (auth.service.ts:95)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:42)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:28)
    at RegisterComponent.push../src/app/register/register.component.ts.RegisterComponent.singUp (register.component.ts:58)
    at Object.eval [as handleEvent] (RegisterComponent.html:5)
    at handleEvent (core.js:10258)
    at callWithDebugContext (core.js:11351)
    at Object.debugHandleEvent [as handleEvent] (core.js:11054)
    at dispatchEvent (core.js:7717)
    at core.js:8161

Below has my code in when i write in Service.ts file.Please help me to find my mistake

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { AngularFireAuth } from 'angularfire2/auth';
import { HttpHeaders, HttpClient } from '@angular/common/http';
import { environment } from '../../environments/environment';

 @Injectable({
    providedIn: 'root'
 })

export class AuthService {
authService: any;
angularFireAuth: any;
af: any;

constructor(private firebaseAuth: AngularFireAuth,
            private http:HttpClient,
            private afAuth:AngularFireAuth) {

    this.user = firebaseAuth.authState;
    this.af = firebaseAuth.authState;

}

singUp(email: string, username: string, password: string, compassword:string, gender: string, bday: Date, stripeID:string): Observable<any>{
return new Observable( obs => {
  debugger

  this.af.auth.createUserWithEmailAndPassword({
    // Create user
    email: email,
    password: password
    }).then((user) => {
        // User created now create the database user
        debugger
        return this.af.database.object(`/users/${user.uid}`).update({
            name: username,
            gender: gender
        });
    }).then((success) => {
      debugger
        // Success
        console.log(success);

    }).catch((error) => {
      debugger

        // Error
        console.log(error);
    });
  })
 }
}

Guys please help me for this error

Answer 1

I don't know if this is the reason of the Cannot read property 'createUserWithEmailAndPassword' of undefined error (I don't know angular) but you should get an error when you do:

.then((user) => {
        // User created now create the database user
        debugger
        return this.af.database.object(`/users/${user.uid}`).update({
            name: username,
            gender: gender
        });
    })

As a matter of fact, the createUserWithEmailAndPassword() method returns a UserCredential as explained in the doc. In turn, the doc for the UserCredential explains that it contains, among others, a User object.

So you should do:

.then((userCredential) => {
        // User created now create the database user
        debugger
        return this.af.database.object(`/users/${userCredential.user.uid}`).update({
            name: username,
            gender: gender
        });
    })

Answer 2

remove the instantiation from the constructor this.af = firebaseAuth.authState; and use this.firebaseAuth.auth.createUserWithEmailAndPassword() in your signup method. This takes 2 arguments and not an object:

singUp(email: string, username: string, password: string, gender: string): Observable<any> {

    return new Observable(obs => {

        this.firebaseAuth.auth.createUserWithEmailAndPassword(
            // Create user
            email,
            password
        ).then((user) => {
            // User created now create the database user
            return this.af.database.object(`/users/${user.user.uid}`).update({
                name: username,
                gender: gender
            });
        }).then((success) => {
            // Success
            console.log(success);

        }).catch((error) => {

            // Error
            console.log(error);
        });
    });
}

Also take al look at Renaud's answer concerning the return type from createUserWithEmailAndPassword(). So in your case the uid is in user.user.uid

And why are you injecting AngularFireAuth 2 times in the constructor?