title: Cloud firestore collection not showing up in cloud firestore's database
body: <p>I am following the tutorial <a href="https://www.youtube.com/watch?v=6XTRElVAZ9Y&amp;t=1468s" rel="nofollow noreferrer">https://www.youtube.com/watch?v=6XTRElVAZ9Y&amp;t=1468s</a> for google drive clone. At 24:00, he created a database in cloud firestore and when he added the folder, it showed up in the cloud firestore. I also did the same but the collection was not reflected in the database. Authentication and data of new registered users is working fine in firebase. But when I try to add a collection, it does not show up.</p>
  <p>This is the firebase.js file.</p>
  <pre><code>import firebase from &quot;firebase/app&quot;;
  import &quot;firebase/auth&quot;;
  import &quot;firebase/firestore&quot;;
  
  const app = firebase.initializeApp({
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID
  });
  
  const firestore = app.firestore();
  export const database = {
  folders: firestore.collection(&quot;folders&quot;),
  files: firestore.collection(&quot;files&quot;)
  };
  export const auth = app.auth();
  export default app;
  </code></pre>
  <p>This is the file where the adding of folder takes place AddFolder.js</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import { Button, Modal, Form } from &quot;react-bootstrap&quot;;
  import { FontAwesomeIcon } from &quot;@fortawesome/react-fontawesome&quot;;
  import { faFolderPlus } from &quot;@fortawesome/free-solid-svg-icons&quot;;
  import { database } from &quot;../../firebase&quot;;
  import { useAuth } from &quot;../../context/AuthContext&quot;;
  
  export default function AddFolderButton({ currentFolder }) {
  const [open, setOpen] = useState(false);
  const [name, setName] = useState(&quot;&quot;);
  const { currentUser } = useAuth();
  
  function openModal() {
  setOpen(true);
  }
  
  function closeModal() {
  setOpen(false);
  }
  //                     This is the function where collection is added to firebase
  function handleSubmit(e) {
  e.preventDefault();
  //           Below is the add part. I also tried to make it await database.folders.add({...})
  database.folders           
    .add({
      name: name
    })
    .catch(function (error) {
      console.error(
        &quot;There was an error uploading a file to Cloud Storage:&quot;,
        error
      );
    });
  setName(&quot;&quot;);
  closeModal();
  }
  
  return (
   &lt;&gt;
    &lt;Button onClick={openModal} variant=&quot;outline-success&quot; size=&quot;sm&quot;&gt;
      &lt;FontAwesomeIcon icon={faFolderPlus} /&gt;
    &lt;/Button&gt;
    &lt;Modal show={open} onHide={closeModal}&gt;
      &lt;Form onSubmit={handleSubmit}&gt;
        &lt;Modal.Body&gt;
          &lt;Form.Group&gt;
            &lt;Form.Label&gt;Folder Name&lt;/Form.Label&gt;
            &lt;Form.Control
              type=&quot;text&quot;
              required
              value={name}
              onChange={(e) =&gt; setName(e.target.value)}
            /&gt;
          &lt;/Form.Group&gt;
        &lt;/Modal.Body&gt;
        &lt;Modal.Footer&gt;
          &lt;Button variant=&quot;secondary&quot; onClick={closeModal}&gt;
            Close
          &lt;/Button&gt;
          &lt;Button variant=&quot;success&quot; type=&quot;submit&quot;&gt;
            Add Folder
          &lt;/Button&gt;
        &lt;/Modal.Footer&gt;
      &lt;/Form&gt;
     &lt;/Modal&gt;
    &lt;/&gt;
   );
   }
  </code></pre>
  <p>The collection is not getting added to the cloud firestore.I tried creating a new project in firebase and also used the new credentials of the new project in .env file. But this didnt work. When i tried to await the handleSubmit() function's database.folder.add(....) part and console logged something after the add part, nothing was logged. It took a long time after add part was trigger and nothing was logged when async and await were used.</p>
  <p>Then I cloned the youtuber's repository from github and tried to work with his completed project after adding credentials in .env file but it didnt work either. Please help resolved this issue.</p>
  <p>Since I am using CodesandboxIO, anyone who was to see the project I am doing can visit using <a href="https://codesandbox.io/s/divine-leaf-twc2r?file=/src/components/google-drive/" rel="nofollow noreferrer">https://codesandbox.io/s/divine-leaf-twc2r?file=/src/components/google-drive/</a></p>
  <p>EDIT 1 :
  This is the schema of firestore.
  <a href="https://i.stack.imgur.com/w7eMC.jpg" rel="nofollow noreferrer">Image Link of Schema</a></p>
  <p>This is the code I am using for getting collection from firestore</p>
  <pre><code>function handleSubmit(e) {
      e.preventDefault();
      db.collection(&quot;folders&quot;)
        .get()
        .then((snapshots) =&gt; {
          snapshots.docs.forEach((doc) =&gt; {
            console.log(doc);
          });
        });
      setName(&quot;&quot;);
      closeModal();
    }
  </code></pre>
  <p>I tried to turn off firewall in my PC. But when i click the button to get for the 1st time, it shows the Permission denied error mentioned in my 1st comment and when I click again, it gives an empty array. I have checked the rules in firestore, I had already set them to always true.</p>