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!
A key part of building a fully-custom auth flow is importing doorman
.
import { doorman } from 'react-native-doorman'
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)}}
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.
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.
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}><TextInputonChangeText={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 PhoneScreenconst styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center'},input: {padding: 20,backgroundColor: 'white',fontSize: 20}})
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)}}
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.
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.
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().paramsconst [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}><TextInputonChangeText={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 ConfirmScreenconst styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center'},input: {padding: 20,backgroundColor: 'white',fontSize: 20}})