Doorman + React Navigation Example (v4)

App.js

// IN ORDER TO USE THIS, YOU NEED TWO THINGS
// 1. Your firebase config, to be replaced on line 13
// 2. Your Doorman public project ID, to be replaced on line 30. (Go to https://app.doorman.cool to find it.)

import * as React from 'react';
import AuthStack from './Stack' // <-- made in step #2 😇
import { DoormanProvider, AuthGate } from 'react-native-doorman'
import { createAppContainer } from 'react-navigation'
import { Text } from 'react-native'

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

if (!firebase.apps.length) firebase.initializeApp(firebaseConfig)

// create react navigation container
const Navigator = createAppContainer(AuthStack)

// create our App component, shown once we've authed
const AuthedApp = () => ( 
  <Text 
     onPress={() => firebase.auth().signOut()} 
     style={{ paddingTop: 300, color: 'blue', fontSize: 24 }}
   >
     This app is authed!!
   </Text>
)

const App = () => {
  return (
    <DoormanProvider publicProjectId="YOUR-PROJECT-ID">
      <AuthGate>
        {({ user, loading }) => {
          if (loading) return <></>
         
          // if a user is authenticated
          if (user) return <AuthedApp />
          
          // otherwise, send them to the auth flow
          return <Navigator />
        }}
      </AuthGate>
    </DoormanProvider>
  );
}

export default App

Stack.js

import React from 'react'
import { useNavigation } from 'react-navigation-hooks'
import { createStackNavigator } from 'react-navigation-stack'

import { AuthFlow } from 'react-native-doorman'

const Phone = () => {
  const { navigate } = useNavigation()

  return (
    <AuthFlow.PhoneScreen 
      onSmsSuccessfullySent={() => {
        navigate('Confirm')
      }}
      renderHeader={null}
    />
  )
}

const Confirm = () => (
  <AuthFlow.ConfirmScreen 
    renderHeader={null}
  />
)

const AuthStack = createStackNavigator({
  Phone,
  Confirm
})


export default AuthStack