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

Question

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

我遵循了本教程并让整个工作正常进行。 然后 - 我尝试添加的更改是从实时数据库转移到 Cloud Firestore - 这对身份验证是否有效产生影响。 我已经制作了 20 个新项目来尝试完成这项工作 - 完全没有教程中的过程，只是依赖于firebase 文档。 他们都没有工作。

目前，我有一个配置文件：

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.auth = app.default.auth();

没有什么不同的。

当我尝试使用它时，我收到一条错误消息：

TypeError: _firebase_1__WEBPACK_IMPORTED_MODULE_14__.default.auth is not a function

有谁知道如何将 auth 与 firebase 一起使用 - 那里有一个 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 };

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

类型错误：_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