firebase / firebase/snippets-web

Phone Number Submission Error on Expo

Open
#373 0 comments 1 reaction 0 assignees View on GitHub
Dominant language
JavaScript
Stars
802
Forks
285
PR merge metrics
No merged PRs in 30d

Description

`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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.