or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

ai.mdanalytics.mdapp-check.mdauth-guard.mdauthentication.mddata-connect.mddatabase.mdfirebase-app.mdfirestore.mdfunctions.mdindex.mdmessaging.mdperformance.mdremote-config.mdstorage.mdvertexai.md
tile.json

app-check.mddocs/

App Check

Firebase App Check protects your app's backend resources from abuse by ensuring requests come from authentic instances of your app.

Capabilities

Standalone Provider

export function provideAppCheck(fn: () => AppCheck): EnvironmentProviders;
export function getAppCheck(app?: FirebaseApp): AppCheck;
export function initializeAppCheck(
  app: FirebaseApp,
  options: AppCheckOptions
): AppCheck;

Angular Services

export class AppCheck extends AppCheck {}
export class AppCheckInstances extends Array<AppCheck> {}
export const appCheckInstance$: Observable<AppCheck>;

App Check Functions

/**
 * Get App Check token
 * @param appCheck - App Check instance
 * @param forceRefresh - Force token refresh
 * @returns Promise resolving to App Check token
 */
export function getToken(
  appCheck: AppCheck,
  forceRefresh?: boolean
): Promise<AppCheckToken>;

/**
 * Listen to App Check token changes
 * @param appCheck - App Check instance
 * @param observer - Token observer function
 * @returns Unsubscribe function
 */
export function onTokenChanged(
  appCheck: AppCheck,
  observer: (token: AppCheckToken) => void
): Unsubscribe;

/**
 * Check if App Check is supported
 * @returns Promise resolving to support status
 */
export function isSupported(): Promise<boolean>;

interface AppCheckToken {
  readonly token: string;
  readonly expireTimeMillis: number;
}

interface AppCheckOptions {
  provider: AppCheckProvider;
  isTokenAutoRefreshEnabled?: boolean;
}

interface AppCheckProvider {
  getToken(): Promise<AppCheckToken>;
}

Usage Examples

import { Component, inject } from '@angular/core';
import { 
  AppCheck, 
  getToken, 
  onTokenChanged,
  ReCaptchaV3Provider 
} from '@angular/fire/app-check';

@Component({
  selector: 'app-check-demo',
  template: `
    <div>
      <p>App Check Status: {{ tokenStatus }}</p>
      <button (click)="refreshToken()">Refresh Token</button>
    </div>
  `,
})
export class AppCheckDemoComponent {
  private appCheck = inject(AppCheck);
  tokenStatus = 'Unknown';

  ngOnInit() {
    // Listen to token changes
    onTokenChanged(this.appCheck, (token) => {
      console.log('App Check token updated:', token);
      this.tokenStatus = token.token ? 'Valid' : 'Invalid';
    });
  }

  async refreshToken() {
    try {
      const token = await getToken(this.appCheck, true);
      console.log('Token refreshed:', token);
      this.tokenStatus = 'Refreshed';
    } catch (error) {
      console.error('Token refresh error:', error);
      this.tokenStatus = 'Error';
    }
  }
}

// App Check setup in main.ts or app config
import { initializeAppCheck, ReCaptchaV3Provider } from '@angular/fire/app-check';

bootstrapApplication(AppComponent, {
  providers: [
    provideFirebaseApp(() => initializeApp(firebaseConfig)),
    provideAppCheck(() => {
      const appCheck = initializeAppCheck(getApp(), {
        provider: new ReCaptchaV3Provider('your-recaptcha-site-key'),
        isTokenAutoRefreshEnabled: true
      });
      return appCheck;
    }),
    // Other providers...
  ],
});