I am trying to implement Phone Sign In in mu react native app, but I am getting the following error:
verifier._reset is not a function. (In 'verifier._reset()', 'verifier._reset' is undefined)
at http://192.168.1.2:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&minify=false:126633:27 in <unknown>
at node_modules/tslib/tslib.js:60:8 in createExporter
at node_modules/tslib/tslib.js:18:0 in <global>
at http://192.168.1.2:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&minify=false:116838:35 in rejected
This is how I have tried to implement the signing:
const SignUp = () => {
const [phoneNumber, setPhoneNumber] = useState("")
const recaptchaVerifier = React.useRef(null);
const auth = getAuth(app)
const sendCode = async () => {
console.log(recaptchaVerifier.current)
signInWithPhoneNumber(auth, phoneNumber, recaptchaVerifier.current!)
.then(r => {
console.log("Hej!")
}).catch(err=>{
console.log(err)
})
}
return (
<SafeAreaView
style={tw.style('w-full')}>
<FirebaseRecaptchaVerifierModal
ref={recaptchaVerifier}
firebaseConfig={app.options}
attemptInvisibleVerification={true}
/>
<TextInput
style={tw.style('w-1/2', 'shadow', 'border', 'rounded', 'py-2', 'px-3', 'text-gray-700')}
onChangeText={setPhoneNumber}
keyboardType="phone-pad"
/>
<Button title={"Send Code"} onPress={sendCode}/>
</SafeAreaView>
)
}
export default SignUp
I have also tried to implement it like this:
const phoneProvider = new PhoneAuthProvider(auth) const verificationId = await phoneProvider.verifyPhoneNumber(phoneNumber, recaptchaVerifier.current!)
but I get the same result.
I am all out of ideas, so any help would be much appreciated.
This will trigger the Firebase servers to send a verification code to the given phone number. The signInWithPhoneNumber method returns an object with a confirmation method that is used to verify the one-time code sent to the number. Let’s create a state using the useState hook to hold the confirmation method.
I have the same error -firebase.database is not a function- but with different situation you just need to add above and the link of javascript that contain the Firebase configuration. You may also try to use the defer Attribute in your script as it will not load the scripts until page elements are loaded.
Firebase’s authentication module provides backend services and SDKs to authenticate users in your app. It supports authentication using passwords, phone numbers, popular identity providers like Google, Facebook and Twitter, and more. The native Firebase SDKs ensure that a user’s authentication state between app sessions is persisted.
If the verification code is correct, the promise will be resolved. If not, it’ll be rejected. We should also make sure to clear the confirm method from the state once it serves its purpose. Let’s pass this function to the VerifyCode screen as a prop, and call this function when the user presses the confirm button.
Updating to the latest version of expo-firebase-recaptcha should fix it.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With