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?

[thinhbg2812-2]

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 notifications@github.com 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

[justColbs]

I'm also running into this same issue. Haven't tried it in production, but definitely getting this error when running my project locally.

[thinkingatoms]

+1 with web recaptcha.

out of curiosity how are you guys specifying the recaptcha site key in firebase flutter? thanks in advance!

[AlkarE]

I solved this by wrapping code in try...catch

[landsman]

Guys, any progress on this?

I solved this by wrapping code in try...catch

@AlkarE where, when?

[AlkarE]

I don't remember exactly. I guess this part of code may give you an idea: try {

  if(!window.recaptchaVerifier) {

    window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('signin-recaptcha', {
      'size': 'invisible',
      'callback': (response) => {
        // cb
      }
    });
  } 
  else {
    window.recaptchaVerifier.render().then(function(widgetId) {
      grecaptcha.reset(widgetId);
    });
  }
} catch(e) {
  console.log(e)
}

[BarsaDesuntech]

I'm also facing the same issue while login.

[AlkarE]

Hi. I've used 'try...catch' for recaptcha initializing, nothing else. Why do you ask how I imported recaptcha module? you may import it as standart module. Or I missed something?

[prameshj]

I believe this error happens when there is a problem with phone auth, which in turn resets recaptcha verifier. The problem does not happen if we invoke the clear() method (as documented in https://firebase.google.com/docs/auth/web/multi-factor#enrolling_a_second_factor).

Fixing this in https://github.com/firebase/firebase-js-sdk/pull/7574, will update the PR once i can verify it with the demo app.

[prameshj]

I'm unable to repro this with the demo app in https://github.com/firebase/firebase-js-sdk/tree/master/packages/auth/demo

Are folks still seeing this issue?

[landsman]

@prameshj did you tried this with test numbers, dev mode?

[dominoFire]

I am observing this error when testing my React webapp simulating unstable connection by switching Airplane Mode on and off on my dev laptop: let the app loads, turn airplane mode on, try to sign in.

Calling the snippet below when auth fails, i.e., when signInWithPhoneNumber() promise fails, captured with .catch() call

        signInWithPhoneNumber(auth, phoneNumber, appVerifier)
            .then((confirmationResult) => {
              // SMS sent. Prompt user to type the code from the message, then sign the
              // user in with confirmationResult.confirm(code).

            })
            .catch((error) => {
              // Error; SMS not sent
              // ...
              alert('Could not Sign In');
              console.log('Error on sending SMS: ' + error);
              if (typeof grecaptcha !== 'undefined')
              {
                // see https://firebase.google.com/docs/auth/web/phone-auth#send-a-verification-code-to-the-users-phone
                console.log('resetting grecaptcha');
                grecaptcha.reset();
              }
              else
              {
                console.log('No grecaptcha found');
              }
              if (typeof window.recaptchaVerifier !== 'undefined')
              {
                // see https://firebase.google.com/docs/auth/web/multi-factor#enrolling_a_second_factor
                console.log('resetting window.recaptchaVerifier');
                try {
                  window.recaptchaVerifier.clear();
                }
                catch
                {
                  console.log('Could not clear reCaptchaVerifier');
                }
              }
              else
              {
                console.log('No window.recaptchaVerifier found');
              }
          });

[prameshj]

@prameshj did you tried this with test numbers, dev mode?

I tried with test and real phone numbers and did not see the error. I used a malformed phone number(like omitting + sign or country code) to try to trigger the error. Basically, i can only get the checkbox reCAPTCHA challenge.

[prameshj]

I am observing this error when testing my React webapp simulating unstable connection by switching Airplane Mode on and off on my dev laptop: let the app loads, turn airplane mode on, try to sign in.

Calling the snippet below when auth fails, i.e., when signInWithPhoneNumber() promise fails, captured with .catch() call

You mean you see the console log of "'Error on sending SMS: Cannot read property 'style' of null"?

Does this happen when you use verifyPhoneNumber() too? This snippet is very similar to what we have in the demo app - https://github.com/firebase/firebase-js-sdk/blob/2d0a9f5fd921568bc76fcdee325b9ab5e6be8a58/packages/auth/demo/src/index.js#L722

        signInWithPhoneNumber(auth, phoneNumber, appVerifier)
            .then((confirmationResult) => {
              // SMS sent. Prompt user to type the code from the message, then sign the
              // user in with confirmationResult.confirm(code).

            })
            .catch((error) => {
              // Error; SMS not sent
              // ...
              alert('Could not Sign In');
              console.log('Error on sending SMS: ' + error);
              if (typeof grecaptcha !== 'undefined')
              {
                // see https://firebase.google.com/docs/auth/web/phone-auth#send-a-verification-code-to-the-users-phone
                console.log('resetting grecaptcha');
                grecaptcha.reset();
              }
              else
              {
                console.log('No grecaptcha found');
              }
              if (typeof window.recaptchaVerifier !== 'undefined')
              {
                // see https://firebase.google.com/docs/auth/web/multi-factor#enrolling_a_second_factor
                console.log('resetting window.recaptchaVerifier');
                try {
                  window.recaptchaVerifier.clear();
                }
                catch
                {
                  console.log('Could not clear reCaptchaVerifier');
                }
              }
              else
              {
                console.log('No window.recaptchaVerifier found');
              }
          });

[dominoFire]

You mean you see the console log of "'Error on sending SMS: Cannot read property 'style' of null"?

No, I mean, I have the snippet from comment above in my tests to verify that I'm clearing recaptcha.

Does this happen when you use verifyPhoneNumber() too? This snippet is very similar to what we have in the demo app -

I don't know, I see this happens in signInWithPhoneNumber. Using the debugger shows me this is the line that throws the exception

[zachasme]

I'm unable to repro this with the demo app in https://github.com/firebase/firebase-js-sdk/tree/master/packages/auth/demo

Are folks still seeing this issue?

Hi @prameshj, it's been a couple of years so I've updated my original reproduction to use the latest version of the modular firebase sdk. Steps to reproduce:

• Go to the updated 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 figure out a way to trigger it
• Complete the captcha
• Observe the following error is thrown:

I'm assuming it's the same error but style has become w during minification.

[prameshj]

Thanks! I was able to repro with the above link and also on the test app, with a different browser. The draft PR does resolve this error, but i did hit a different assert. I will investigate. Thanks for the inputs!

[farhaanxxiv]

It happens with me only for test numbers

[johnfrancmartin]

We're still running into this, any updates on the Draft PR? We seem to be hitting it consistently in Incognito...

[manishr7]

HEY GUYS I FOUND THE SOLUTION ...APPARENTLY I WAS USING TEST PHONE NUMBERS BUT ONCE I SIGN IN WITH IT I NEED TO DELETE THAT ACCOUNT FROM FIREBASE USERS SECTION TO BE ABLE TO LOGIN AGAIN WITH THAT TEST NUMBER OTHERWISE RECAPTCHA THROWS THIS ERROR...this worked for me i hope it helps

[andresemartinez]

I get the same error while resetting a size: invisible recaptcha v2 after a firebase error (FirebaseError: Firebase: TOO_SHORT (auth/invalid-phone-number) only if the image selector appears. I don't get the error with a size: normal recaptcha or if the raptcha verifies without selecting images. The weird part is that is not the actual reset function that breaks, I tried to try catch the error but I couldn't find which function is throwing.