Doorman + React Navigation Example (v5)

App.js

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

import * as React from 'react';
import { DoormanProvider, AuthGate } from 'react-native-doorman'

import AuthStack from './Stack' // <-- made in step #2 😇

// initialize firebase
import firebase from 'firebase/app'
import 'firebase/auth'
firebase.initializeApp(YOUR_FIREBASE_CONFIG)

// 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 (
    <NavigationContainer>
      <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 <AuthStack />
          }}
        </AuthGate>
      </DoormanProvider>
    </NavigationContainer>
  );
}

export default App

Stack.js

import React from 'react'
import { useNavigation } from '@react-navigation/native'
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 Stack = createStackNavigator()

const AuthStack = () => (
  <Stack.Navigator>
    <Stack.Screen name="Phone" component={Phone} />
    <Stack.Screen name="Confirm" component={Confirm} />
  </Stack.Navigator>
)

export default AuthStack