Flutter Web中Firebase电话认证reCAPTCHA Enterprise验证失败，回退v2仍报invalid-app-credential错误的排查问询

Let's break down why your reCAPTCHA Enterprise token generates successfully but the verification code fails to send, and walk through actionable fixes:

1. Verify reCAPTCHA Enterprise Key & Project Association #

This is the most common culprit:

• Ensure your reCAPTCHA Enterprise key is linked to the same Google Cloud/Firebase project you're using for phone auth. It's easy to accidentally create a key in a separate project, which will cause credential mismatches even if the token generates.
• Double-check your key's domain allowlist: if you're testing on a specific port (e.g., localhost:5000), add that exact domain to both your Firebase auth authorized domains and reCAPTCHA Enterprise key settings. localhost alone won't cover port-specific instances.
• Even with AUDIT enforcement mode, confirm Firebase's Phone Auth settings explicitly select "reCAPTCHA Enterprise" instead of reCAPTCHA v2.

2. Fix reCAPTCHA Enterprise Loading in index.html #

Your current script load order and configuration might be causing conflicts:

• Ensure you're using the site key (not the resource ID like projects/XXXXX/keys/MY_KEY) in the render parameter of enterprise.js. You can find the site key in your reCAPTCHA Enterprise console under key details.
• Load reCAPTCHA after initializing Firebase to ensure proper integration:

  <!DOCTYPE html>
  <html>
  <head>
    <script src="https://www.gstatic.com/firebasejs/10.12.0/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/10.12.0/firebase-auth-compat.js"></script>
    <script src="https://www.google.com/recaptcha/enterprise.js"></script>
  </head>
  <body>
    <script>
      // Initialize Firebase first
      const firebaseConfig = {
        // Your Firebase config object here
      };
      firebase.initializeApp(firebaseConfig);
  
      // Initialize reCAPTCHA Enterprise with matching action
      grecaptcha.enterprise.ready(() => {
        grecaptcha.enterprise.execute('YOUR_SITE_KEY', { action: 'phone_sign_in' });
      });
    </script>
    <script src="flutter_bootstrap.js" async></script>
  </body>
  </html>
  

• Never load both reCAPTCHA v2 and Enterprise scripts—this will cause unexpected fallback behavior.

3. Explicitly Use reCAPTCHA Enterprise in Dart Code #

Don't rely on default behavior; explicitly configure the RecaptchaVerifier to use Enterprise, and match the action from your index.html:

final recaptchaVerifier = RecaptchaVerifier(
  container: null, // Auto-renders the reCAPTCHA widget
  parameters: const RecaptchaParameters(
    type: RecaptchaType.enterprise,
    action: 'phone_sign_in', // Must match the action in your index.html execute call
  ),
);

final confirmationResult = await FirebaseAuth.instance.signInWithPhoneNumber(
  phoneNumber,
  recaptchaVerifier: recaptchaVerifier,
);

Mismatched action values between client-side execution and the verifier are a frequent hidden cause of invalid-app-credential errors.

4. Validate Firebase Auth API Permissions #

• Head to the Google Cloud Console for your project, ensure the Firebase Auth API is enabled (search for it under APIs & Services > Library).
• Confirm the Firebase service account (e.g., firebase-adminsdk@[your-project].iam.gserviceaccount.com) has the Firebase Auth Admin role or equivalent permissions—even frontend auth can fail if backend permissions are misconfigured.

5. Inspect the sendVerificationCode Request #

Use your browser's DevTools to check the payload of the failing sendVerificationCode POST request:

• Verify the recaptchaToken is present and correctly formatted (it should be a long alphanumeric string, not a resource ID path).
• If the token is missing or malformed, this indicates a problem with how reCAPTCHA is integrating with Firebase Auth, likely due to script load order or key mismatch.

内容的提问来源于stack exchange，提问作者Ruth Hari