This page shows you how to enable App Check in a web app, using the built-in reCAPTCHA v3 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.
You should use reCAPTCHA Enterprise for new integrations, and we strongly recommend that developers of apps using reCAPTCHA v3 upgrade when possible.
To learn the differences between reCAPTCHA v3 and reCAPTCHA Enterprise, see the comparison of features.
Note that reCAPTCHA v3 is invisible to users. The reCAPTCHA v3 provider will not require users to solve a challenge at any time. See the reCAPTCHA v3 documentation.
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
Add Firebase to your JavaScript project if you haven’t already done so.
Register your site for reCAPTCHA v3 and get your reCAPTCHA v3 site key and secret key.
Register your apps to use App Check with the reCAPTCHA provider in the App Check section of the Firebase console. You will need to provide the secret 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.
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 day 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 site key, which you
created in the reCAPTCHA console, to activate()
.
Web
import { initializeApp } from "firebase/app"; import { initializeAppCheck, ReCaptchaV3Provider } from "firebase/app-check"; const app = initializeApp({ // Your firebase configuration object }); // Pass your reCAPTCHA v3 site key (public key) to activate(). Make sure this // key is the counterpart to the secret key you set in the Firebase console. const appCheck = initializeAppCheck(app, { provider: new ReCaptchaV3Provider('abcdefghijklmnopqrstuvwxy-1234567890abcd'), // Optional argument. If true, the SDK automatically refreshes App Check // tokens as needed. isTokenAutoRefreshEnabled: true });
Web
firebase.initializeApp({ // Your firebase configuration object }); const appCheck = firebase.appCheck(); // Pass your reCAPTCHA v3 site key (public key) to activate(). Make sure this // key is the counterpart to the secret key you set in the Firebase console. appCheck.activate( 'abcdefghijklmnopqrstuvwxy-1234567890abcd', // Optional argument. If true, the SDK automatically refreshes App Check // tokens as needed. true);
Next steps
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.
Monitor metrics and enable enforcement
Before you enable enforcement, however, you should make sure that doing so won't disrupt your existing legitimate users. On the other hand, if you're seeing suspicious use of your app resources, you might want to enable enforcement sooner.
To help make this decision, you can look at App Check metrics for the services you use:
- Monitor App Check request metrics for Realtime Database, Cloud Firestore, Cloud Storage, Firebase Data Connect (Preview), Authentication (beta), and Vertex AI in Firebase (Preview).
- Monitor App Check request metrics for Cloud Functions.
Enable App Check enforcement
When you understand how App Check will affect your users and you're ready to proceed, you can enable App Check enforcement:
- Enable App Check enforcement for Realtime Database, Cloud Firestore, Cloud Storage, Firebase Data Connect (Preview), Authentication (beta), and Vertex AI in Firebase (Preview).
- Enable App Check enforcement for Cloud Functions.
Use App Check in debug environments
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.