Angularfire: Update Profile Details Using Angularfire 2 + Firebase 3.x

[dorcilio]

Hi!

I would like to include more information in the profile, with angularfire2 is possible? how to proceed? In the case without the Google authentication using only email and password ...

Thanks in advance!

[buoyad]

I think the way to go about this is to store extra profile data in a normal firebase database with the associated username/UID.

[davideast]

@dorcilio Like @buoyad said, you need store this information in your database. Authentication and Database are separate but integrated services.

[maxmumford]

From the docs it looks like firebase has fields on the auth object for a user's displayName and profile photo etc:

https://firebase.google.com/docs/auth/web/manage-users

Are you planning on including this in the angularfire2 lib?

[burtonjc]

Looks like you can get at through FirebaseAuthState:

authState.auth.updateProfile({
  displayName: 'display name',
  photoURL: 'some/url'
}).then(() => {
  ...
});

The typings are a little strict on it if you are using typescript. So you have to pass both displayName and photoUrl; you can pass them as null though if you don't want to set one.

[psaussure]

@burtonjc from where can you call this? if in my modification class i have
constructor(public af: AngularFire)

where on af instance can I retrieve authState without subcribing with this.af.auth.subscribe(authState => { }) (which you call at login for example).

[burtonjc]

Because that value is wrapped in an observable I _think_ you have to subscribe to get it. You might be able to do something fancy with BehaviorSubjects but I'm not sure.

To avoid subscribing to auth states all over the place, you could create a service to manage the subscription:

import { Injectable } from '@angular/core';
import { FirebaseAuth, FirebaseAuthState } from 'angularfire2';

@Injectable()
export class AuthService {
  private _authState: FirebaseAuthState = null;

  constructor(public auth: FirebaseAuth) {
    this.auth.subscribe((state: FirebaseAuthState) => {
      this._authState = state;
    });
  }

  get authenticated(): boolean {
    return this._authState !== null;
  }

  get authState(): FirebaseAuthState {
    return this._authState;
  }
}

The danger there is if you call AuthService#authState before the subscription has fired, you will get a null value.

Hope that helps!

[hemanrnjn]

@psaussure I am facing the exact same problem as you are asking. Did you get it to work? If yes, then how? Please help.

[andres-gonzalez]

I think the best way to update the profile is using native firebase, just import it and use it like this:

import * as firebase from 'firebase';

ionViewDidLoad() {
    firebase.auth().onAuthStateChanged(function (user) {
      user.updateProfile({
        displayName: 'Pepe Pecas'
      })      
      if (user) {
        console.log(user)
      } else {

      }
    });
  }

[mitCode]

updateProfile is part of auth and not authState.
Try this:
auth.currentUser.updateProfile

[Sanjay-Ghadge]

How to update phone number of user in angularfire2?
How do I get phoneCredential?

[crobbs]

Before you try, make sure you have recently logged in. Try to log out and then log in...then run another test.

[chovy]

I get an error that auth.currentUser doesn't exist.

[phc15]

use firebase.auth().currentUser

[ronyef]

this.afAuth.auth.currentUser.updateProfile({
          displayName: this.name,
          photoURL: ''
        }).then(() => {
          console.log('DisplayName updated')
        }).catch(err => console.log(err))