Skip to content

Instantly share code, notes, and snippets.

@nandorojo
Last active Mar 23, 2020
Embed
What would you like to do?
Doorman + React Navigation Example (v5)
// 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
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment