I’m trying to implement Firebase phone authentication in my React Native Expo project. I followed the Firebase documentation, but I’m encountering the following error when trying to send the verification code:

TypeError: Cannot read property 'prototype' of undefined

Here’s my setup:

Login.js:

import React, { useState } from 'react';
import { Text, TextInput, TouchableOpacity, View, ToastAndroid } from 'react-native';
import { RecaptchaVerifier, PhoneAuthProvider, signInWithCredential, signInWithPhoneNumber } from 'firebase/auth';
import { auth, app } from './firebase';

const Login = () => {
    const [countryCode, setCountryCode] = useState('+91');
    const [mobileNum, setMobileNum] = useState('');
    const [verificationId, setVerificationId] = useState('');
    const [verificationCode, setVerificationCode] = useState('');

    const handleSendCode = async () => {
        const phoneNumber = countryCode + mobileNum;
        try {
            const verifier = new RecaptchaVerifier(auth, 'recaptcha-container', {
                size: 'invisible',
                callback: (response) => {
                    console.log(response);
                },
                'expired-callback': () => {
                    ToastAndroid.show('reCAPTCHA expired. Please try again.', ToastAndroid.SHORT);
                }
            });

            const verificationResult = await signInWithPhoneNumber(auth, phoneNumber, verifier);
            setVerificationId(verificationResult.verificationId);
            ToastAndroid.show('Verification code sent', ToastAndroid.SHORT);
        } catch (error) {
            console.error('Error sending code:', error);
            ToastAndroid.show(`Error: ${error.message}`, ToastAndroid.SHORT);
        }
    };

    const handleVerifyCode = async () => {
        try {
            const credential = PhoneAuthProvider.credential(verificationId, verificationCode);
            await signInWithCredential(auth, credential);
            ToastAndroid.show('Login successful', ToastAndroid.SHORT);
        } catch (error) {
            console.error('Error verifying code:', error);
            ToastAndroid.show(`Error: ${error.message}`, ToastAndroid.SHORT);
        }
    };

    return (
        <View>
            <TextInput placeholder="Country Code" value={countryCode} onChangeText={setCountryCode} />
            <TextInput placeholder="Mobile Number" value={mobileNum} onChangeText={setMobileNum} keyboardType="numeric" />
            <TextInput placeholder="Verification Code" value={verificationCode} onChangeText={setVerificationCode} keyboardType="numeric" />
            <TouchableOpacity onPress={handleSendCode}>
                <Text>Send Code</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={handleVerifyCode}>
                <Text>Verify Code</Text>
            </TouchableOpacity>
            <View id='recaptcha-container' />
        </View>
    );
};

export default Login;

firebase.js:

import { initializeApp } from 'firebase/app';
import { getAuth, initializeAuth, getReactNativePersistence } from 'firebase/auth';
import AsyncStorage from '@react-native-async-storage/async-storage';

// Your web app Firebase configuration
const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID",
    measurementId: "YOUR_MEASUREMENT_ID"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

// Initialize Firebase Auth with persistence
const auth = initializeAuth(app, {
    persistence: getReactNativePersistence(AsyncStorage)
});

export { auth, app };

package.json:

{
  "name": "firebaselogin",
  "version": "1.0.0",
  "main": "expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/metro-runtime": "~3.2.1",
    "@react-native-async-storage/async-storage": "^1.24.0",
    "@types/react": "~18.2.79",
    "expo": "~51.0.22",
    "expo-status-bar": "~1.12.1",
    "firebase": "^10.12.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.74.3",
    "react-native-web": "~0.19.10",
    "typescript": "~5.3.3"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

I followed Firebase documentation for setting up phone authentication. I used RecaptchaVerifier and signInWithPhoneNumber to send the verification code.

I encountered the error TypeError: Cannot read property 'prototype' of undefined when trying to send the verification code.