title: react login and sign up pages with auth using firebase
body: <p>I am building <code>Login</code> and <code>Signup</code> pages using react and auth by using firebase.</p>
  <p>The problem is that after <code>successful login and signup</code>, the application is NOT navigating the user to <code>landing page</code>.</p>
  <p>I think there is something wrong with my <code>handleLogin and handleSignup</code> methods but, I'm to pinpoint it out.</p>
  <p>To Login: use -&gt; email: test@gmail.com and password: 123456</p>
  <p>Also, there are no errors in the console and I get 200 response from firebase.</p>
  <p>This is <code>firebase.config.js</code></p>
  <pre><code>import firebase from &quot;firebase&quot;;
  
  var firebaseConfig = {
    apiKey: &quot;MY_KEY&quot;,
    authDomain: &quot;login-and-push-notification.firebaseapp.com&quot;,
    projectId: &quot;login-and-push-notification&quot;,
    storageBucket: &quot;login-and-push-notification.appspot.com&quot;,
    messagingSenderId: &quot;84083076850&quot;,
    appId: &quot;1:84083076850:web:3e9febc1341d8f7b036a6b&quot;,
  };
  // Initialize Firebase
  const fb = firebase.initializeApp(firebaseConfig);
  
  export default FB;
  </code></pre>
  <p>This is <code>Login.js</code></p>
  <pre><code>const Login = (props) =&gt; {
    const [user, setUser] = useState(&quot;&quot;);
    const [email, setEmail] = useState(&quot;&quot;);
    const [password, setPassword] = useState(&quot;&quot;);
    const [emailError, setEmailError] = useState(&quot;&quot;);
    const [passwordError, setPasswordError] = useState(&quot;&quot;);
    const [hasAccount, setHasAccount] = useState(false);
  
    const clearInputs = () =&gt; {
      setEmail(&quot;&quot;);
      setPassword(&quot;&quot;);
    };
  
    const clearErrors = () =&gt; {
      setEmailError(&quot;&quot;);
      setPasswordError(&quot;&quot;);
    };
  
    const handleLogin = () =&gt; {
      clearErrors();
      fb.auth()
        .signInWithEmailAndPassword(email, password)
        .then((user) =&gt; {
          console.log(&quot;user&quot;, user);
          props.navigation.push(&quot;/Landing&quot;);
        })
        .catch((error) =&gt; {
          switch (error.code) {
            case &quot;auth/invalid-email&quot;:
            case &quot;auth/user-disabled&quot;:
            case &quot;auth/user-not-found&quot;:
              setEmailError(error.message);
              break;
            case &quot;auth/wrong-password&quot;:
              setPasswordError(error.message);
              break;
          }
        });
    };
    const handleSignup = () =&gt; {
      clearErrors();
      fb.auth()
        .createUserWithEmailAndPassword(email, password)
        .catch((error) =&gt; {
          switch (error.code) {
            case &quot;auth/email-already-in-use&quot;:
            case &quot;auth/invalid-email&quot;:
              setEmailError(error.message);
              break;
            case &quot;auth/weak-password&quot;:
              setPasswordError(error.message);
              break;
          }
        });
    };
  
    const authListener = () =&gt; {
      fb.auth().onAuthStateChanged((user) =&gt; {
        if (user) {
          clearInputs();
          setUser(user);
        } else {
          setUser(&quot;&quot;);
        }
      });
    };
  
    useEffect(() =&gt; {
      authListener();
    }, []);
  
    return (
      &lt;div className=&quot;login&quot;&gt;
        &lt;div className=&quot;loginContainer&quot;&gt;
          &lt;label&gt;Username&lt;/label&gt;
          &lt;input
            type=&quot;text&quot;
            value={email}
            autoFocus
            required
            onChange={(e) =&gt; setEmail(e.target.value)}
          /&gt;
          &lt;p className=&quot;errorMsg&quot;&gt;{emailError}&lt;/p&gt;
          &lt;label&gt;Password&lt;/label&gt;
          &lt;input
            type=&quot;password&quot;
            value={password}
            required
            onChange={(e) =&gt; setPassword(e.target.value)}
          /&gt;
          &lt;p className=&quot;errorMsg&quot;&gt;{passwordError}&lt;/p&gt;
          &lt;div className=&quot;btnContainer&quot;&gt;
            {hasAccount ? (
              &lt;span&gt;
                &lt;button onClick={handleLogin} type=&quot;submit&quot;&gt;
                  Sign In
                &lt;/button&gt;
                &lt;p&gt;
                  Don't have an account?
                  &lt;span onClick={() =&gt; setHasAccount(!hasAccount)}&gt;Sign up&lt;/span&gt;
                &lt;/p&gt;
              &lt;/span&gt;
            ) : (
              &lt;&gt;
                &lt;button onClick={handleSignup} type=&quot;submit&quot;&gt;
                  Sign Up
                &lt;/button&gt;
                &lt;p&gt;
                  Have an account?
                  &lt;span onClick={() =&gt; setHasAccount(!hasAccount)}&gt;Sign in&lt;/span&gt;
                &lt;/p&gt;
              &lt;/&gt;
            )}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p>And then I'm importing the <code>Login</code> component into the <code>Home</code> component and passing props.</p>
  <pre><code>import React from &quot;react&quot;;
  import Login from &quot;../components/Login&quot;;
  import Landing from &quot;../Pages/Landing&quot;;
  
  function Home(props) {
    return (
      &lt;div&gt;{props.user ? &lt;Landing {...props} /&gt; : &lt;Login {...props} /&gt;}&lt;/div&gt;
    );
  }
  
  export default Home;
  </code></pre>