Logging into Firebase to log in, where do I need to put the Firebase security code?

Question

Edit:

As far as I know, this will not actually work, since it accesses the container with the identifier recaptcha-containerfrom the window object. The reason is that the js script command is used to process the received data. This is why no matter where I do this, I keep getting:reCAPTCHA container is either not found or already contains inner elements!

So it might be better if I ask how to implement this for React, and not where to put this bit of code. If enough people can confirm this, I will also edit the name.

End of editing

This may be a general question, but I did not find anything about how to use the phone sign in firebase and respond. I do not know where to put this bit of code in my response project (in the component inside the root index.js, etc.). Please let me know if I need to include or ask this question differently so that I can change It. Here is the code I'm struggling with as much as possible:

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
  'size': 'normal',
  'callback': function(response) {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    // ...
  },
  'expired-callback': function() {
    // Response expired. Ask user to solve reCAPTCHA again.
    // ...
  }
});

I tried to put this inside the component inside componentWillMount(), and nothing happened. I also tried putting this in my index.js root above the bit reactDOM.renderand got something like:

reCAPTCHA container is either not found or already contains inner elements!

Let me know again what I can add to this, or if I can improve my question.

Answer 1

• , componentWillMount, , , , dom. ( )
• RecaptchaVerifier div . , , div .

, ,

componentDidMount() {
  window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(this.recaptcha, {
    'size': 'normal',
    'callback': function (response) {
      // reCAPTCHA solved, allow signInWithPhoneNumber.
      // ...
    },
    'expired-callback': function () {
      // Response expired. Ask user to solve reCAPTCHA again.
      // ...
    }
 });
 window.recaptchaVerifier.render().then(function (widgetId) {
   window.recaptchaWidgetId = widgetId;
 });
}

HTML,

<div ref={(ref)=>this.recaptcha=ref}></div>

div recaptcha DOM ( React), API RecaptchaVerifier .