'Firebase UI is displaying null for displayName under the user object

I am using the Firebase UI Web to allow users to signup to my Firebase project. I am then using a cloud function (in Node.js):

exports.newUserUpdate = functions.auth.user().onCreate(user => {})

to then send the newly created user an email. When I read in user.displayName or console.log the user object, it displays the displayName as null. This seemingly looks like the displayName was not submitted on the signup.

I am using Firebase UI Web 3.4.1.

Thanks.



Solution 1:[1]

This is a known issue: https://github.com/firebase/firebase-functions/issues/95

When creating a user, the following APIs are called in succession:

  • auth.createUserWithEmailAndPassword to create the email/password user.
  • user.updateProfile to set the display name on the user

onCreate event is triggered in the first call when the display name is not yet known.

Solution 2:[2]

The same problem I face while registering users with email and password, but I don't use cloud functions to do that. See reference here updateProfile

I use this method to update user name user.updateProfile({displayName: name}) after creating user with email & password.

const res = await auth.createUserWithEmailAndPassword(email, password);
const user = res.user;

// once we get user object then update user display name using following method
await user.updateProfile({displayName: name})

createUserWithEmailAndPassword only takes two arguments email & password. That's why displayName is null in the user object. To fix that we have to run user.updateProfile() to update user name.

Solution 3:[3]

Documentation says,

Set an authentication state observer and get user data

For each of your app's pages that need information about the signed-in user, attach an observer to the global authentication object. This observer gets called whenever the user's sign-in state changes.

Attach the observer using the onAuthStateChanged method. When a user successfully signs in, you can get information about the user in the observer.

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
    var displayName = user.displayName;
    var email = user.email;
    var emailVerified = user.emailVerified;
    var photoURL = user.photoURL;
    var isAnonymous = user.isAnonymous;
    var uid = user.uid;
    var providerData = user.providerData;
    // ...
  } else {
    // User is signed out.
    // ...
  }
});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 bojeil
Solution 2 akshay_sushir
Solution 3 Ronnie Royston