Usage of @capacitor-firebase/app-check

[jannisgries]

---

Implementing Firebase App Check in an Angular Project with Capacitor

I'm currently integrating Firebase App Check into my existing Angular project. Since I am using Capacitor, my web application and iOS app share the same codebase.

Web Implementation

For the web version, I added provideAppCheck() to my Angular module's imports section. Here’s how my imports look:

provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAppCheck(() => initializeAppCheck(undefined, {
  provider: new ReCaptchaV3Provider('KEY'),
  isTokenAutoRefreshEnabled: true // Enables automatic token refresh
})),
provideAuth(() => {
  if (Capacitor.isNativePlatform()) {
    return initializeAuth(getApp(), {
      persistence: indexedDBLocalPersistence,
    });
  } else {
    return getAuth();
  }
}),
provideDatabase(() => getDatabase()),

On the web, this setup works perfectly—I can access the Realtime Database, which has App Check enforcement enabled.

iOS Implementation with @capacitor-firebase/app-check

For the iOS version, I opted to use @capacitor-firebase/app-check. I initialize Firebase App Check in the AppModule constructor, along with the required setup in Xcode.

export class AppModule {
  constructor() {
    if (Capacitor.getPlatform() !== 'web') {
      this.initialize_app_check();
    }
  }

  private async initialize_app_check() {
    try {
      const options: InitializeOptions = {
        debug: false,
      };
      await FirebaseAppCheck.initialize(options);
      
      const toOptions: GetTokenOptions = {
        forceRefresh: true,
      };
      
      const { token } = await FirebaseAppCheck.getToken(toOptions);
      console.log(token);
    } catch (e) {
      console.error(e);
    }
  }
}

The Issue: Missing App Check Token on iOS

Even though FirebaseAppCheck.initialize() successfully logs a token, when I try to call the Realtime Database from my iOS app, I get a warning that no token exists, and access is blocked.

This issue persists even when I manually check for the token just before making the database request:

const token = await this.getAppCheckToken();
if (!token) {
  console.error('Missing App Check token');
  return;
}

const lp_ref = ref(this.database, `/functionale/${this.current_app}/home/last_published`);
const snapshot = await get(lp_ref);

@firebase/database: FIREBASE WARNING: Missing appcheck token

Looking for Help

I would really appreciate any guidance on:

• Why the token isn’t recognized on iOS despite being logged.
• How to properly attach the App Check token to Firebase Database requests in Capacitor-based Angular apps.

Thanks in advance!

[robingenz]

Which Capacitor plugin do you use for the Firebase Realtime Database?

[jannisgries]

I am using @angular/fire/database, because I originally developed a web app only. After reading this instruction (LINK) I thought I could stay with my original codebase, if I update my modules.ts accordingly:

// 1. Initialize on the native layer
await FirebaseAppCheck.initialize();

// 2. Set up a custom provider with token from native layer
const provider = new CustomProvider({
  // @ts-ignore
  getToken: () => {
    return FirebaseAppCheck.getToken();
  },
});

// 3. Initialize on the SDK layer
await initializeAppCheck(getApp(), {
  provider: provider,
  isTokenAutoRefreshEnabled: true, // Enables automatic token refresh
});```

[jannisgries]

I realize that this approach is working, when I add the debug-token to the Firebase Console. However, it doesn't work in production mode (neither by setting the scheme in Xcode to Production nor by deploying the App over TestFlight)

[robingenz]

I cannot take a look at this right now. Maybe someone else has an idea. Also, feel free to debug this on your side and create a PR if a fix is needed.