احراز هویت کاربر با React Native Navigation — راهنمای کاربردی

1// index.js
2import {Navigation} from 'react-native-navigation';
3import {registerScreens} from './src/screens';
4
5import Amplify from 'aws-amplify'
6import config from './aws-exports'
7Amplify.configure(config)
8
9registerScreens();
10
11Navigation.events().registerAppLaunchedListener(() => {
12  Navigation.setRoot({
13    root: {
14      component: {
15        name: 'Initializing'
16      }
17    },
18  });
19});

1// SignUp.js
2import React, { Fragment } from 'react'
3import {
4  View,
5  Button,
6  TextInput,
7  StyleSheet
8} from 'react-native'
9import {Navigation} from 'react-native-navigation';
10
11import { Auth } from 'aws-amplify'
12
13const initialState = {
14  username: '', password: '', email: '', phone_number: '', authenticationCode: '', showConfirmationForm: false
15}
16
17export default class SignUp extends React.Component {
18  state = initialState
19  onChangeText = (key, val) => {
20    this.setState({ [key]: val })
21  }
22  signUp = async () => {
23    const { username, password, email, phone_number } = this.state
24    try {
25      const success = await Auth.signUp({ username, password, attributes: { email, phone_number }})
26      console.log('user successfully signed up!: ', success)
27      this.setState({ showConfirmationForm: true })
28    } catch (err) {
29      console.log('error signing up: ', err)
30    }
31  }
32  confirmSignUp = async () => {
33    const { username, authenticationCode } = this.state
34    try {
35      await Auth.confirmSignUp(username, authenticationCode)
36      console.log('successully signed up!')
37      alert('User signed up successfully!')
38      this.setState({ ...initialState })
39    } catch (err) {
40      console.log('error confirming signing up: ', err)
41    }
42  }
43  render() {
44    return (
45      <View style={styles.container}>
46        {
47          !this.state.showConfirmationForm && (
48            <Fragment>
49              <TextInput
50                style={styles.input}
51                placeholder='Username'
52                autoCapitalize="none"
53                placeholderTextColor='white'
54                onChangeText={val => this.onChangeText('username', val)}
55              />
56              <TextInput
57                style={styles.input}
58                placeholder='Password'
59                secureTextEntry={true}
60                autoCapitalize="none"
61                placeholderTextColor='white'
62                onChangeText={val => this.onChangeText('password', val)}
63              />
64              <TextInput
65                style={styles.input}
66                placeholder='Email'
67                autoCapitalize="none"
68                placeholderTextColor='white'
69                onChangeText={val => this.onChangeText('email', val)}
70              />
71              <TextInput
72                style={styles.input}
73                placeholder='Phone Number'
74                autoCapitalize="none"
75                placeholderTextColor='white'
76                onChangeText={val => this.onChangeText('phone_number', val)}
77              />
78              <Button
79                title='Sign Up'
80                onPress={this.signUp}
81              />
82            </Fragment>
83          )
84        }
85        {
86          this.state.showConfirmationForm && (
87            <Fragment>
88              <TextInput
89                style={styles.input}
90                placeholder='Authentication code'
91                autoCapitalize="none"
92                placeholderTextColor='white'
93                onChangeText={val => this.onChangeText('authenticationCode', val)}
94              />
95              <Button
96                title='Confirm Sign Up'
97                onPress={this.confirmSignUp}
98              />
99            </Fragment>
100          )
101        }
102      </View>
103    )
104  }
105}
106
107const styles = StyleSheet.create({
108  input: {
109    width: 350,
110    height: 55,
111    backgroundColor: '#42A5F5',
112    margin: 10,
113    padding: 8,
114    color: 'white',
115    borderRadius: 14,
116  },
117  container: {
118    flex: 1,
119    justifyContent: 'center',
120    alignItems: 'center'
121  }
122})

1// SignIn.js
2import React, { Fragment } from 'react'
3import {
4  View,
5  Text,
6  StyleSheet,
7  TextInput,
8  Button
9} from 'react-native'
10
11import { goHome } from './navigation'
12import { Auth } from 'aws-amplify'
13
14export default class SignIn extends React.Component {
15  state = {
16    username: '', password: '', user: {}, authenticationCode: '', showConfirmationForm: false
17  }
18  onChangeText = (key, value) => {
19    this.setState({ [key]: value })
20  }
21  signIn = async () => {
22    const { username, password } = this.state
23    try {
24       const user = await Auth.signIn(username, password)
25       console.log('user successfully signed in!', user)
26       this.setState({ user, showConfirmationForm: true })
27    } catch (err) {
28      console.log('error:', err)
29    }
30  }
31  confirmSignIn = async () => {
32    const { user, authenticationCode } = this.state
33    try {
34       await Auth.confirmSignIn(user, authenticationCode)
35       console.log('user successfully signed in!', user)
36       goHome()
37    } catch (err) {
38      console.log('error:', err)
39    }
40  }
41  render() {
42    return (
43      <View style={styles.container}>
44        {
45          !this.state.showConfirmationForm && (
46            <Fragment>
47              <TextInput
48                style={styles.input}
49                placeholder='Username'
50                autoCapitalize="none"
51                autoCorrect={false}
52                placeholderTextColor='white'
53                onChangeText={val => this.onChangeText('username', val)}
54              />
55              <TextInput
56                style={styles.input}
57                placeholder='Password'
58                autoCapitalize="none"
59                secureTextEntry={true}
60                placeholderTextColor='white'
61                onChangeText={val => this.onChangeText('password', val)}
62              />
63              <Button
64                title='Sign In'
65                onPress={this.signIn}
66              />
67            </Fragment>
68          )
69        }
70        {
71          this.state.showConfirmationForm && (
72            <Fragment>
73              <TextInput
74                style={styles.input}
75                placeholder='Authentication Code'
76                autoCapitalize="none"
77                placeholderTextColor='white'
78                onChangeText={val => this.onChangeText('authenticationCode', val)}
79              />
80              <Button
81                title='Confirm Sign In'
82                onPress={this.confirmSignIn}
83              />
84            </Fragment>
85          )
86        }        
87      </View>
88    )
89  }
90}
91
92const styles = StyleSheet.create({
93  input: {
94    width: 350,
95    fontSize: 18,
96    fontWeight: '500',
97    height: 55,
98    backgroundColor: '#42A5F5',
99    margin: 10,
100    color: 'white',
101    padding: 8,
102    borderRadius: 14
103  },
104  container: {
105    flex: 1,
106    justifyContent: 'center',
107    alignItems: 'center'
108  }
109})

1// Initializing.js
2// previous imports excluded
3import { Auth } from 'aws-amplify'
4export default class Initialising extends React.Component {
5  async componentDidMount() {
6    try {
7      const user = await Auth.currentAuthenticatedUser()
8      console.log('user: ', user)
9      if (user) {
10        goHome()
11      } else {
12        goToAuth()
13      }
14    } catch (err) {
15      console.log('error: ', err)
16      goToAuth()
17    }
18  }
19// rest of class excluded
20}

1// Home.js
2// previous imports excluded
3import { Auth } from 'aws-amplify'
4export default class Home extends React.Component {
5  // static options omitted
6  logout = async () => {
7    try {
8      await Auth.signOut()
9      goToAuth()
10    } catch (err) {
11      console.log('error signing out...: ', err)
12    }
13  }
14  // rest of class excluded
15}