I want to be able to set a "name" for a user in Firebase when using .createUserWithEmailAndPassword

Question

VueJS, with Vuex and Firebase allow me to to register a user in my app easily but can I, AT THE SAME TIME, create one or more database refs for that specific user? I can set and get the user.email from the users list, but I'm stuck when it comes to create more fields in the actual database. Can you help me out? This is my sign-up component code:

<template>
  <section class="section">
    <h1>Sign-up</h1>

            <h2>Create an Account</h2>
          </div>
          <div class="card-content">
            <form v-on:submit.prevent>
              <div class="field">
                <label class="label">Name</label>
                <div class="control">
                  <input class="input" type="text" placeholder="Your Display Name" v-model="name">
                </div>
              </div>
              <div class="field">
                <label class="label">Email</label>
                <div class="control">
                  <input class="input" type="email" placeholder="joe@bloggs.com" v-model="email">
                </div>
              </div>
              <div class="field">
                <label class="label">Password</label>
                <div class="control">
                  <input class="input" type="password" v-model="password">
                </div>
              </div>
              <button type="submit" class="button is-primary" v-on:click="signUp">Sign-up</button>
            </form>
            <p>Already registered? <router-link to="/Sign-In">Log in</router-link></p>

  </section>
</template>

<script>
import Firebase from "firebase";
export default {
  data: function() {
    return {
      name: "",
      email: "",
      password: ""
    };
  },
  methods: {
    signUp: function() {
      Firebase.auth()
        .createUserWithEmailAndPassword(this.email, this.password)
        .then(
          user => {
            this.$router.replace('dashboard');
          },
          error => {
            alert(error.message);
          }
        );
    }

  }
};
</script>

I am assuming I could create another method but I really want to keep it as simple as possible.

Answer 1

You need to make an additional API call to set the displayName on the user:

firebase.auth()
    .createUserWithEmailAndPassword(this.email, this.password)
    .then(
      user => {
        return user.updateProfile({displayName: this.displayName});
      },
      error => {
        alert(error.message);
      }
    );