app-check.md

AngularFire ❱ Developer Guide ❱ App Check

App Check

App Check helps protect your API resources from abuse by preventing unauthorized clients from accessing your backend resources. It works with both Firebase services, Google Cloud services, and your own APIs to keep your resources safe.

Learn More

Dependency Injection

As a prerequisite, ensure that AngularFire has been added to your project via

ng add @angular/fire

Provide a App Check instance in the application's app.config.ts:

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

export const appConfig: ApplicationConfig = {
  providers: [
    provideFirebaseApp(() => initializeApp({ ... })),
    provideAppCheck(() => initializeAppCheck(getApp(), {
        provider: new ReCaptchaV3Provider(/* configuration */),
    })),
    ...
  ],
  ...
})

Next inject AppCheck it into your component:

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

@Component({ ... })
export class AppCheckComponent {
  private appCheck = inject(AppCheck);
  ...
}

Firebase API

AngularFire wraps the Firebase JS SDK to ensure proper functionality in Angular, while providing the same API.

Update the imports from import { ... } from 'firebase/app-check' to import { ... } from '@angular/fire/app-check' and follow the official documentation.

Getting Started | API Reference