Firebase App Check protects your app's backend resources from abuse by ensuring requests come from authentic instances of your app.
export function provideAppCheck(fn: () => AppCheck): EnvironmentProviders;
export function getAppCheck(app?: FirebaseApp): AppCheck;
export function initializeAppCheck(
app: FirebaseApp,
options: AppCheckOptions
): AppCheck;export class AppCheck extends AppCheck {}
export class AppCheckInstances extends Array<AppCheck> {}
export const appCheckInstance$: Observable<AppCheck>;/**
* 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>;
}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...
],
});