🚪
🚪
🚪
🚪
Doorman
Sign InHome
Search
⌃K
Links
🦁

withPhoneAuth

A higher order component that wraps your app and enables phone authentication.

What is withPhoneAuth?

A higher-order component that wraps your entire app and gives it phone auth.

withPhoneAuth(App, config)

The first argument is your App component, and the second argument is a required config dictionary.
As seen in the quick example:
// 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
})

Required arguments

First argument must be your root app component.
Second argument is a configuration dictionary with one required field:

Customizations

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.
Firstly, you can pass any of the common screen props as customizations.
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 the onPress of this button should be the next 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, except onCodeVerified. That prop is exposed directly as here instead.
  • phoneScreenProps
    • Any of the optional props from AuthFlow.PhoneScreen will be passed down to it, except onSmsSuccessfullySent. 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 be null, 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.
    • To see the docs for it, check here: https://firebase.google.com/docs/auth/web/manage-users​
    • 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 🇺🇸

onAuthStateChanged example

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
}
}
})

​

Previous
Doorman + React Navigation
Next - 📱Auth Components
AuthFlow
Last modified 3yr ago