title: TypeError: _firebase__WEBPACK_IMPORTED_MODULE_3__.default.auth is not a function login from authentication with firebase/react
body: <p>I am trying to make a simple login/register form authentication with firebase and react, but i keep getting this error when I try to load the page. &quot;TypeError:<em>firebase__WEBPACK_IMPORTED_MODULE_3</em>_.default.auth is not a function&quot;
  It's a simple app that contains 3 pages. first should be the login page and then if login details are correct, that should redirect you to the HomePage.
  my firebase.js file contains the usual config file. at the end i have export that file like this.</p>
  <pre><code>const fireDb = firebase.initializeApp(firebaseConfig);
  
  export default fireDb.database().ref();
  </code></pre>
  <p>I am not quite sure what am I missing here, maybe just a typo? maybe I should have import it some other modules? any help will be much appreciate.
  Down below my Login.js code.</p>
  <p>Login.js</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import &quot;./Login.css&quot;;
  import { useHistory } from &quot;react-router-dom&quot;;
  import fireDb from &quot;../firebase&quot;;
  
  function Login() {
    const history = useHistory();
    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 clearInputs = () =&gt; {
      setEmail(&quot;&quot;);
      setPassword(&quot;&quot;);
    };
  
    const clearErrors = () =&gt; {
      setEmailError(&quot;&quot;);
      setPasswordError(&quot;&quot;);
    };
  
    const handleLogin = () =&gt; {
      clearErrors();
      fireDb
        .auth()
        .signInWithEmailAndPassword(email, password)
        .then((auth) =&gt; {
          history.push(&quot;/HomePage&quot;);
        })
        .catch((err) =&gt; {
          // eslint-disable-next-line default-case
          switch (err.code) {
            case &quot;auth/invalid-email&quot;:
            case &quot;auth/user-disabled&quot;:
            case &quot;auth/user-not-found&quot;:
              setEmailError(err.message);
              break;
            case &quot;auth/wrong-password&quot;:
              setPasswordError(err.message);
              break;
          }
        });
    };
  
    const handleSignup = () =&gt; {
      clearErrors();
      fireDb
        .auth()
        .createUserWithEmailAndPassword(email, password)
        .then((auth) =&gt; {
          if (auth) {
            history.push(&quot;/HomePage&quot;);
          }
        })
        .catch((err) =&gt; {
          // eslint-disable-next-line default-case
          switch (err.code) {
            case &quot;auth/email-already-in-use&quot;:
            case &quot;auth/invalid-email&quot;:
              setEmailError(err.message);
              break;
            case &quot;auth/weak-password&quot;:
              setPasswordError(err.message);
              break;
          }
        });
    };
  
    const authListener = () =&gt; {
      fireDb.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;login__container&quot;&gt;
          &lt;h1&gt;Sign-in&lt;/h1&gt;
  
          &lt;form&gt;
            &lt;h5&gt;E-mail&lt;/h5&gt;
            &lt;input
              type=&quot;text&quot;
              autoFocus
              required
              value={email}
              onChange={(e) =&gt; setEmail(e.target.value)}
            /&gt;
            &lt;p className=&quot;errorMsg&quot;&gt;{emailError}&lt;/p&gt;
  
            &lt;h5&gt;Password&lt;/h5&gt;
            &lt;input
              type=&quot;password&quot;
              value={password}
              onChange={(e) =&gt; setPassword(e.target.value)}
            /&gt;
            &lt;p className=&quot;errorMsg&quot;&gt;{passwordError}&lt;/p&gt;
  
            &lt;button
              type=&quot;submit&quot;
              onClick={handleLogin}
              className=&quot;login__signInButton&quot;
            &gt;
              Sign In
            &lt;/button&gt;
          &lt;/form&gt;
  
          &lt;button onClick={handleSignup} className=&quot;login__registerButton&quot;&gt;
            Create your Account
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>