Client Side Code Test.jsx --
import React, { useState, useEffect, useRef } from 'react';
import { initializeApp } from 'firebase/app';
import { getAuth, RecaptchaVerifier, signInWithPhoneNumber } from 'firebase/auth';

// Firebase config - replace with your own config
const firebaseConfig = {
  apiKey: "AIzaSyCb9uireOMfRCFfJpWWr1WmKdP629rNcCk",
  authDomain: "trial-34ed7.firebaseapp.com",
  projectId: "trial-34ed7",
  storageBucket: "trial-34ed7.appspot.com",
  messagingSenderId: "71628620493",
  appId: "1:71628620493:web:7c44729da8f9c541e55f84",
  measurementId: "G-N9GPF8ZQMZ"
};

// Initialize Firebase App
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

function Test() {
  const [mobile, setMobile] = useState('');
  const [otp, setOtp] = useState('');
  let confirmationResult = useRef(null);

  useEffect(() => {
    configureCaptcha();
  }, []);

  const handleChange = (e) => {
    const { name, value } = e.target;
    if (name === 'mobile') {
      setMobile(value);
    } else if (name === 'otp') {
      setOtp(value);
    }
  };

  const configureCaptcha = () => {
    window.recaptchaVerifier = new RecaptchaVerifier(auth, 'sign-in-button', {
      'size': 'invisible',
      'callback': (response) => {
        // reCAPTCHA solved, allow signInWithPhoneNumber.
        onSignInSubmit();
      }
    }, auth);
  };

  const onSignInSubmit = async (e) => {
    e.preventDefault();
    const phoneNumber = "+91" + mobile;
    console.log(phoneNumber);
    const appVerifier = window.recaptchaVerifier;
    try {
      confirmationResult.current = await signInWithPhoneNumber(auth, phoneNumber, appVerifier);
      console.log("OTP has been sent");
    } catch (error) {
      console.error("SMS not sent", error);
    }
  };

  const onSubmitOTP = async (e) => {
    e.preventDefault();
    try {
      const result = await confirmationResult.current.confirm(otp);
      const user = result.user;
      console.log(JSON.stringify(user));
      alert("User is verified");
    } catch (error) {
      console.error("User couldn't sign in (bad verification code?)", error);
    }
  };

  return (
    <div>
      <h2>Login Form</h2>
      <form onSubmit={onSignInSubmit}>
        <div id="sign-in-button"></div>
        <input type="text" name="mobile" placeholder="Mobile number" required onChange={handleChange} />
        <button type="submit">Submit</button>
      </form>

      <h2>Enter OTP</h2>
      <form onSubmit={onSubmitOTP}>
        <input type="text" name="otp" placeholder="OTP Number" required onChange={handleChange} />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default Test;