Firebase Setup Guide

Step-by-step instructions to configure Phone Authentication

1

Create a Firebase Project

  1. Go to the Firebase Console and log in with your Google account.
  2. Click on the "Add project" button.
  3. Enter a name for your project and click "Continue".
  4. You can optionally disable Google Analytics for this specific project. Click "Create project".
  5. Wait for the setup to finish, then click "Continue" to enter your new project dashboard.
2

Enable Phone Authentication

  1. In the left sidebar menu, expand the "Build" section and click on "Authentication".
  2. Click the "Get Started" button.
  3. Select the "Sign-in method" tab at the top.
  4. Scroll down or look through the list of "Native providers" and click on "Phone".
  5. Toggle the switch to the "Enable" position and click "Save".
Good to know: Firebase provides 10,000 successful verifications (SMS + Phone Auth) per month for free.
3

Register Your Web App

  1. Go back to the Project Overview by clicking the home icon or the project name in the top left corner.
  2. In the center of the dashboard, you will see "Get started by adding Firebase to your app". Click on the Web icon (</>).
  3. Enter an "App nickname" (e.g., "Web App").
  4. Leave the "Also set up Firebase Hosting" checkbox unchecked.
  5. Click "Register app".
4

Get Your Configuration Variables

After registering your web app, Firebase will display a code snippet containing your firebaseConfig object. It looks like this:

const firebaseConfig = { apiKey: "AIzaSyBxxxxxxx...", authDomain: "your-project.firebaseapp.com", projectId: "your-project", storageBucket: "your-project.appspot.com", messagingSenderId: "123456789", appId: "1:123456789:web:abcdef" };

Map to your .env file

Copy the values from the Firebase snippet and paste them into your project's .env file exactly as follows:

FIREBASE_API_KEY=value_of_apiKey FIREBASE_AUTH_DOMAIN=value_of_authDomain FIREBASE_PROJECT_ID=value_of_projectId FIREBASE_STORAGE_BUCKET=value_of_storageBucket FIREBASE_MESSAGING_SENDER_ID=value_of_messagingSenderId FIREBASE_APP_ID=value_of_appId
Note: If you ever need to find these settings again, go to the gear icon (Project Settings) next to "Project Overview", scroll down to the "Your apps" section, and select the "Config" radio button under your web app.
5

Verify Domain for reCAPTCHA (Optional but Recommended)

To prevent abuse, Firebase Phone Auth uses reCAPTCHA. If you plan to deploy your application to a live domain, you must authorize it.

  1. Go to Authentication > Settings > Authorized domains.
  2. Click "Add domain".
  3. Enter your production domain (e.g., yourdomain.com) and click "Add".

(By default, localhost is already authorized for local development.)

6

Fixing Error: auth/billing-not-enabled

Due to recent Google security policy changes, sending SMS codes now requires a Blaze Plan (Pay as you go), even for testing. The free Spark plan no longer supports Phone Authentication. However, you will still receive a generous free tier of 10,000 SMS verifications per month.

Error Message: Failed to send verification code. Firebase: Error (auth/billing-not-enabled).
  1. Go to the Firebase Console and open your project.
  2. In the bottom left corner of the menu (or on the project overview page), locate your current plan, which usually says "Spark plan" under Usage and Billing.
  3. Click the "Upgrade" button next to your plan.
  4. Select the "Blaze plan" (Pay as you go) option.
  5. Follow the prompts to set up a billing account by linking your credit or debit card through Google Cloud. (Remember: you will NOT be charged unless you exceed the 10,000 free requests per month).
  6. Once the plan is successfully upgraded to Blaze, return to your website and attempt to verify your phone number again. The code should arrive instantly!
Extra Tip: Very rarely, you might also need to visit the Google Cloud Platform console to manually enable the Identity Toolkit API, but upgrading to the Blaze plan usually handles everything automatically.
Billing Step 1 Billing Step 2 Billing Step 3 Billing Step 4 Billing Step 5
×