Make sure you've already completed the setup guide.
🏄🏽♂️withPhoneAuth
higher-order component API (simplest)
🌊<AuthFlow />
component-based API (more customized)
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 Firebaseif (!firebase.apps.length) {firebase.initializeApp(yourFirebaseConfig)}// 2. create your appconst App = () => (<TextonPress={() => 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'}})
Replace the publicProjectId field with yours.
How do I find my public project ID?
There are many customizations you can make with thewithPhoneAuth
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 = () => (<TextonPress={() => 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 authenticatedif (user) return <AuthenticatedApp />// otherwise, send them to the auth flowreturn <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?
First, we wrap our entire app with the DoormanProvider
. This allows our entire app to have access to the same Doorman instance.
Second, we use Doorman's super-convenient AuthGate
component.
Thanks to AuthGate, there's no longer a need to set up listeners like firebase.onAuthStateChanged
or anything like that.
You could also create your own AuthGate
component using useAuthGate
.
Finally, We render Doorman's <AuthFlow />
if the user hasn't authenticated yet. This component is all you need for the phone auth screens.
Sign in to Doorman
Go to the projects screen
Copy your project public ID under the name of your project
Important You must complete the Setup Guide before you can use your Public Project ID.
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",};
You can find it in your Firebase console.