Error in Logging Using Digits Plugin

When I try to log in as the admin using the digits plugin(mobile OTP log in form), Sometimes I can’t log in as an admin to my website, https://thamejabeauty.com. The error message says that ‘’ re-captcha element has been removed."

I solved this by moving

into App.vue so it would never be deleted when changing pages:

And here are the composables I ended up using. No need for resetReCaptchaOnWindow.

Note the below composables are wrapped with a Vue Concurrnecy useTask generator. You don’t need to do that if you don’t want, but Vue Concurrnecy is a seriously cool library that helps cut down on a ton of boiler plate code in a lot of situations (not just this one).

export const useSendSMSOtpTask = () => {
return useTask(function* (
signal,
phoneE164Standard: string,
recaptchaConatinerId: string
) {
if (!window.recaptchaVerifier) {
window.recaptchaVerifier = new RecaptchaVerifier(
recaptchaConatinerId,
{ size: ‘invisible’ },
auth
);
}
const provider = new PhoneAuthProvider(auth);
const verificationId: string = yield provider.verifyPhoneNumber(
phoneE164Standard,
window.recaptchaVerifier
);
return verificationId;
});
};

export const useVerifySMSOtpAndLinkPhoneTask = () => {
return useTask(function* (
signal,
verificationId: string,
verificationCode: string
) {
const phoneCredential = PhoneAuthProvider.credential(
verificationId,
verificationCode
);
if (auth.currentUser && auth.currentUser.phoneNumber) {
// Remove existing phone then add new phone
yield unlink(auth.currentUser, ‘phone’);
yield linkWithCredential(auth.currentUser, phoneCredential);
} else if (auth.currentUser) {
// Add new phone
yield linkWithCredential(auth.currentUser, phoneCredential);
}
return auth.currentUser?.phoneNumber;
});
};

I solved this by moving

into App.vue so it would never be deleted when changing pages:

And here are the composables I ended up using. No need for resetReCaptchaOnWindow.

Note the below composables are wrapped with a Vue Concurrnecy useTask generator. You don’t need to do that if you don’t want, but Vue Concurrnecy is a seriously cool library that helps cut down on a ton of boiler plate code in a lot of situations (not just this one).

export const useSendSMSOtpTask = () => {
return useTask(function* (
signal,
phoneE164Standard: string,
recaptchaConatinerId: string
) {
if (!window.recaptchaVerifier) {
window.recaptchaVerifier = new RecaptchaVerifier(
recaptchaConatinerId,
{ size: ‘invisible’ },
auth
);
}
const provider = new PhoneAuthProvider(auth);
const verificationId: string = yield provider.verifyPhoneNumber(
phoneE164Standard,
window.recaptchaVerifier
);
return verificationId;
});
};

export const useVerifySMSOtpAndLinkPhoneTask = () => {
return useTask(function* (
signal,
verificationId: string,
verificationCode: string
) {
const phoneCredential = PhoneAuthProvider.credential(
verificationId,
verificationCode
);
if (auth.currentUser && auth.currentUser.phoneNumber) {
// Remove existing phone then add new phone
yield unlink(auth.currentUser, ‘phone’);
yield linkWithCredential(auth.currentUser, phoneCredential);
} else if (auth.currentUser) {
// Add new phone
yield linkWithCredential(auth.currentUser, phoneCredential);
}
return auth.currentUser?.phoneNumber;
});
};