useAuthFlowState
Hook into the current phone auth state, if you so please.
import React from 'react'
import { useAuthFlowState } from 'react-native-doorman'
export default () => {
// get the current phone number that a user has typed
// also, a boolean telling you if the # is a valid number
const {
phoneNumber,
isValidPhoneNumber,
onChangePhoneNumber
} = useAuthFlowState()
// 🚨isValidPhoneNumber does NOT mean the the user has confirmed
// their number. It only means the phoneNumber is a valid phone.
}
This can be useful if you're building your own UI from scratch, and you don't want to have to worry about updating the state of the user's phone number, whether or not it's valid, etc.
This hook can only be called in a component that is a child (nested child is okay!) of the
DoormanProvider, or withPhoneAuth. It doesn't have to be a direct child, but it just has to be inside of it somewhere.Don't feel like writing a bunch of
useState calls in your custom flow?You're in luck. You can use
usePhoneAuthState, which has a global, shared state across your app of the current onboarding state.What does that even mean? Let's see with code
Imagine you want to build your auth screens from scratch. If you handled the state, it might look like this:
// first on your phone screen, inside of your component:
import * as React from 'react'
import { useNavigation } from '@react-navigation/native'
const PhoneScreen = () => {
const [phoneNumber, setPhoneNumber] = React.useState('')
const [isValidPhoneNumber, setValid] = React.useState(false)
const onPress = () => {
navigate('ConfirmScreen', { phoneNumber })
}
// complex logic to ensure the number is valid...
return (
<>
<Button onPress={onPress} />
<TextInput value={phoneNumber} onChangeText={setPhoneNumber} />
</>
)
}
// and then on your code screen
import * as React from 'react'
import { useRoute } from '@react-navigation/native'
const ConfirmScreen = () => {
const params = useRoute()
const phoneNumber = params.phoneNumber
const [code, setCode] = React.useState('')
...render here
}
You no longer have to send
phoneNumber as a param from from one screen to another. It just, works, with a shared state across screens.import * as React from 'react'
import { useAuthFlowState } from '@react-navigation/native'
const PhoneScreen = () => {
const { phoneNumber, onChangePhoneNumber, isValidPhoneNumber } = useAuthFlowState()
const onPress = () => {
navigate('ConfirmScreen')
}
return (
<>
<Button onPress={onPress} />
<TextInput value={phoneNumber} onChangeText={setPhoneNumber} />
</>
)
}
// and then on your code screen
import * as React from 'react'
import { useAuthFlowState } from '@react-navigation/native'
const ConfirmScreen = () => {
const { phoneNumber } = useAuthFlowState()
const [code, setCode] = React.useState('')
...render here
}
Last modified 3yr ago