Estoy tratando de usar la autenticación de firebase con el número de teléfono en Vuejs (Quasar) Applycation. Siguiendo la documentación, el primer paso es obtener el captcha. Creo que ahí es donde no puedo hacerlo correctamente:

Para probar, estoy usando un solo archivo: Div en la plantilla html:

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

A continuación, el código de autenticación en el script. Por seguridad, cambié las teclas sensibles. Son correctos, tengo autenticacion exitosa por GoogleAuth, usando las mismas claves

 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)

Siguiendo los documentos y algunos tutoriales, inicializo el método captcha en Creado:

 created() { this.initilizeCaptcha() },

Métodos:

 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);

Como puede ver, el objeto RecapthaVerifier recibe la identificación de recaptcha html div y otros parámetros, incluido el objeto auth.

Sin embargo, al ejecutar esto, recibí este error:

No encuentro la solución por ningún lado. Si es necesario, puedo proporcionar los parámetros de autenticación.

El código completo https://codepen.io/eltonjhsouza/pen/gOxzvLq