useAuthFlowState

Hook into the current phone auth state, if you so please.

Usage

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.

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:

// 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
}

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.

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
}