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?

[kayp514]

hey @jbalidiong thank you for your reply, I used the same code, you provided but the error persists. I am not sure if the issue is about the code or maybe firebase console configuration. the error "Uncaught Error: Invalid site key or not loaded in api.js: SITE_KEY" occurs when I set the enterprise key in the Configured platform site keys from firebase console. see the image below. If i set the key to none for the web, when I run the code, appVerifier uses v2 certification and signinphonenumber works.

NB: in the screenshoot, the re-entreprise-dev, in the console is the same site-key I use to initializeAppCheck.

Firebase Console:

Error 1, when firebase console is configured to use enterprise site key .

when Configured platform site keys, web key is none, appVerifier in the code, create a v2 key and signinphonenumber works.

[jbalidiong]

Hi @kayp514, apologies for the delayed response and thanks for the additional details to this issue. I was able to replicate it when following the setup under Authentication → Settings → reCAPTCHA. I'm currently checking it with the team and I'll get back to you once I have anything to share or if we need additional details from you.

[kayp514]

@jbalidiong thank you for your response, I will be waiting for an update. Thank you !