AuthGate

About

AuthGate is a component that acts as the "gate" for your app's auth. It goes at the root of your app, inside of the DoormanProvider.

If you're using the withPhoneAuth HOC, you have no usage for this component. It is only useful if you're using the component-based API with AuthFlow. (See our quick example to learn the difference.)

Oversimplified Example

<AuthGate>
  {({ user, loading }) => {
    if (loading) return <ActivityIndicator />
   
    // if a user is authenticated
    if (user) return <AppWithAuth />
    
    // otherwise, send them to the auth flow
    return <AuthFlow />
  }}
</AuthGate>

AuthGate takes a function as a child, whose only argument is a dictionary containing a user and loading. The user value comes from Firebase's auth, and it re-renders whenever there is a change in the auth state.

Under the hood, it implements firebase.onIdTokenChanged, which is essentially the same thing as firebase.onAuthStateChanged, with some added benefits.

Expanded Example

Below is the example from the AuthFlow Quick Example page.

// Example App.js

import React from 'react'
import { Text, ActivityIndicator } from 'react-native'
import { DoormanProivder, AuthFlow, AuthGate } from 'react-native-doorman'
  
import firebase from 'firbase/auth'
import 'firebase/auth'

if (!firebase.apps.length) {
  firebase.initializeApp(yourFirebaseConfig)
}
  
  
function App() {
  return (
    <DoormanProvider publicProjectId="YOUR-PROJECT-ID">
      <AuthGate>
        {({ user, loading }) => {
          if (loading) return <ActivityIndicator />
         
          // if a user is authenticated
          if (user) return <AppWithAuth />
          
          // otherwise, send them to the auth flow
          return <AuthFlow />
        }}
      </AuthGate>
    </DoormanProvider>
  )
}

// 2. create your app
const AppWithAuth = () => (
 <Text style={{ marginTop: 300, color: 'purple' }}>
   This app has working phone auth 🤯
 </Text>
)

export default App