احراز هویت فایربیس در اپلیکیشن ری ‌اکت نیتیو — از صفر تا صد

1// Loading.js
2import React from 'react'
3import { View, Text, ActivityIndicator, StyleSheet } from 'react-native'
4export default class Loading extends React.Component {
5  render() {
6    return (
7      <View style={styles.container}>
8        <Text>Loading</Text>
9        <ActivityIndicator size="large" />
10      </View>
11    )
12  }
13}
14const styles = StyleSheet.create({
15  container: {
16    flex: 1,
17    justifyContent: 'center',
18    alignItems: 'center',
19  }
20})

1// SignUp.js
2import React from 'react'
3import { StyleSheet, Text, TextInput, View, Button } from 'react-native'
4export default class SignUp extends React.Component {
5  state = { email: '', password: '', errorMessage: null }
6handleSignUp = () => {
7  // TODO: Firebase stuff...
8  console.log('handleSignUp')
9}
10render() {
11    return (
12      <View style={styles.container}>
13        <Text>Sign Up</Text>
14        {this.state.errorMessage &&
15          <Text style={{ color: 'red' }}>
16            {this.state.errorMessage}
17          </Text>}
18        <TextInput
19          placeholder="Email"
20          autoCapitalize="none"
21          style={styles.textInput}
22          onChangeText={email => this.setState({ email })}
23          value={this.state.email}
24        />
25        <TextInput
26          secureTextEntry
27          placeholder="Password"
28          autoCapitalize="none"
29          style={styles.textInput}
30          onChangeText={password => this.setState({ password })}
31          value={this.state.password}
32        />
33        <Button title="Sign Up" onPress={this.handleSignUp} />
34        <Button
35          title="Already have an account? Login"
36          onPress={() => this.props.navigation.navigate('Login')}
37        />
38      </View>
39    )
40  }
41}
42const styles = StyleSheet.create({
43  container: {
44    flex: 1,
45    justifyContent: 'center',
46    alignItems: 'center'
47  },
48  textInput: {
49    height: 40,
50    width: '90%',
51    borderColor: 'gray',
52    borderWidth: 1,
53    marginTop: 8
54  }
55})

1// Login.js
2import React from 'react'
3import { StyleSheet, Text, TextInput, View, Button } from 'react-native'
4export default class Login extends React.Component {
5  state = { email: '', password: '', errorMessage: null }
6  handleLogin = () => {
7    // TODO: Firebase stuff...
8    console.log('handleLogin')
9  }
10  render() {
11    return (
12      <View style={styles.container}>
13        <Text>Login</Text>
14        {this.state.errorMessage &&
15          <Text style={{ color: 'red' }}>
16            {this.state.errorMessage}
17          </Text>}
18        <TextInput
19          style={styles.textInput}
20          autoCapitalize="none"
21          placeholder="Email"
22          onChangeText={email => this.setState({ email })}
23          value={this.state.email}
24        />
25        <TextInput
26          secureTextEntry
27          style={styles.textInput}
28          autoCapitalize="none"
29          placeholder="Password"
30          onChangeText={password => this.setState({ password })}
31          value={this.state.password}
32        />
33        <Button title="Login" onPress={this.handleLogin} />
34        <Button
35          title="Don't have an account? Sign Up"
36          onPress={() => this.props.navigation.navigate('SignUp')}
37        />
38      </View>
39    )
40  }
41}
42const styles = StyleSheet.create({
43  container: {
44    flex: 1,
45    justifyContent: 'center',
46    alignItems: 'center'
47  },
48  textInput: {
49    height: 40,
50    width: '90%',
51    borderColor: 'gray',
52    borderWidth: 1,
53    marginTop: 8
54  }
55})

1// Main.js
2import React from 'react'
3import { StyleSheet, Platform, Image, Text, View } from 'react-native'
4export default class Main extends React.Component {
5  state = { currentUser: null }
6render() {
7    const { currentUser } = this.state
8return (
9      <View style={styles.container}>
10        <Text>
11          Hi {currentUser && currentUser.email}!
12        </Text>
13      </View>
14    )
15  }
16}
17const styles = StyleSheet.create({
18  container: {
19    flex: 1,
20    justifyContent: 'center',
21    alignItems: 'center'
22  }
23})

1import React from 'react'
2import { StyleSheet, Platform, Image, Text, View } from 'react-native'
3import { SwitchNavigator } from 'react-navigation'
4// import the different screens
5import Loading from './Loading'
6import SignUp from './SignUp'
7import Login from './Login'
8import Main from './Main'
9// create our app's navigation stack
10const App = SwitchNavigator(
11  {
12    Loading,
13    SignUp,
14    Login,
15    Main
16  },
17  {
18    initialRouteName: 'Loading'
19  }
20)
21export default App

1// Loading.js
2// Omitted other imports...
3import firebase from 'react-native-firebase'
4export default class Loading extends React.Component {
5  componentDidMount() {
6    firebase.auth().onAuthStateChanged(user => {
7      this.props.navigation.navigate(user ? 'Main' : 'SignUp')
8    })
9  }
10// Omitted the rest of the file...

1// SignUp.js
2// Omitted other imports...
3import firebase from 'react-native-firebase'
4export default class SignUp extends React.Component {
5  state = { email: '', password: '', errorMessage: null }
6  handleSignUp = () => {
7    firebase
8      .auth()
9      .createUserWithEmailAndPassword(this.state.email, this.state.password)
10      .then(() => this.props.navigation.navigate('Main'))
11      .catch(error => this.setState({ errorMessage: error.message }))
12  }
13// Omitted the rest of the file...

1// Main.js
2// Omitted other imports...
3import firebase from 'react-native-firebase'
4export default class Main extends React.Component {
5  state = { currentUser: null }
6  componentDidMount() {
7    const { currentUser } = firebase.auth()
8    this.setState({ currentUser })
9}
10// Omitted the rest of the file...

1// Login.js
2// Omitted other imports...
3import firebase from 'react-native-firebase'
4export default class Login extends React.Component {
5  state = { email: '', password: '', errorMessage: null }
6  handleLogin = () => {
7    const { email, pasword } = this.state
8    firebase
9      .auth()
10      .signInWithEmailAndPassword(email, password)
11      .then(() => this.props.navigation.navigate('Main'))
12      .catch(error => this.setState({ errorMessage: error.message }))
13  }
14// Omitted the rest of the file...