Create Firebase project and enable Phone Auth (step by step)

1. Go to https://console.firebase.google.com and sign in with a Google account.

2. Click “Add project” → give it a name (e.g., “MyShop-OTP”) → click through and create the project. (You can disable Google Analytics if you want.)

3. In the project console, open Build → Authentication → click “Get Started”.

4. In the Sign-in method tab find Phone and click it → Enable → Save.

   • Optionally, configure reCAPTCHA settings (Firebase uses reCAPTCHA internally for web phone sign-in). You generally do not need to supply your own site key — Firebase does the invisible reCAPTCHA via the JS SDK.

5. Still in Authentication → Sign-in method, add your site domain under Authorized domains (top of the Sign-in method page). Example: example.com and www.example.com. Also add localhost if you test locally.

6. (Optional but recommended for testing) Under Authentication → Sign-in method → Phone you can add Test phone numbers. These allow you to verify OTP flows without sending real SMS. Add a test number and a matching test code (e.g., +91 9999999999 -> 123456). This helps during development so Firebase returns immediately.

7. Create a Web App in Firebase (so you can get the config object):

   • Go to the project Overview (the gear icon) → click Add app → choose Web (</> icon).

   • Enter an app nickname (e.g., checkout-web) and click Register app.

   • Firebase will show your Firebase config object — looks like:

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


   • Copy that entire object — you will paste it into the WordPress code (replace placeholder config already present in the code).

8. Make sure the Authorized domains includes your site and localhost (for dev). If you forget this, Firebase signInWithPhoneNumber will fail with a domain error.

Notes:

• For production SMS, Firebase will send real SMS and charges may apply depending on your usage and country limits. For initial development and testing, use test phone numbers to avoid real SMS costs.

• reCAPTCHA/invisible reCAPTCHA requires HTTPS in production. If you test on HTTP (non-localhost), you may get warnings or failures.

 How to install the code into WordPress (step by step)

Install free plugin for insert the code Download free plugin

Go to WordPress and click Snippets. Then click the Import option at the top, upload the purchased code, and turn on the toggle button.

Replace Firebase config in code

Inside the inline JS in the code you will find the firebaseConfig = { ... } object. Replace that entire object with the web app config you copied from Firebase console (Part A step 7). Example:

Important: this is safe to include client side — the API key in Firebase config is meant to be public for client usage. But still protect your Firebase project rules on the server side if you use other services.

📦 How to Install (Step-By-Step Guide)

Option 1: Add into Theme’s functions.php (Simple Method)

1. Go to: WordPress Dashboard → Appearance → Theme File Editor

2. Open: functions.php

3. Scroll to the bottom

4. Paste the entire code you shared

5. Save file

6. Go to: My Account page → Mobile OTP Login will appear.

Option 2: Install Free Plugin

Install free plugin for insert the code Download free plugin

Go to WordPress and click Snippets. Then click the Import option at the top, upload the purchased code, and turn on the toggle button.