How do I check for unique user name in firebase using react native?

Viewed 500

I have a simple app, where a user can register with email and password and later on they can change their username. This is my onSignUp method:

onSignUp() {
    const { email, password, userName } = this.state;

    this.validate({
      userName: { minlength: 3, maxlength: 20, required: true },
      email: { email: true, required: true },
      password: { minlength: 5, required: true },
    });
    firebase
      .auth()
      .createUserWithEmailAndPassword(email, password)
      .then((result) => {
        firebase
          .firestore()
          .collection("users")
          .doc(firebase.auth().currentUser.uid)
          .set({
            email,
            username,
          });
      })
      .catch((error) => {
        this.setState({ error: error.message });
      });
  }

Later on, I want to give the user opportunity to change their userName. How do I enforce unique userNames? One way I can think of, is first perform query, on firebase to check if such username exist? Is this the right way to do so? Another way (for which I read, but I dont understand fully) is by enforcing firebase rules? If so, how do I create new rule and how do I set unique usernames? Or should I do it both ways?

1 Answers

You can try this function:

const usersColRef = firebase.firestore().collection("users")

async function isUsernameUnique (username) {
  try {
    const nameDoc = await usersColRef.where("username", "==", username).get()
    return !nameDoc.exists
  } catch (e) {
    console.log(e)
    return false
  }
}

// Use it as follows (make sure this is in an async function)
if (await isUsernameUnique("myCoolName")) {
  //proceed
} else {
  alert("Name is already taken. Show some more creativity ;)")
}

I'd recommend storing a separate field called "nameLower" and then pass the entered username in lowercase in the where() query as it's case sensitive, i.e. .where("nameLower", "==", username.toLowerCase())

Related