title: Use custom username with onAuthStateChanged
body: <p>First, I register my customer with:</p>
  <pre class="lang-js prettyprint-override"><code>const register = (e) =&gt; {
      e.preventDefault();
  
      auth
        .createUserWithEmailAndPassword(email, password)
        .then((auth) =&gt; {
          // The username will be created here
          db.collection(&quot;users&quot;)
            .doc(username)
            .collection(&quot;profile&quot;)
            .doc(username)
            .set({
              username: username,
            });
          // it successfully created a new user with email and password
          if (auth) {
            history.push(&quot;/dashboard&quot;);
          }
        })
        .catch((error) =&gt; alert(error.message));
    };
  </code></pre>
  <p>Then, in my <code>App.js</code> I dispatch <code>SET_USER</code> and I try to set my <code>user</code> value in my reducer to <code>username</code> that was set in my database.</p>
  <pre class="lang-js prettyprint-override"><code>function App() {
    const [{ user }, dispatch] = useStateValue();
    useEffect(() =&gt; {
      // will only run once when the app component loads...
  
      auth.onAuthStateChanged((authUser) =&gt; {
        console.log(&quot;THE USER IS &gt;&gt;&gt; &quot;, authUser);
  
        if (authUser) {
          // the user just logged in / the user was logged in
  
          dispatch({
            type: &quot;SET_USER&quot;,
            user: authUser,
          });
        } else {
          // the user is logged out
          dispatch({
            type: &quot;SET_USER&quot;,
            user: null,
          });
        }
      });
    }, []);
  </code></pre>
  <p>However, I am unsure how I should pull the username from firebase and dispatch it as the <code>user</code> value.</p>