useAuthFlowState

Usage
1
import React from 'react'
2
import { useAuthFlowState } from 'react-native-doorman'
3
​
4
export default () => {
5
  // get the current phone number that a user has typed
6
  // also, a boolean telling you if the # is a valid number
7
​
8
  const { 
9
    phoneNumber, 
10
    isValidPhoneNumber, 
11
    onChangePhoneNumber 
12
  } = useAuthFlowState()
13
  
14
  // 🚨isValidPhoneNumber does NOT mean the the user has confirmed
15
  // their number. It only means the phoneNumber is a valid phone.
16
}
Copied!
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.
Let Doorman handle the logic 😇
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
If you handle the logic/state:
Imagine you want to build your auth screens from scratch. If you handled the state, it might look like this:
1
// first on your phone screen, inside of your component:
2
import * as React from 'react'
3
import { useNavigation } from '@react-navigation/native'
4
​
5
const PhoneScreen = () => {
6
  const [phoneNumber, setPhoneNumber] = React.useState('')
7
  const [isValidPhoneNumber, setValid] = React.useState(false)
8
  
9
  const onPress = () => {
10
    navigate('ConfirmScreen', { phoneNumber })  
11
  }
12
  
13
  // complex logic to ensure the number is valid...
14
  
15
  return (
16
    <>
17
      <Button onPress={onPress} />
18
      <TextInput value={phoneNumber} onChangeText={setPhoneNumber} />
19
    </>
20
  )
21
}
Copied!
1
// and then on your code screen
2
import * as React from 'react'
3
import { useRoute } from '@react-navigation/native'
4
​
5
const ConfirmScreen = () => {
6
  const params = useRoute()   
7
  const phoneNumber = params.phoneNumber
8
  const [code, setCode] = React.useState('')
9
  
10
  ...render here
11
}
Copied!
If we handle the state instead: 🎉
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.
1
import * as React from 'react'
2
import { useAuthFlowState } from '@react-navigation/native'
3
​
4
const PhoneScreen = () => {
5
  const { phoneNumber, onChangePhoneNumber, isValidPhoneNumber } = useAuthFlowState()
6
  
7
  const onPress = () => {
8
    navigate('ConfirmScreen')  
9
  }
10
  
11
  return (
12
    <>
13
      <Button onPress={onPress} />
14
      <TextInput value={phoneNumber} onChangeText={setPhoneNumber} />
15
    </>
16
  )
17
}
Copied!
1
// and then on your code screen
2
import * as React from 'react'
3
import { useAuthFlowState } from '@react-navigation/native'
4
​
5
const ConfirmScreen = () => {
6
  const { phoneNumber } = useAuthFlowState()
7
  const [code, setCode] = React.useState('')
8
  
9
  ...render here
10
}
Copied!

🐠React Hooks - Previous

useAuthGate

Next - 📕Resources

Deploying to the App Store

Last modified 2yr ago

Copy link

Contents

Usage

Let Doorman handle the logic 😇

If you handle the logic/state:

If we handle the state instead: 🎉