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?

[sayfulloev]

I started getting this error once I enabled Phone numbers for testing (optional) option in Firebase. Once I removed it and tried to login with regular phone number it worked just fine.

[aghahasaan]

It's because you are using test numbers which are not really receiving the response code.

[Collins1738]

It's because you are using test numbers which are not really receiving the response code.

I used a real number and got the same error. I also got the verification code text too.

[aghahasaan]

Then it’s most likely you have placed the code blocks in wrong order, also, if you have ‘allow users to sign in with same email from different platforms/providers’ option enabled can possibly cause this error as well. I got mine working without any errors using all these steps and by deleting all test numbers I had entered before.

Sent from my iPhone

On Feb 6, 2021, at 8:51 PM, Collins1738 [email protected] wrote:

 It's because you are using test numbers which are not really receiving the response code.

I used a real number and got the same error. I also got the verification code text too.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[willvlad]

It's a critical bug that derails any implementation of phone auth in web apps.

Anyone from Firebase reading this and working on a fix?

Just disable visible captcha if the setting is invisible or don't ask for property style of null!

[Collins1738]

@willvlad While I hope this bug gets fixed soon, it can actually be ignored. The error pops up in deployment but in production it just gets logged and it doesn’t affect anything. Authentication still works as planned. That has been my experience with it.

[maitrungduc1410]

I'm still facing this problem

[YouZag]

Still a problem when the size: invisible shows the pictures to match.

[YouZag]

I'm confused - is this not a problem for everyone?

[hirashuriken]

I have the same problem for web app. Does someone know how to fix it? It looks like a critical issue!

[nicks258]

Any updates?

[ga0321]

push

[jianweic]

I have the same problem. Does someone know how to fix it? In my case, I remove the element that contains the ReCAPTCHA immediately after verification success. I avoid call reset and remove the element after that will have no issue

[olehreznichenko]

Same with me 😢

[joaovictormilhomem]

I had this problem, and I resolved by activating the authentication method in question in the firebase console, I had forgotten to do this.

[iankitverma]

How did you resolve it?

I had this problem, and I resolved by activating the authentication method in question in the firebase console, I had forgotten to do this.

[landsman]

Exactly the same problem, on localhost with testing numbers. Any news? @MeghaB?

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

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

[Mayank-Sh07]

If you're using reCaptcha with a project that already has Firebase, make sure to go to the firebase console and enable authentication for that particular project. Hope this helps

[cedvdb]

I'm having this issue with a test phone number on flutter when hot reloading.

[babakhoo]

I found this topic because I have the same error. I found a way to fix it and go ahead while its not resolved yet. I really hope firebase team do something about it while Im a bit disappointed that after all this time there is no move. My solution to go ahead : I dont use webpack for this part of program, it means I have : import {getAuth, RecaptchaVerifier } from 'https://www.gstatic.com/firebasejs/9.6.10/firebase-auth.js'; Then without debuging, with chrom web server I host my src folder (index.html and index.js reference as 'module' ) in local host and boom No error Mrs.Captcha show out beautifully and do the job , while if I debug the same code I see internal error, and if I make main.js and bundler stuff, the same problem when window.recaptchaVerifier = new RecaptchaVerifier