doorman reference
A set of functions that you can use to build a custom auth flow.
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

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!
Last modified 2yr ago