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: '[phone]'
	})
	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: '[phone]',
	  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
  }
})