Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Error: verifier._reset is not a function. when trying to Sign in with phone using firebase, react native and Expo

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.

like image 663
BaraKanske Avatar asked Nov 03 '21 18:11

BaraKanske


People also ask

How to send a verification code to a phone number using Firebase?

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.

How to fix-Firebase Database is not a function?

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.

What is Firebase authentication?

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.

What happens if the verification code is correct in JavaScript?

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.


1 Answers

Updating to the latest version of expo-firebase-recaptcha should fix it.

like image 115
Rishabh Singh Avatar answered Nov 02 '22 18:11

Rishabh Singh



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!