Last active
March 26, 2020 03:13
-
-
Save nandorojo/7294e44b980479cc0b22346c62c69089 to your computer and use it in GitHub Desktop.
Doorman + React Navigation Example (v4)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment