[tests][js] phone-auth example/testing code
This commit is contained in:
Salakar
parent
faf522d2d7
commit
49d29b53f2
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,249 @@
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import { View, Button, Text, TextInput, Image, ActivityIndicator, Platform } from 'react-native';
|
||||||
|
import fb from './firebase';
|
||||||
|
|
||||||
|
const firebase = fb.native;
|
||||||
|
|
||||||
|
const imageUrl = 'https://www.shareicon.net/data/512x512/2016/07/19/798524_sms_512x512.png';
|
||||||
|
|
||||||
|
export default class PhoneAuth extends Component {
|
||||||
|
static getDefaultState() {
|
||||||
|
return {
|
||||||
|
message: '',
|
||||||
|
error: '',
|
||||||
|
codeInput: '',
|
||||||
|
phoneNumber: '+44',
|
||||||
|
auto: Platform.OS === 'android',
|
||||||
|
autoVerifyCountDown: 0,
|
||||||
|
sent: false,
|
||||||
|
started: false,
|
||||||
|
user: null,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.timeout = 20;
|
||||||
|
this._autoVerifyInterval = null;
|
||||||
|
this.state = PhoneAuth.getDefaultState();
|
||||||
|
}
|
||||||
|
|
||||||
|
_tick() {
|
||||||
|
this.setState({
|
||||||
|
autoVerifyCountDown: this.state.autoVerifyCountDown - 1,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Called when confirm code is pressed - we should have the code and verificationId now in state.
|
||||||
|
*/
|
||||||
|
afterVerify = () => {
|
||||||
|
const { codeInput, verificationId } = this.state;
|
||||||
|
const credential = firebase.auth.PhoneAuthProvider.credential(verificationId, codeInput);
|
||||||
|
|
||||||
|
// TODO do something with credential for example:
|
||||||
|
firebase.auth()
|
||||||
|
.signInWithCredential(credential)
|
||||||
|
.then((user) => {
|
||||||
|
console.log('PHONE AUTH USER ->>>>>', user.toJSON());
|
||||||
|
this.setState({ user: user.toJSON() });
|
||||||
|
}).catch(console.error);
|
||||||
|
};
|
||||||
|
|
||||||
|
signIn = () => {
|
||||||
|
const { phoneNumber } = this.state;
|
||||||
|
this.setState({ message: 'Sending code ...', error: '', started: true, autoVerifyCountDown: this.timeout }, () => {
|
||||||
|
firebase.auth()
|
||||||
|
.verifyPhoneNumber(phoneNumber)
|
||||||
|
.on('state_changed', (phoneAuthSnapshot) => {
|
||||||
|
console.log(phoneAuthSnapshot);
|
||||||
|
switch (phoneAuthSnapshot.state) {
|
||||||
|
case firebase.auth.PhoneAuthState.CODE_SENT: // or 'sent'
|
||||||
|
// update state with code sent and if android start a interval timer
|
||||||
|
// for auto verify - to provide visual feedback
|
||||||
|
this.setState({
|
||||||
|
sent: true,
|
||||||
|
message: 'Code Sent!',
|
||||||
|
verificationId: phoneAuthSnapshot.verificationId,
|
||||||
|
autoVerifyCountDown: this.timeout,
|
||||||
|
}, () => {
|
||||||
|
if (this.state.auto) {
|
||||||
|
this._autoVerifyInterval = setInterval(this._tick.bind(this), 1000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case firebase.auth.PhoneAuthState.ERROR: // or 'error'
|
||||||
|
// restart the phone flow again on error
|
||||||
|
clearInterval(this._autoVerifyInterval);
|
||||||
|
this.setState({
|
||||||
|
...PhoneAuth.getDefaultState(),
|
||||||
|
error: phoneAuthSnapshot.error.message,
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
|
||||||
|
// ---------------------
|
||||||
|
// ANDROID ONLY EVENTS
|
||||||
|
// ---------------------
|
||||||
|
case firebase.auth.PhoneAuthState.AUTO_VERIFY_TIMEOUT: // or 'timeout'
|
||||||
|
clearInterval(this._autoVerifyInterval);
|
||||||
|
this.setState({
|
||||||
|
sent: true,
|
||||||
|
auto: false,
|
||||||
|
verificationId: phoneAuthSnapshot.verificationId,
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case firebase.auth.PhoneAuthState.AUTO_VERIFIED: // or 'verified'
|
||||||
|
clearInterval(this._autoVerifyInterval);
|
||||||
|
this.setState({
|
||||||
|
sent: true,
|
||||||
|
codeInput: phoneAuthSnapshot.code,
|
||||||
|
verificationId: phoneAuthSnapshot.verificationId,
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
// will never get here - just for linting
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
renderInputPhoneNumber() {
|
||||||
|
const { phoneNumber } = this.state;
|
||||||
|
return (
|
||||||
|
<View style={{ flex: 1 }}>
|
||||||
|
<Text>Enter phone number:</Text>
|
||||||
|
<TextInput
|
||||||
|
autoFocus
|
||||||
|
style={{ height: 40, marginTop: 15, marginBottom: 15 }}
|
||||||
|
onChangeText={value => this.setState({ phoneNumber: value })}
|
||||||
|
placeholder={'Phone number ... '}
|
||||||
|
value={phoneNumber}
|
||||||
|
/>
|
||||||
|
<Button title="Begin Verification" color="green" onPress={this.signIn} />
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderSendingCode() {
|
||||||
|
const { phoneNumber } = this.state;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={{ paddingBottom: 15 }}>
|
||||||
|
<Text
|
||||||
|
style={{ paddingBottom: 25 }}
|
||||||
|
>
|
||||||
|
{`Sending verification code to '${phoneNumber}'.`}
|
||||||
|
</Text>
|
||||||
|
<ActivityIndicator animating style={{ padding: 50 }} size={'large'} />
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderAutoVerifyProgress() {
|
||||||
|
const { autoVerifyCountDown, started, error, sent, phoneNumber } = this.state;
|
||||||
|
if (!sent && started && !error.length) {
|
||||||
|
return this.renderSendingCode();
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<View style={{ padding: 0 }}>
|
||||||
|
<Text
|
||||||
|
style={{ paddingBottom: 25 }}
|
||||||
|
>
|
||||||
|
{`Verification code has been successfully sent to '${phoneNumber}'.`}
|
||||||
|
</Text>
|
||||||
|
<Text
|
||||||
|
style={{ marginBottom: 25 }}
|
||||||
|
>
|
||||||
|
{`We'll now attempt to automatically verify the code for you. This will timeout in ${autoVerifyCountDown} seconds.`}
|
||||||
|
</Text>
|
||||||
|
<Button
|
||||||
|
style={{ paddingTop: 25 }} title="I have a code already" color="green"
|
||||||
|
onPress={() => this.setState({ auto: false })}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderError() {
|
||||||
|
const { error } = this.state;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={{ padding: 10, borderRadius: 5, margin: 10, backgroundColor: 'rgb(255,0,0)' }}>
|
||||||
|
<Text
|
||||||
|
style={{ color: '#fff' }}
|
||||||
|
>
|
||||||
|
{error}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { started, error, codeInput, sent, auto, user } = this.state;
|
||||||
|
return (
|
||||||
|
<View style={{ flex: 1, backgroundColor: user ? 'rgb(0, 200, 0)' : '#fff' }}>
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
padding: 5,
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
flex: 1,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Image source={{ uri: imageUrl }} style={{ width: 128, height: 128, marginTop: 25, marginBottom: 15 }} />
|
||||||
|
<Text style={{ fontSize: 25, marginBottom: 20 }}>Phone Auth Example</Text>
|
||||||
|
{error && error.length ? this.renderError() : null}
|
||||||
|
{!started && !sent ? this.renderInputPhoneNumber() : null}
|
||||||
|
{started && auto && !codeInput.length ? this.renderAutoVerifyProgress() : null}
|
||||||
|
{!user && started && sent && (codeInput.length || !auto) ? (
|
||||||
|
<View style={{ marginTop: 15 }}>
|
||||||
|
<Text>Enter verification code below:</Text>
|
||||||
|
<TextInput
|
||||||
|
autoFocus
|
||||||
|
style={{ height: 40, marginTop: 15, marginBottom: 15 }}
|
||||||
|
onChangeText={value => this.setState({ codeInput: value })}
|
||||||
|
placeholder={'Code ... '}
|
||||||
|
value={codeInput}
|
||||||
|
/>
|
||||||
|
<Button title="Confirm Code" color="#841584" onPress={this.afterVerify} />
|
||||||
|
</View>
|
||||||
|
) : null}
|
||||||
|
{user ? (
|
||||||
|
<View style={{ marginTop: 15 }}>
|
||||||
|
<Text>{`Signed in with new user id: '${user.uid}'`}</Text>
|
||||||
|
</View>
|
||||||
|
) : null}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
{ user ? (
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
padding: 15,
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
backgroundColor: '#77dd77',
|
||||||
|
flex: 1,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Image source={{ uri: successImageUri }} style={{ width: 100, height: 100, marginBottom: 25 }} />
|
||||||
|
<Text style={{ fontSize: 25 }}>Signed In!</Text>
|
||||||
|
<Text>{JSON.stringify(user)}</Text>
|
||||||
|
</View>
|
||||||
|
) : null}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
// Example usage if handling here and not in optionalCompleteCb:
|
||||||
|
// const { verificationId, code } = phoneAuthSnapshot;
|
||||||
|
// const credential = firebase.auth.PhoneAuthProvider.credential(verificationId, code);
|
||||||
|
|
||||||
|
// Do something with your new credential, e.g.:
|
||||||
|
// firebase.auth().signInWithCredential(credential);
|
||||||
|
// firebase.auth().linkWithCredential(credential);
|
||||||
|
// etc ...
|
||||||
Loading…
Reference in New Issue