Firebase Auth store firstName and lastName of user

Question

Dear Stackoverflow community,

We are using Firebase Auth for our authentication. For this we are offering social sign in with google and facebook as well as signing in with email and password. The following code shows the registration page for users that want to sign in with email and password later.

import { Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { auth } from 'firebase/app';


@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
  public emailAddress="";
  public firstName="";
  public lastName="";
  public password="";

  constructor(public afAuth: AngularFireAuth, private router: Router) {
  }

  ngOnInit() {
  }

  reset() {
    this.emailAddress=""
    this.password=""
    this.firstName=""
    this.lastName=""
  }

  register() {
    let emailAddress = this.emailAddress
    let password = this.password
    let firstName = this.firstName
    let lastName = this.lastName
    this.reset()
    console.log(emailAddress)
    console.log(password)
    auth().createUserWithEmailAndPassword(emailAddress, password).catch(function(error) {
      // Handle Errors here.
      var errorCode = error.code;
      console.log(errorCode)
      var errorMessage = error.message;
      console.log(errorMessage)
      // ...
    });
  }
}

The data for email, password, firstName, lastName is coming from an input field that exchanges data via data binding with the component.

<input type="email" [(ngModel)]="emailAddress" required>

When I try to get the users display name its only working when the user signed in using the social provider. Thats kind of obvious because he didn't set it when registering with email and password. Now i wanted to ask you if someone knows how to store the firstName and lastName in firebase so the user.displayName can be shown.

<div *ngIf="afAuth.user | async as user; else notAuth">
 Hello {{ user.displayName }}
</div>

After successfully creating the user you would need to manually update the displayName of that user. You can use updateProfile(). As on approach, you could use then() of createUserWithEmailAndPassword to execute updateProfile(). — Alexander Staroselsky

Ronnie Royston Ronnie Royston · Accepted Answer · 2019-01-10T17:37:42

Federated sign in operates differently from email/pwd sign in but in any case, the creation of the user in the firebase.auth() subsystem ("authentication" button/section in Firebase console) is seperate from storing data in a data store such as Realtime Database or Firestore. So, it's 2 seperate events/things going on here.

firstName and lastName are simply records that must be stored in the data store.

Best practise is to use the users uid from firebase.auth().currentUser.uid as the document id for a user document stored in a "users" collection in your data store.

.onAuthStateChanged is the proper client-side observer to listen to for capturing the uid of the signed in user. Observer is not synchronous - so the code to create/store additional user info in a user document must get fired from within the .onAuthStateChanged observer (after that fires you'll have a populated user object.

Firebase Auth store firstName and lastName of user

2 Answers