Create user on client side using email and password
const authCredential = await firebase.auth().createUserWithEmailAndPassword(email, password);
Send email to verify
await authCredential.user?.sendEmailVerification();
Check user have enrolled in Multi Factor user.multiFactor.enrolledFactors property , if not then ask user to enroll, in this case I want to enroll as phone verification
To enroll to phone as multi factor for this user, we need to send OTP to the user phone number.
Before able to send OTP to user phone number , we need to solve captcha, on which you may set it as invisible.
One captcha is solved. Send OTP to user , using the OTP code we call some method to complete enroll of two factor.
At this point we know and successfully confirmed that this phone number is belong to earlier created / logged in user using email/password.
Now we can proceed to sign in.
On client side call method to signin user using email/password. The firebase client library will throw error that user is enrolled into multifactor, with a variable/reference called "resolver" . This resolver thing is important.
Note*: use try/catch and check if firebase is throwing enrolled multifactor.
After catching this specific code error, we know that the given user/pass was correct but need phone verification. So we use user phone number and send OTP to the user phone.
And again you need to do some recaptcha thing.
Now we have otp code. With combination of "resolver" we get earlier and "otp" code we call some method to verify again and if pass mean user is successfully logged in.
cjmling
commented
3 years ago
Steps
Enable MFA for your app first through google console https://console.cloud.google.com/customer-identity/mfa
Create user on client side using email and password
const authCredential = await firebase.auth().createUserWithEmailAndPassword(email, password);Send email to verify
await authCredential.user?.sendEmailVerification();Check user have enrolled in Multi Factor
user.multiFactor.enrolledFactorsproperty , if not then ask user to enroll, in this case I want to enroll as phone verificationTo enroll to phone as multi factor for this user, we need to send OTP to the user phone number.
Before able to send OTP to user phone number , we need to solve captcha, on which you may set it as invisible.
One captcha is solved. Send OTP to user , using the OTP code we call some method to complete enroll of two factor.
At this point we know and successfully confirmed that this phone number is belong to earlier created / logged in user using email/password.
Now we can proceed to sign in.
On client side call method to signin user using email/password. The firebase client library will throw error that user is enrolled into multifactor, with a variable/reference called "resolver" . This resolver thing is important.
Note*: use try/catch and check if firebase is throwing enrolled multifactor.
After catching this specific code error, we know that the given user/pass was correct but need phone verification. So we use user phone number and send OTP to the user phone.
And again you need to do some recaptcha thing.
Now we have otp code. With combination of "resolver" we get earlier and "otp" code we call some method to verify again and if pass mean user is successfully logged in.
Some code reference for actual implementation
https://cloud.google.com/identity-platform/docs/web/mfa
https://github.com/ckjdelhi/react-otp/blob/master/src/App.js
https://github.com/fireship-io/multifactor-auth-firebase/blob/master/src/main.js
https://rnfirebase.io/auth/phone-auth