[ Web Proxy ]

Viewing: https://developers.cloudflare.com/turnstile/extensions/google-firebase/

Implement Turnstile with Google Firebase Cloudflare Turnstile docsSkip to content

[]DocsDirectory API SDKs Changelog

SearchCtrlK

Turnstile

Overview
Plans
Spin
Concepts
- Turnstile widgets
- Cloudflare Challenges
Get started
- Overview
- Widget management
  Cloudflare dashboard
  API
  Terraform
- Embed the widget
  Overview
  Widget configurations
- Validate the token
- Mobile implementation
Additional configurations
- Hostname management
  Overview
  Pre-clearance configuration
  Any Hostname
- Pre-clearance support
- Ephemeral IDs
- Offlabel
Turnstile Analytics
Migration
Tutorials
Troubleshooting
- Testing
- Rotate secret key
- Client-side errors
  Overview
  Error codes
- Challenge solve issues
- Feedback reports
Extensions
Reference
Community resources
Changelog
Agent resources

Home
/Turnstile
/Extensions
/Google Firebase

Implement Turnstile with Google Firebase

Last updated May 5, 2026Copy as MarkdownView as MarkdownAgent setup

Overview1. Set up a Google Firebase project2. Set up Cloudflare Turnstile3. Integrate Firebase App Check with Turnstile3a. Enable App Check in Firebase3b. Grant access to the Cloudflare extension3c. Configure Firebase in your app with Turnstile3d. Verify the App Check token in your web application

Turnstile is available as an extension with Google's Firebase platform as an App Check provider. You can leverage Cloudflare Turnstile's bot detection and challenge capabilities to ensure that requests to your Firebase backend services are verified and only authentic human visitors can interact with your application.

Google Firebase is a comprehensive app development platform that provides a variety of tools and services to help developers build, improve, and grow their mobile and web applications.

Firebase App Check helps protect Firebase resources like Cloud Firestore, Realtime Database, Cloud Storage, and Functions from abuse, such as automated fraud attacks and denial of service (DoS) attacks, by ensuring that incoming requests are from legitimate visitors and trusted sources.

1. Set up a Google Firebase project

Create a Firebase project by going to the Firebase Console .
Select Add Project and follow the prompts to create a new project.
Add an app to your project by selecting your project.
In the project overview, select Add App and choose the platform: Web.
Register your app and follow the guide to get your Firebase configuration.

Note

It is important to register your web app first to connect it with Turnstile later.

2. Set up Cloudflare Turnstile

Create a Cloudflare Turnstile site by going to the Cloudflare Turnstile dashboard .
Create a new widget and get the sitekey and secret key.
- The domain you configure with the Turnstile widget should be the domain of your web app.
- The widget mode must be Invisible.

3. Integrate Firebase App Check with Turnstile

3a. Enable App Check in Firebase

Go to Cloudflare Turnstile in the Firebase Extensions hub .
Install the Cloudflare Turnstile extension to your Firebase project.
Enable Cloud Functions , Artifact Registry , and Secret Manager .
Enter the secret key from Cloudflare Turnstile and your Firebase App ID.
Select Install extension.

3b. Grant access to the Cloudflare extension

Grant access to the Cloudflare extension under the IAM section of your project by selecting Grant Access under View by Principals.
Select ext-cloudflare-turnstile from the dropdown menu.
When filtering the token, select Service Account Token Creator.

3c. Configure Firebase in your app with Turnstile

Create an index.ts file.

Add your Firebase configuration.

import { initializeApp } from "firebase/app";
import { getAppCheck, initializeAppCheck } from "firebase/app-check";
import {
    CloudflareProviderOptions,
} from '@cloudflare/turnstile-firebase-app-check';

const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_PROJECT_ID.appspot.com",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID",
};

const app = initializeApp(firebaseConfig);

// Initialize App Check
const siteKey = 'YOUR-SITEKEY';
const HTTP_ENDPOINT = '${function:ext-cloudflare-turnstile-app-check-provider-tokenExchange.url}';

const cpo = new CloudflareProviderOptions(HTTP_ENDPOINT, siteKey);
const provider = new CustomProvider(cpo);

initializeAppCheck(app, { provider });

// retrieve App Check token from Cloudflare Turnstile
cpo.getToken().then(({ token }) => {
    document.getElementById('app-check-token').innerHTML = token;
});

3d. Verify the App Check token in your web application

To verify the App Check token in your web application, refer to Firebase's Token Verification guide .

import express from "express";
import { initializeApp } from "firebase-admin/app";
import { getAppCheck } from "firebase-admin/app-check";

const expressApp = express();
const firebaseApp = initializeApp();

const appCheckVerification = async (req, res, next) => {
    const appCheckToken = req.header("X-Firebase-AppCheck");

    if (!appCheckToken) {
        res.status(401);
        return next("Unauthorized");
    }

    try {
        const appCheckClaims = await getAppCheck().verifyToken(appCheckToken);

        // If verifyToken() succeeds, continue with the next middleware function in the stack.
        return next();
    } catch (err) {
        res.status(401);
        return next("Unauthorized");
    }
}

expressApp.get("/yourApiEndpoint", [appCheckVerification], (req, res) => {
    // Handle request.
});

PreviousPages Plugin NextWaiting Room Analytics

Was this helpful?

YesNo

Edit page Report issue