Comment on page
AuthGate
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 authenticated
if (user) return <AppWithAuth />
// otherwise, send them to the auth flow
return <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.// Example App.js
import 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 authenticated
if (user) return <AppWithAuth />
// otherwise, send them to the auth flow
return <AuthFlow />
}}
</AuthGate>
</DoormanProvider>
)
}
// 2. create your app
const AppWithAuth = () => (
<Text style={{ marginTop: 300, color: 'purple' }}>
This app has working phone auth 🤯
</Text>
)
export default App
Last modified 3yr ago