Last updated
Last updated
Make sure you've already completed the .
🏄🏽♂️ higher-order component API (simplest)
🌊 component-based API (more customized)
Which should you use? It's a matter of preference. If you aren't sure, just stick to #1.
#2 probably fits in better if you're using React Navigation.
withPhoneAuth
exampleThis is the easiest way to add phone auth to your app:
Under the hood, withPhoneAuth
is actually implementing the <AuthFlow />
component. Let's see how that looks in the next example.
<AuthFlow />
ExampleIf you like more customization, and a component-based API, this option is your best bet.
What's going on above?
First, we wrap our entire app with the DoormanProvider
. This allows our entire app to have access to the same Doorman instance.
Thanks to AuthGate, there's no longer a need to set up listeners like firebase.onAuthStateChanged
or anything like that.
Go to the projects screen
Copy your project public ID under the name of your project
Your Firebase web app config object looks like this:
Replace the publicProjectId field with yours.
There are many customizations you can make with thewithPhoneAuth
HOC, including a splash screen, loading screen, custom screen props, and more. See the docs for it .
Replace the publicProjectId field with your actual Doorman project ID.
Second, we use Doorman's super-convenient component.
You could also create your own AuthGate
component using .
Finally, We render Doorman's if the user hasn't authenticated yet. This component is all you need for the phone auth screens.
Sign in to
Important You must complete the before you can use your Public Project ID.
You can find it in your .
Let's do this thing.