Блог

Я пытаюсь использовать firebase для аутентификации пользователя моего приложения react. Я уже создал приложение для Android и подключил его к этому магазину firebase.

Затем я создал новое веб-приложение из настроек firebase и попытался использовать его в приложении react, но оно не работает. Я перепробовал все, что можно найти в Интернете и в документах.

 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) =gt; {  this.setState({  [e.target.name]: e.target.value  })  }   login = () =gt; {  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 =gt; {  this.props.history.replace('/')  }).catch(err =gt; {  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 =gt; {  if (!querySnapshot.empty) {   } else {  this.state.email_error = "Not Allowed!";  this.setState({  show_progress: false,  })  }  })  }  };   render() {  return (  lt;Container maxWidth="sm"gt;  lt;Box bgcolor="" textAlign="center" padding="24px" marginTop="50px" bgcolor="white" boxShadow="2" borderRadius="12px"gt;  lt;img height="100px" width="100px" src={icon} alt="Soptle-icon" /gt;  lt;Typography variant="h5" color="textSecondary"gt;ADMINlt;/Typographygt;  lt;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"  /gt;  lt;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"  /gt;  lt;br /gt;  lt;br /gt;  {this.state.show_progress ?  lt;CircularProgress color="primary" thickness={4} size={24} /gt;  : null}  lt;br /gt;lt;br /gt;  lt;Button  variant="contained"  color="primary"  onClick={this.login}  fullWidth  gt;  LOGIN  lt;/Buttongt;  lt;/Boxgt;  lt;/Containergt;  )  } }  export default login  

Это ошибка, которую я получаю в строке firebase.auth().signInWithEmailAndPassword.
Firebase.auth() не является функцией. Я не уверен, что этот метод устарел(я не нашел никаких доказательств).

Ошибка неперехваченного типа: firebase__WEBPACK_ИМПОРТИРОВАН_МОДУЛЬ_3_.по умолчанию.аутентификация-это не функция