OTP Not Received When Using signInWithPhoneNumber on Cloud Server

[oardilac]

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):

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

2. Install Firebase Dependencies

Install Firebase SDK:

npm install firebase

3. Configure Firebase

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

// 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:

// 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<any>(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 (
    <div className="flex flex-col items-center justify-center min-h-screen">
      <h1>Login with Phone Number</h1>
      <input
        type="tel"
        placeholder="Enter phone number"
        value={phoneNumber}
        onChange={(e) => setPhoneNumber(e.target.value)}
        className="border p-2 m-2"
      />
      {!confirmationResult && (
        <button onClick={requestOTP} className="bg-blue-500 text-white p-2 m-2">
          Send OTP
        </button>
      )}
      {confirmationResult && (
        <>
          <input
            type="text"
            placeholder="Enter OTP"
            value={otp}
            onChange={(e) => setOtp(e.target.value)}
            className="border p-2 m-2"
          />
          <button onClick={verifyOTP} className="bg-green-500 text-white p-2 m-2">
            Verify OTP
          </button>
        </>
      )}
      <div id="recaptcha-container"></div>
      {message && <p className="mt-4">{message}</p>}
    </div>
  );
}

5. Test Locally

1. Run the Application Locally:

   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:

     npm install -g vercel
     vercel

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.