Question

我正在尝试弄清楚如何设置React Firebase Web应用。

我有一个firebase.js配置文件，其中包含以下所有方法。该文件中包含运行register方法的帮助程序，如下所示：

async register({email, password, name, beta, roleNominated}) {
          await this.auth.createUserWithEmailAndPassword(email, password);
          await this.auth.currentUser.updateProfile({
            displayName: name,
          })
          const uid = this.auth.currentUser.uid;
          await 
            this.firestore.collection("users").doc(uid).set({ 
            role: 'PENDING',
            createdAt: app.firestore.FieldValue.serverTimestamp(),

整个文件是：

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


const devConfig = {
  apiKey: process.env.REACT_APP_DEV_API_KEY,
  authDomain: process.env.REACT_APP_DEV_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_DEV_DATABASE_URL,
  projectId: process.env.REACT_APP_DEV_PROJECT_ID,
  storageBucket: process.env.REACT_APP_DEV_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_DEV_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_DEV_APP_ID

};


const prodConfig = {
  apiKey: process.env.REACT_APP_PROD_API_KEY,
  authDomain: process.env.REACT_APP_PROD_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_PROD_DATABASE_URL,
  projectId: process.env.REACT_APP_PROD_PROJECT_ID,
  storageBucket: process.env.REACT_APP_PROD_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_PROD_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_PROD_APP_ID
};


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





class Firebase {
  constructor() {
    app.initializeApp(config)
    this.firestore = app.firestore();
    this.auth = app.auth();

  }

  // helper functions for authentication and user management
  async register({email, password, name, beta, roleNominated}) {
      await this.auth.createUserWithEmailAndPassword(email, password);
      await this.auth.currentUser.updateProfile({
        displayName: name,
      })
      const uid = this.auth.currentUser.uid;
      await 
        this.firestore.collection("users").doc(uid).set({ 
        role: 'PENDING',
        createdAt: app.firestore.FieldValue.serverTimestamp(),
      });
      await this.auth.currentUser.sendEmailVerification();
  }

  login(email, password) {
    return this.auth.signInWithEmailAndPassword(email, password)
  };

  logout() {
    return this.auth.signOut();
  }

  getUser() {
    return  this.auth.currentUser();
  }

  authChange(user) {
      return this.auth.onAuthStateChanged(user);
  }

  sendEmailVerification = () =>
      this.getUser.sendEmailVerification({
      // url: process.env.REACT_APP_CONFIRMATION_EMAIL_REDIRECT
      url: process.env.NODE_ENV === 'production' ? process.env.REACT_APP_PROD_CONFIRMATION_EMAIL_REDIRECT : process.env.REACT_APP_DEV_CONFIRMATION_EMAIL_REDIRECT,
    });

};

export default new Firebase();

我有一个注册表格，其中包括：

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

然后，在onCreate中调用register：

const onCreate = async values => {
    try {
        await Firebase.register(values)
    } catch(err){
        console.error(err);
    }    
    setVisible(false);
  };

寄存器是从firebase.js文件导入的。

当我在本地环境中运行此程序时-我成功地在firebase auth模块中对用户进行了身份验证，并使用我在register方法中要求的值在users集合中创建了一个用户文档。

当我将其部署到生产环境中时，auth步骤成功，但是当尝试在用户集合中创建文档时会生成错误。错误消息显示：

TypeError：this.firestore.collection（...）。set不是函数

我见过this post，在部署可在开发中使用但在Firebase生产中失败的代码时也遇到了问题。这个特定问题似乎与ES6中日期的使用方式有关。

我在生产和开发项目中都有相同的安全规则，并且都具有：

match /users/{userId} {
      allow read;
      allow write;
    }

对于如何找出阻止Firestore用户集合在生产环境中创建文档的问题，是否有任何建议？

Firestore-函数在开发模式下有效，但在生产环境中不起作用

0 个答案: