title: async/await + try/catch not working as spected when using a .then() function
body: <p>I'm working on a project using react, and i need to redirect to a logged in page if register is successful, so I added a state called redirect, empty when you access the register form that I need to set so the page can redirect, since I use a handler, this is the relevant component code:</p>
  <pre><code>    class Registro extends Component {
          constructor() {
              super();
              this.state = {
                  email: &quot;&quot;,
                  password: &quot;&quot;,
                  passwordConfirm: &quot;&quot;,
                  userName: &quot;&quot;,
                  redirect: &quot;&quot;,
              };
          }
      handleRedirect = () =&gt; {
          this.setState({ redirect: &quot;/aplicacion&quot; });
          console.log(this.state);
      }
    render() {
          if (this.state.redirect) {
              return &lt;Navigate to={this.state.redirect} /&gt;
            }
          
          return (
            &lt;button id=&quot;submit&quot; className=&quot;btn btn-outline-accesible col-3 m-2 mt-3&quot; 
                   onClick={() =&gt; {
                   registerWithEmailAndPassword(this.state.userName, this.state.email, this.state.password).then(
                        handleRedirect() 
                   )}}&gt;Acceder&lt;/button&gt;
  </code></pre>
  <p>And the register with email and password is this function:</p>
  <pre><code>    const registerWithEmailAndPassword = async (name, email, password) =&gt; {
      try {
          console.log(name, email, password)
        const res = await createUserWithEmailAndPassword(auth, email, password);
        const user = res.user;
        await setDoc(doc(db, &quot;users&quot;, email), {
          email: email,
          nombre: name,
          pass: password
        });
        alert(&quot;Registro completado con éxito&quot;)
      } catch (err) {
        console.error(err);
        alert(err.message);
      }
    };
  </code></pre>
  <p>The expected outcome is that if the register is successful, the page reloads and you can go on your merry way, but if there's an error, the page won't load and the error will be alerted to the user. What is happening is that in the case there's an error, the page redirects you and then shows you an alert with the error data.</p>
  <p>Thanks for reading and pondering this with me.</p>