React 360 and Cloud Firestore: status 400 when trying to write to database

Question

I'm working on a React 360 app which requires a user to sign up while in VR mode. The relevant code in my SignUp.js file is as follows:

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);
      });
  };
......
......

My Firebase.js code:

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;

Relevant dependencies in 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"
  },

What's happening: The output is as follows:

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

Users can be created and authenticated, and I've verified by checking for new users in the console. However, when I try to write the new user data to my Firestore db, I get a status 400. In Chrome, it just says: Your client has issued a malformed or illegal request.... I can share more about the network trace if necessary.

What I've tried:
I made a separate React app (not React 360) with the same code and Firebase credentials as above, and I'm successfully able to write to my Firestore db.

My question:
How can I change my above implementation to successfully write to Firestore using React 360?

Answer 1

Update:

Using Firebase Functions (with axios) to write to the database instead of what I did above works. The new createUser function is as follows:

  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 Function:

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!"));
});

I don't know why this works and the other (more natural) way above doesn't. My guess would be that it's React 360 related but I'm obviously open to suggestions.