AuthFlow

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.

📱Auth Components - Previous

withPhoneAuth

AuthFlow.ConfirmScreen

Last modified 2yr ago

Copy link

Outline