title: Validate displayName firebase authentication
body: <p>I'm currently working with Firebase Authentication and absolutely loving it. The only problem right now is that I'm trying to validate the user's display name using my own rules. What I have tried is to use Cloud Firestore to store the display name and other related info such as address, etc. On registration, the user has to declare his/her display name as well as email and password. Somewhere in my code I'm doing this:</p>
  
  <pre><code>try {
      await firebase.auth().createUserWithEmailAndPassword(email.value, password.value);
  
      await firebase
        .firestore()
        .collection('/users')
        .doc(firebase.auth().currentUser.uid)
        .set({
          displayName: displayName.value,
        });
    } catch (err) {
      setIsLoading(false);
      setErrorText(err.message);
    }
  </code></pre>
  
  <p>The problem is that the app also redirects the user when he/she finishes his/her registration to the private area like so:</p>
  
  <pre><code>useEffect(() =&gt; {
    if (authUser) history.push('/dashboard');
  }, [authUser, history]);
  </code></pre>
  
  <p>(<code>authUser</code> is stored in Redux and is updated inside <code>onAuthStateChanged()</code>) The display name won't be validated because as soon as <code>firebase.auth().createUserWithEmailAndPassword()</code> resolves, <code>authUser</code> has a value and immediately redirects the user. It's kind of annoying and would love to know whether there's a better way of organising this bit of code. </p>
  
  <p>Any help is greatly appreciated!</p>
  
  <p><strong>Edit:</strong> Firestore rules:</p>
  
  <pre><code>service cloud.firestore {
    match /databases/{database}/documents {
      match /users/{documentId} {
          allow read: if request.auth != null
        allow write: if request.auth != null &amp;&amp;
          request.resource.data.displayName is string &amp;&amp; 
          request.resource.data.displayName.size() &gt;= 6 &amp;&amp; 
          request.resource.data.displayName.size() &lt;= 20
      }
    }
  }
  </code></pre>