Angularfire Appcheck not initialized correctly

Question

I am using the angular fire 7.3 (modular) and is really unclear how to setup Appcheck. I am gettin a "Missing or insufficient permissions." error and as I immagined Appcheck is blocking all calls for storage and firestore.

I have seen the code sample here and have configure the enviroment variables like shown here I have configured the app module similarly to how they suggested to do here, except that I am not using emulators

but it still acts as if the initialization didn't go through for what concerns Appcheck, both locally and on the deployed version. (both localhost and the domain have been regisred on recaptcha)

Obviously the recaptcha V3 site key I used is correct and has been setup on firebase as well. I did it before on a previous React project which at least for that part worked similarly but at least requests were going through.

...What am I missing?

I saw there is a post showing to essentially initialize firebase like you would do without angularfire but this would end up in having 2 firebase apps running and this sounds really hacky and suboptimal.

I wish their documentation said something about Appcheck...

app-module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MenuComponent } from './components/menu/menu.component';
import { LayoutComponent } from './components/layout/layout.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatIconModule} from "@angular/material/icon";
import { HeroComponent } from './components/hero/hero.component';
import { PagenotfoundComponent } from './components/pagenotfound/pagenotfound.component';
import {RouterModule} from "@angular/router";
import { initializeApp,provideFirebaseApp } from '@angular/fire/app';
import { environment } from '../environments/environment';
import { provideAnalytics,getAnalytics,ScreenTrackingService,UserTrackingService } from '@angular/fire/analytics';
import { provideAuth,getAuth } from '@angular/fire/auth';
import { provideFirestore,getFirestore } from '@angular/fire/firestore';
import { provideFunctions,getFunctions } from '@angular/fire/functions';
import { provideStorage,getStorage } from '@angular/fire/storage';
import { LoginComponent } from './components/login/login.component';
import { AppcheckComponent } from './components/appcheck/appcheck.component';
import { ReleaseComponent } from './components/release/release.component';
import { PreloadComponent } from './components/preload/preload.component';

let resolvePersistenceEnabled: (enabled: boolean) => void;

export const persistenceEnabled = new Promise<boolean>(resolve => {
  resolvePersistenceEnabled = resolve;
});


@NgModule({
  declarations: [
    AppComponent,
    MenuComponent,
    LayoutComponent,
    HeroComponent,
    PagenotfoundComponent,
    LoginComponent,
    AppcheckComponent,
    ReleaseComponent,
    PreloadComponent,



  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatIconModule,
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAnalytics(() => getAnalytics()),
    provideAuth(() => getAuth()),
    provideFirestore(() => getFirestore()),
    provideFunctions(() => getFunctions()),
    provideStorage(() => getStorage()),

  ],
  providers: [
    ScreenTrackingService,UserTrackingService
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

appcheck-component

import { Component, OnInit } from '@angular/core';
import { getToken, AppCheck } from '@angular/fire/app-check';
import { traceUntilFirst } from '@angular/fire/performance';
import { EMPTY, from, Observable } from 'rxjs';
import { keepUnstableUntilFirst } from '@angular/fire';
import { share } from 'rxjs/operators';

@Component({
  selector: 'app-app-check',
  template: `
    <p>
      App Check!
      <code>{{ (change$ | async)?.token | slice:0:12 }}<ng-container *ngIf="(change$ | async) !== null">&hellip;</ng-container></code>
    </p>
  `,
  styles: []
})

export class AppcheckComponent implements OnInit {

  readonly change$: Observable<any>;

  constructor(appCheck: AppCheck) {
    if (appCheck) {
      this.change$ = from(getToken(appCheck)).pipe(
        traceUntilFirst('app-check'),
        keepUnstableUntilFirst,
        share(),
      );
    } else {
      this.change$ = EMPTY;
    }
  }

  ngOnInit(): void {
  }
}

enviroment variables

export const environment = {
  firebase: {
    apiKey: "...",
    authDomain: "...",
    projectId: "...",
    storageBucket: "...",
    messagingSenderId: "...",
    appId: "...",
    measurementId: "..."
  },
  recaptcha3SiteKey: '...',
  production: false
};

Version Info:

Anglular 13.1 Firebase 9.8 AngularFire 7.3 (modular)

Answer 1

Just add the AppCheck provider to AppModule imports as you did with all the other ones (Firestore, Functions, etc).

import { initializeAppCheck, provideAppCheck, ReCaptchaV3Provider } from '@angular/fire/app-check'    

... 

provideAppCheck(() =>
  initializeAppCheck(undefined, {
    provider: new ReCaptchaV3Provider(environment.recaptchaSiteKey),
    isTokenAutoRefreshEnabled: true,
  })
),