Auth Username (displayName) validation in Firebase

Question

I am making a chatting app and I am using firebase for authentication. Currently, two or more users are allowed to have the same username (displayName). I want to add validation to prevent this. Following is the signup function. I am using Vue.js, but it should be easy to understand for non-Vue users as well.

methods: {
    signup(e) {
      e.preventDefault();
      firebase
        .auth()
        .createUserWithEmailAndPassword(this.email, this.password)
        .then((result) => {
          result.user.updateProfile({
            displayName: this.username,
          });
          this.email = "";
          this.password = "";
          this.$emit("closemodal");
        })
        .catch((error) => {
          this.error = error.message;
        });
    },
  },

Thank you in advance.

Answer 1

I would not recommend to store a username in the displayName of the user. The validation for unique usernames would be to hard in that scenario.

I would rather recommend to store the username in one of the Firebase databases and use a cloud function or frontend code to update then the displayName. At least the validation should happen on the databases because you can write the rules in a way that a dupplicate username would be impossible.

Here is a link where you can find various solutions for that.