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>