TypeError: .default.auth.signout is not a function in REACT and Firebase

Question

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.

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 TypeError: fire__WEBPACK_IMPORTED_MODULE_10_.default.auth.signout is not a function

Here is My App.js (ignore the commented part as its part of my project but not related to this)

import React, {useState, useEffect} from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.css';
/*import Home from "./components/pages/Home"
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=()=>{
        setEmail('');
        setPassword('');
    }

    const clearErrors=()=>{
        setEmailError('');
        setPasswordError('');
    }

    const handleLogin=()=>{
        clearErrors();
        fire
        .auth()
        .signInWithEmailAndPassword(email,password)
        .catch((err)=>{                             
            switch(err.code){
                case "auth/invalid-email":
                case "auth/user-disabled":
                case "auth/user-not-found":
                    setEmailError(err.message);
                    break;
                case "auth/wrong-password":
                    setPasswordError(err.message);
                    break;
            }
        });
    };

    const handleSignup=()=>{
        clearErrors();
        fire
        .auth()
        .createUserWithEmailAndPassword(email,password)
        .catch((err)=>{                             
            switch(err.code){
                case "auth/email-already-in-use":
                case "auth/invalid-email":
                    setEmailError(err.message);
                    break;
                case "auth/weak-password":
                    setPasswordError(err.message);
                    break;
            }
        });
    };

    const handleLogout=()=>{
        fire.auth.signout();
    };

    const authListener=()=>{
        fire.auth().onAuthStateChanged(user=>{
            if(user){
                clearInputs();
                setUser(user);
            }else{
                setUser('');
            }
        });
    };

    useEffect(()=>{
        authListener();
    }, []);

  
  return (
    <Router>
    {user?(
        //<Router>
        <Navbar handleLogout={handleLogout}/>
        /*<Switch>
            <Route exact path="/" component={Home}/>
            <Route exact path="/Bookings" component={Bookings}/>
            <Route exact path="/about" component={About}/>
            <Route exact path="/contact" component={Contact}/>
            <Route exact path="/Bookings/add" component={AddBooking}/>
            <Route exact path="/Bookings/edit/:id" component={EditBooking}/>
            <Route exact path="/Bookings/view/:id" component={ViewBooking}/>
            <Route component={Error}/>
        </Switch>
        </Router>*/
    ):(
        <Login 
        email={email} 
        setEmail={setEmail}
        password={password}
        setPassword={setPassword}
        handleLogin={handleLogin}
        handleSignup={handleSignup}
        hasAccount={hasAccount}
        setHasAccount={setHasAccount}
        emailError={emailError}
        passwordError={passwordError}
        />
    )}
    </Router>
  );
}

export default App;

Answer 1

I am seeing your handleLogout function has typo?

Your code

const handleLogout=()=>{
    fire.auth.signout();
};

You might need to call auth function itself as you do in other part of code, e.g. handleLogIn function, This would fix your signout error unless you don't have other issue in your code,

const handleLogout=()=>{
    fire.auth().signOut();
};