I want to implement user authentication via phone number using Firebase.
The FirebasePhoneAuth component represents a form with an input field for the phone number and a "Send Verification Code" button. When the "Send Verification Code" button is pressed, the sendVerificationCode function is called, which sends a request to the Firebase server to send an SMS with the confirmation code to the entered phone number. After a successful request, the result will be the creation of a confirmationResult object, which stores information about the phone number and the confirmation code.
Question: When pressing the "SEND CODE" button, an error alert "cannot read property verify of undefined" occurs. How can I solve this problem?
`import React, { useState } from "react";
import { Alert, Button, StyleSheet, TextInput, View } from "react-native";
import { initializeApp } from "firebase/app";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { initializeAuth, getReactNativePersistence,signInWithPhoneNumber,getAuth} from 'firebase/auth';
import ReactNativeAsyncStorage from '@react-native-async-storage/async-storage';
const firebaseConfig = {
apiKey: "AIzaSyD5Qg_t9KR4TmLr2p14E2aODO9UV5RehUE",
authDomain: "sharq-9ec25.firebaseapp.com",
databaseURL: "https://sharq-9ec25-default-rtdb.firebaseio.com",
projectId: "sharq-9ec25",
storageBucket: "sharq-9ec25.appspot.com",
messagingSenderId: "613514564466",
appId: "1:613514564466:web:c76f60d1a5d151689e83eb",
measurementId: "G-BGWW40HYBJ"
};
// initialize Firebase App
const app = initializeApp(firebaseConfig);
// initialize Firebase Auth for that app immediately
const auth = initializeAuth(app, {
persistence: getReactNativePersistence(ReactNativeAsyncStorage)
});
const FirebasePhoneAuth = () => {
const [phoneNumber, setPhoneNumber] = useState(""); // для номера телефона
const [verificationCode, setVerificationCode] = useState(""); // для кода подтверждения
const [confirmationResult, setConfirmationResult] = useState(null); // для результатов
const sendVerificationCode = async () => {
try {
const confirmation = await signInWithPhoneNumber(auth, phoneNumber);
setConfirmationResult(confirmation);
} catch (err) {
Alert.alert("Error", err.message);
}
};
const confirmVerificationCode = async () => {
try {
if (confirmationResult) {
await confirmationResult.confirm(verificationCode);
Alert.alert("Успех", "Номер телефона успешно подтвержден");
// Сохранение номера телефона в AsyncStorage
await AsyncStorage.setItem("phoneNumber", phoneNumber);
} else {
Alert.alert("Ошибка", "Не удалось подтвердить номер телефона");
}
} catch (error) {
Alert.alert("Ошибка", error.message);
}
};
return (
style={styles.input}
placeholder="Введите номер телефона"
onChangeText={(value) => setPhoneNumber(value)}
/>
{confirmationResult && (
<>
style={styles.input}
placeholder="Введите код подтверждения"
onChangeText={(value) => setVerificationCode(value)}
/>
</>
)}
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
input: {
width: "80%",
height: 40,
borderWidth: 1,
marginBottom: 20,
paddingHorizontal: 10,
},
});
export default FirebasePhoneAuth;`
Top comments (0)