AuthGate
is a component that acts as the "gate" for your app's auth. It goes at the root of your app, inside of the DoormanProvider.
If you're using the withPhoneAuth
HOC, you have no usage for this component. It is only useful if you're using the component-based API with AuthFlow
. (See our quick example to learn the difference.)
<AuthGate>{({ user, loading }) => {if (loading) return <ActivityIndicator />// if a user is authenticatedif (user) return <AppWithAuth />// otherwise, send them to the auth flowreturn <AuthFlow />}}</AuthGate>
AuthGate
takes a function as a child, whose only argument is a dictionary containing a user
and loading
. The user
value comes from Firebase's auth, and it re-renders whenever there is a change in the auth state.
Under the hood, it implements firebase.onIdTokenChanged
, which is essentially the same thing as firebase.onAuthStateChanged
, with some added benefits.
Below is the example from the AuthFlow Quick Example page.
// Example App.jsimport React from 'react'import { Text, ActivityIndicator } from 'react-native'import { DoormanProivder, AuthFlow, AuthGate } from 'react-native-doorman'import firebase from 'firbase/auth'import 'firebase/auth'if (!firebase.apps.length) {firebase.initializeApp(yourFirebaseConfig)}function App() {return (<DoormanProvider publicProjectId="YOUR-PROJECT-ID"><AuthGate>{({ user, loading }) => {if (loading) return <ActivityIndicator />// if a user is authenticatedif (user) return <AppWithAuth />// otherwise, send them to the auth flowreturn <AuthFlow />}}</AuthGate></DoormanProvider>)}// 2. create your appconst AppWithAuth = () => (<Text style={{ marginTop: 300, color: 'purple' }}>This app has working phone auth 🤯</Text>)export default App