How to Setup Firebase SMS Authentication

Google Firebase SMS Authentication enables high-speed, secure OTP (One-Time Password) delivery globally. By integrating Firebase, your WordPress site can securely authorize user logins, passwordless sign-ins, and registration verification flows without relying on traditional expensive SMS API gateways. Wawp integrates the modern modular Firebase Web SDK directly into your site, handling tokenizations and security checks entirely on the client side.

The Firebase Accounts Dashboard Table

Manage all connected Google Firebase accounts in one central view under Wawp > Senders > Firebase SMS Authentication.

1. Default Sender Switch

• ✓ Selected (Active Badge): Highlights the Firebase account currently active for your site's global OTP dispatches.
• Set Default (Action Button): Assigns the selected Firebase profile as the main gateway in the Wawp database and automatically redirects all outgoing SMS queues through this configuration.

2. Account Name & Details

• Displays your custom friendly identifier label (e.g., "Main OTP Project").
• Displays the corresponding Google Project ID in monospace formatting underneath.

3. System Status

• ✓ Active (Green Check): The credentials are fully validated and ready for outbound delivery.
• ◷ Pending Setup (Amber Clock): The credentials have been saved but have not yet passed real-time OTP validation.

4. Row Actions

• Edit & Test: Launches the Slide-Out Setup Sheet Wizard to update saved credentials or perform verification checks.
• Delete (Trash Icon): Wipes out the saved Firebase configuration from the WordPress database. A verification prompt appears to protect against accidental deletions.

Step-by-Step Google Firebase Console Setup

To connect Firebase with Wawp, you must first register your website as an application inside your Google Firebase Developer Console:

Step 1: Create a Firebase Project

1. Open the Google Firebase Console.
2. Click the Add Project button.

3. Enter a project name (e.g., "Wawp Web OTP") and accept the terms of service.

4. Click Continue. You can choose to enable or disable Google Analytics (Wawp supports both).
5. Click Create Project and wait for the workspace dashboard to load.

Step 2: Enable Phone Authentication & Add Authorized Domains

Firebase blocks SMS delivery until the Phone sign-in provider is explicitly enabled and your website domain is authorized:

1. In the Firebase left sidebar, click on Build and select Authentication.
2. Click Get Started, then navigate to the Sign-in method tab.

3. Under the Additional providers list, click on Phone.

4. Toggle the Enable switch to active.

5. (Optional) You can configure testing phone numbers and verification codes to bypass SMS costs during local staging checks.
6. Click Save.

7. Navigate to the Settings tab at the top of the Authentication page.
8. Select Authorized domains from the sub-menu on the left.

9. Click Add domain, enter your website's actual domain name (e.g., yourdomain.com), and click Add to authorize it to request SMS verifications and load the security reCAPTCHA.

Step 3: Register a Web App to Retrieve SDK Keys

To allow your WordPress site to call the Firebase SDK, you must register a virtual Web App:

1. Go to the Firebase Project Overview dashboard.

2. Click the Web (</>) icon under your project title.

3. Enter an App Nickname (e.g., "Wawp WordPress Portal"). Leave the "Firebase Hosting" option unchecked.

4. Click Register App.
5. Firebase will display a code block containing const firebaseConfig. Copy the exact parameter values to paste into Wawp.

Critical Configuration Requirements

Wawp Settings Sheet Configuration

Once your Firebase Web App credentials are saved, input them into Wawp to establish the connection:

1. Click Add Account or Edit & Test in the Firebase Accounts panel.
2. Account Friendly Name: Enter a reference name (e.g., "Default Firebase Sender").
3. Paste the credentials copied from your Firebase Console Web App config:
   • API Key (Web SDK)
   • Project ID
   • Auth Domain
   • App ID
4. Expand the advanced settings separator to fill optional metrics if needed:
   • Storage Bucket
   • Messaging Sender ID
   • Measurement ID
5. Click Save in the settings sheet footer.

Real-Time Client-Side Verification Sandbox

Wawp features a built-in phone verification sandbox in the setup sheet to validate your credentials before setting the account live:

1. Locate the Account Validation Test card at the bottom of the settings sheet.
2. Under the Enter phone for test field, use the interactive phone country-code selector and type a physical phone number you have access to.
3. Click the Send (Airplane Icon) button.

4. Under the Hood Handshake: Wawp loads the client-side Google Firebase SDK, generates an invisible reCAPTCHA challenge inside the browser admin session to prevent bots, and triggers signInWithPhoneNumber() with your credentials.
5. If the handshake is correct, you will receive an SMS containing a 6-digit verification code.
6. A Verification Code (OTP) input field will appear in Wawp. Enter the 6-digit code.
7. Click the Verify button.
8. Upon successful validation, Wawp calls its backend REST API (/accounts/firebase/validate) to verify the handshake, update database status flags, and toggle your account to Active status.

Firebase SMS Error Codes & Solutions Reference

If an OTP fails to send or verify during testing, check the admin dashboard warnings or web console logs for the following Firebase-specific error codes: