How to Use Firebase App Check to Secure Your App

To use Firebase App Check, enable it in the Firebase console and integrate the App Check SDK in your app to verify requests come from your authentic app. This protects your backend resources by allowing only verified app traffic.

Syntax

The basic syntax involves initializing App Check in your app code and choosing a provider like ReCAPTCHA or Play Integrity. Then, you enable App Check enforcement in the Firebase console.

Key parts:

• initializeAppCheck(): Starts App Check in your app.
• ReCaptchaV3Provider(siteKey): Uses reCAPTCHA for web apps.
• activate(): Activates App Check with the chosen provider.

javascript

import { initializeApp } from 'firebase/app';
import { initializeAppCheck, ReCaptchaV3Provider } from 'firebase/app-check';

const app = initializeApp({ /* your config */ });

const appCheck = initializeAppCheck(app, {
  provider: new ReCaptchaV3Provider('your-site-key'),
  isTokenAutoRefreshEnabled: true
});

Example

This example shows how to set up Firebase App Check in a web app using the reCAPTCHA v3 provider. It initializes Firebase, activates App Check, and enables automatic token refresh.

javascript

import { initializeApp } from 'firebase/app';
import { initializeAppCheck, ReCaptchaV3Provider } from 'firebase/app-check';

const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_SENDER_ID',
  appId: 'YOUR_APP_ID'
};

const app = initializeApp(firebaseConfig);

const appCheck = initializeAppCheck(app, {
  provider: new ReCaptchaV3Provider('YOUR_RECAPTCHA_SITE_KEY'),
  isTokenAutoRefreshEnabled: true
});

console.log('Firebase App Check initialized');

Output

Firebase App Check initialized

Common Pitfalls

Common mistakes when using Firebase App Check include:

• Not enabling App Check enforcement in the Firebase console after integrating the SDK.
• Using an incorrect or missing reCAPTCHA site key or Play Integrity configuration.
• Forgetting to enable automatic token refresh, which can cause requests to fail when tokens expire.
• Not updating backend services to validate App Check tokens, so protection is ineffective.

javascript

/* Wrong way: Missing provider or site key */
const appCheckWrong = initializeAppCheck(app, {
  // provider missing
  isTokenAutoRefreshEnabled: true
});

/* Right way: Provide correct provider with site key */
const appCheckRight = initializeAppCheck(app, {
  provider: new ReCaptchaV3Provider('YOUR_RECAPTCHA_SITE_KEY'),
  isTokenAutoRefreshEnabled: true
});

Quick Reference

Tips for using Firebase App Check:

• Always enable enforcement in the Firebase console after SDK integration.
• Choose the right provider for your platform (reCAPTCHA for web, Play Integrity for Android, DeviceCheck for iOS).
• Enable automatic token refresh to keep tokens valid.
• Update backend services to verify App Check tokens for full protection.

Key Takeaways

Enable Firebase App Check in the console and integrate its SDK in your app to protect backend resources.

Use the correct provider like ReCAPTCHA or Play Integrity depending on your app platform.

Enable automatic token refresh to avoid request failures due to expired tokens.

Remember to enforce App Check in the Firebase console after setup.

Update your backend to verify App Check tokens for effective security.