firebase/snippets-web

Phone Number Submission Error on Expo

farmhutsoftwareteam opened this issue · 0 comments

`import React, { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet } from 'react-native';
import { getAuth, signInWithPhoneNumber } from "firebase/auth";
import app from "../config/firebaseConfig";
import { initializeRecaptcha } from "../config/recaptcha";

const AuthForm = () => {
const [phoneNumber, setPhoneNumber] = useState('');
const [confirm, setConfirm] = useState(null);
const [code, setCode] = useState('');

const handlePhoneNumberSubmit = async () => {
try {
const auth = getAuth(app);
const recaptchaVerifier = initializeRecaptcha();
const confirmation = await signInWithPhoneNumber(auth, phoneNumber, recaptchaVerifier);
setConfirm(confirmation);
console.log('SMS sent successfully. Confirmation result:', confirmation);
} catch (error) {
console.error('Phone Number Submission Error:', error);
}
};

const handleCodeSubmit = async () => {
try {
await confirm.confirm(code);
console.log('Phone Number Verified!');
} catch (error) {
console.error('Code Confirmation Error:', error);
}
};

return (

{!confirm ? (
<>
Enter your phone number:


</>
) : (
<>
Enter the verification code:


</>
)}

);
};

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
padding: 16,
},
label: {
fontSize: 18,
marginBottom: 8,
},
input: {
height: 40,
borderColor: 'gray',
borderWidth: 1,
marginBottom: 16,
paddingHorizontal: 8,
},
});

export default AuthForm;` this is my signin component, this is my recaptcha code

`import { getAuth, RecaptchaVerifier } from "firebase/auth";
import app from "./firebaseConfig";

const auth = getAuth(app);

const initializeRecaptcha = () => {
return new RecaptchaVerifier('recaptcha-container', {
'size': 'invisible',
'callback': (response) => {
// reCAPTCHA solved, allow signInWithPhoneNumber.
console.log('reCAPTCHA solved');
},
'expired-callback': () => {
// Response expired. Ask user to solve reCAPTCHA again.
console.log('reCAPTCHA expired');
}
}, auth);
};

export { initializeRecaptcha };`

and this is the error

Phone Number Submission Error: [TypeError: Cannot read property 'prototype' of undefined]

Expo SK 51