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​
​doorman.verifyCode​
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
  }
})
Tutorial for Custom UI
Last updated 10 months ago
doorman reference

What is this?

Table of contents

`doorman.signInWithPhoneNumber`

Arguments

Returns

Full example

`doorman.verifyCode`

Arguments

Returns

Full example
