Firebase-js-sdk: Auth error only after recaptcha: "Cannot read property 'style' of null"

[zachasme]

Describe your environment

• Operating System version: Linux 5.7.5-arch1-1 x86_64
• Browser version: Firefox 79.0b3 (64-bit)
• Firebase SDK version: 7.15.5
• Firebase Product: auth

Describe the problem

I am setting up Phone Auth with firebase. If there is a problem with the phone number (too long, too short, etc), but the captcha is shown (delaying the error until after resolving the captcha), the following error is thrown:

Uncaught TypeError: Cannot read property 'style' of null

I have a feeling it happens when firebase auth attemps to reset the recaptcha after a problem with phone auth occurs.

There is no issue when captcha is shown but phone number is valid.

Steps to reproduce:

• Go to the below codesandbox (open it in incognito -- hopefully that'll make sure captcha is shown)
• Open console
• Click submit (with an invalid phone number)
• Ensure captcha is shown, if not, refresh and try again until it is
• Observe the following error is thrown:

Uncaught TypeError: can't access property "style", r is null
    B https://www.gstatic.com/recaptcha/releases/NMoy4HgGiLr5NAQaEQa2ho8X/recaptcha__en.js:310
    Y https://www.gstatic.com/recaptcha/releases/NMoy4HgGiLr5NAQaEQa2ho8X/recaptcha__en.js:120
    setTimeout handler*n</< https://www.gstatic.com/recaptcha/releases/NMoy4HgGiLr5NAQaEQa2ho8X/recaptcha__en.js:132
    L https://www.gstatic.com/recaptcha/releases/NMoy4HgGiLr5NAQaEQa2ho8X/recaptcha__en.js:120
    L https://www.gstatic.com/recaptcha/releases/NMoy4HgGiLr5NAQaEQa2ho8X/recaptcha__en.js:123
    B https://www.gstatic.com/recaptcha/releases/NMoy4HgGiLr5NAQaEQa2ho8X/recaptcha__en.js:300
    <anonymous> https://www.gstatic.com/recaptcha/releases/NMoy4HgGiLr5NAQaEQa2ho8X/recaptcha__en.js:654
    T https://www.gstatic.com/recaptcha/releases/NMoy4HgGiLr5NAQaEQa2ho8X/recaptcha__en.js:125
    T https://www.gstatic.com/recaptcha/releases/NMoy4HgGiLr5NAQaEQa2ho8X/recaptcha__en.js:125
    B https://www.gstatic.com/recaptcha/releases/NMoy4HgGiLr5NAQaEQa2ho8X/recaptcha__en.js:351
    next https://www.gstatic.com/recaptcha/releases/NMoy4HgGiLr5NAQaEQa2ho8X/recaptcha__en.js:107
    u https://www.gstatic.com/recaptcha/releases/NMoy4HgGiLr5NAQaEQa2ho8X/recaptcha__en.js:266
    promise callback*C https://www.gstatic.com/recaptcha/releases/NMoy4HgGiLr5NAQaEQa2ho8X/recaptcha__en.js:266
    N https://www.gstatic.com/recaptcha/releases/NMoy4HgGiLr5NAQaEQa2ho8X/recaptcha__en.js:266
    f https://www.gstatic.com/recaptcha/releases/NMoy4HgGiLr5NAQaEQa2ho8X/recaptcha__en.js:266
    f https://www.gstatic.com/recaptcha/releases/NMoy4HgGiLr5NAQaEQa2ho8X/recaptcha__en.js:218
    L https://www.gstatic.com/recaptcha/releases/NMoy4HgGiLr5NAQaEQa2ho8X/recaptcha__en.js:125
    JA https://www.gstatic.com/recaptcha/releases/NMoy4HgGiLr5NAQaEQa2ho8X/recaptcha__en.js:369
    G https://www.gstatic.com/recaptcha/releases/NMoy4HgGiLr5NAQaEQa2ho8X/recaptcha__en.js:53
    vE https://www.gstatic.com/recaptcha/releases/NMoy4HgGiLr5NAQaEQa2ho8X/recaptcha__en.js:449
    E https://www.gstatic.com/recaptcha/releases/NMoy4HgGiLr5NAQaEQa2ho8X/recaptcha__en.js:26
recaptcha__en.js:310:363

Relevant Code:

https://codesandbox.io/s/compassionate-bouman-vw5zn?file=/index.html

Related issues:

• https://github.com/dozoisch/react-google-recaptcha/issues/129
• https://github.com/google/google-api-javascript-client/issues/281

[MeghaB]

Tracking internally via b/161141499

Thanks @zachasme for the repro steps here! We'll update back when we know more.

[vdjurdjevic]

Any workaround for this? My application has only phone auth, this makes it unusable..

[MeghaB]

Are you using Firebase UI (or lib-phonenumber, or another client-side phone verification) to ensure the phone number is valid before triggering the reCAPTCHA flow?

[juliosmax]

i am using firebase_auth: "^0.18.1+2" for flutterFire and i got the same issue: TypeError: Cannot read property 'style' of null
at Array. (https://www.gstatic.com/recaptcha/releases/48TunWH-ZrLteSwFVbw6tVnx/recaptcha__es.js:43:479)
at eH. (https://www.gstatic.com/recaptcha/releases/48TunWH-ZrLteSwFVbw6tVnx/recaptcha__es.js:66:353)

[zachasme]

@MeghaB no I am only using the reCAPTCHA and Firebase JS SDK. Following the phone auth docs this is the simplest implementation I could come up with.

const recaptchaRef = document.getElementById("recaptcha"); // this is a button
const phoneNumberRef = document.getElementById("phoneNumber"); // this is an input

async function handleSignIn(verifier) {
  try {
    const { verificationId } = await firebase
      .auth()
      .signInWithPhoneNumber(phoneNumberRef.value, verifier);
    console.log(verificationId);
  } catch (error) {
    console.error(error);
  }
}

const verifier = new firebase.auth.RecaptchaVerifier(recaptchaRef, {
  size: "invisible",
  callback: () => handleSignIn(verifier)
});

verifier.render();

This is also what runs in the reproduction sandbox.

If it is simply a requirement that library-consumers need validate phone numbers before calling signInWithPhoneNumber then I suggest it should be part of the phone auth docs linked above.

@yuchenshi I will be happy to provide any info you would like :+1:

[beeirl]

getting the same error. any updates?

[mrtk0y]

Still got this error with reCaptcha v2, using with Firebase, and

https://www.npmjs.com/package/react-google-recaptcha

[kanafghan]

I also get this error using @angular/fire v5 and Angular 9. Any updates on this?

[bgordon01]

I'm also getting this error using @angular/cdk & @angular/material v10.2.7 and firebase 8.0.1

[zachrnolan]

I'm also getting this error using Firebase JS SDK, any updates?