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
}
})