Paths must be non-empty strings and can't contain “.”, “#”, “$”, “[”, or “]” [duplicate]

Question

This question already has an answer here:

• Object returned from Firebase signIn 1 answer

I am trying to register with firebase and ionic, but I face the problem from the beginning of the day,

ERROR Error: Reference.child failed: First argument was an invalid path = "undefined". Paths must be non-empty strings and can't contain ".", "#", "$", "[", or "]",

can anyone help me with that

this is the provider:

import * as firebase from 'firebase';
import { Injectable } from '@angular/core';

/*
  Generated class for the UserServiceProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class UserServiceProvider {
  public data: any;
  public fireAuth: any;
  public userProfile: any;

  constructor() {
    console.log('Hello UserServiceProvider Provider');

    this.fireAuth = firebase.auth();

  	this.userProfile = firebase.database().ref(`email`);
  }

  signupUserService(account: {}){

    
    return this.fireAuth.createUserWithEmailAndPassword(account[`email`], account[`password`]).then((newUser) => {
      //sign in the user
      this.fireAuth.signInWithEmailAndPassword(account[`email`], account[`password`]).then((authenticatedUser) => {
        //successful login, create user profile
      this.userProfile.child(authenticatedUser.uid).set(
        account
      );
      });
    });

}

}
------------------------------------------------------

this is my signUp page

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, LoadingController, ToastController } from 'ionic-angular';
import { UserServiceProvider } from '../../providers/user-service/user-service';
import { HomePage } from '../home/home';

/**
 * Generated class for the LoginPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {
  public skills : string;
  public email : string;
  public phone : any;
  public password : any;
  public first_name : any;
  public last_name : any;
  public city : any;
  public state : any;
  public country : any;
  public isJobSeeker : boolean;

  constructor(public navCtrl: NavController,
     public navParams: NavParams,
     public usersserviceProvider : UserServiceProvider, 
     public toastCtrl: ToastController, public loadingCtrl: LoadingController) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }

  
  doSignup(){

    var   account = {
      first_name: this.first_name,
      last_name: this.last_name || '',
      skills: this.skills || '',
      email: this.email,
      phone: this.phone || '',
      password: this.password,
      city: this.city || '',
      state: this.state || '',
      country: this.country || '',
      isJobSeeker : this.country || ''

    };
var that = this;

var loader = this.loadingCtrl.create({
      content: "Please wait...",
      
    });
    loader.present();


  	this.usersserviceProvider.signupUserService(account).then(authData => {
  		//successful
  		loader.dismiss();
  		that.navCtrl.setRoot(HomePage);

  	}, error => {
      loader.dismiss();
     // Unable to log in
      let toast = this.toastCtrl.create({
        message: error,
        duration: 3000,
        position: 'top'
      });
      toast.present();

      that.password = ""//empty the password field

  	});

    
  }

}

this my html 

 <ion-list>
        
          <ion-item >
            <ion-label stacked>Skill Set (separate with comma)</ion-label>
            <ion-input type="text" [(ngModel)]="skills" name="skills" placeholder="eg. PHP, Writing, Chef" required="required"></ion-input>
          </ion-item>
          
         <ion-item>
            <ion-label stacked>Email</ion-label>
            <ion-input type="email" [(ngModel)]="email" name="email" placeholder="eg. john@doe.com"></ion-input>
          </ion-item>
          <ion-item >
              <ion-label stacked>Phone</ion-label>
              <ion-input type="text" [(ngModel)]="phone" name="phone" placeholder="eg. 0802222222" required="required"></ion-input>
            </ion-item>
      
      
    
          <ion-item>
            <ion-label stacked>Password</ion-label>
            <ion-input type="password" [(ngModel)]="password" name="password"></ion-input>
          </ion-item>

    <hr/>
          <ion-item>
            <ion-label stacked>First name</ion-label>
            <ion-input type="text" [(ngModel)]="first_name" name="first_name"></ion-input>
          </ion-item>
    
          <ion-item>
            <ion-label stacked>Last name</ion-label>
            <ion-input type="text" [(ngModel)]="last_name" name="last_name"></ion-input>
          </ion-item>
    
          <ion-item>
            <ion-label stacked>City</ion-label>
            <ion-input type="text" [(ngModel)]="city" name="city"></ion-input>
          </ion-item>
          <ion-item>
            <ion-label stacked>State/Province</ion-label>
            <ion-input type="text" [(ngModel)]="state" name="state"></ion-input>
          </ion-item>
    
    
        
    
           <ion-item>
            <ion-label>Looking for Job?</ion-label>
            <ion-toggle [(ngModel)]="isJobSeeker" name="phone" checked="false"></ion-toggle>
          </ion-item>
    
          <div padding text-center>
            <button ion-button color="danger" round (click)="doSignup()" >Signup</button>
          </div>
    
        </ion-list>

Thanks in advance,

Answer 1

If you check the documentation of signInWithEmailAndPassword, you will see that it returns a UserCredential. Checking the documentation for that shows that it has no uid property, which explains why you get undefined.

You'll want to use authenticatedUser.user.uid, so:

this.fireAuth.signInWithEmailAndPassword(account[`email`], account[`password`]).then((userCredential) => {
  this.userProfile.child(userCredential.user.uid).set(
    account
  );
});

---

Creating a new user account with createUserWithEmailAndPassword automatically signs them in, so the nesting of those calls is not needed. If you (only) want to store the user profile when creating the account, createUserWithEmailAndPassword also returns a UserCredential. So there too, you need to indirect to user.uid:

return this.fireAuth.createUserWithEmailAndPassword(account[`email`], account[`password`]).then((userCredential) => {
  return this.userProfile.child(userCredential.user.uid).set(
    account
  );
});