How to fix auth/invalid-verification-code in Firebase

# No code needed - this is a Firebase Console setting

// Web/JavaScript example
const confirmationResult = await signInWithPhoneNumber(auth, phoneNumber, appVerifier);
const code = prompt("Enter verification code");

try {
  const result = await confirmationResult.confirm(code);
  console.log("User signed in successfully");
} catch (error) {
  if (error.code === "auth/invalid-verification-code") {
    console.error("Invalid verification code. Please try again or request a new code.");
    // Show UI to let user re-enter or resend
  } else {
    console.error("Sign-in failed:", error.message);
  }
}

// Flutter example
try {
  UserCredential userCredential = await FirebaseAuth.instance.signInWithCredential(
    PhoneAuthProvider.credential(
      verificationId: verificationId,
      smsCode: smsCode,
    ),
  );
  print("User signed in successfully");
} on FirebaseAuthException catch (e) {
  if (e.code == 'invalid-verification-code') {
    print("Invalid verification code. Please check and try again.");
    // Show error message to user
  } else {
    print("Sign-in failed: ${e.message}");
  }
}

// Android (Kotlin) example
credential = PhoneAuthProvider.getCredential(verificationId, code)
try {
  mAuth.signInWithCredential(credential)
    .addOnCompleteListener(this) { task ->
      if (task.isSuccessful) {
        Log.d("PhoneAuth", "User signed in successfully")
      } else {
        val e = task.exception
        if (e is FirebaseAuthInvalidCredentialsException) {
          Log.w("PhoneAuth", "Invalid verification code")
          // Show error message to user
        }
      }
    }
} catch (e: Exception) {
  Log.e("PhoneAuth", "Sign-in failed", e)
}

// React example
const [code, setCode] = useState("");
const [error, setError] = useState("");

const handleConfirm = async () => {
  try {
    await confirmationResult.confirm(code);
    // Success - navigate to next screen
  } catch (err) {
    if (err.code === "auth/invalid-verification-code") {
      setError("The code you entered is incorrect. Please try again.");
      setCode(""); // Clear the input
    }
  }
};

return (
  <div>
    <input
      type="text"
      value={code}
      onChange={(e) => setCode(e.target.value)}
      placeholder="Enter 6-digit code"
    />
    {error && <div style={{ color: "red" }}>{error}</div>}
    <button onClick={handleConfirm}>Verify Code</button>
  </div>
);

// Web example with resend logic
let verificationId = null;
let confirmationResult = null;

const sendCode = async (phoneNumber) => {
  const appVerifier = window.recaptchaVerifier;
  try {
    confirmationResult = await signInWithPhoneNumber(auth, phoneNumber, appVerifier);
    console.log("Code sent to", phoneNumber);
    // Start 5-minute timer
    setTimeout(() => {
      console.log("Code expired. User must resend.");
    }, 300000);
  } catch (error) {
    console.error("Failed to send code:", error.message);
  }
};

const resendCode = async (phoneNumber) => {
  // Clear previous verificationId and request a new one
  confirmationResult = null;
  await sendCode(phoneNumber);
};

// Flutter example
Final int codeExpiresSecs = 300; // 5 minutes
Final int codeResendSecs = 30; // Can resend after 30 seconds

await FirebaseAuth.instance.verifyPhoneNumber(
  phoneNumber: phoneNumber,
  timeout: Duration(seconds: codeExpiresSecs),
  verificationCompleted: (credential) {
    // Auto-complete if available
  },
  verificationFailed: (e) {
    print("Verification failed: ${e.message}");
  },
  codeSent: (verificationId, resendToken) {
    // Show input form with timer
    // Enable resend button after 30 seconds
  },
  codeAutoRetrievalTimeout: (verificationId) {
    // Code expired
  },
);

// Store verificationId in state during the sign-in flow
const [verificationId, setVerificationId] = useState(null);

const sendCode = async (phoneNumber) => {
  const appVerifier = window.recaptchaVerifier;
  try {
    const confirmationResult = await signInWithPhoneNumber(
      auth,
      phoneNumber,
      appVerifier
    );
    // Store the verification ID
    setVerificationId(confirmationResult.verificationId);
  } catch (error) {
    console.error("Failed:", error);
  }
};

const confirmCode = async (code) => {
  try {
    const credential = PhoneAuthProvider.credential(
      verificationId, // Use stored ID
      code
    );
    await signInWithCredential(auth, credential);
  } catch (error) {
    if (error.code === "auth/invalid-verification-code") {
      console.error("Invalid code");
    }
  }
};

// No code change needed - just use the test phone number
const testPhoneNumber = "+1 555-0100"; // From Firebase Console
const testCode = "123456"; // From Firebase Console

// This will succeed immediately without sending an SMS
await signInWithPhoneNumber(auth, testPhoneNumber, appVerifier);
await confirmationResult.confirm(testCode); // Will succeed