withPhoneAuth

What is withPhoneAuth?
A higher-order component that wraps your entire app and gives it phone auth.
withPhoneAuth(App, config)
The first argument is your App component, and the second argument is a required config dictionary.
As seen in the quick example:
1
// App.js
2
import App from './src/App'
3
import { withPhoneAuth } from 'react-native-doorman'
4
​
5
// initialize firebase here...
6
​
7
export default withPhoneAuth(App, {
8
  doorman: {
9
    publicProjectId: 'YOUR_PROJECT_ID_HERE'
10
  },
11
  // other options here
12
})
Copied!
Required arguments
First argument must be your root app component.
Second argument is a configuration dictionary with one required field:
doorman
A dictionary whose only field is publicProjectId
​How do I find my public project ID?​
Customizations
Imagine you wanted to change the background color of your screens to a nice hot pink, and add a splash screen before the phone screen pops up:
1
const SplashScreen = ({ next }) => {
2
  // the "next" prop is a function that navigates to the phone auth screen
3
  return (
4
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
5
      <Button 
6
        title="Continue with phone number"
7
        onPress={next} 
8
      />
9
    </View>
10
}
11
​
12
export default withPhoneAuth(App, {
13
  doorman: {
14
    publicProjectId: 'YOUR_PROJECT_ID_HERE'
15
  },
16
  SplashScreen,
17
  backgroundColor: '#FF2C55'
18
})
Copied!
SplashScreen and background are only two of the many things you can customize.
Firstly, you can pass any of the common screen props as customizations. 
You also get the following options:
SplashScreen A react component that shows up before the auth flow. 
Receives one prop, next. You should have a button that tells people to sign in with phone, and the onPress of this button should be the next prop.
This is useful if you have other auth options other than phone you want to allow.
LoadingScreen A react component that will be shown while the auth state is initially loading.
confirmScreenProps
Any of the optional props from AuthFlow.ConfirmScreen will be passed down to it as a dictionary, except onCodeVerified. That prop is exposed directly as here instead.
phoneScreenProps 
Any of the optional props from AuthFlow.PhoneScreen will be passed down to it, except onSmsSuccessfullySent. That prop is exposed directly as here instead.
onSmsSuccessfullySent
Function called when an SMS is sent successfully.
Receives a dictionary with a phoneNumber field.
onUserSuccessfullySignedIn
Function called when user is successfully signed in
This gets called after onCodeVerified, since there is a network request made between the successful code and signing in with firebase.
Receives a dictionary with a user field. 
The user could be null, so check for that.
onCodeVerified
Callback function called when a user's 6-digit code is verified, and they are authenticated.
Receives a dictionary with a token field.
onAuthStateChanged follows the same API as the one from the Firebase Auth API.
To see the docs for it, check here: https://firebase.google.com/docs/auth/web/manage-users​
Basically, it's a function that gets called every time the user updates, whether signing in/out, or updating the user's token
You might want to use this for storing your user's UID in your database, or redux, etc.
initialPhoneNumber
(Optional) The initial state of the phone number field.
If you aren't based in the US, you may want to set this to the prefix of your country.
Default: +1 which makes the initial flag 🇺🇸
onAuthStateChanged example
1
export default withPhoneAuth(App, {
2
  doorman: {
3
    publicProjectId: 'YOUR_PROJECT_ID_HERE'
4
  },
5
  onAuthStateChanged: user => {
6
    if (user) {
7
      // if user is signed in
8
      let uid = user.uid;
9
      
10
      // upload your user to your db
11
      checkDbToSeeIfUserExists(uid)
12
      
13
      // if you're using Firestore...
14
      const db = firebase.firestore()
15
      db.doc(`users/${uid}`).set({ hasSignedIn: true }, { merge: true })
16
    } else {
17
      // if user is not signed in
18
    }
19
  }
20
})
Copied!
​

Doorman + React Navigation

Next - 📱Auth Components

AuthFlow

Last modified 1yr ago

Copy link

Contents

What is withPhoneAuth?

withPhoneAuth(App, config)

Required arguments

Customizations

onAuthStateChanged example

What is withPhoneAuth?

withPhoneAuth(App, config)

Required arguments

Customizations

onAuthStateChanged example

​