Invalid site key or not loaded in api.js when firebase initializeAppCheck with ReCaptchaEnterpriseProvider

[kayp514]

Operating System

Windows 11

Environment (if applicable)

Chrome

Firebase SDK Version

12.0.0

Firebase SDK Product(s)

AppCheck, Auth

Project Tooling

Next.js app

Detailed Problem Description

When AppCheck enforcement is enabled for Authentication, SMS-based sign-in stops working. This happens specifically when Firebase initializes App Check using the ReCaptchaEnterpriseProvider.

However, if App Check is initialized with ReCaptchaV3Provider, SMS-based authentication works correctly with any site key configured in Firebase Console → Authentication → Settings → reCAPTCHA (v3, v2 challenge, or Enterprise).

If App Check is initialized with ReCaptchaEnterpriseProvider, SMS-based auth only works when the reCAPTCHA Web keys in Firebase Console → Authentication → Settings → reCAPTCHA are set to None. In that case, the SMS code is received and verification succeeds.

This leads to the question: What is the correct configuration for using App Check with reCAPTCHA Enterprise and Phone Authentication?

Steps and code to reproduce issue

1. Generate a reCAPTCHA Enterprise Site Key in the Google Cloud Console.
   Initialize Firebase App Check using this Enterprise site key with ReCaptchaEnterpriseProvider.

2. Separately, generate a reCAPTCHA v3 site key at https://www.google.com/recaptcha.

3. In the Firebase Console, go to:
   Authentication → Settings → reCAPTCHA
   For Web, configure the phone authentication protection using either: reCAPTCHA v3, reCAPTCHA v2 (challenge) or reCAPTCHA Enterprise (Both keys fail when App Check is initialized with the Enterprise provider.)

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[jbalidiong]

Hi @kayp514 thanks for reaching out to us. I was able to use ReCaptchaEnterpriseProvider and Phone Authentication. Here's the code snippet I used:

import React, { useEffect, useState } from 'react';
import { initializeApp } from "firebase/app";
import { initializeAppCheck, ReCaptchaEnterpriseProvider } from "firebase/app-check";
import { getAuth, RecaptchaVerifier, signInWithPhoneNumber, onAuthStateChanged } from "firebase/auth";

const FIREBASE_CONFIG = {
  apiKey: "YOUR_FIREBASE_API_KEY", 
  authDomain: "YOUR_PROJECT.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  // ... other configs (messagingSenderId, appId, etc.)
};

// **Crucial:** This is your public reCAPTCHA Enterprise Site Key (Web Type, Score Based)
const RECAPTCHA_ENTERPRISE_SITE_KEY = 'YOUR_RECAPTCHA_ENTERPRISE_SITE_KEY'; 

const VERIFIER_CONTAINER_ID = 'recaptcha-verifier-container';

// Initialize the App and get Auth instance
const app = initializeApp(FIREBASE_CONFIG);
const auth = getAuth(app);

const useAppCheckInit = () => {
    useEffect(() => {

        console.log("Initializing App Check...");
        initializeAppCheck(app, {
            // Provider is set to ReCaptchaEnterpriseProvider
            provider: new ReCaptchaEnterpriseProvider(RECAPTCHA_ENTERPRISE_SITE_KEY),
            isTokenAutoRefreshEnabled: true 
        });
        
    }, []); // Runs once on mount
};

const PhoneAuthAppCheck = () => {
    useAppCheckInit(); 

    const [phoneNumber, setPhoneNumber] = useState('');
    const [verificationCode, setVerificationCode] = useState('');
    const [confirmationResult, setConfirmationResult] = useState(null);
    const [user, setUser] = useState(null);
    const [error, setError] = useState(null);
    const [isLoading, setIsLoading] = useState(false);
    
    useEffect(() => {
        const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
            setUser(currentUser);
        });
        return () => unsubscribe();
    }, []);

    useEffect(() => {
        if (!document.getElementById(VERIFIER_CONTAINER_ID)) {
            console.error("Verifier container element not found!");
            return;
        }

        // Must be attached to the window scope for Firebase to manage it properly
        window.recaptchaVerifier = new RecaptchaVerifier(auth, VERIFIER_CONTAINER_ID, {
            'size': 'invisible', // Invisible is key for frictionless experience
            'callback': (response) => {
                console.log("RecaptchaVerifier solved. App Check verified this flow.");
            },
            'expired-callback': () => {
                setError("reCAPTCHA expired. Please try again.");
                window.recaptchaVerifier.clear();
            }
        });
        
        return () => {
            if (window.recaptchaVerifier) {
                window.recaptchaVerifier.clear();
                delete window.recaptchaVerifier;
            }
        };
    }, []);

Things to note:

• Created and configured the reCAPTCHA Enterprise Site Key (Google Cloud Console).
• Registered your web app with App Check and linked it to the reCAPTCHA Enterprise Provider (Firebase Console).

Could you give this code a try? If the issue persists, kindly share a minimal reproducible example to help us accurately replicate the error?