TypeError: _firebase__WEBPACK_IMPORTED_MODULE_3__.default.auth is not a function login from authentication with firebase/react

Question

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

const fireDb = firebase.initializeApp(firebaseConfig);

export default fireDb.database().ref();

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.

Login.js

import React, { useState, useEffect } from "react";
import "./Login.css";
import { useHistory } from "react-router-dom";
import fireDb from "../firebase";

function Login() {
  const history = useHistory();
  const [user, setUser] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [emailError, setEmailError] = useState("");
  const [passwordError, setPasswordError] = useState("");

  const clearInputs = () => {
    setEmail("");
    setPassword("");
  };

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

  const handleLogin = () => {
    clearErrors();
    fireDb
      .auth()
      .signInWithEmailAndPassword(email, password)
      .then((auth) => {
        history.push("/HomePage");
      })
      .catch((err) => {
        // eslint-disable-next-line default-case
        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();
    fireDb
      .auth()
      .createUserWithEmailAndPassword(email, password)
      .then((auth) => {
        if (auth) {
          history.push("/HomePage");
        }
      })
      .catch((err) => {
        // eslint-disable-next-line default-case
        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 authListener = () => {
    fireDb.auth().onAuthStateChanged((user) => {
      if (user) {
        clearInputs();
        setUser(user);
      } else {
        setUser("");
      }
    });
  };

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

  return (
    <div className="login">
      <div className="login__container">
        <h1>Sign-in</h1>

        <form>
          <h5>E-mail</h5>
          <input
            type="text"
            autoFocus
            required
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
          <p className="errorMsg">{emailError}</p>

          <h5>Password</h5>
          <input
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
          <p className="errorMsg">{passwordError}</p>

          <button
            type="submit"
            onClick={handleLogin}
            className="login__signInButton"
          >
            Sign In
          </button>
        </form>

        <button onClick={handleSignup} className="login__registerButton">
          Create your Account
        </button>
      </div>
    </div>
  );
}

Answer 1

this worked for me :

import firebase from 'firebase/compat/app'
import "firebase/compat/auth";
...

onSignUp(){

    const { email , password , name} = this.state;
    console.log(email);
    firebase.auth().createUserWithEmailAndPassword(email , password)
    .then((result)=>{
        console.log(result)
    })
    .catch((error) => {
        console.log(error)
    })
    
 }