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