Question

我试图弄清楚如何向使用Cloud Firestore而不是实时数据库的React应用添加身份验证。

我遵循了this tutorial，并使整个过程正常进行。然后-我要添加的更改是从实时数据库到Cloud Firestore的迁移-这对身份验证是否有效有所不同。我已经做了20个新项目来尝试完成这项工作-完全没有教程中的过程，而仅依靠firebase documentation。他们都不起作用。

当前，我有一个配置文件，其中：

import app from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import firestore from "firebase/firestore";

class Firebase {
  constructor() {
    app.initializeApp(config).firestore();
    this.auth = app.default.auth();
    // this.db = app.firebase.database()
    this.db = app.firestore();

  }

然后，我有一个带有此提交处理程序的表单：

  import Firebase from '../../../firebase.1';

handleCreate = () => {
    const { form } = this.formRef.props;
    form.validateFields((err, values) => {
      if (err) {
        return;
      };
    const payload = {
    // ...values,
    name: values.name,
    email: values.email,
    organisation: values.organisation,
    beta: values.beta,
    role: values.role,
    // createdAt: Firebase.FieldValue.serverTimestamp()
    }
    console.log("formvalues", payload);

    Firebase
    .auth()
    .createUserWithEmailAndPassword(values.email, values.password)
    console.log('Received values of form: ', values);
    Firebase
    .collection("users")
    .add(payload)
    // .then(docRef => {
    //     resetForm(initialValues);
    // })
    .then(e => this.setState({ modalShow: true }))


    form.resetFields();
    this.setState({ visible: false });
    this.props.history.push(DASHBOARD);

  });

    };

此刻，当我console.log（Firebase）时，我得到：

未捕获的ReferenceError：未定义Firebase

我看过this post，并在所有答案中都遵循了每个建议。

我尝试更改配置文件的用途：

this.auth = app.default.auth();

没关系。

当我尝试使用它时，出现错误消息：

TypeError: _firebase_1__WEBPACK_IMPORTED_MODULE_14__.default.auth is not a function

有人知道如何在Firebase上使用auth-在哪里有Cloud Firestore而不是实时数据库-太奇怪了，这对身份验证工具是否起作用产生了影响。

我已关闭时间戳记条目，因为我也无法通过Firestore记录该记录-但这又是一个问题。我现在真的想弄清楚如何使用身份验证工具。

下一个尝试

我试图更改firebase.js文件，以使配置现在看起来像这样：

import app from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';


const devConfig = {

};

const prodConfig = {
};

const config =
  process.env.NODE_ENV === 'production' ? prodConfig : devConfig;


const Firebase = app.initializeApp(config);
const database = app.firestore();
const auth = app.auth();
const settings = { timestampsInSnapshots: true };


export { Firebase, database as default, settings, auth };

现在，我收到一条错误消息：

TypeError：_components_firebase__WEBPACK_IMPORTED_MODULE_2 __。default 不是构造函数

我一直在搜索-什么是构造函数。最近几个小时内什么是webpack导入的模块编号参考等。我很想知道如何将这些错误消息转换为可以理解的内容。

仔细检查此确切的错误消息，表明导入和导出语句的生成方式有问题。 firebase.js中的新导出是不寻常的（但Stack Overflow上的其他人却尝试使用Firebase遇到问题）。对我来说这仍然是一个问号，因为我不明白错误消息的含义。

错误消息指向我的src / index.js的这一行

ReactDOM.render(

  <FirebaseContext.Provider value={new Firebase()}>

该行来自：

import FirebaseContext, { withFirebase } from './Context';
import Firebase from '../../firebase.1';
export default Firebase;
export { FirebaseContext, withFirebase };

该文件从以下位置导入：

import React from 'react';
const FirebaseContext = React.createContext(null);

export const withFirebase = Component => props => (
  <FirebaseContext.Consumer>
    {firebase => <Component {...props} firebase={firebase} />}
  </FirebaseContext.Consumer>
);
export default FirebaseContext;

如果有人对学习如何学习错误消息的含义有任何建议，那将是一个巨大的启示。目前我正在猜测。

Answer 1

我最近也刚刚完成了本教程，但是我简化了firebase文件。我只导出对初始化的firebase

的引用

import app from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

const config = {
  //...
};

const firebase = app.initializeApp(config);

export default firebase;

在我的项目中，我有：

//...
import firebase from '../../firebase';
//...

useEffect(() => {
  const listener = firebase
    .firestore()
    .collection(COLLECTIONS.USERS)
    .onSnapshot(querySnapshot => {
      setUsers(querySnapshot);
      querySnapshot.forEach(doc => console.log(doc.id, doc.data()));
    });

  return listener;
}, []);
//...

在此处查看我的Github项目-> https://github.com/henev/react-auth-with-firebase

使用Firebase和Cloud Firestore进行身份验证

1 个答案: