React 360 и Cloud Firestore: статус 400 при попытке записи в базу данных

Question

Я работаю над приложением React 360, которое требует от пользователя регистрации в режиме VR. Соответствующий код в моемSignUp.js файл выглядит следующим образом:

import fire from "../../Firebase";
import "firebase/firestore";
const db = fire.firestore();

export default class SignUp extends React.Component {
  constructor() {
    super();
    this.state = {
      userData: {
        name: "",
        email: "",
        password: "",
      },
    };
  }

  createUser = () => {
    fire
      .auth()
      .createUserWithEmailAndPassword(
        this.state.userData.email,
        this.state.userData.password
      )
      .then((user) => {
        console.log("Successfully created user!");
        db.collection("users")
          .doc(this.state.userData.email)
          .set({
            profile: {
              email: this.state.userData.email,
              name: this.state.userData.name,
            },
          })
          .then(() => console.log("Successfully added user data to db"))
          .catch((err) => console.log("Error adding data", err));
      })
      .catch((error) => {
        console.log("Error creating user!", error);
      });
  };
......
......

Мой Firebase.js код:

import * as firebase from "firebase";

var config = {
  apiKey: "my key...",
  authDomain: "...",
  databaseURL: "...",
  projectId: "...",
  storageBucket: "...",
  messagingSenderId: "...",
  appId: "...",
  measurementId: "...",
};

const fire = firebase.initializeApp(config);

export default fire;

Соответствующие зависимости в package.json:

  "dependencies": {
    "react": "16.13.1",
    "react-360": "~1.1.0",
    "firebase": "^7.14.0",
    "react-360-keyboard": "^1.0.2",
    "react-360-web": "~1.1.0",
    "react-native": "~0.55.4",
    "three": "^0.87.0"
  },
  "devDependencies": {
    "babel-jest": "^19.0.0",
    "babel-preset-react-native": "^1.9.1",
    "jest": "^19.0.2",
    "react-devtools": "^2.5.2",
    "react-test-renderer": "16.0.0",
    "xopen": "1.0.0"
  },

Что происходит: Результат выглядит следующим образом:

>>> Successfully created user!
>>> GET https://firestore.googleapis.com/... 400

Пользователи могут быть созданы и аутентифицированы, и я проверил, проверив наличие новых пользователей в консоли. Однако, когда я пытаюсь записать новые пользовательские данные в свою базу данных Firestore, я получаю статус 400. В Chrome это просто говорит:Your client has issued a malformed or illegal request.... При необходимости я могу рассказать больше о трассировке сети.

Что я пробовал:
я сделал отдельное приложение React (не React 360) с тем же кодом и учетными данными Firebase, что и выше, и я успешно могу писать в свою базу данных Firestore.

Мой вопрос:
как я могу изменить описанную выше реализацию для успешной записи в Firestore с помощью React 360?

Answer 1

Обновить:

Использование функций Firebase (с axios) для записи в базу данных вместо того, что я сделал выше, работает. НовыйcreateUser функция следующая:

  createUser = (userData) => {
    fire
      .auth()
      .createUserWithEmailAndPassword(userData.email, userData.password)
      .then(() => {
        console.log("Successfully created user: ", userData.email);
        axios
          .post(
            "https://...cloudfunctions.net/...",
            {
              name: userData.name,
              email: userData.email,
            }
          )
          .then((response) => {
            console.log("Successfully added user data to db!", response);
          })
          .catch((error) =>
            console.log("error occurred adding user to db", error)
          );
      })
      .catch((error) => {
        console.log("error creating user", error);
      });
  };

Функция Firbase:

exports.createNewUser = functions.https.onRequest((request, response) => {
  admin
    .firestore()
    .collection("users")
    .doc(request.body.email)
    .set({
      profile: {
        email: request.body.email,
        name: request.body.name,
      },
    })
    .then(() => {
      response.send("added user data to db!");
    })
    .catch(() => console.log("failed to add user data to db!"));
});

Я не знаю, почему это работает, а другой (более естественный) способ выше - нет. Я предполагаю, что это связано с React 360, но я, очевидно, открыт для предложений.