🔥AuthFlow

AuthFlow is the component-based alternative to withPhoneAuth.

What is AuthFlow?

Exactly what it sounds like. The component that handles the screens and logic to authenticate your users with phone auth.

An example flow you could make with AuthFlow.

Usage

See the quick example. Make sure you have your app wrapped with DoormanProvider and AuthGate.

The AuthFlow component is used instead of withPhoneAuth, if you prefer a component-based API.

Required Props

None 😇

Optional Props

Note that the following customizations are fully optional. You do not need to use them to make a great auth flow!

First, any of the common screen props can be used to customize the style.

You also have the following props:

• confirmScreenProps

  • Any of the optional props from AuthFlow.ConfirmScreen will be passed down to it, except onCodeVerified. If you want to use that prop, pass it directly to AuthFlow.
• phoneScreenProps

  • Any of the optional props from AuthFlow.PhoneScreen will be passed down to it, except onSmsSuccessfullySent onUserSuccessfullySignedIn.

    If you want to use one of those props, pass it directly to AuthFlow as seen in the example code below.

• onSmsSuccessfullySent

  • Function called when an SMS is sent successfully.

  • Receives a dictionary with a phoneNumber field.

• onCodeVerified

  • Callback function called when a user's 6-digit code is verified, and they are authenticated.

  • Receives a dictionary with a token field.

• onUserSuccessfullySignedIn

  • Function called when user is successfully signed in

  • This gets called after onCodeVerified, since there is a network request made between the successful code and signing in with firebase.

  • Receives a dictionary with a user field.

    • The user could be null, so check for that.

  • You probably won't need to use this, but it's there for your convenience.

<AuthFlow 
  confirmScreenProps={{
    // ...optional props from AuthFlow.ConfirmScreen
  }}
  phoneScreenProps={{
    // ...optional props from AuthFlow.PhoneScreen
  }}
  onCodeVerified={({ token }) => {
    
  }}
  onUserSuccessfullySignedIn={({ user }) => {
    if (user) {
      const uid = user.uid
    } else {
      // user is not signed in.
    }
  }}
  // common screen props are okay too
  backgroundColor="blue" 
  headerTintColor="yellow"
/>

Considerations

If you want to control your own navigation for the transition between screens, you should make screens with the AuthFlow.PhoneScreen and AuthFlow.ConfirmScreen, instead of using AuthFlow.

We also have example code using React Navigation 5.