TypeError: verifier.verify is not a function- Vue.Js and Firebase

Viewed 34

I am trying out firebase signInWithPhoneNumber for the first time using vue.js. I have followed the documentation. The Recaptcha is working but when it comes to signInWithPhoneNumber I get this error:

TypeError: verifier.verify is not a function
    at _verifyPhoneNumber (phone.ts?47a7:178:1)
    at signInWithPhoneNumber (phone.ts?47a7:106:1)
    at VueComponent.signIn (SignUp.vue?611a:68:1)
    at callback (SignUp.vue?611a:50:1)
    at eval (recaptcha_verifier.ts?c937:220:1)
    at lW.Y.lW.o (recaptcha__en.js:788:178)
    at M.R (recaptcha__en.js:437:30)
    at new Promise (<anonymous>)
    at lk.C (recaptcha__en.js:437:2)
    at Array.<anonymous> (recaptcha__en.js:415:375)

I don't know what is causing it. I have searched for the solution but failed to do so? Could you please point out my mistake? Here is my code:

Template:

<template>
  <div>
    <h2>SignUp</h2>
    +60<input type="number" v-model="phNo" placeholder="Phone Number" />
    <button id="sign-in-button" @click="sendOtp">Get Recaptcha</button>
    <div id="recaptcha-container"></div>
    <br />
    <input type="number" v-model="otp" placeholder="OTP" />
    <button @click="verifyOtp">Verify</button><br />
    <button @click="sendOtp()">Resend OTP</button>
  </div>
</template>

Script:


<script>
import { initializeApp } from "@firebase/app";
import firebaseConfig from "@/firebaseConfig";

import {
  getAuth,
  signInWithPhoneNumber,
  RecaptchaVerifier,
} from "firebase/auth";

const app = initializeApp(firebaseConfig);
const auth = getAuth();

export default {
  name: "SignUp",
  data() {
    return {
      phNo: "",
      appVerifier: "",
      otp: "",
    };
  },
  methods: {
    sendOtp() {

      window.recaptchaVerifier = new RecaptchaVerifier(
        "recaptcha-container",
        {
          size: "normal",
          callback: (response) => {
            // reCAPTCHA solved, allow signInWithPhoneNumber.
            this.appVerifier = response;
            this.signIn(response);
          },
          "expired-callback": () => {
            // Response expired. Ask user to solve reCAPTCHA again.
          },
        },
        auth
      );
      recaptchaVerifier.render().then((widgetId) => {
        window.recaptchaWidgetId = widgetId;
      });
    },
    signIn(something) {
      console.log("running");

      let phoneNumber = "+60" + this.phNo;

      signInWithPhoneNumber(auth, phoneNumber, something)
        .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;
          this.verifyOtp();
        })
        .catch((error) => {
          // Error; SMS not sent
          // ...
          console.log(error);
        });
    },
    //
    verifyOtp() {
      //
      console.log("running");
      let vm = this;
      let code = this.otp;
      window.confirmationResult
        .confirm(code)
        .then(function (result) {
          // User signed in successfully.
          var user = result.user;
          // ...
          //route to set password !
          vm.$router.push({ path: "/setPassword" });
        })
        .catch(function (error) {
          // User couldn't sign in (bad verification code?)
          // ...
        });
    },
  },
  created() {},
};
</script>
0 Answers
Related