Last updated
Last updated
Now that you've read the high-level explanation of , let's see some code.
If you want to skip up to the code, you can . You can also scroll down to "."
Make sure you've already completed the , & have deployed your app before continuing.
Add a userExistsInDb
state variable.
Add onAuthStateChanged
prop to DoormanProvider
. This function gets called whenever the user signs in or out.
Inside this function, call your DB to see if user exists already, and if not, send to the onboarding flow.
Call setUserExistsInDb
to update the state based on the DB's response.
When userExistsInDb
is false
, render an Onboarding
screen that lets users enter information, and then adds them to the database. This goes inside of AuthGate
.
Call setUserExistsInDb(true)
when a user is successfully added to the DB from the Onboarding
screen to update the state.
We're going to create 3 files. AuthLogic and Onboarding contain code distinct to this tutorial.
App.tsx
initialize Firebase, render app
AuthLogic.tsx
initialize Doorman, and conditionally render an authentication flow, an onboarding screen, or an authenticated app.
Onboarding.tsx
Collect user information if they aren't in the DB yet.
App
App.tsx
This is simple boilerplate code that is no different than normal initialization for Firebase/Doorman.
You can replace the firebase.initializeApp
config variable with your own firebase config.
AuthLogic
First, create a component called AuthLogic.
AuthLogic.tsx
Next, we'll add the Doorman Provider. This provider must wrap your entire app at the root file.
AuthGate
componentThe AuthGate
updates the state based on whether or not the user is authenticated.
AuthGate
accepts a single child: a function that returns a component. It receives the user
and loading
fields as arguments.
Whoa, where did AuthFlow
come from? That's the Doorman component that lets your users sign in with phone number. AfterAuth
is your normal app component.
Our file now looks like this:
AuthLogic.tsx
(or .js
if you don't use TypeScript)
Now, on to the code that lets you add your user to the DB.
First, let's add a userExistsInDb
state variable, whose initial value is false
. Add a checkingIfUserExists
state variable too, which indicates if the DB check is loading or not.
Next, add a listener callback to the DoormanProvider
component using its onAuthStateChanged
prop.
Onboarding
The final step is to render an Onboarding
screen if userExistsInDb
is false
.
🎉That's it! All that's left is to make the Onboarding
screen.
Here is our final AuthLogic
screen, in its entirety:
Note: If you have your own Onboarding
screen (or React Navigation
stack, you can render it in place of Onboarding
.
If you're using a React Navigation Stack in place of Onboarding
(assuming it's with v5
), then pass the onUserAddedToDb
function as a param
to your stack, and call it from your screen using useRoute().params.onUserAddedToDb
.
<Onboarding />
screen👋Don't forget to call the onUserAddedToDb
function after successfully adding your user to the database, as seen in line 19 below! If you don't call it, the app won't re-render.
Here's an example of a basic Onboarding
screen:
Onboarding.tsx
<AfterAuth />
Here's an example app screen, which you can make in your AfterAuth.tsx
file:
If you're using Firestore as your DB, you'll find examples in this tutorial for how to read and write a user.
For the sake of the tutorial, you can create a db.ts
file, and populate it with this. You can also set a custom firebaseConfig
from your own Firebase project.
This tutorial will rely on the DoormanProvider
implementation instead of withPhoneAuth
. (They both achieve the same thing, as mentioned in the .)
You can replace the publicProjectId
field with your own.
The onAuthStateChanged
prop is a function that gets called whenever the user signs in or out. It follows the from firebase
.
Let's see the code for adding a user to your database after they sign in.