Catch up on everthing we announced at this year's Firebase Summit. Learn more

Enable App Check with reCAPTCHA Enterprise in web apps

This page shows you how to enable App Check in a web app, using the reCAPTCHA Enterprise provider. When you enable App Check, you help ensure that only your app can access your project's Firebase resources. See an Overview of this feature.

reCAPTCHA Enterprise is a paid service with a free quota. App Check also supports reCAPTCHA v3, a free service. To learn the differences between reCAPTCHA v3 and reCAPTCHA Enterprise, see the comparison of features.

Note that App Check uses reCAPTCHA Enterprise score-based site keys, which make it invisible to users. The reCAPTCHA Enterprise provider will not require users to solve a challenge at any time.

If you want to use App Check with your own custom provider, see Implement a custom App Check provider.

1. Set up your Firebase project

  1. Add Firebase to your JavaScript project if you haven’t already done so.

  2. Open the reCAPTCHA Enterprise section of the Cloud console and do the following:

    1. If you're prompted to enable the reCAPTCHA Enterprise API, do so.
    2. Create a Website-type key. You will need to specify domains on which you host your web app. Leave the "Use checkbox challenge" option unselected.
  3. Register your apps to use App Check with the reCAPTCHA Enterprise provider in the Project Settings > App Check section of the Firebase console. You will need to provide the site key you got in the previous step.

    You usually need to register all of your project's apps, because once you enable enforcement for a Firebase product, only registered apps will be able to access the product's backend resources.

  4. Optional: In the app registration settings, set a custom time-to-live (TTL) for App Check tokens issued by the provider. You can set the TTL to any value between 30 minutes and 7 days. When changing this value, be aware of the following tradeoffs:

    • Security: Shorter TTLs provide stronger security, because it reduces the window in which a leaked or intercepted token can be abused by an attacker.
    • Performance: Shorter TTLs mean your app will perform attestation more frequently. Because the app attestation process adds latency to network requests every time it's performed, a short TTL can impact the performance of your app.
    • Quota and cost: Shorter TTLs and frequent re-attestation deplete your quota faster, and for paid services, potentially cost more. See Quotas & limits.

    The default TTL of 1 hour is reasonable for most apps. Note that the App Check library refreshes tokens at approximately half the TTL duration.

2. Add the App Check library to your app

Add Firebase to your web app if you haven't already. Be sure to import the App Check library.

3. Initialize App Check

Add the following initialization code to your application, before you access any Firebase services. You will need to pass your reCAPTCHA Enterprise site key, which you created in the Cloud console, to activate().

Web version 9

const { initializeApp } = require("firebase/app");
const { initializeAppCheck, ReCaptchaEnterpriseProvider } = require("firebase/app-check");

const app = initializeApp({
  // Your Firebase configuration object.
});

// Create a ReCaptchaEnterpriseProvider instance using your reCAPTCHA Enterprise
// site key and pass it to initializeAppCheck().
const appCheck = initializeAppCheck(app, {
  provider: new ReCaptchaEnterpriseProvider(/* reCAPTCHA Enterprise site key */),
  isTokenAutoRefreshEnabled: true // Set to true to allow auto-refresh.
});

Web version 8

firebase.initializeApp({
  // Your Firebase configuration object.
});

// Create a ReCaptchaEnterpriseProvider instance using your reCAPTCHA Enterprise
// site key and pass it to activate().
const appCheck = firebase.appCheck();
appCheck.activate(
  new firebase.appCheck.ReCaptchaEnterpriseProvider(
    /* reCAPTCHA Enterprise site key */
  ),
  true // Set to true to allow auto-refresh.
);

Once the App Check library is installed in your app, deploy it.

The updated client app will begin sending App Check tokens along with every request it makes to Firebase, but Firebase products will not require the tokens to be valid until you enable enforcement in the App Check section of the Firebase console. See the next two sections for details.

4. Monitor request metrics

Now that your updated app is in the hands of users, you can enable enforcement of App Check for the Firebase products you use. Before you do so, however, you should make sure that doing so won’t disrupt your existing legitimate users.

Realtime Database, Cloud Firestore, and Cloud Storage

An important tool you can use to make this decision for Realtime Database, Cloud Firestore, and Cloud Storage is the App Check request metrics screen.

To view the App Check request metrics for a product, open the Project Settings > App Check section of the Firebase console. For example:

Screenshot of the App Check metrics page

The request metrics for each product are broken down into four categories:

  • Verified requests are those that have a valid App Check token. After you enable App Check enforcement, only requests in this category will succeed.

  • Outdated client requests are those that are missing an App Check token. These requests might be from an older version of the Firebase SDK before App Check was included in the app.

  • Unknown origin requests are those that are missing an App Check token, and don't look like they come from the Firebase SDK. These might be from requests made with stolen API keys or forged requests made without the Firebase SDK.

  • Invalid requests are those that have an invalid App Check token, which might be from an inauthentic client attempting to impersonate your app, or from emulated environments.

The distribution of these categories for your app should inform when you decide to enable enforcement. Here are some guidelines:

  • If almost all of the recent requests are from verified clients, consider enabling enforcement to start protecting your backend resources.

  • If a significant portion of the recent requests are from likely-outdated clients, to avoid disrupting users, consider waiting for more users to update your app before enabling enforcement. Enforcing App Check on a released app will break prior app versions that are not integrated with the App Check SDK.

  • If your app hasn't launched yet, you should enable App Check enforcement immediately, since there aren't any outdated clients in use.

Cloud Functions

For Cloud Functions, you can get App Check metrics by examining your functions' logs. Every invocation of a callable function emits a structured log entry like the following example:

{
  "severity": "INFO",    // INFO, WARNING, or ERROR
  "logging.googleapis.com/labels": {"firebase-log-type": "callable-request-verification"},
  "jsonPayload": {
    "message": "Callable header verifications passed.",
    "verifications": {
      // ...
      "app": "MISSING",  // VALID, INVALID, or MISSING
    }
  }
}

You can analyze these metrics in the Google Cloud Console by creating a logs-based counter metric with the following metric filter:

resource.type="cloud_function"
resource.labels.function_name="YOUR_CLOUD_FUNCTION"
resource.labels.region="us-central1"
labels.firebase-log-type="callable-request-verification"

Label the metric using the field jsonPayload.verifications.appCheck.

5. Enable enforcement

To enable enforcement, follow the instructions for each product, below. Once you enable enforcement for a product, all unverified requests to that product will be rejected.

Realtime Database, Cloud Firestore, and Cloud Storage

To enable enforcement for Realtime Database, Cloud Firestore (iOS and Android), and Cloud Storage:

  1. Open the Project Settings > App Check section of the Firebase console.

  2. Expand the metrics view of the product for which you want to enable enforcement.

  3. Click Enforce and confirm your choice.

Note that it can take up to 10 minutes after you enable enforcement for it to take effect.

Cloud Functions

See Enable App Check enforcement for Cloud Functions.

Note on cost

App Check creates an assessment on your behalf to validate the user's response token each time a browser running your web app refreshes its App Check token. Your project will be charged for each assessment created above the free quota; see reCAPTCHA Enterprise pricing for details.

By default, your web app will refresh this token twice every 1 hour. To control how frequently your app refreshes App Check tokens (and thus how frequently new assessments are created), configure their TTL.

Next steps

If, after you have registered your app for App Check, you want to run your app in an environment that App Check would normally not classify as valid, such as locally during development, or from a continuous integration (CI) environment, you can create a debug build of your app that uses the App Check debug provider instead of a real attestation provider.

See Use App Check with the debug provider in web apps.