时间戳

首页 > 解决方案 > TypeError: _firebase__WEBPACK_IMPORTED_MODULE_3__.default.auth 不是使用 firebase/react 进行身份验证的函数登录

reactjs - TypeError: _firebase__WEBPACK_IMPORTED_MODULE_3__.default.auth 不是使用 firebase/react 进行身份验证的函数登录

问题描述

我正在尝试使用 firebase 进行简单的登录/注册表单身份验证并做出反应，但是当我尝试加载页面时，我不断收到此错误。“TypeError: firebase__WEBPACK_IMPORTED_MODULE_3 _.default.auth is not a function” 这是一个包含 3 个页面的简单应用程序。首先应该是登录页面，然后如果登录详细信息正确，则应该将您重定向到主页。我的 firebase.js 文件包含通常的配置文件。最后，我像这样导出该文件。

const fireDb = firebase.initializeApp(firebaseConfig);

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

我不太确定我在这里错过了什么，也许只是一个错字？也许我应该导入一些其他模块？任何帮助将不胜感激。在我的 Login.js 代码下方。

登录.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>
  );
}

标签： reactjsfirebasefirebase-authentication

解决方案

既然你这样做：

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

你实际上是在打电话：

fireDb.database().ref().auth()

如果您检查参考文档，您会注意到DatabaseReference没有auth()方法。

FirebaseApp我建议改为导出对象：

export default fireDb;

然后导入它：

import firebase from "../firebase";

和：

const fireDb = firebase.database().ref();
const fireAuth = firebase.auth();

或者，您可以保留当前的导出和导入并FirebaseAuth使用：

fireDb
  .app
  .auth()
  .signInWithEmailAndPassword(email, password)
  ...

推荐阅读