I use the code in the documentationhttps://docs.expo.dev/versions/v43.0.0/sdk/firebase-recaptcha/ and add the initialize firebase.
then run the app. I put in the phone number and press send code it show (evaluating ‘new _auth.PhoneAuthProvider()’) error
so please help me.
import * as React from 'react';
import {
Text,
View,
TextInput,
Button,
StyleSheet,
TouchableOpacity,
Platform,
} from 'react-native';
import { FirebaseRecaptchaVerifierModal, FirebaseRecaptchaBanner } from 'expo-firebase-recaptcha';
import { initializeApp, getApp } from 'firebase/app';
import { getAuth, PhoneAuthProvider } from 'firebase/auth';
try {
initializeApp({
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
});
} catch (err) {
}
export default function App() {
const recaptchaVerifier = React.useRef(null);
const [phoneNumber, setPhoneNumber] = React.useState();
const [verificationId, setVerificationId] = React.useState();
const [verificationCode, setVerificationCode] = React.useState();
const app = getApp();
const firebaseConfig = app ? app.options : undefined;
const [message, showMessage] = React.useState(
!firebaseConfig || Platform.OS === 'web'
? {
text:
'To get started, provide a valid firebase config in App.js and open this snack on an iOS or Android device.',
}
: undefined
);
const attemptInvisibleVerification = false;
console.log(firebaseConfig);
return (
<View style={{ padding: 20, marginTop: 50 }}>
<FirebaseRecaptchaVerifierModal
ref={recaptchaVerifier}
firebaseConfig={firebaseConfig}
attemptInvisibleVerification={attemptInvisibleVerification}
/>
<Text style={{ marginTop: 20 }}>Enter phone number</Text>
<TextInput
style={{ marginVertical: 10, fontSize: 17 }}
placeholder="+1 999 999 9999"
autoFocus
autoCompleteType="tel"
keyboardType="phone-pad"
textContentType="telephoneNumber"
onChangeText={phoneNumber => setPhoneNumber(phoneNumber)}
/>
<Button
title="Send Verification Code"
disabled={!phoneNumber}
onPress={async () => {
// The FirebaseRecaptchaVerifierModal ref implements the
// FirebaseAuthApplicationVerifier interface and can be
// passed directly to `verifyPhoneNumber`.
try {
const phoneProvider = new PhoneAuthProvider();
const verificationId = await phoneProvider.verifyPhoneNumber(
phoneNumber,
recaptchaVerifier.current
);
setVerificationId(verificationId);
showMessage({
text: 'Verification code has been sent to your phone.',
});
} catch (err) {
showMessage({ text: `Error: ${err.message}`, color: 'red' });
}
}}
/>
<Text style={{ marginTop: 20 }}>Enter Verification code</Text>
<TextInput
style={{ marginVertical: 10, fontSize: 17 }}
editable={!!verificationId}
placeholder="123456"
onChangeText={setVerificationCode}
/>
<Button
title="Confirm Verification Code"
disabled={!verificationId}
onPress={async () => {
try {
const phoneProvider = new PhoneAuthProvider();
const credential = phoneProvider.credential(
verificationId,
verificationCode
);
const auth = getAuth();
await auth.signInWithCredential(credential);
showMessage({ text: 'Phone authentication successful 👍' });
} catch (err) {
showMessage({ text: `Error: ${err.message}`, color: 'red' });
}
}}
/>
{message ? (
<TouchableOpacity
style={[
StyleSheet.absoluteFill,
{ backgroundColor: 0xffffffee, justifyContent: 'center' },
]}
onPress={() => showMessage(undefined)}>
<Text
style={{
color: message.color || 'blue',
fontSize: 17,
textAlign: 'center',
margin: 20,
}}>
{message.text}
</Text>
</TouchableOpacity>
) : (
undefined
)}
{attemptInvisibleVerification && <FirebaseRecaptchaBanner />}
</View>
);
}