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.