DoormanProvider

The provider component that goes at the root of your app and wraps all other components.

The DoormanProvider must wrap your entire app for Doorman to work, unless you are using withPhoneAuth (which implements DoormanProvider for you.) 
Usage
import React from 'react'
import { Text, ActivityIndicator } from 'react-native'
import { 
  DoormanProivder, AuthFlow, AuthGate 
} from 'react-native-doorman'
  
import firebase from 'firebase/app'
import 'firebase/auth'
​
if (!firebase.apps.length) {
  firebase.initializeApp(yourFirebaseConfig)
}
    
const AuthenticatedApp = () => (
 <Text 
   onPress={() => firebase.auth().signOut()} 
   style={{ paddingTop: 300, color: 'blue', fontSize: 24 }}
 >
   This app has working phone auth 🤯
 </Text>
)
​
function App() {
  return (
    <DoormanProvider publicProjectId="YOUR-PROJECT-ID">
      <AuthGate>
        {({ user, loading }) => {
          if (loading) return <ActivityIndicator />
         
          // if a user is authenticated
          if (user) return <AuthenticatedApp />
          
          // otherwise, send them to the auth flow
          return <AuthFlow />
        }}
      </AuthGate>
    </DoormanProvider>
  )
}
​
​
export default App
Required Props
publicProjectId
Your Doorman project ID.
​How do I find my public project ID?​
children Any react node that's passed as a child.
Optional Props
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 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.
onAuthStateChanged example
Say you're using redux, and want to update the user ID in your app:
import { Provider, connect } from 'react-redux'
​
// ..other code from above example
​
const Doorman = ({ dispatch }) => {
  return (
    <DoormanProvider 
      publicProjectId="YOUR-PROJECT-ID"
      onAuthStateChanged={user => {
        // if the user is signed in
        if (user) {
          // dispatch action updating user's unique ID
          dispatch(updateUserId(user.uid))
          
          // or you want to add the user to your database
          uploadToDatabase(user.id)
        } else {
          // if user is not signed in:
          ...some code here
        }
      }}
    >
      {/* children go here, like AuthGate...*/}
    </DoormanProvider>
  )
}
​
const ConnectedDoorman = connect(null)(Doorman)
​
export default () => {
  <Provider store={store}>
    <ConnectedDoorman />
  </Provider>
}

🍬Wrappers - Previous

AuthGate

Next - 🐠React Hooks

useDoormanUser

Last modified 3yr ago