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


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) {
const AuthenticatedApp = () => (
onPress={() => firebase.auth().signOut()}
style={{ paddingTop: 300, color: 'blue', fontSize: 24 }}
This app has working phone auth 🤯
function App() {
return (
<DoormanProvider publicProjectId="YOUR-PROJECT-ID">
{({ user, loading }) => {
if (loading) return <ActivityIndicator />
// if a user is authenticated
if (user) return <AuthenticatedApp />
// otherwise, send them to the auth flow
return <AuthFlow />
export default App

Required Props

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:

    • 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 (
onAuthStateChanged={user => {
// if the user is signed in
if (user) {
// dispatch action updating user's unique ID
// or you want to add the user to your database
} else {
// if user is not signed in:
...some code here
{/* children go here, like AuthGate...*/}
const ConnectedDoorman = connect(null)(Doorman)
export default () => {
<Provider store={store}>
<ConnectedDoorman />