javascript - 获取 firebase.auth 不是函数错误

Question

我正在尝试使用 firebase 来验证我的反应应用程序用户。我已经创建了一个 android 应用程序并将其与这个 firebase 商店连接起来。

然后，我从 firebase 设置创建了一个新的网络应用程序，并尝试在反应应用程序中使用它，但它不起作用。我已经尝试了互联网和文档上所有可用的东西。

import * as firebase from 'firebase/app';
import 'firebase/auth'
import 'firebase/firestore'
    const firebaseConfig = {
      apiKey: "AIzaSyBqGXAk5PT6iW8j8s4T14mLIB_EQefVKNMPQ",
      authDomain: "xxx.firebaseapp.com",
      projectId: "xxx",
      storageBucket: "xxx.appspot.com",
      messagingSenderId: "5443201744",
      appId: "1:5443201744:web:2e24101ed8cac395b30cdDF5"
    };
    
firebase.initializeApp(firebaseConfig);
export default firebase;

这是我的登录文件

import { Button, CircularProgress, Container, TextField, Typography } from '@mui/material'
import { Box } from '@mui/system'
import React, { Component } from 'react'
import firebase from '../firebase'
import icon from '../media/icon.png'

class login extends Component {

  constructor(props) {
    super(props)

    this.state = {
      email: "",
      password: "",
      show_progress: false,
    }
    this.handleChange = this.handleChange.bind()
    this.login = this.login.bind()
  }

  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  login = () => {
    let valid_data = true;
    this.state.email_error = null;
    this.state.password_error = null;
    if (this.state.email === "") {
      this.state.email_error = "Required!";
      valid_data = false;
    }
    if (this.state.password === "") {
      this.state.password_error = "Required!";
      valid_data = false;
    }
    if (valid_data) {
      this.state.show_progress = true
    }
    this.setState({
      update: true
    })
    if (valid_data) {
      firebase.auth().signInWithEmailAndPassword(
        this.state.email,
        this.state.password
      ).then(res => {
        this.props.history.replace('/')
      }).catch(err => {
        if (err.code === 'auth/wrong-password') {
          this.state.password_error = "Incorrect Password!"
        }
        this.setState({
          show_progress: false,
        })
      })
      firebase
        .firestore()
        .collection("USERS")
        .where('email', '==', this.state.email)
        .where('IsAdmin', '==', true)
        .get()
        .then(querySnapshot => {
          if (!querySnapshot.empty) {

          } else {
            this.state.email_error = "Not Allowed!";
            this.setState({
              show_progress: false,
            })
          }
        })
    }
  };

  render() {
    return (
      <Container maxWidth="sm">
        <Box bgcolor="" textAlign="center" padding="24px" marginTop="50px" bgcolor="white" boxShadow="2" borderRadius="12px">
          <img height="100px" width="100px" src={icon} alt="Soptle-icon" />
          <Typography variant="h5" color="textSecondary">ADMIN</Typography>
          <TextField
            id="outlined-basic"
            label="Email"
            variant="outlined"
            size="small"
            name="email"
            onChange={this.handleChange}
            error={this.state.email_error != null}
            helperText={this.state.email_error}
            fullWidth
            margin="normal"
            color="secondary"
          />
          <TextField
            id="outlined-basic"
            label="Password"
            type="password"
            variant="outlined"
            name="password"
            onChange={this.handleChange}
            error={this.state.password_error != null}
            helperText={this.state.password_error}
            size="small"
            fullWidth
            margin="normal"
            color="secondary"
          />
          <br />
          <br />
          {this.state.show_progress ?
            <CircularProgress color="primary" thickness={4} size={24} />
            : null}
          <br /><br />
          <Button
            variant="contained"
            color="primary"
            onClick={this.login}
            fullWidth
          >
            LOGIN
          </Button>
        </Box>
      </Container>
    )
  }
}

export default login

这是我在 firebase.auth().signInWithEmailAndPassword 行遇到的错误。
Firebase.auth() 不是函数。我不确定这种方法是否已被弃用（我没有找到任何证据）

未捕获的类型错误：firebase__WEBPACK_IMPORTED_MODULE_3 _.default.auth 不是函数