🔥AuthFlow
AuthFlow is the component-based alternative to withPhoneAuth.
What is AuthFlow
?
AuthFlow
?Exactly what it sounds like. The component that handles the screens and logic to authenticate your users with phone auth.
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, exceptonCodeVerified
. If you want to use that prop, pass it directly toAuthFlow
.
phoneScreenProps
Any of the optional props from
AuthFlow.PhoneScreen
will be passed down to it, exceptonSmsSuccessfullySent
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 benull
, so check for that.
You probably won't need to use this, but it's there for your convenience.
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.
Last updated