🦁
withPhoneAuth
A higher order component that wraps your app and enables phone authentication.
A higher-order component that wraps your entire app and gives it phone auth.
The first argument is your App component, and the second argument is a required config dictionary.
// App.js
import App from './src/App'
import { withPhoneAuth } from 'react-native-doorman'
// initialize firebase here...
export default withPhoneAuth(App, {
doorman: {
publicProjectId: 'YOUR_PROJECT_ID_HERE'
},
// other options here
})
First argument must be your root app component.
Second argument is a configuration dictionary with one required field:
doorman
- A dictionary whose only field is
publicProjectId
Imagine you wanted to change the background color of your screens to a nice hot pink, and add a splash screen before the phone screen pops up:
const SplashScreen = ({ next }) => {
// the "next" prop is a function that navigates to the phone auth screen
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
title="Continue with phone number"
onPress={next}
/>
</View>
}
export default withPhoneAuth(App, {
doorman: {
publicProjectId: 'YOUR_PROJECT_ID_HERE'
},
SplashScreen,
backgroundColor: '#FF2C55'
})
SplashScreen and background are only two of the many things you can customize.
You also get the following options:
SplashScreen
A react component that shows up before the auth flow.- Receives one prop,
next
. You should have a button that tells people to sign in with phone, and theonPress
of this button should be thenext
prop. - This is useful if you have other auth options other than phone you want to allow.
LoadingScreen
A react component that will be shown while the auth state is initially loading.confirmScreenProps
- Any of the optional props from
AuthFlow.ConfirmScreen
will be passed down to it as a dictionary, exceptonCodeVerified
. That prop is exposed directly as here instead.
phoneScreenProps
- Any of the optional props from
AuthFlow.PhoneScreen
will be passed down to it, exceptonSmsSuccessfullySent
. That prop is exposed directly as here instead.
onSmsSuccessfullySent
- Function called when an SMS is sent successfully.
- Receives a dictionary with a
phoneNumber
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.
onCodeVerified
- Callback function called when a user's 6-digit code is verified, and they are authenticated.
- Receives a dictionary with a
token
field.
onAuthStateChanged
follows the same API as the one from the Firebase Auth API.- Basically, it's a function that gets called every time the user updates, whether signing in/out, or updating the user's token
- You might want to use this for storing your user's UID in your database, or redux, etc.
initialPhoneNumber
- (Optional) The initial state of the phone number field.
- If you aren't based in the US, you may want to set this to the prefix of your country.
- Default:
+1
which makes the initial flag 🇺🇸
export default withPhoneAuth(App, {
doorman: {
publicProjectId: 'YOUR_PROJECT_ID_HERE'
},
onAuthStateChanged: user => {
if (user) {
// if user is signed in
let uid = user.uid;
// upload your user to your db
checkDbToSeeIfUserExists(uid)
// if you're using Firestore...
const db = firebase.firestore()
db.doc(`users/${uid}`).set({ hasSignedIn: true }, { merge: true })
} else {
// if user is not signed in
}
}
})
Last modified 3yr ago