Firestore rules request.auth always null

Question

My firestore.rules always reject my request for missing or insufficient permissions, or so it says. I'm signing in with email and password prior to registering to my collection with .valueChanges() but it doesn't seem to work. I've used this configuration multiple times in the past without issues. Can you spot what I am missing here?

My firestore.rules look like this:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

Here a a simple component reproducing the problem:

import { Component } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable, of } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  showItems = false;
  items$: Observable<any[]>;

  constructor(
    private firestore: AngularFirestore,
    private auth: AngularFireAuth
  ) {
    this.items$ = firestore
      .collection('items')
      .valueChanges()
      .pipe(
        catchError((err) => {
          console.error(err);
          return of([]);
        })
      );
  }

  onAddItem() {
    return this.firestore
      .collection('items')
      .add({
        name: 'item',
      })
      .catch((err) => {
        console.error(err);
      });
  }

  onSignIn() {
    return this.auth
      .signInWithEmailAndPassword('[email protected]', 'timothee')
      .then(() => {
        console.log('logged in!');
      })
      .catch((err) => {
        console.error(err);
      });
  }

  onShowItems() {
    this.showItems = !this.showItems;
  }
}

With the corresponding template:

  <div>
    <button (click)="onSignIn()">Login</button>
    <button (click)="onShowItems()">Show Items</button>
  </div>
  <div *ngIf="showItems">
    <ng-container *ngIf="items$ | async as items; else loading">
      <div *ngFor="let item of items">
        {{ item.name }}
      </div>
    </ng-container>
    <ng-template #loading> Loading... </ng-template>
    <div>
      <button (click)="onAddItem()">Add Item</button>
    </div>
  </div>
</div>

My package.json looks like this:

"@angular/animations": "~12.0.3",
    "@angular/common": "~12.0.3",
    "@angular/compiler": "~12.0.3",
    "@angular/core": "~12.0.3",
    "@angular/fire": "^6.1.5",
    "firebase": "^7.0 || ^8.0"

Upon changing my firestore.rules to allow read, write: if true; I successfully get access to my database.

Thank you so much for having a look at it... Very much appreciated!

Answer 1

Downgrading Firebase back to version 8.6.1 solved the issue.

Watch https://github.com/firebase/firebase-js-sdk/issues/4932 to track the issue on Firebase JS SDK.