The Firebase integration provides secure user creation and identity management, enabling users to authenticate through multiple methods while maintaining consistent identity across your entire ecosystem.

How it works

Email & Password Authentication

When users submit their credentials in a funnel, FunnelFox automatically handles Firebase user creation:
  • FunnelFox creates a Firebase user via Email/Password authentication
  • By default, a secure random password is generated for the user
  • If the same screen includes a Password input element, that value replaces the generated password

OAuth Authentication

OAuth providers enable seamless social authentication within your funnels:
  • Enable OAuth providers (e.g., Google or Apple) in Firebase and add OAuth buttons in the Visual Editor
  • Users receive secure and seamless authentication experience
In this guide, we’ll show you how to set up the Google OAuth method. Optionally, you can also set up the Apple OAuth method. Just follow the tips in the Firebase popups once you select Apple as the provider.

Unified Identity (FUID)

Firebase UID becomes the canonical identifier across all integrated services:
  • The user’s Firebase UID (FUID) serves as their primary identifier
  • When other integrations are enabled, FunnelFox forwards this ID automatically:

Setup

Complete the Firebase integration by creating a Firebase project, configuring authentication methods, and connecting it to FunnelFox.

1. Create Firebase Project

Start by setting up a new Firebase project in the Firebase console.
  1. Go to the Firebase console and start creating a new Firebase project.
  2. Name your project
  3. Configure Google Analytics
  4. Click Create project

2. Configure Firebase Authentication

Enable Firebase Authentication to configure your preferred sign-in methods.
  1. In your Firebase project, go to Build > Authentication
Authentication
  1. Click Get started
Follow the steps below to set up your sign-in methods.

3. Email/Password Method

The Email/Password method allows users to sign up using their email address and password.
  1. Click Email/Password in the Native providers
  2. Toggle on Email/Password
  3. Click Save
  4. If you want to proceed with another sign-in method, click Add new provider
Email/Password

4. Google OAuth Method

Google OAuth provides seamless authentication using Google accounts.
  1. Click Google in Additional providers
  2. Toggle on Google
  3. Enter your project details:
    • Public-facing name: Displayed on emails that your users receive after creating an account with your app
    • Support email: Presented to users when they are authenticating with Google
  4. Click Save
Google OAuth

5. Google Console Setup

Configure Google Cloud console to enable OAuth authentication with your FunnelFox domain.
You will need your full project URL for this step. Go to Settings > Domains in your FunnelFox project and copy your project URL, e.g. https://demo-app.fnlfx.com.
  1. Open the project you’ve just created in the Google Cloud console
Cloud-console
  1. Go to APIs & Services > Credentials from the Quick access section
Api-services
  1. Open the web client just auto created by Google Service under OAuth 2.0 Client IDs
Web client
  1. Click Add URl under Authorized JavaScript origins and paste your full project URL
Project url
  1. Click Add URl under Authorized redirect URIs and paste your full project URL+ /__/auth/handler. Your final URl will look like https://demo-app.fnlfx.com/__/auth/handler
Redirect url
  1. Click Save

6. Register Your App in Firebase

Register your web app in Firebase to obtain the configuration values needed for FunnelFox integration.
  1. Go back to your Firebase project
  2. Click the settings gear icon at the top left and select Project settings
Project settings
  1. Select the web icon under Your apps
Web app
  1. Add your app nickname
  2. Click Register app
You will see the config required for the next step.
Config

7. Connect Firebase to FunnelFox

Complete the integration by adding your Firebase configuration to FunnelFox.
  1. Go to Settings > Integrations > Firebase in FunnelFox
  2. Toggle on Firebase
  3. Copy the config values from Firebase project and paste them in FunnelFox using the following mapping:
Firebase Config ValueFunnelFox Field
apiKeyFirebase API Key
authDomainFirebase Auth Domain
projectIdFirebase Project ID
storageBucketFirebase Storage Bucket
messagingSenderIdFirebase Messaging Sender ID
appIdFirebase App ID
measurementIdGoogle Measurement ID
  1. Click Save changes
Config copied
You successfully integrated Firebase! Add the authentication methods you’ve set up to your funnels in the Visual Editor.

Add Authentication to Funnels

Once Firebase is configured, you can add authentication flows to your funnels using the Visual Editor. The following authentication methods correspond to the ones you’ve set up in Firebase.

Email/Password Authentication

Enable users to sign in with their email address and custom password. To add Email/Password authentication to your funnel:
  1. In the Visual Editor, add a screen for user registration
  2. Go to Add element > Inputs and add both Email and Password inputs
  3. Set the Custom ID to firebase-password for the Password input
By default, FunnelFox generates a random password when a user submits their email in the funnel. It’s important to add the Password input on the same screen to replace the previously generated password with the one provided
Password ID

Google OAuth Authentication

Enable seamless authentication using Google accounts for a frictionless user experience. To add Google OAuth authentication to your funnel:
  1. In the Visual Editor, add a screen for user registration or use the one you’ve already added for Email/Password
  2. Click Add element > Authentication and add OAuth button for Google
  3. Go to the Element tab of the OAuth button
  4. Under Actions, set up user navigation for cases when authentication succeeds or fails
Learn more about setting up navigation actions.
Google OAuth