TypeError: Cannot read properties of undefined (reading 'getProvider') reactjs and firebas-CodePudding

im trying to let only registered users log in via firebase but my way isnt working

i got this error when i try to login

TypeError: Cannot read properties of undefined (reading 'getProvider')
_getProvider
node_modules/@firebase/app/dist/esm/index.esm2017.js:259
> 259 |   var heartbeatController = 
getAuth
node_modules/@firebase/auth/dist/esm2017/index-909bd8f4.js:17120
> 17120 |   var provider = _getProvider(app, 'auth');
toggleSignIn
src/components/login/Login.js:23
> 23 |   let myAuth = getAuth(auth)

here is my code:

import { signInWithEmailAndPassword, getAuth } from "firebase/auth";
import { auth } from "../auth/base";
    
const Login = () => {

  const [checked, setChecked] = useState(true);
  const [email, setEmail] = useState("");
  const [password] = useState("");
  const [values, setValues] = React.useState({
    password: "",
    showPassword: false,
  });

  function toggleSignIn(e) {
    e.preventDefault();
    // Sign in with email and pass.
    let myAuth = getAuth(auth);
    signInWithEmailAndPassword(myAuth, email, password)
      .then((response) => {
        console.log(response);
        // do something when sign in is successful
      })
      .catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        if (errorCode === "auth/wrong-password") {
          alert("Wrong password.");
        } else {
          alert(errorMessage);
        }
        console.log(error);
      });
  }

return (
    <div>
  <label
                  
                >
                  E-MAIL
                </label>
                <input
                 onChange={(e) => setEmail(e.target.value)}
                />

  <label
                  htmlFor="password"
                  className="font-manrope float-left block text-sm text-gray-700"
                >
                 Password
                </label>
                <InputonChange={(e) => {
              setPassword(e.target.value)
            }}

                />
</div>
</div>

here is where Auth is imported from:

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
*******};

const app = initializeApp(firebaseConfig);

export const auth = getAuth(app);

so what i want is to let only registered users to log in and none registeerd users will got an alert

I've been looking for a solution for a week but there is none

CodePudding user response：

The getAuth() takes a Firebase App Instance and not an auth instance itself. You can just pass the auth instance directly like this:

// remove this
// let myAuth = getAuth(auth); 

// pass auth directly
signInWithEmailAndPassword(auth, email, password)