Quick Example
Let's do this thing.
- 1.
- 2.
Which should you use? It's a matter of preference. If you aren't sure, just stick to #1.
#2 probably fits in better if you're using React Navigation.
This is the easiest way to add phone auth to your app:
import React from 'react'
import { View, Text } from 'react-native'
import { withPhoneAuth } from 'react-native-doorman'
import firebase from 'firebase/app'
import 'firebase/auth'
// 1. initialize Firebase
if (!firebase.apps.length) {
firebase.initializeApp(yourFirebaseConfig)
}
// 2. create your app
const App = () => (
<Text
onPress={() => firebase.auth().signOut()}
style={{ paddingTop: 300, color: 'blue', fontSize: 24 }}
>
This app has working phone auth 🤯
</Text>
)
// 3. give your app phone auth 🎉
export default withPhoneAuth(App, {
doorman: {
publicProjectId: 'YOUR_PROJECT_ID_HERE'
}
})
There are many customizations you can make with the
withPhoneAuth HOC, including a splash screen, loading screen, custom screen props, and more. See the docs for it here.Under the hood,
withPhoneAuth is actually implementing the <AuthFlow /> component. Let's see how that looks in the next example.If you like more customization, and a component-based API, this option is your best bet.
import React from 'react'
import { Text, ActivityIndicator } from 'react-native'
import {
DoormanProvider, AuthFlow, AuthGate
} from 'react-native-doorman'
import firebase from 'firebase/app'
import 'firebase/auth'
if (!firebase.apps.length) {
firebase.initializeApp(yourFirebaseConfig)
}
const AuthenticatedApp = () => (
<Text
onPress={() => firebase.auth().signOut()}
style={{ paddingTop: 300, color: 'blue', fontSize: 24 }}
>
This app has working phone auth 🤯
</Text>
)
function App() {
return (
<DoormanProvider publicProjectId="YOUR-PROJECT-ID">
<AuthGate>
{({ user, loading }) => {
if (loading) return <ActivityIndicator />
// if a user is authenticated
if (user) return <AuthenticatedApp />
// otherwise, send them to the auth flow
return <AuthFlow />
}}
</AuthGate>
</DoormanProvider>
)
}
export default App
Replace the publicProjectId field with your actual Doorman project ID. How do I find my project ID?What's going on above?
- 1.First, we wrap our entire app with the
DoormanProvider. This allows our entire app to have access to the same Doorman instance. - 2.
- 1.Thanks to AuthGate, there's no longer a need to set up listeners like
firebase.onAuthStateChangedor anything like that. - 2.
- 3.Finally, We render Doorman's
<AuthFlow />if the user hasn't authenticated yet. This component is all you need for the phone auth screens.
- 1.
- 2.Go to the projects screen
- 3.Copy your project public ID under the name of your project
Your Firebase web app config object looks like this:
const firebaseConfig = {
apiKey: "api-key",
authDomain: "project-id.firebaseapp.com",
databaseURL: "https://project-id.firebaseio.com",
projectId: "project-id",
storageBucket: "project-id.appspot.com",
messagingSenderId: "sender-id",
appId: "app-id",
measurementId: "G-measurement-id",
};