Firebase: Error (auth/argument-error) ....... ........ ........... ..........

Question

    import React,{useState} from "react";
    import { Link } from "react-router-dom";

    import Checkbox2 from "../Checkbox2";
    import "./MacBookAir3.css";
    
     import { initializeApp } from "firebase/app";
     import { getAuth, RecaptchaVerifier, signInWithPhoneNumber } from "firebase/auth";

     // Initialize the app using your firebase config
     const firebaseConfig = {
      ....
     };

    const app = initializeApp(firebaseConfig);

     const auth = getAuth(app);

    window.recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {
    'size': 'invisible',
    'callback': (response) => {
     // reCAPTCHA solved, allow signInWithPhoneNumber.
     onSignInSubmit();
     }
    }, auth);

     const phoneNumber = getPhoneNumberFromUserInput();
    const appVerifier = window.recaptchaVerifier;

    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).
      window.confirmationResult = confirmationResult;
      // ...
    }).catch((error) => {
      // Error; SMS not sent
      // ...
    });


    function MacBookAir3(props) {
      const {
      overlapGroup5,
      zoopla,
      verificationCodeRe,
      enterYourEmailTo,
      inputType,
      inputPlaceholder,
      gdprAndPrivacy,
      tC,
      sendVerificationButton,
      checkbox21Props,
      checkbox22Props,
    } = props;

    const [phoneNumber, setPhoneNumber] = useState("");
    const [expandForm, setExpandForm] = useState(false);

    const handleSubmit = (event) => {
      // prevent the default behavior of the form submission
      event.preventDefault();
  
      // Get the value of the phone number input field
      const phoneNumber = document.querySelector("input[name='phone-number']").value;
  
      // Update the phoneNumber state with the value entered by the user
      //getPhoneNumberFromUserInput(phoneNumber);
  
      // check if both checkboxes are ticked
      const checkboxInputs = document.querySelectorAll("input[type='checkbox']");
      if (!checkboxInputs || checkboxInputs.length !== 2 || !checkboxInputs[0].checked ||        !checkboxInputs[1].checked) {
      // one or both checkboxes are not ticked, show an alert
      alert("Please conrirm that you have read the Terms & Condition and GDPR by ticking both the  boxes");
      return;
    }
  
    // phone-number input is filled in and both checkboxes are ticked, navigate to the link
    window.location.href = "http://localhost:1234/macbook-air-4";
    };
  
  

     return (
      <div className="container-center-horizontal">
      <form className="macbook-air-3 screen"  id="form5" name="form5" action="form5"      method="post">
        <div className="overlap-group5-3" style={{ backgroundImage: `url(${overlapGroup5})` }}>
          <div className="authentication"></div>
          <div className="overlap-group-7">
            <div className="zoopla inter-bold-black-32px">{zoopla}</div>
            <p className="verification-code-re inter-normal-black-24px">{verificationCodeRe}</p>
            <p className="enter-your-email-to inter-normal-black-16px">{enterYourEmailTo}</p>
          </div>
          <div className="overlap-group1-5">
            <input
              ref={(input) => { this.phoneNumberInput = input; }}
              className="email-1 inter-bold-silver-16px"
              name="phone-number"
              placeholder={inputPlaceholder}
              type={inputType}
              required
            />
          </div>
          <Link to="/macbook-air-7">
            <div className="group-16">
              <div className="overlap-group2-4">
                <div className="rectangle-32"></div>
                <div className="gdpr-and-privacy inter-bold-black-16px">{gdprAndPrivacy}</div>
              </div>
            </div>
          </Link>
          <Link to="/macbook-air-8">
            <div className="group-17">
              <div className="overlap-group3-2">
                <div className="rectangle-32-1"></div>
                <div className="tc inter-bold-black-16px">{tC}</div>
              </div>
            </div>
          </Link>
          <Checkbox2 className={checkbox21Props.className} />
          <Checkbox2 className={checkbox22Props.className} />
          <a href="javascript:SubmitForm('form5')">
            <div className="group-6-2">
              <div className="overlap-group4-1">
                <button type="button" onClick={handleSubmit} className="button-2"></button>
                <div id="recaptcha-container"></div>
                <div className="send-verification-code inter-bold-white-16px">. {sendVerificationButton}</div>
              </div>
            </div>
            
            </a>
          </div>
         </form>
       </div>
      );
    }

     export default MacBookAir3;

and here the error and i am getting

Firebase: Error (auth/argument-error). ▼ 3 stack frames were expanded. createErrorInternal node_modules/@firebase/auth/src/core/util/delay.ts:57:3 _assert node_modules/@firebase/auth/src/core/util/emulator.ts:26:11 new RecaptchaVerifier http://localhost:1234/index.3d214d75.js:253229:9 ▲ 3 stack frames were expanded. 2EymT.react/jsx-dev-runtime /__parcel_source_root/components/MacBookAir3/index.jsx:25:27 22 | 23 | const auth = getAuth(app); 24 |

25 | window.recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', { | ^ 26 | 'size': 'invisible', 27 | 'callback': (response) => { 28 | // reCAPTCHA solved, allow signInWithPhoneNumber

dependencies

 "firebase": "^9.13.0",
    "react": "^18.2.0",

I am looking to verify users by obtaining user phone numbers and sending out otp with the help of firebase auth. any help in getting this fixed would be much appreciated.

Answer 1

Put your recaptchaVerifier into function like

const verifyRecaptcha = () => {
    const app = initializeApp(firebaseConfig);
    const auth = getAuth(app); 

    let recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {}, auth)
    console.log(recaptchaVerifier)
  }