doorman reference

doorman is only used if you're building a fully-custom UI flow, rather than relying on withPhoneAuth or the AuthFlow. 
It is recommended you use one withPhoneAuth or AuthFlow , but hey, it's your call!
What is this?
A key part of building a fully-custom auth flow is importing doorman .
1
import { doorman } from 'react-native-doorman'
Copied!
Table of contents
​doorman.signInWithPhoneNumber​
​doorman.verifyCode​
doorman.signInWithPhoneNumber
1
import { doorman } from 'react-native-doorman'
2
​
3
const signInWithPhone = async () => {
4
	const { success, error } = await doorman.signInWithPhoneNumber({
5
		phoneNumber: '+15555555555'
6
	})
7
	if (success) {
8
		navigate('ConfirmScreen')
9
	} else {
10
	  console.error(error)
11
	}
12
}
Copied!
Arguments
Takes one argument: A dictionary with a phoneNumber field
phoneNumber format must be a string, trimmed, with no spaces, and only numbers, and a '+' at the beginning.
Returns
Promise: A dictionary with the following fields
success boolean
If true, the SMS sent to the user, and you can navigate to the next screen.
error string or undefined
If there is a message, that means that there has been an error. This is a human-readable error description.
Full example
Below is the code from our example app on Github.
1
import React, { useState } from 'react'
2
import {
3
  View,
4
  StyleSheet,
5
  TextInput,
6
  Button,
7
  ActivityIndicator
8
} from 'react-native'
9
import { doorman } from 'react-native-doorman'
10
import { useNavigation } from '@react-navigation/native'
11
​
12
const PhoneScreen = () => {
13
  const [phoneNumber, setPhoneNumber] = useState('+1')
14
  const { navigate } = useNavigation()
15
  const [loading, setLoading] = useState(false)
16
​
17
  const onSubmitPhone = async () => {
18
    setLoading(true)
19
​
20
    const { success } = await doorman.signInWithPhoneNumber({ phoneNumber })
21
​
22
    setLoading(false)
23
​
24
    if (success) {
25
      navigate('ConfirmScreen', {
26
        phoneNumber
27
      })
28
    }
29
  }
30
​
31
  return (
32
    <View style={styles.container}>
33
      <TextInput
34
        onChangeText={setPhoneNumber}
35
        value={phoneNumber}
36
        placeholder="Enter your phone number"
37
        keyboardType="number-pad"
38
        style={styles.input}
39
      />
40
      {loading ? (
41
        <ActivityIndicator style={{ marginTop: 8 }} />
42
      ) : (
43
        <Button title="Sign in!" onPress={onSubmitPhone} />
44
      )}
45
    </View>
46
  )
47
}
48
​
49
export default PhoneScreen
50
​
51
const styles = StyleSheet.create({
52
  container: {
53
    flex: 1,
54
    justifyContent: 'center'
55
  },
56
  input: {
57
    padding: 20,
58
    backgroundColor: 'white',
59
    fontSize: 20
60
  }
61
})
Copied!
doorman.verifyCode
1
import { doorman } from 'react-native-doorman'
2
​
3
const verify = async () => {
4
  const { token, success } = await doorman.verifyCode({
5
	  phoneNumber: '+15555555555',
6
	  code: '111111'
7
  })
8
  if (token) {
9
    firebase.auth().signInWithCustomToken(token)
10
  }
11
}
Copied!
Arguments
Takes one argument: A dictionary with the following 2 required fields
phoneNumber format must be a string, trimmed, with no spaces, and only numbers, and a '+' at the beginning.
code a 6-digit code, as a string. It must have no spaces.
Returns
Promise: a dictionary with the following fields
token the custom auth token that has been added to your Firebase auth. It will exist if and only if your code matches the phoneNumber.
You can use firebase.auth().signInWithCustomToken(token)
message string or undefined
If there is a message, that means that there has been an error. This is a human-readable error description.
Full example
Below is the code from our example app on Github.
1
import React, { useState } from 'react'
2
import {
3
  View,
4
  TextInput,
5
  Button,
6
  StyleSheet,
7
  ActivityIndicator
8
} from 'react-native'
9
import { doorman } from 'react-native-doorman'
10
import { useRoute } from '@react-navigation/native'
11
import firebase from 'firebase/app'
12
​
13
const ConfirmScreen = () => {
14
  const [code, setCode] = useState('')
15
  const { phoneNumber } = useRoute().params
16
  const [loading, setLoading] = useState(false)
17
​
18
  const onSubmitCode = async () => {
19
    setLoading(true)
20
​
21
    const { token } = await doorman.verifyCode({
22
      code,
23
      phoneNumber
24
    })
25
​
26
    if (token) {
27
      firebase.auth().signInWithCustomToken(token)
28
    } else {
29
      setLoading(false)
30
    }
31
  }
32
​
33
  return (
34
    <View style={styles.container}>
35
      <TextInput
36
        onChangeText={setCode}
37
        value={code}
38
        placeholder="Enter your code"
39
        keyboardType="number-pad"
40
        maxLength={6}
41
        style={styles.input}
42
      />
43
      {loading ? (
44
        <ActivityIndicator style={{ marginTop: 8 }} />
45
      ) : (
46
        <Button title="Submit code 🔥" onPress={onSubmitCode} />
47
      )}
48
    </View>
49
  )
50
}
51
​
52
export default ConfirmScreen
53
​
54
const styles = StyleSheet.create({
55
  container: {
56
    flex: 1,
57
    justifyContent: 'center'
58
  },
59
  input: {
60
    padding: 20,
61
    backgroundColor: 'white',
62
    fontSize: 20
63
  }
64
})
Copied!