title: TypeError: .default.auth.signout is not a function in REACT and Firebase
body: <p>I can see a lot of the same error questions on StackOverflow but Mostly are not answered and the answered one doesn't really help me. Please help to debug out this error.</p>
  <p>I am implementing a Login/Signup in my REACT project using firebase. The code Compiles Successfully but shows an error in the browser.
  The Error is
  <em><strong>TypeError: <em>fire__WEBPACK_IMPORTED_MODULE_10</em>_.default.auth.signout is not a function</strong></em></p>
  <p>Here is My App.js (ignore the commented part as its part of my project but not related to this)</p>
  <pre><code>import React, {useState, useEffect} from 'react';
  import '../node_modules/bootstrap/dist/css/bootstrap.css';
  /*import Home from &quot;./components/pages/Home&quot;
  import About from './components/pages/About';
  import Contact from './components/pages/Contact';*/
  import Navbar from './components/layout/Navbar';
  import {BrowserRouter as Router, Route, Switch}from 'react-router-dom';
  /*import Error from './components/pages/Error';
  import AddBooking from './components/Bookings/AddBooking';
  import EditBooking from './components/Bookings/EditBooking';
  import ViewBooking from './components/Bookings/ViewBooking';
  import Bookings from './components/pages/Bookings';*/
  import Login from './components/pages/login';
  import fire from './fire';
  
  function App() {
  
      const[user, setUser]= useState('');
      const[email, setEmail]= useState('');
      const[password, setPassword]= useState('');
      const[emailError, setEmailError]= useState('');
      const[passwordError, setPasswordError]= useState('');
      const[hasAccount, setHasAccount]= useState(false);
  
      const clearInputs=()=&gt;{
          setEmail('');
          setPassword('');
      }
  
      const clearErrors=()=&gt;{
          setEmailError('');
          setPasswordError('');
      }
  
      const handleLogin=()=&gt;{
          clearErrors();
          fire
          .auth()
          .signInWithEmailAndPassword(email,password)
          .catch((err)=&gt;{                             
              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();
          fire
          .auth()
          .createUserWithEmailAndPassword(email,password)
          .catch((err)=&gt;{                             
              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 handleLogout=()=&gt;{
          fire.auth.signout();
      };
  
      const authListener=()=&gt;{
          fire.auth().onAuthStateChanged(user=&gt;{
              if(user){
                  clearInputs();
                  setUser(user);
              }else{
                  setUser('');
              }
          });
      };
  
      useEffect(()=&gt;{
          authListener();
      }, []);
  
    
    return (
      &lt;Router&gt;
      {user?(
          //&lt;Router&gt;
          &lt;Navbar handleLogout={handleLogout}/&gt;
          /*&lt;Switch&gt;
              &lt;Route exact path=&quot;/&quot; component={Home}/&gt;
              &lt;Route exact path=&quot;/Bookings&quot; component={Bookings}/&gt;
              &lt;Route exact path=&quot;/about&quot; component={About}/&gt;
              &lt;Route exact path=&quot;/contact&quot; component={Contact}/&gt;
              &lt;Route exact path=&quot;/Bookings/add&quot; component={AddBooking}/&gt;
              &lt;Route exact path=&quot;/Bookings/edit/:id&quot; component={EditBooking}/&gt;
              &lt;Route exact path=&quot;/Bookings/view/:id&quot; component={ViewBooking}/&gt;
              &lt;Route component={Error}/&gt;
          &lt;/Switch&gt;
          &lt;/Router&gt;*/
      ):(
          &lt;Login 
          email={email} 
          setEmail={setEmail}
          password={password}
          setPassword={setPassword}
          handleLogin={handleLogin}
          handleSignup={handleSignup}
          hasAccount={hasAccount}
          setHasAccount={setHasAccount}
          emailError={emailError}
          passwordError={passwordError}
          /&gt;
      )}
      &lt;/Router&gt;
    );
  }
  
  export default App;
  </code></pre>