[SOLVED] Firebase reCAPTCHA has already been rendered in this element

Firebase reCAPTCHA has already been rendered in this element

Authenticate with Firebase with a Phone Number (JS) requires a mandatory reCAPTCHA verifier, it takes the ID of the container. For the ID of the container, I am generating a random one -

firebase_recaptcha_container: "recaptcha-container",

firebase_recaptcha_reset: function() {
            

            if (typeof appVerifier != "undefined") {
                appVerifier.reset()
                appVerifier.clear()        
            } 
            
            let id = loadJS.firebase_recaptcha_container

            let newID = loadJS.randomString(10)
            $("#"+id).contents().remove()
            $("#"+id).prop("id", newID)
            loadJS.firebase_recaptcha_container = newID
            return newID

        }

then requesting for the RecaptchaVerifier and upon receiving I set this as a global variable window.appVerifier .

firebase_recaptcha: function(name_r="default") {
            let promiseD = new firebase.auth.RecaptchaVerifier(name_r, {
                'size': 'invisible',
                'callback': function(response) {
                    resolve(response)
                },
                'expired-callback': function(r) {
                    console.log("expired", r)
                },
                'isolated' : false
              });
              
            return promiseD
        },
         
    
_____________________
        
let container_recaptcha = $utils.firebase_recaptcha_reset()

window.appVerifier = await $utils.firebase_recaptcha(container_recaptcha)

It works totally fine for the very first time. But its a honest mistake for users not to use correct phone number. So for next time, I am doing the same thing again and getting error while generating the RecaptchaVerifier -

reCAPTCHA has already been rendered in this element

Which sadly does not make sense as the new element is totally different and also clear, reset methods were called following the documentation. I am neither using any other reCaptcha on this page. Refreshing the page might be a possible solution but that I really hate. Any insight would be helpful.

Thanks!

Solution

Finally found the solution, looks like it was a stupid mistake!

Invoking firebase.auth.RecaptchaVerifier adds new recaptcha scripts, every time! Hence all needed to be done is, calling it once, it does the rest on its own.