`signInWithPhoneNumber()`error - "TypeError: Cannot read properties of undefined (reading 'settings')"

[russellwheatley]

[REQUIRED] Describe your environment

• Operating System version: macOS 12.4
• Browser version: Chrome 103.0.5060.114 (latest)
• Firebase SDK version: 9.9.0
• Firebase Product: auth

[REQUIRED] Describe the problem

Encountering error when trying to use signInWithPhoneNumber().

TypeError: Cannot read properties of undefined (reading 'settings')

Screenshot of where in source code:

Steps to reproduce:

Run the following code. I reproduced using rollup.js as the bundler:

import { initializeApp } from 'firebase/app';

import { signInWithPhoneNumber,  initializeAuth } from 'firebase/auth';

var config = {
 // INSERT YOUR OWN FIREBASE CONFIG
}

const app = initializeApp(config);


const auth = initializeAuth(app);

// set "appVerificationDisabledForTesting"
auth.settings.appVerificationDisabledForTesting = true;

function testRecaptcha(){
  const id = 'ff-container';
  const element = document.createElement("div");
  element.setAttribute("id", id);
  document.body.appendChild(element);

  const recaptchaVerifier = new RecaptchaVerifier(id, {
    size: 'normal',
    theme:'light',
    callback: function(response) {
      console.log('Response', response);
    },
    'error-callback': function(error) {
      console.log('Error', error);
    },
    'expired-callback': function() {
      console.log('Expired');
    }
  });
  
  signInWithPhoneNumber(auth, '+111222444', recaptchaVerifier).then((response)=>{
    console.log('Response', response);
  }).catch((e)=> {  console.log('Error ', e); });

}

testRecaptcha();

This is also an issue on FlutterFire which I help to maintain: https://github.com/firebase/flutterfire/issues/9097

[hsubox76]

It looks like in this code, only 2 params are being passed to the RecaptchaVerifier constructor, and it requires 3, the third one being the auth instance: https://firebase.google.com/docs/reference/js/auth.recaptchaverifier

[russellwheatley]

Thanks! That was it. You may want to update the documentation here as it says:

"If none is provided, the default Firebase Auth instance is used. A Firebase Auth instance must be initialized with an API key, otherwise an error will be thrown."

When it appears it will error when auth instance is not provided.

[hsubox76]

@sam-gc Was it intended for the RecaptchaVerifier constructor to supply the default auth instance if no 3rd argument is provided? I don't see a default getAuth() anywhere else in the auth code so I'm guessing not. I can update the comment if that's the case.

[sam-gc]

Ah yeah good catch, it's always expected to pass the auth instance. I just sent out https://github.com/firebase/firebase-js-sdk/pull/6460

[DellaBitta]

I'm closing this issue for now since it seems like the docs have been updated. Please @ message me if that's incorrect, or open a new issue that refers to this one. Thanks!