Check out what’s new from Firebase@ Google I/O 2021, and join our alpha program for early access to the new Remote Config personalization feature. Learn more

Enable App Check with a custom provider on web apps

This page shows you how to enable App Check in a web app, using your custom App Check provider. When you enable App Check, you help ensure that only your app can access your project's Firebase resources.

If you want to use App Check with the default reCAPTCHA provider, see Enable App Check with reCAPTCHA on web apps.

Before you begin

1. Add the App Check library to your app

Import the App Check library.

With npm

If you installed the Firebase SDK using npm and a bundler:

  1. Update the firebase dependency to at least version 8.6.0.

  2. Import the App Check library:

    import 'firebase/app-check';
    

From the CDN

If you're importing the Firebase SDK from the CDN:

<script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-app-check.js"></script>

Be sure you're also using the latest version of the other Firebase libraries.

From Hosting URLs

If you're importing the Firebase SDK using Hosting internal URLs:

<script src="/__/firebase/8.6.7/firebase-app-check.js"></script>

Be sure you're also using the latest version of the other Firebase libraries.

2. Create the App Check provider object

Create an App Check provider object for your custom provider. This object must have a getToken() method, which collects whatever information your custom App Check provider requires as proof of authenticity, and sends it to your token acquisition service in exchange for an App Check token. The App Check SDK handles token caching, so always get a new token in your implementation of getToken().

const appCheckCustomProvider = {
  getToken: () => {
    return new Promise((resolve, _reject) => {
      // Logic to exchange proof of authenticity for an App Check token and
      //   expiration time.
      // ...

      const appCheckToken = {
        token: tokenFromServer,
        expireTimeMillis: expirationFromServer * 1000
      };

      resolve(appCheckToken);
    });
  }
}

3. Initialize App Check

Add the following initialization code to your application, before you access any Firebase services:

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

const appCheck = firebase.appCheck();
appCheck.activate(appCheckCustomProvider);

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 and Cloud Storage

An important tool you can use to make this decision for Realtime Database 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.

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

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 and Cloud Storage

To enable enforcement for Realtime Database 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.