RecaptchaVerifier causes 'Cannot read properties of null (reading 'style')' error after verification

[joeski-porchpass]

Operating System

macOS Sequoia Version 15.3.2

Environment (if applicable)

Safari Version 18.3.1

Firebase SDK Version

10.13.1 (also occurs in v11.4.0)

Firebase SDK Product(s)

Auth

Project Tooling

React app (^18.3.1) with ESBuild

Detailed Problem Description

When using RecaptchaVerifier with phone authentication, after the reCAPTCHA verification completes, an uncaught error occurs in the reCAPTCHA library: "Cannot read properties of null (reading 'style')".

The error consistently appears after the reCAPTCHA challenge is completed, regardless of whether authentication succeeds or fails. It happens both in development and production environments.

We've tested this with Firebase v10.13.1 and also with the latest v11.4.0 - both exhibit the same error.

The error doesn't appear to prevent authentication from working, but it does generate uncaught exceptions in production that can interfere with error monitoring systems and potentially cause other issues.

Steps to reproduce:

1. Create a RecaptchaVerifier instance with the "invisible" size option
2. Call signInWithPhoneNumber with a valid phone number and the verifier
3. Complete the reCAPTCHA verification challenge
4. Observe the uncaught error in the console

We've narrowed down that this seems to happen within a setTimeout callback in the reCAPTCHA library, possibly related to cleanup after the challenge window closes.

Steps and code to reproduce issue

Reproduction Steps

1. Initialize Firebase Auth
2. Create a RecaptchaVerifier instance
3. Call signInWithPhoneNumber with the verifier
4. Complete the reCAPTCHA verification challenge
5. Observe uncaught error in console

Minimal Code Example

// Initialize Firebase
import { initializeApp } from 'firebase/app';
import { getAuth, RecaptchaVerifier, signInWithPhoneNumber } from 'firebase/auth';

const firebaseConfig = {
  // Your Firebase config
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

// Create container for reCAPTCHA
const container = document.createElement('div');
container.id = 'recaptcha-container';
document.body.appendChild(container);

// Setup function that reproduces the issue
function reproduceRecaptchaError() {
  // Create RecaptchaVerifier
  window.recaptchaVerifier = new RecaptchaVerifier(auth, 'recaptcha-container', {
    size: 'invisible'
  });
  
  // Start phone verification
  const phoneNumber = '+1234567890'; // Use any valid phone format
  signInWithPhoneNumber(auth, phoneNumber, window.recaptchaVerifier)
    .then(confirmationResult => {
      console.log('SMS sent successfully');
      // The error occurs after the reCAPTCHA challenge is completed,
      // regardless of whether this promise resolves successfully
    })
    .catch(error => {
      console.error('Error sending SMS:', error);
      // The error still occurs even if this catch block is executed
    });
}

// Call the function to trigger the issue
reproduceRecaptchaError();

[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.

[dlarocque]

Hi @joeski-porchpass, thanks for reporting this issue and including detailed reproduction steps.

Looking through some older issues, I found #3356 which seems to report similar the same behaviour- is this the same issue you're experiencing? If not, please describe how this is different.

[joeski-porchpass]

Thanks @dlarocque. I appreciate the quick reply!

This does indeed look like the same error. Sorry for opening a duplicate.

One detail I would just add to the context of this error, I'm not sure was mentioned in that discussion:

The error appears to be thrown as soon as the recaptcha window closes, with 100% certainty every time it closes. However, we actually haven't seen this break any user experiences when we replay their session in Sentry.

I'm hoping we get an example of this error where the user actually fails reCAPTCHA validation. My suspicion is this may actually break our firebase login screen (as reported by our QA team member initially). However, I have been unable to recreate it, and it is extremely difficult to test reCAPTCHA failure, likely intentionally made-so by the reCAPTCHA team.

TLDR:

Our team has closed our internal ticket related to this error, and simply silenced this specific error in Sentry.

I don't have 100% confidence that this will never break our user's experience using firebase authentication, but so far, in the replays we've seen from sessions where this error is thrown, the user is able to proceed unimpeded.

[joeski-porchpass]

Hey! The most recent suggested solution in that thread works for us too!

 window.recaptchaVerifier = new RecaptchaVerifier(
      auth,
      "recaptcha-container",
      {
        size: "invisible",
        callback: () => {
          window.recaptchaVerifier?.recaptcha?.reset();
        },
        "expired-callback": () => {
          window.recaptchaVerifier?.recaptcha?.reset();
        },
        "error-callback": () => {
          window.recaptchaVerifier?.recaptcha?.reset();
        },
      },
    );

Call reset in all callbacks and the error disappears. 🙌