-
Notifications
You must be signed in to change notification settings - Fork 6
/
App.js
68 lines (63 loc) · 2.12 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import React, { useRef, useState } from 'react';
import { TouchableOpacity, Text, TextInput, View } from 'react-native';
import { FirebaseRecaptchaVerifierModal } from 'expo-firebase-recaptcha';
import Constants from 'expo-constants';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import firebase from './firebase';
import styles from './styles';
export default App = () => {
const [phoneNumber, setPhoneNumber] = useState('');
const [code, setCode] = useState('');
const [verificationId, setVerificationId] = useState(null);
const recaptchaVerifier = useRef(null);
const sendVerification = () => {
const phoneProvider = new firebase.auth.PhoneAuthProvider();
phoneProvider
.verifyPhoneNumber(phoneNumber, recaptchaVerifier.current)
.then(setVerificationId);
};
const confirmCode = () => {
const credential = firebase.auth.PhoneAuthProvider.credential(
verificationId,
code
);
firebase
.auth()
.signInWithCredential(credential)
.then((result) => {
console.log(result);
});
};
return (
<KeyboardAwareScrollView contentContainerStyle={styles.container}>
<View>
<FirebaseRecaptchaVerifierModal
ref={recaptchaVerifier}
firebaseConfig={Constants.manifest.extra.firebase}
/>
<TextInput
placeholder="Phone Number"
onChangeText={setPhoneNumber}
keyboardType="phone-pad"
autoCompleteType="tel"
style={styles.textInput}
/>
<TouchableOpacity
style={styles.sendVerification}
onPress={sendVerification}
>
<Text style={styles.buttonText}>Send Verification</Text>
</TouchableOpacity>
<TextInput
placeholder="Confirmation Code"
onChangeText={setCode}
keyboardType="number-pad"
style={styles.textInput}
/>
<TouchableOpacity style={styles.sendCode} onPress={confirmCode}>
<Text style={styles.buttonText}>Send Verification</Text>
</TouchableOpacity>
</View>
</KeyboardAwareScrollView>
);
};