🚪
🚪
🚪
🚪
Doorman
Sign InHome
Search
⌃K
Links

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 .
import { doorman } from 'react-native-doorman'

Table of contents

doorman.signInWithPhoneNumber

import { doorman } from 'react-native-doorman'
​
const signInWithPhone = async () => {
const { success, error } = await doorman.signInWithPhoneNumber({
phoneNumber: '+15555555555'
})
if (success) {
navigate('ConfirmScreen')
} else {
console.error(error)
}
}

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.
import React, { useState } from 'react'
import {
View,
StyleSheet,
TextInput,
Button,
ActivityIndicator
} from 'react-native'
import { doorman } from 'react-native-doorman'
import { useNavigation } from '@react-navigation/native'
​
const PhoneScreen = () => {
const [phoneNumber, setPhoneNumber] = useState('+1')
const { navigate } = useNavigation()
const [loading, setLoading] = useState(false)
​
const onSubmitPhone = async () => {
setLoading(true)
​
const { success } = await doorman.signInWithPhoneNumber({ phoneNumber })
​
setLoading(false)
​
if (success) {
navigate('ConfirmScreen', {
phoneNumber
})
}
}
​
return (
<View style={styles.container}>
<TextInput
onChangeText={setPhoneNumber}
value={phoneNumber}
placeholder="Enter your phone number"
keyboardType="number-pad"
style={styles.input}
/>
{loading ? (
<ActivityIndicator style={{ marginTop: 8 }} />
) : (
<Button title="Sign in!" onPress={onSubmitPhone} />
)}
</View>
)
}
​
export default PhoneScreen
​
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center'
},
input: {
padding: 20,
backgroundColor: 'white',
fontSize: 20
}
})

doorman.verifyCode

import { doorman } from 'react-native-doorman'
​
const verify = async () => {
const { token, success } = await doorman.verifyCode({
phoneNumber: '+15555555555',
code: '111111'
})
if (token) {
firebase.auth().signInWithCustomToken(token)
}
}

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.
import React, { useState } from 'react'
import {
View,
TextInput,
Button,
StyleSheet,
ActivityIndicator
} from 'react-native'
import { doorman } from 'react-native-doorman'
import { useRoute } from '@react-navigation/native'
import firebase from 'firebase/app'
​
const ConfirmScreen = () => {
const [code, setCode] = useState('')
const { phoneNumber } = useRoute().params
const [loading, setLoading] = useState(false)
​
const onSubmitCode = async () => {
setLoading(true)
​
const { token } = await doorman.verifyCode({
code,
phoneNumber
})
​
if (token) {
firebase.auth().signInWithCustomToken(token)
} else {
setLoading(false)
}
}
​
return (
<View style={styles.container}>
<TextInput
onChangeText={setCode}
value={code}
placeholder="Enter your code"
keyboardType="number-pad"
maxLength={6}
style={styles.input}
/>
{loading ? (
<ActivityIndicator style={{ marginTop: 8 }} />
) : (
<Button title="Submit code 🔥" onPress={onSubmitCode} />
)}
</View>
)
}
​
export default ConfirmScreen
​
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center'
},
input: {
padding: 20,
backgroundColor: 'white',
fontSize: 20
}
})
Previous
Tutorial for Custom UI
Last modified 3yr ago