AuthGate

About
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.)
Oversimplified Example
1
<AuthGate>
2
  {({ user, loading }) => {
3
    if (loading) return <ActivityIndicator />
4
   
5
    // if a user is authenticated
6
    if (user) return <AppWithAuth />
7
    
8
    // otherwise, send them to the auth flow
9
    return <AuthFlow />
10
  }}
11
</AuthGate>
Copied!
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.
Expanded Example
Below is the example from the AuthFlow Quick Example page.
1
// Example App.js
2
​
3
import React from 'react'
4
import { Text, ActivityIndicator } from 'react-native'
5
import { DoormanProivder, AuthFlow, AuthGate } from 'react-native-doorman'
6
  
7
import firebase from 'firbase/auth'
8
import 'firebase/auth'
9
​
10
if (!firebase.apps.length) {
11
  firebase.initializeApp(yourFirebaseConfig)
12
}
13
  
14
  
15
function App() {
16
  return (
17
    <DoormanProvider publicProjectId="YOUR-PROJECT-ID">
18
      <AuthGate>
19
        {({ user, loading }) => {
20
          if (loading) return <ActivityIndicator />
21
         
22
          // if a user is authenticated
23
          if (user) return <AppWithAuth />
24
          
25
          // otherwise, send them to the auth flow
26
          return <AuthFlow />
27
        }}
28
      </AuthGate>
29
    </DoormanProvider>
30
  )
31
}
32
​
33
// 2. create your app
34
const AppWithAuth = () => (
35
 <Text style={{ marginTop: 300, color: 'purple' }}>
36
   This app has working phone auth 🤯
37
 </Text>
38
)
39
​
40
export default App
Copied!
​
​

👓Concepts - Previous

Signing out

Next - 🍬Wrappers

DoormanProvider

Last modified 2yr ago

Copy link

Contents

About

Oversimplified Example

Expanded Example