If you already have your own logic set up for adding users to your database, then you might not need this guide, but we still recommend reading through it.
Want to skip to the real code example? Click here.
There are typically two separate steps to a user signing in to an app:
Authenticate: Let the user verify their identity and securely enter your app (this is what Doorman does).
Add user to database: Most apps want to collect information from users after they authenticate, like a name, profile picture, etc. In order to do so, once a user has authenticated, you will probably do the following steps:
Make a request to your database, and check if the user exists/has completed onboarding.
If the user exists, send them into your app.
If the user does not exist, send them to an onboarding flow.
Adding your user to the database with Doorman is easy. It just requires a few extra steps after the initial set up.
This is an oversimplified version of the logic we want to create:
if (user) {// user is authenticatedconst uid = user.uid // user id// check DB to see if the user existsconst { exists } = await doesUserExistInDb(uid)// set state based on the DB valuesetUserExists(exists)} else {// user is not signed in, reset the statesetUserExists(false)}
In a component, this oversimplified code might look like this:
// this screen shows up after the user has authenticatedexport default function App() {const [checkingIfExists, setCheckingIfExists] = useState(false)const [userExists, setUserExists] = useState(false)const onAuthStateChanged = async (user) => {if (user) {// user is authenticatedconst uid = user.uid // user id// show loading indicatorsetCheckingIfExists(true)// check DB to see if the user existsconst { exists } = await doesUserExistInDb(uid)// set state based on the DB valuesetUserExists(exists)// set loading state to falsesetCheckingIfExists(false)} else {// user is not signed in, reset the statesetUserExists(false)setCheckingIfExists(false)}}// if the DB call is loadingif (checkingIfExists) return <LoadingScreen />// if the user doesn't existif (!userExists) return <OnboardingStack />// user exists! render the appreturn <App />}
This screen would show up after your user has authenticated.
Let's continue to the next page to see how to implement this in real code with Doorman: