Doorman + React Navigation

Background
​React Navigation is an incredible library for managing navigation in React Native apps. This example shows how to integrate it with Doorman, for both v4 and v5.
​Doorman lets you add Firebase phone authentication to React Native and Expo apps with just a few lines of code. It provides a customizable UI, all the phone verification without a server, and you don't have to detach from Expo.
If you want to jump ahead, you can see the final code on Github (v5 code / v4 code).
What we're making
Let's recreate the quintessential Doorman auth flow, as seen in our welcome page.
Steps
1.Create two custom screens
2.Turn the two screens into a stack
3.Add authentication functionality to our custom stack
Our example will have two files only: App.js and Stack.js. We'll start with Stack.js.
This guide assumes you've already gone through the installation steps for React Navigation.
1. Create two screens
Let's create our stack consisting of two screens – PhoneScreen and ConfirmScreen in a file called Stack.js.
React Navigation v5
React Navigation v4
1
// Stack.js
2
import React from 'react'
3
import { useNavigation } from '@react-navigation/native'
4
​
5
import { AuthFlow } from 'react-native-doorman'
6
​
7
const Phone = () => {
8
  const { navigate } = useNavigation()
9
​
10
  return (
11
    <AuthFlow.PhoneScreen 
12
      onSmsSuccessfullySent={() => {
13
        navigate('Confirm')
14
      }}
15
      renderHeader={null}
16
    />
17
  )
18
}
19
​
20
const Confirm = () => (
21
  <AuthFlow.ConfirmScreen 
22
    renderHeader={null}
23
  />
24
)
Copied!
1
// Stack.js
2
import React from 'react'
3
import { useNavigation } from 'react-navigation-hooks'
4
​
5
import { AuthFlow } from 'react-native-doorman'
6
​
7
const Phone = () => {
8
  const { navigate } = useNavigation()
9
​
10
  return (
11
    <AuthFlow.PhoneScreen 
12
      onSmsSuccessfullySent={() => {
13
        navigate('Confirm')
14
      }}
15
      renderHeader={null}
16
    />
17
  )
18
}
19
​
20
const Confirm = () => (
21
  <AuthFlow.ConfirmScreen 
22
    renderHeader={null}
23
  />
24
)
Copied!
All we did above was import the two pre-made screens from Doorman AuthFlow.ConfirmScreen & AuthFlow.PhoneScreen, and put them into their own components.
When an SMS is successfully sent, the onSmsSuccessfullySent function gets called. Here, we navigate to the confirm screen. In the next step, we'll add the actual navigation that lets us do that.
2. Turn our screens into a stack
Let's edit the Stack.js code to add a stack navigator.
We'll import createStackNavigator and export our new stack, like this:
React Navigation v5
React Navigation v4
1
// Stack.js
2
​
3
import { createStackNavigator } from '@react-navigation/stack'
4
​
5
// ... other code from step #1
6
​
7
​
8
const Stack = createStackNavigator()
9
​
10
const AuthStack = () => (
11
  <Stack.Navigator>
12
    <Stack.Screen name="Phone" component={Phone} />
13
    <Stack.Screen name="Confirm" component={Confirm} />
14
  </Stack.Navigator>
15
)
16
​
17
export default AuthStack
Copied!
1
// Stack.js
2
​
3
import { createStackNavigator } from 'react-navigation-stack'
4
​
5
// ...other code from Stack.js (in step #1)
6
​
7
const AuthStack = createStackNavigator({
8
  Phone,
9
  Screen
10
})
11
​
12
export default AuthStack
Copied!
This follows the example of the React Navigation Hello World.
Here is the final Stack.js file:
React Navigation v5
React Navigation v4
1
import React from 'react'
2
import { useNavigation } from '@react-navigation/native'
3
import { createStackNavigator } from '@react-navigation/stack'
4
​
5
import { AuthFlow } from 'react-native-doorman'
6
​
7
const Phone = () => {
8
  const { navigate } = useNavigation()
9
​
10
  return (
11
    <AuthFlow.PhoneScreen 
12
      onSmsSuccessfullySent={() => {
13
        navigate('Confirm')
14
      }}
15
      renderHeader={null}
16
    />
17
  )
18
}
19
​
20
const Confirm = () => (
21
  <AuthFlow.ConfirmScreen 
22
    renderHeader={null}
23
  />
24
)
25
​
26
const Stack = createStackNavigator()
27
​
28
const AuthStack = () => (
29
  <Stack.Navigator>
30
    <Stack.Screen name="Phone" component={Phone} />
31
    <Stack.Screen name="Confirm" component={Confirm} />
32
  </Stack.Navigator>
33
)
34
​
35
export default AuthStack
Copied!
1
import React from 'react'
2
import { useNavigation } from 'react-navigation-hooks'
3
import { createStackNavigator } from 'react-navigation-stack'
4
​
5
import { AuthFlow } from 'react-native-doorman'
6
​
7
const Phone = () => {
8
  const { navigate } = useNavigation()
9
​
10
  return (
11
    <AuthFlow.PhoneScreen 
12
      onSmsSuccessfullySent={() => {
13
        navigate('Confirm')
14
      }}
15
      renderHeader={null}
16
    />
17
  )
18
}
19
​
20
const Confirm = () => (
21
  <AuthFlow.ConfirmScreen 
22
    renderHeader={null}
23
  />
24
)
25
​
26
const AuthStack = createStackNavigator({
27
  Phone,
28
  Screen
29
})
30
​
31
​
32
export default AuthStack
Copied!
We now have a working React Navigation stack for our AuthFlow! How easy was that?
The final step is making these actually work with Doorman's phone authentication. We'll see that in step 3.
3. Add auth functionality
Let's start by creating a simple App.js file that initializes Firebase and adds React Navigation's app container.
React Navigation v5
React Navigation v4
1
// App.js
2
​
3
import * as React from 'react';
4
import { NavigationContainer } from '@react-navigation/native';
5
​
6
// initialize firebase
7
import firebase from 'firebase/app'
8
import 'firebase/auth'
9
firebase.initializeApp(YOUR_FIREBASE_CONFIG)
10
​
11
// create our App component, shown once we've authed
12
const AuthedApp = () => ( 
13
  <Text 
14
     onPress={() => firebase.auth().signOut()} 
15
     style={{ paddingTop: 300, color: 'blue', fontSize: 24 }}
16
   >
17
     This app is authed!!
18
   </Text>
19
)
20
​
21
const App = () => {
22
  return (
23
    <NavigationContainer>
24
      
25
    </NavigationContainer>
26
  );
27
}
28
​
29
export default App
Copied!
1
// App.js
2
​
3
import * as React from 'react';
4
​
5
// initialize firebase
6
import firebase from 'firebase/app'
7
import 'firebase/auth'
8
firebase.initializeApp(YOUR_FIREBASE_CONFIG)
9
​
10
// create our App component, shown once we've authed
11
const AuthedApp = () => ( 
12
  <Text 
13
     onPress={() => firebase.auth().signOut()} 
14
     style={{ paddingTop: 300, color: 'blue', fontSize: 24 }}
15
   >
16
     This app is authed!!
17
   </Text>
18
)
19
​
20
const App = () => {
21
  return (
22
    <>
23
      // we'll update this in the next step
24
    </>
25
  );
26
}
27
​
28
export default App
Copied!
Replace YOUR_FIREBASE_CONFIG with your project's. How do I find my Firebase config?​
If you already have an app created (you probably do), then you can replace AuthedApp above with your App component.
3.1 Add Doorman to your app
The rest is the same as the original quick example, with one difference: you replace Doorman's AuthFlow component with your custom AuthStack from Stack.js.
React Navigation v5
React Navigation v4
1
// App.js
2
import * as React from 'react'
3
import { DoormanProvider, AuthGate } from 'react-native-doorman'
4
​
5
import AuthStack from './Stack'
6
​
7
// initialize firebase
8
import firebase from 'firebase/app'
9
import 'firebase/auth'
10
firebase.initializeApp(YOUR_FIREBASE_CONFIG)
11
​
12
// create our App component, shown once we've authed
13
const AuthedApp = () => (   
14
  <Text 
15
     onPress={() => firebase.auth().signOut()} 
16
     style={{ paddingTop: 300, color: 'blue', fontSize: 24 }}
17
   >
18
     This app is authed!!
19
   </Text>
20
)
21
​
22
const App = () => {
23
  return (
24
    <NavigationContainer>
25
      <DoormanProvider publicProjectId="YOUR-PROJECT-ID">
26
        <AuthGate>
27
          {({ user, loading }) => {
28
            if (loading) return <></>
29
           
30
            // if a user is authenticated
31
            if (user) return <AuthedApp />
32
            
33
            // otherwise, send them to the auth flow
34
            return <AuthStack />
35
          }}
36
        </AuthGate>
37
      </DoormanProvider>
38
    </NavigationContainer>
39
  );
40
}
41
​
42
export default App
Copied!
1
// App.js
2
import { DoormanProvider, AuthGate } from 'react-native-doorman'
3
import { createAppContainer } from 'react-navigation'
4
​
5
import AuthStack from './Stack' // <-- made in step #2 😇
6
​
7
const Navigator = createAppContainer(AuthStack)
8
​
9
// initialize firebase
10
import firebase from 'firebase/app'
11
import 'firebase/auth'
12
firebase.initializeApp(YOUR_FIREBASE_CONFIG)
13
​
14
// create our App component, shown once we've authed
15
const AuthedApp = () => (   
16
  <Text 
17
     onPress={() => firebase.auth().signOut()} 
18
     style={{ paddingTop: 300, color: 'blue', fontSize: 24 }}
19
   >
20
     This app is authed!!
21
   </Text>
22
)
23
​
24
const App = () => {
25
  return (
26
    <DoormanProvider publicProjectId="YOUR-PROJECT-ID">
27
      <AuthGate>
28
        {({ user, loading }) => {
29
          if (loading) return <></>
30
         
31
          // if a user is authenticated
32
          if (user) return <AuthedApp />
33
          
34
          // otherwise, send them to the auth flow
35
          return <Navigator />
36
        }}
37
      </AuthGate>
38
    </DoormanProvider>
39
  );
40
}
41
​
42
export default App
Copied!
Let's recap what we did above.
1. Import the DoormanProvider and AuthGate components from react-native-doorman into your App.js, and place them inside the NavigationContainer.
2.Place them within the NavigationContainer (if you're using v5.)
3.Replace the DoormanProvider's publicProjectId prop with your own project ID.
4.If there is a user, meaning Doorman has authenticated someone using Firebase auth, we render our AuthedApp component.
5.Otherwise, we render our custom AuthStack flow from Stack.js.
Here's the final App.js:
React Navigation v5
React Navigation v4
1
// App.js
2
​
3
import * as React from 'react';
4
import { DoormanProvider, AuthGate } from 'react-native-doorman'
5
​
6
import AuthStack from './Stack' // <-- made in step #2 😇
7
​
8
// initialize firebase
9
import firebase from 'firebase/app'
10
import 'firebase/auth'
11
firebase.initializeApp(YOUR_FIREBASE_CONFIG)
12
​
13
// create our App component, shown once we've authed
14
// you can replace this with your App it exists
15
const AuthedApp = () => ( 
16
  <Text 
17
     onPress={() => firebase.auth().signOut()} 
18
     style={{ paddingTop: 300, color: 'blue', fontSize: 24 }}
19
   >
20
     This app is authed!!
21
   </Text>
22
)
23
const App = () => {
24
  return (
25
    <NavigationContainer>
26
      <DoormanProvider publicProjectId="YOUR-PROJECT-ID">
27
        <AuthGate>
28
          {({ user, loading }) => {
29
            if (loading) return <></>
30
           
31
            // if a user is authenticated
32
            if (user) return <AuthedApp />
33
            
34
            // otherwise, send them to the auth flow
35
            return <AuthStack />
36
          }}
37
        </AuthGate>
38
      </DoormanProvider>
39
    </NavigationContainer>
40
  );
41
}
42
​
43
export default App
Copied!
1
// App.js
2
​
3
import * as React from 'react';
4
import AuthStack from './Stack' // <-- made in step #2 😇
5
import { DoormanProvider, AuthGate } from 'react-native-doorman'
6
import { createAppContainer } from 'react-navigation'
7
​
8
// initialize firebase
9
import firebase from 'firebase/app'
10
import 'firebase/auth'
11
firebase.initializeApp(YOUR_FIREBASE_CONFIG)
12
​
13
// create react navigation container
14
const Navigator = createAppContainer(AuthStack)
15
​
16
// create our App component, shown once we've authed
17
// you can replace this with your App it exists
18
const AuthedApp = () => ( 
19
  <Text 
20
     onPress={() => firebase.auth().signOut()} 
21
     style={{ paddingTop: 300, color: 'blue', fontSize: 24 }}
22
   >
23
     This app is authed!!
24
   </Text>
25
)
26
​
27
const App = () => {
28
  return (
29
    <DoormanProvider publicProjectId="YOUR-PROJECT-ID">
30
      <AuthGate>
31
        {({ user, loading }) => {
32
          if (loading) return <></>
33
         
34
          // if a user is authenticated
35
          if (user) return <AuthedApp />
36
          
37
          // otherwise, send them to the auth flow
38
          return <AuthStack />
39
        }}
40
      </AuthGate>
41
    </DoormanProvider>
42
  );
43
}
44
​
45
export default App
Copied!
🔥Doorman added! Your React Native / Expo app now has Firebase phone auth, made custom with React Navigation.
Want to customize the styles of your screens? See docs for the AuthFlow.PhoneScreen and AuthFlow.ConfirmScreen.
Need help?
You can live chat with me (Fernando) at doorman.cool. Or try tweeting @FernandoTheRojo.
🤖Example Code - Previous
React Navigation Example
Next - 📱Auth Components
withPhoneAuth
Last modified 2yr ago
Copy link
Contents
Background
What we're making
Steps
1. Create two screens
2. Turn our screens into a stack
3. Add auth functionality
3.1 Add Doorman to your app
Need help?