'auth/captcha-check-failed', message: 'Hostname match not found',

Question

My Firebase configurations are correct still I'm getting a hostname match not found error. Even if the hostname is mentioned in the authorized domain of Firebase. What I'm trying to do is when the user fills in the phone number field and clicks on send code, he will see recaptcha and then after verifying, he will get OTP code on the phone number he gave as input.

 `{% extends 'customer/base.html' %}
   {% load bootstrap5 %}

{% block head %}
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-auth.js"></script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
{% endblock head %}

{% block main %}
<b class="text-secondary">Basic Information</b><br>
<div class="card mb-5 mt-2 bg-white">
<div class="card-body">
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        {% bootstrap_form userForm %}
        {% bootstrap_form customer_Form %}
        <input type="hidden" name="action" value="update_profile">
        <button type="submit" class="btn btn-warning">Save</button>
    </form>
</div>
</div>

<b class="text-secondary">Change Password</b><br>
<div class="card mb-5 mt-2 bg-white">
<div class="card-body">
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        {% bootstrap_form password_form %}
        <input type="hidden" name="action" value="update_password">
        <button type="submit" class="btn btn-warning">Save</button>
    </form>
</div>
</div>

<b class="text-secondary">Phone Number</b><br>
<div  class="card mb-5 mt-2 bg-white">
<div class="card-body">

    <div id="recaptcha-container"></div>

    <div id="get-code" class="input-group mb-3">
        <input type="text" class="form-control" placeholder="Phone Number" >
        <button class="btn btn-warning" type="button">Send Code</span>
    </div>
    
    <div id="verify-code"  class="input-group mb-3 d-none">
        <input type="text" class="form-control" placeholder="Verification Code" >
        <button class="btn btn-warning" type="button">Verify Code</span>
    </div>
    
</div>
</div>

 <script src="https://code.jquery.com/jquery-3.7.0.js"
integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM="
crossorigin="anonymous"></script>

<script>
// Your web app's Firebase configuration
var firebaseConfig = {
    apiKey: "AIzaSyDNcxG4K_QS-Cy3XVy9ZOBfuDTt5e5XSp0",
    authDomain: "localhost",
    projectId: "fastparcel2-c3a7d",
    storageBucket: "fastparcel2-c3a7d.appspot.com",
    messagingSenderId: "281261021633",
    appId: "1:281261021633:web:c085bb17b137f82cce7740"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);


window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');

$("#get-code button").on('click', function () {
    const phoneNumber = $("#get-code input").val();
    console.log(phoneNumber);

    firebase.auth().signInWithPhoneNumber(phoneNumber, window.recaptchaVerifier)
      .then((confirmationResult) => {
        // SMS sent. Prompt user to type the code from the message, then sign the
        // user in with confirmationResult.confirm(code).
        console.log(confirmationResult);
        window.confirmationResult = confirmationResult;

        $("#get-code").addClass("d-none");
        $("#verify-code").removeClass("d-none");
      }).catch((error) => {
        // Error; SMS not sent
        console.log(error);
      });
});

$("#verify-code button").on('click', function () {
    const code = $("#verify-code input").val();

    confirmationResult.confirm(code).then((result) => {
      // User signed in successfully.
      const user = result.user;
      console.log(user.phoneNumber);

      user.getIdToken().then(function (idToken) {
        onVerify(idToken);
      });
    }).catch((error) => {
      // User couldn't sign in (bad verification code?)
      console.log(error);
    });
});
</script>
{% endblock main %} 

`