Get missing or insufficient permissions after app check setup

[Yetispapa]

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.

Expected behavior

My angular app can read from firestore and is not getting any error

Actual behavior

Is throwing ERROR FirebaseError: Missing or insufficient permissions. in the developer console of my web browser and I don't retrieve any data from firestore

I find some sample code, how to implement app check with angularfire, but none of them work for me. I also saw initializeAppCheck(undefined), but this also does not work for me. Can someone give me an advice how to proceed here?

[orestes]

Hey @Yetispapa,

I think you just need to sign you users in. Your rules are expecting querying users to have auth.uid.

You can just use await signinAnonymously() before the queries happen :)

Edit: See below

[orestes]

I just tried this and I'm running into the same issue, even with an authenticated user.

[Yetispapa]

Ok, so you can reproduce the issue?
I make the firestore transactions /queries with an authorized user. So this should not be the problem.

[orestes]

Yeah I confirm I can reproduce the issue. If I enforce App Check on Firestore, my queries start to get rejected with the authentication message you posted. My rules also check for user authentication and various other things. Un-enforcing App Check results in the queries working again.

I´m also enforcing it on Cloud Storage and I have no issues downloading / viewing images, so the App Check integration works fine there (using getDownloadUrl() I see the App Check token being appended) so it looks like it's just the Firestore integration that fails for me :/

[Yetispapa]

Ok, Bad :/ that there's an issue with the firestore integration, but great that you can reproduce it :D
As a reporter, this seems always the hardest part.

Unfortunately this is a high priority issue for my angular app. Do you have time, to investigate in this issue? This would be great!

Thanks for your quick response

[Yetispapa]

@orestes Do you have any update for me on this issue?

[orestes]

Hi @Yetispapa. I´m just another user, not a repo maintainer :)

[jamesdaniels]

AppCheck for Firestore wasn't added until JS SDK 9.6 which was released yesterday, https://firebase.google.com/support/release-notes/js upgrade and you should be good to go.