@firebase/firestore: Firestore (9.0.0): Could not reach Cloud Firestore backend (permission denied)

Reproducing repository: https://github.com/falk-stefan/angularfire-i2932

I have setup local emulators for Firebase (Firestore, Functions and Auth).

Auth seems to be working as I am able to create a user which shows up as it should:

However, the Firstore remains empty, even though I am writing the user-data to it:

private async updateUserData(user: User | null) {

  if (!user) {
    throw "User cannot be null.";
  }

  const userRef: AngularFirestoreDocument<User> = this.afs.doc(`users/${user.uid}`);
  const data: any = {
    uid: user.uid,
    email: user.email,
    displayName: user.displayName ? user.displayName : user.email,
    photoURL: user.photoURL
  }
  await userRef.set(data, {merge: true});
  return data;
}

This is how Firebase is loaded in my app:

Environment

export const environment = {
  production: false,
  firebase: {
    useEmulators: true,
    config: {
      apiKey: "FIREBASE_API_KEY",
      authDomain: "FIREBASE_AUTH_DOMAIN",
      projectId: "FIREBASE_PROJECT_ID"
    },
  }
};

app.module.ts

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';

import {AppComponent} from './app.component';
import {AppRouting} from "./app.routing";
import {LoggerModule, NgxLoggerLevel} from "ngx-logger";
import {environment} from "../environments/environment";
import {HttpClientModule} from "@angular/common/http";
import {SharedModule} from "./modules/shared.module";
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import {AngularFireModule} from "@angular/fire/compat";
import {USE_EMULATOR as USE_AUTH_EMULATOR} from '@angular/fire/compat/auth';
import {AngularFirestore, USE_EMULATOR as USE_FIRESTORE_EMULATOR} from '@angular/fire/compat/firestore';
import {USE_EMULATOR as USE_FUNCTIONS_EMULATOR} from '@angular/fire/compat/functions';


const envFirebase = environment.firebase;

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    SharedModule,
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    AppRouting,

    // Logging
    LoggerModule.forRoot({
      serverLoggingUrl: '/',
      level: environment.production ? NgxLoggerLevel.OFF : NgxLoggerLevel.TRACE,
      serverLogLevel: NgxLoggerLevel.OFF
    }),
    // Firebase
    AngularFireModule.initializeApp(envFirebase.config),
  ],
  providers: [
    // Firebase
    {provide: USE_AUTH_EMULATOR, useValue: envFirebase.useEmulators ? ['http://localhost:9099'] : undefined},
    {provide: USE_FUNCTIONS_EMULATOR, useValue: envFirebase.useEmulators ? ['http://localhost:5001'] : undefined},
    {provide: USE_FIRESTORE_EMULATOR, useValue: envFirebase.useEmulators ? ['http://localhost:8080'] : undefined},
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(firestore: AngularFirestore) {
    firestore.firestore.settings({experimentalForceLongPolling: true})
  }
}

Error Log

index.esm.js:106 [2021-09-08T13:12:18.305Z] @firebase/firestore: Firestore (9.0.0): Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError: [code=permission-denied]: Permission denied on resource project FIREBASE_PROJECT_ID. This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.

Versions

"@angular/fire": "^7.0.3",
"firebase": "^9.0.1",