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!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
fieldphoneNumber
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.
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
}
})
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 yourcode
matches thephoneNumber
.- 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.
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
}
})
Last modified 3yr ago