Angular with Firebase - missing or insufficient permissions after app check

Issue

I use angularfire to interact with firestore in my angular app. Unfortunately, after I setup app check in the firebase console, I'm getting ERROR FirebaseError: Missing or insufficient permissions. in the console of my webbrowser after the first interaction with firestore (see component below), Here are some useful informations for you, which I copied from my ticket in the angularfire repo.

Version info

Angular:

@angular-devkit/architect 0.1200.5 @angular-devkit/build-angular 12.2.13 @angular-devkit/core 12.2.13 @angular-devkit/schematics 12.2.13 @schematics/angular 12.2.13 rxjs 6.6.7 typescript 4.3.5

Firebase:

9.19.0

AngularFire:

7.2.0

Other (e.g. Ionic/Cordova, Node, browser, operating system):

Node: 16.13.0

How to reproduce these conditions

In my component:

constructor(
    private firestore: AngularFirestore,
  ) {}

  ngOnInit(): void {
this.firestore
        .collection('users')
        .snapshotChanges()
        .subscribe((documents) => {
          this.userDocuments = documents;
        })

Steps to set up and reproduce

I created a firebase web app under my project in the firebase console. In the app check tab, I paste the site secret from recaptcha into the required field, so it looks like this now:

In my app.module.ts

imports: [
..
    AngularFireModule.initializeApp(environment.firebase),
    // // AppCheckModule,
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    environment.useEmulators
      ? [AppCheckModule]
      : provideAppCheck(() => {
          const provider = new ReCaptchaV3Provider(environment.recaptcha);
          return initializeAppCheck(getApp(), {
            provider,
            isTokenAutoRefreshEnabled: true,
          });
        }),
  ],

In the enviroment.ts, I set the key from recaptcha. Furthermore the enviroment production key is set to true, so the isDevMode() returns false. There was the problem, that recaptcha is requiring a debug token otherwise.

Sample data and security rules

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

Debug output

ERROR FirebaseError: Missing or insufficient permissions.

Can someone give me an advice how to proceed here?

Solution

AppCheck for Firestore wasn't added until JS SDK 9.6 which was released couple of days ago. Its now working for me

See here: https://firebase.google.com/support/release-notes/js

Answered By - Yetispapa