title: How to send Firestore request with request.auth != null with Firebase authentication?
body: <p>I'm trying to allow users to read and write to my Firestore <code>videoFeedback</code> collection from a web app and getting a "Missing or insufficient permissions" error. How do I make sure that my request to Firestore is sent with the correct user authentication (or any authentication at all)? </p>
  
  <p>This is for an Angular app using Firestore and anonymous Firebase authentication. I have already set up an anonymous user. I would like to add a document to my <code>videoFeedback</code> collection from the web app, not the backend. I've already read the official pages on Firestore docs: 
  <a href="https://firebase.google.com/docs/auth/web/anonymous-auth" rel="noreferrer">Authenticate Anonymously with Firebase</a>
  <a href="https://firebase.google.com/docs/auth/web/start" rel="noreferrer">Get Started with Firebase Authentication on Websites</a>
  and many more, plus read all SO questions on this topic. </p>
  
  <p>My Firestore object is already set up correctly (I know because I can read/write to the DB if my security rules don't require a non-null request.auth). </p>
  
  <p>Your help is <em>greatly</em> appreciated. </p>
  
  <pre class="lang-js prettyprint-override"><code>private db: AngularFirestore;
  
  public initFirebaseApp() {
      firebase.initializeApp(this.firebaseConfig);
  }
  
  public anonymousAuth() {
      firebase.auth().signInAnonymously().catch(function(error) {
          console.log("ERROR: " + String(error.errorCode) + 
              " " + String(error.errorMessage))
      });
      console.log("User is authorized");
  }
  
  this.initFirebaseApp();
  this.anonymousAuth();
  
  let date_created = new Date().toLocaleString();
  let feedback = {
      "feedback": "FAKE_FEEDBACK", 
      "rating": -1,
      'created': date_created,
  };
  
  firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
          console.log(user.uid)
          this.db.collection('videoFeedback').add(feedback);
       }
  }.bind(this));
  </code></pre>
  
  <p>And my security rules look like this </p>
  
  <pre><code>service cloud.firestore {
    match /databases/{database}/documents {
      match /videoFeedback/{feedback} {
          allow read, write: if request.auth != null;
      }
    }
  }
  </code></pre>
  
  <p>With this configuration, I get the following output: </p>
  
  <pre><code>User is authorized
  JAZe9dsIMtdyNe2dhndleIcn9nd2
  ERROR Error: Uncaught (in promise): FirebaseError: [code=permission-denied]: Missing or insufficient permissions.
  FirebaseError: Missing or insufficient permissions.
      at new FirestoreError (index.cjs.js:352)
      at index.cjs.js:7274
      at Y.&lt;anonymous&gt; (index.cjs.js:7219)
  ...
  </code></pre>
  
  <p>When I replace my security rule with </p>
  
  <pre><code>service cloud.firestore {
    match /databases/{database}/documents {
      match /videoFeedback/{feedback} {
          allow read, write;
      }
    }
  }
  </code></pre>
  
  <p>I get the same, minus the permissions error. This makes me think that it's an issue with the way my request is being sent, not with the data I'm sending or with the setup of the Firestore database. </p>
  
  <pre><code>User is authorized
  JAZe9dsIMtdyNe2dhndleIcn9nd2 (or some random string)
  </code></pre>
  
  <p>What do I need to do to send my request with a non-null request.auth.uid?</p>