Auth with SMS Firebase: Error (auth/argument-error)

Question

I´m trying use the firebase auth with Phone number on Vuejs (Quasar) Applycation. Following the documentation, first step is get the captcha. I believe thaths is where I cant do correctly:

For testing i´m using one single file: Div on html template:

  <div if="recaptcha-container" 
  data-sitekey="6LcsaxsdAAAAAEBn0sPDCEncnU9564MisyRuDzD_"
  data-callback="sendForm"
  data-size="invisible">
  </div>

Bellow, the code for auth in script. For safe i changed the sensive keys. They are correctly, I´m have sucessfly auth by GoogleAuth, using the same keys

import { initializeApp } from "firebase/app"
import { getAuth, RecaptchaVerifier,GoogleAuthProvider,signInWithPopup } from "firebase/auth"

const firebaseConfig = {
  apiKey: "xxxxxxxxxxxxxxxx",
  authDomain: "xxxxxx.firebaseapp.com",
  projectId: "dev-meetups-aa72b",
  storageBucket: "xxxxxxxx.appspot.com",
  messagingSenderId: "xxxxxx",
  appId: "xxxxxxxxxxxxxxxxx",
  measurementId: "G-xxxxxx"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig)
const provider = new GoogleAuthProvider();
const auth = getAuth(app)

Following the docs, and some tutorials, im initialize the captcha method on Created:

 created() {
    this.initilizeCaptcha()
  },

Mehotds:

initilizeCaptcha () {
window.recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {
  'size': 'invisible',
  'callback': (response) => {
    console.log(response)
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    // ...
  },
  'expired-callback': () => {
    // Response expired. Ask user to solve reCAPTCHA again.
    // ...
  }
}, auth);

As can see, the object RecapthaVerifier, receive the id from recaptcha html div and another params Including, the object auth.

However, when execute this, i got this error:

I can´t find the solution anywhere. If needed, i can provide the auth params.

The complete code https://codepen.io/eltonjhsouza/pen/gOxzvLq

Sitdown

Answer 1

For me, the error was because I had HTML comment inside my DIV. This cause error FirebaseError: Firebase: Error (auth/argument-error)

Code which was givving error

 <div
      id="recaptcha-container"
      class="justify-center flex"
    >
      <!-- Recaptcha Widget will be rendered here -->
 </div>

Code which fixed the error

 <div
      id="recaptcha-container"
      class="justify-center flex"
 ></div>    

Oscine

Thanks for the <div> code snippet. I didn't know we need to have the <div> – Linotype

To make a better note. The used div should not have any content at all. – Parfleche

Answer 2

about this question i´m make a debug in all steps of SDK of Firebase and I managed to solve it.

One of the problems was here:

<div if="recaptcha-container" 
  data-sitekey="6LcsaxsdAAAAAEBn0sPDCEncnU9564MisyRuDzD_"
  data-callback="sendForm"
  data-size="invisible">
 </div>

The id prop of div was type wrong, i typ IF.

Debugging the code in browser, I realized that the method bellow was initiate before the instance auth();

window.recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {
  'size': 'invisible',
  'callback': (response) => {
    console.log(response)
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    // ...
  },
  'expired-callback': () => {
    // Response expired. Ask user to solve reCAPTCHA again.
    // ...
  }
}, auth);

So i put this call on @click of button.

I hope this question could be help someone.

Sitdown

Answer 3

window.recaptchaVerifier = new RecaptchaVerifier('sign-in-button', {
  'size': 'normal',
  'callback': (response) => {
    console.log("prepared phone auth process");
  }
}, auth);

My mistake was not putting that code in onClick method button

Breezeway