Quick Example

Let's do this thing.

Pre-requisites

Make sure you've already completed the setup guide.

Two ways to get started

1. 🏄🏽‍♂️withPhoneAuth higher-order component API (simplest)

2. 🌊<AuthFlow /> component-based API (more customized)

Which should you use? It's a matter of preference. If you aren't sure, just stick to #1.

#2 probably fits in better if you're using React Navigation.

withPhoneAuth example

This is the easiest way to add phone auth to your app:

import React from 'react'
import { View, Text } from 'react-native'
import { withPhoneAuth } from 'react-native-doorman'

import firebase from 'firebase/app'
import 'firebase/auth'

// 1. initialize Firebase
if (!firebase.apps.length) {
  firebase.initializeApp(yourFirebaseConfig)
}

// 2. create your app
const App = () => (
 <Text 
   onPress={() => firebase.auth().signOut()} 
   style={{ paddingTop: 300, color: 'blue', fontSize: 24 }}
 >
   This app has working phone auth 🤯
 </Text>
)


// 3. give your app phone auth 🎉
export default withPhoneAuth(App, {
  doorman: {
    publicProjectId: 'YOUR_PROJECT_ID_HERE'
  }
})

Replace the publicProjectId field with yours. How do I find my public project ID?

There are many customizations you can make with thewithPhoneAuth HOC, including a splash screen, loading screen, custom screen props, and more. See the docs for it here.

Under the hood, withPhoneAuth is actually implementing the <AuthFlow /> component. Let's see how that looks in the next example.

<AuthFlow /> Example

If you like more customization, and a component-based API, this option is your best bet.

import React from 'react'
import { Text, ActivityIndicator } from 'react-native'
import { 
  DoormanProvider, 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

Replace the publicProjectId field with your actual Doorman project ID. How do I find my project ID?

What's going on above?

1. First, we wrap our entire app with the DoormanProvider. This allows our entire app to have access to the same Doorman instance.

2. Second, we use Doorman's super-convenient AuthGate component.

   1. Thanks to AuthGate, there's no longer a need to set up listeners like firebase.onAuthStateChanged or anything like that.

   2. You could also create your own AuthGate component using useAuthGate.

3. Finally, We render Doorman's <AuthFlow /> if the user hasn't authenticated yet. This component is all you need for the phone auth screens.

Find Doorman Public Project ID

1. Sign in to Doorman

2. Go to the projects screen

3. Copy your project public ID under the name of your project

Important You must complete the Setup Guide before you can use your Public Project ID.

Find Firebase project config

Your Firebase web app config object looks like this:

const firebaseConfig = {
  apiKey: "api-key",
  authDomain: "project-id.firebaseapp.com",
  databaseURL: "https://project-id.firebaseio.com",
  projectId: "project-id",
  storageBucket: "project-id.appspot.com",
  messagingSenderId: "sender-id",
  appId: "app-id",
  measurementId: "G-measurement-id",
};

You can find it in your Firebase console.