Looking to implement Multi-Factor Authentication (MFA) in my web app, but encountering an issue where the multiFactor property is missing in the code snippet below:
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.2/firebase-app.js";
import { getAuth, RecaptchaVerifier, PhoneAuthProvider, signInWithEmailAndPassword }
from "https://www.gstatic.com/firebasejs/9.6.2/firebase-auth.js";
const firebaseConfig = {
...
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
auth.onAuthStateChanged((user) => {
const userEl = document.getElementById('user');
if (user) {
userEl.innerHTML = `${user.email} logged in. ${JSON.stringify(
user.multiFactor.enrolledFactors
)}`;
} else {
userEl.innerHTML = 'signed out';
}
});
window.recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {
'size': 'invisible',
'callback': (response) => {
console.log('captcha solved!');
}
}, auth);
const enrollBtn = document.getElementById('enroll-button');
enrollBtn.onclick = () => {
signInWithEmailAndPassword(auth, '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98faf4f9faf4f9d8fff5f9f1f4b6fbf7f5">[email protected]</a>', 'foobar').then(() => {
const user = auth.currentUser;
if (!user) {
return alert('User not logged!');
}
const phoneNumber = document.getElementById('enroll-phone').value;
console.log(user);
user.multiFactor.getSession().then((session) => {
const phoneOpts = {
phoneNumber,
session,
};
const phoneAuthProvider = new PhoneAuthProvider();
phoneAuthProvider.verifyPhoneNumber(
phoneOpts,
window.recaptchaVerifier
).then((verificationId) => {
window.verificationId = verificationId;
alert('sms text sent!');
});
});
});
};
The error states that user.multiFactor is undefined, causing the code to fail at the getSession method resulting in the console error: "Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getSession')".
It's worth noting that MFA is enabled in the Firebase project as shown in the screenshot below:
**************** UPDATE *******************
A possible solution is to update the code snippet as follows:
const mfaUser = multiFactor(user);
mfaUser.getSession().then((session) => {
However, implementing this change results in a new error when calling verifyPhoneNumber:
VM21778 index.html:315 TypeError: Cannot read properties of undefined (reading 'tenantId')
at _addTidIfNecessary (firebase-auth.js:1934:14)
at startEnrollPhoneMfa (firebase-auth.js:6778:125)
at _verifyPhoneNumber (firebase-auth.js:8500:40)
It's important to note that Multi-Tenancy is disabled in the project, raising questions about the cause of the 'tenantId' error.