🔥
AuthFlow
AuthFlow is the component-based alternative to withPhoneAuth.
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.
None 😇
Note that the following customizations are fully optional. You do not need to use them to make a great auth flow!
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 toAuthFlow
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.
<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"
/>
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
.Last modified 3yr ago