I am using firebase phone authentication for logging in users using their mobile numbers in my React+Node application. Everything is working fine at localhost, sms are being sent with verification code and users are able to log in.
But when I deployed the application, it is no longer working. When enter mobile number and complete the captcha, it just reloads the captcha and I have to complete it again and it never sends the sms.
I have this error in my console:
POST https://www.googleapis.com/identitytoolkit/v3/relyingparty/sendVerificationCode?key=myFirebaseAPIkey 400
This only happens in production. I'm not sure why this is happening. Could my host be blocking some port firebase uses to send sms? Or there is something wrong at my end.
Here is my login method:
loginWithPhone = () => {
this.setState({ showOnlyCaptcha: true }, () => {
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
"recaptcha-container"
);
var phoneNumber = "+91" + this.state.loginWithMobile;
var appVerifier = window.recaptchaVerifier;
firebase
.auth()
.signInWithPhoneNumber(phoneNumber, appVerifier)
.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;
})
.catch(function (error) {
// Error; SMS not sent
if (error.code === "auth/too-many-requests") {
this.setState(
{
loginWithPhoneErrorMessage:
"Unable to verify Captcha at this time. Please try again after some time.",
},
() => {
this.setState({ loginWithPhoneError: true });
}
);
}
});
});
};
I figured it out after some research. To be able to make auth work in production, you need to add your domain to firebase project Authorized domains list. After that, all sign-in methods will work in your domain.