How to use updateProfile in firebase / Angular

Question

I want to update a user's displayName and/or photo URL in firebase. I am using angular. I have a service that handles the auth stuff and it works OK for login/register/etc. I have created another service to handle the user data (UserService). However, when I try to call the updateProfile function, I get the compile error below. The docs show the function being called through a user object, but it doesn't explain what that user object is.

The error

error TS2339: Property 'updateProfile' does not exist on type 'AngularFireAuth'

I have tried this a number of ways - including the one below that produces the error above as well as created a user object with the currentUser function and then trying to call the method on that object. Nothing seems to work.

import { Injectable, NgZone } from '@angular/core';
import { User } from "app/main/services/users";
import { auth } from 'firebase/app';
import { AngularFireAuth } from "@angular/fire/auth";
import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/firestore';
import { Router } from "@angular/router";


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

  constructor(
        public afs: AngularFirestore,   // Inject Firestore service
        public afAuth: AngularFireAuth, // Inject Firebase auth service
        public router: Router,
        public ngZone: NgZone // NgZone service to remove outside scope warning
    ) { }


    /**
     * Update the image or username
     */
    UpdateProfile( displayName ) {
        console.log('In Update profile');
        return this.afAuth.updateProfile({
            displayName: displayName,
            photoURL: "https://example.com/jane-q-user/profile.jpg"

        }).then((result) => {
              console.log('Did the update profile');

        }, function(error){

        });
    }

 }

Debasish Sahoo Debasish Sahoo · Accepted Answer · 2020-11-26T19:08:35

AngularFireAuth.currentUser is an async property. you need to add await.

for e.g -

async UpdateProfile(displayName: string) {
    const profile = {
        displayName: displayName,
        photoURL: "https://example.com/jane-q-user/profile.jpg"
    }
    return (await this.afAuth.currentUser).updateProfile(profile);
}

How to use updateProfile in firebase / Angular

2 Answers