Issue with empty displayName in Firebase when logging in using signInWithCredential

Question

I'm using Google Login and the user is prompted for their Google account email and password:

const auth = getAuth(app);
  const userCredentials = await signInWithCredential(
    auth,
    GoogleAuthProvider.credential(null, token)
  );
console.log(userCredentials.user)

I successfully obtained the user object, including email, photoURL, uid and other information, but displayName is empty. Is this a bug or expected result? I tried creating a new Gmail account, including name and nickname, but displayName was still empty. How do I get displayName?

Answer 1

I found a way to "hack" the issue about not being able to get displayName from signInWithCredential. Obviously, as said before, displayName is always null. However, if you use the google_sign_in library to sign in and inspect the GoogleSignInAccount object, you will see that you will have that display name. You can then log in to Firebase using the Google login credentials you used earlier. Here is the code I use:

try {
      GoogleSignIn _googleSignIn = GoogleSignIn();
      GoogleSignInAccount? googleSignInAccount = await _googleSignIn.signIn();
      if (googleSignInAccount == null) {
        print('error getting google sign in account');
        return;
      }

      GoogleSignInAuthentication googleSignInAuthentication = await googleSignInAccount!.authentication;
      AuthCredential credential = GoogleAuthProvider.credential(
          idToken: googleSignInAuthentication.idToken, accessToken: googleSignInAuthentication.accessToken);

      var result = (await _auth.signInWithCredential(credential));
      user = result.user;
      displayName = googleSignInAccount.displayName;
    } catch (e) {
      print(e);
    }

In the user variables you will have all the user related variables from firebase authentication like uid and from googleSignInAccount In you can get the display name. Hope this helps someone!

Answer 2

By default, the displayName attribute of User is empty. It depends on whether the user set displayName when creating or updating. But by default it is null.

If you want to update displayName somewhere, you can use the following method: updateProfile:

import { getAuth, updateProfile } from "firebase/auth";
const auth = getAuth(app);
const user = auth.currentUser;

await updateProfile(user, {
  displayName: "John Doe"
});

console.log(user.displayName);

If you are sure that you have displayName in your Google account, but it is not showing up in user.displayName, then you need to check what you passed to GoogleAuthProvider.credential( ) Is the idToken of the method null? Make sure you also pass a valid idToken.