### Operating System

Linux Ubuntu

### Environment (if applicable)

Vercel

### Firebase SDK Version

11.0.1

### Firebase SDK Product(s)

Auth, Messaging

### Project Tooling

- Next.js
- TypeScript

### Detailed Problem Description

- The `signInWithPhoneNumber` function works seamlessly in the local development environment but fails to deliver the OTP when deployed on the cloud.
- The phone numbers used are valid Colombian numbers, and the formatting adheres to Firebase's requirements.
- Recaptcha is set to invisible, and its initialization appears correct in both environments.
- No network restrictions or firewall rules are preventing OTP delivery from the cloud server.
- The issue might be related to Firebase's backend services when handling requests from the cloud server environment.

### Steps and code to reproduce issue

#### **1. Create a Minimal Next.js Application**

Set up a new Next.js application (if you don't have one already):

```bash
npx create-next-app@latest firebase-otp-test
cd firebase-otp-test
```

#### **2. Install Firebase Dependencies**

Install Firebase SDK:

```bash
npm install firebase
```

#### **3. Configure Firebase**

Create a `firebase.ts` file in the `services` directory to initialize Firebase:

```typescript
// services/firebase.ts

import { initializeApp } from "firebase/app";
import {
getAuth,
signInWithPhoneNumber,
RecaptchaVerifier,
} from "firebase/auth";

const firebaseConfig = {
apiKey: "YOUR_API_KEY", // Replace with your Firebase config
authDomain: "YOUR_AUTH_DOMAIN",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_SENDER_ID",
appId: "YOUR_APP_ID",
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

export { auth, signInWithPhoneNumber, RecaptchaVerifier };
```

⚠️ **Important:** Replace the placeholder values in `firebaseConfig` with your actual Firebase project credentials._

#### **4. Implement the OTP Login Component**

Create a simple OTP login component using Firebase's `signInWithPhoneNumber`:

```typescript
// pages/login.tsx

"use client";

import { useState, useEffect } from "react";
import { auth, signInWithPhoneNumber, RecaptchaVerifier } from "@/services/firebase";

export default function Login() {
const [phoneNumber, setPhoneNumber] = useState("");
const [otp, setOtp] = useState("");
const [confirmationResult, setConfirmationResult] = useState(null);
const [message, setMessage] = useState("");

useEffect(() => {
// Initialize reCAPTCHA verifier
const verifier = new RecaptchaVerifier("recaptcha-container", {
size: "invisible",
callback: (response: any) => {
// reCAPTCHA solved, allow signInWithPhoneNumber.
console.log("reCAPTCHA solved");
},
}, auth);
verifier.render();
}, []);

const requestOTP = async () => {
try {
const confirmation = await signInWithPhoneNumber(auth, phoneNumber, new RecaptchaVerifier('recaptcha-container', {}, auth));
setConfirmationResult(confirmation);
setMessage("OTP has been sent to your phone.");
} catch (error: any) {
console.error("Error sending OTP:", error);
setMessage(`Error: ${error.message}`);
}
};

const verifyOTP = async () => {
try {
await confirmationResult.confirm(otp);
setMessage("Phone number verified successfully!");
} catch (error: any) {
console.error("Error verifying OTP:", error);
setMessage(`Error: ${error.message}`);
}
};

return (

#### **5. Test Locally**

1. **Run the Application Locally:**

```bash
npm run dev
```

2. **Access the Login Page:**
- Navigate to `http://localhost:3000/login`.
- Enter a valid phone number and request an OTP.
- Verify that the OTP is received on the specified phone number and that verification succeeds.

#### **6. Deploy to Cloud Server**

1. **Choose a Hosting Platform:**
- For example, deploy to **Vercel**:

```bash
npm install -g vercel
vercel
```

Start with the reported services/firebase.ts and pages/login.tsx entry points, then run the minimal app with npm run dev and compare it with the Vercel deployment. Capture the exact signInWithPhoneNumber error, reCAPTCHA behavior, and network response in both environments. Done means producing a reproducible SDK-level failure with enough diagnostics to determine whether the issue belongs in the Firebase SDK.

Written by the indexing model from the issue text.