How to use expo-firebase-reacaptcha? - firebase

Question

Expo recently launched the expo-firebase-recaptcha library and i am trying to implement it in my app. The recaptcha occurs succesfully to test if i am a robot however i am not getting the text message with the verification code. What am i doing wrong? Any help would be appreciated.
Heres a snippet of my code
import * as firebase from "firebase/app";
import "firebase/auth";
import {
FirebaseRecaptchaVerifierModal,
FirebaseAuthApplicationVerifier
} from "expo-firebase-recaptcha";
var config = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""
};
if (!firebase.apps.length) {
firebase.initializeApp(config);
}
function LoginScreen() {
const recaptchaVerifier = React.createRef();
async onSendOtp(){
if(this.state.phone!="")
{
try{
this.setState({Otp:!this.state.Otp})
var phoneNumber = this.state.phone;
console.log("Phone"+phoneNumber);
const phoneProvider = new firebase.auth.PhoneAuthProvider();
const verificationid = await phoneProvider.verifyPhoneNumber(
phoneNumber,
recaptchaVerifier.current
);
this.setState({
verificationId:verificationid
})
console.log("Message sent"+this.state.verificationId);
}catch(err){
console.log("Error message"+err)
}
}
else
{
Alert.alert("Enter phone number");
}
}
return (
<View style={{ width: "100%", flex: 1, paddingHorizontal: 30 }}>
<Title>Login</Title>
<FirebaseRecaptchaVerifierModal
ref={recaptchaVerifier}
firebaseConfig={config}
/>
<View style={styles.inputContainer}>
<Icon style={styles.inputIcon} name="mobile-phone"/>
<TextInput style={styles.inputs}
placeholder="Phone number"
autoCapitalize="none"
keyboardType="numeric"
underlineColorAndroid='transparent'
maxLength={10}
onChangeText={(text)=>this.phonenumberchange(text)}/>
</View>
<TouchableHighlight style={[styles.buttonContainer, styles.signupButton]} onPress={() => this.onSendOtp()}>
<Text id="sendcode" style={styles.signUpText}>SEND CONFIRMATION CODE</Text>
</TouchableHighlight>
</View> );
}

Answer 1

const Phoneauthentication=({navigation})=>{
const recaptchaVerifier = useRef(null);
const [phoneNumber, setPhoneNumber] =useState();
const [verificationId, setVerificationId] =useState();
const [verificationCode, setVerificationCode] =useState();
const firebaseConfig = firebaseconfig;
const [message, showMessage] = useState((!firebaseConfig || Platform.OS === 'web')
? { text: "To get started, provide a valid firebase config in App.js and open this snack on an iOS or Android device."}
: undefined);
return (
<View style={{ padding: 20, marginTop: 50 }}>
<FirebaseRecaptchaVerifierModal
ref={recaptchaVerifier}
firebaseConfig={firebaseConfig}
style={{ margin:0, left: 0, top:-10, right: 0, bottom: 0 }}
title="Hello"
/>
<Text style={{ marginTop: 20 }}>Enter phone number</Text>
<TextInput
style={{ marginVertical: 10, fontSize: 17 }}
placeholder="[phone]"
autoFocus
autoCompleteType="tel"
keyboardType="phone-pad"
textContentType="telephoneNumber"
onChangeText={(phoneNumber) => setPhoneNumber(phoneNumber)}
/>
<Button
title="Send Verification Code"
disabled={!phoneNumber}
onPress={async () => {
// The FirebaseRecaptchaVerifierModal ref implements the
// FirebaseAuthApplicationVerifier interface and can be
// passed directly to `verifyPhoneNumber`.
try {
const phoneProvider = new firebase.auth.PhoneAuthProvider();
const verificationId = await phoneProvider.verifyPhoneNumber(
phoneNumber,
recaptchaVerifier.current
);
setVerificationId(verificationId);
showMessage({
text:"Verification code has been sent to your phone.",
});
} catch (err) {
showMessage({ text:`Error: ${err.message}`,color: "red" });
}
}}
/>
<Text style={{ marginTop: 20 }}>Enter Verification code</Text>
<TextInput
style={{ marginVertical: 10,fontSize: 17 }}
editable={!!verificationId}
placeholder="123456"
onChangeText={setVerificationCode}
/>
<Button
title="Confirm Verification Code"
disabled={!verificationId}
onPress={async () => {
try {
const credential = firebase.auth.PhoneAuthProvider.credential(
verificationId,
verificationCode
);
await firebase.auth().signInWithCredential(credential);
showMessage({text:'Phone authentication successful 👍'||navigation.goback()});
} catch (err) {
showMessage({ text: `Error: ${err.message}`, color: "red",marginTop:220 });
}
}}
/>
{message ? (
<TouchableOpacity
style={[StyleSheet.absoluteFill, { backgroundColor: 0xffffffee, justifyContent: "center" }]}
onPress={() => showMessage(undefined)}>
<Text style={{color: message.color || "blue", fontSize: 17, textAlign: "center", margin:20, }}>
{message.text}
</Text>
</TouchableOpacity>
) : undefined}
</View>
);
}
export default PhoneAuth;