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.
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
Add Firebase to your JavaScript project
if you haven’t
already done so.
Open the
reCAPTCHA Enterprise
section of the Cloud console and do the following:
- If you're prompted to enable the reCAPTCHA Enterprise API, do so.
- 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
.
Register your apps to use App Check with the reCAPTCHA Enterprise
provider in the
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.
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 modular API
import { initializeApp } from "firebase/app";
import { initializeAppCheck, ReCaptchaEnterpriseProvider } from "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 namespaced API
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.
);
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:
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:
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
.
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 no-cost 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
.