title: Firebase Phone Auth Recaptcha Verifier not being set to window/loading
body: <p>I'm trying to load a RecaptchaVerifier into my React class, so I can enable Phone Auth for my web app. However, when I submit my phone number, I get the following error:</p>
  
  <p><code>"signInWithPhoneNumber failed: Second argument "applicationVerifier" must be an implementation of firebase.auth.ApplicationVerifier."</code>
  <a href="https://i.imgur.com/zWTn95i.png" rel="nofollow noreferrer">The entire console log for this error</a></p>
  
  <p>I logged the window.recaptchaVerifier, to find it is silently erroring with the error code:</p>
  
  <p><code>TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.invokeGetter (&lt;anonymous&gt;:2:14)</code>
  <img src="https://i.imgur.com/7B6jwp2.png" alt="Error in Console"></p>
  
  <p>The Recaptcha doesn't even render, and the window.repcaptchaVerfier.render() method spits another error (seems like that part was optional in the docs, so I removed it).</p>
  
  <pre><code>  constructor(props) {
      super(props);
  
      this.state = {
        sendOTP: false,
        phone_number: "",
        currentUser: null,
        otp: "",
        isButtonDisabled: true,
        error: '',
        cardAnimation: 'cardHidden',
      };
    }
  
    componentDidMount() {
      this.setupRecaptcha();
  
      setTimeout(() =&gt; {
        this.setState({cardAnimation: ""});
      }, 700);
  
      // window.recaptchaVerifier.render().then(widgetId =&gt; {
      //   window.recaptchaWidgetId = widgetId;
      // });
      // Removed, since it errors on load with this code.
  
    }
  
    setupRecaptcha = () =&gt; {
      window.recaptchaVerifier = new this.props.firebase.recaptchaVerifier(
        'recaptcha-container',
        {
          size: "normal",
          callback: response =&gt; {
            // reCAPTCHA solved, allow signInWithPhoneNumber.
            // ...
            this.setState({ isButtonDisabled: false });
          },
          "expired-callback": response =&gt; {
            // Response expired. Ask user to solve reCAPTCHA again.
            // ...
            this.setState({ isButtonDisabled: true, error: "Recaptcha Expired. Please try again." });
  
          }
        }
      );
      console.log(window.recaptchaVerifier)
      // Here is where i get the silent error about "strict" mode.
    };
  
    handleLogin = () =&gt; {
      let appVerifier = window.recaptchaVerifier;
      this.props.firebase.doSignInWithPhoneNumber(this.state.phone_number, appVerifier).then(confirmationResult =&gt; {
        this.setState({sendOTP: true});
        window.confirmationResult = confirmationResult;
      }).catch(err =&gt; {
        this.setState({error: err})
      })
    };
  
    handleOTPCheck = () =&gt; {
      window.confirmationResult
        .confirm(this.state.otp)
        .then(function(result) {
          // User signed in successfully.
          console.log(result);
          // ...
        })
        .catch(function(error) {
          // User couldn't sign in (bad verification code?)
          // ...
        });
    };
  
    handleSubmit(event) {
      event.preventDefault();
    }
  
    onChange = event =&gt; {
      this.setState({ [event.target.name]: event.target.value });
    };
  
    render() {
      const { phone_number, otp, error } = this.state;
  
      const isInvalid = phone_number === '';
      const { classes } = this.props;
  
      return (
        &lt;div
          className={classes.pageHeader}
          style={{
            backgroundImage: "url(" + backgroundImage + ")",
            backgroundSize: "cover",
            backgroundPosition: "top center"
          }}
        &gt;
          &lt;div className={classes.container}&gt;
            &lt;Grid container justify="center"&gt;
              &lt;Grid item xs={12} sm={12} md={4}&gt;
                &lt;Card className={classes[this.state.cardAnimation]}&gt;
                  &lt;form className={classes.form}&gt;
                    &lt;CardHeader color="primary" className={classes.cardHeader}&gt;
                      &lt;Typography variant={'h4'}&gt;Login&lt;/Typography&gt;
                    &lt;/CardHeader&gt;
                    &lt;CardBody&gt;
                      &lt;TextField
                        label={"Phone Number"}
                        id="phone_number"
                        name={"phone_number"}
                        fullWidth
  
                        InputProps={{
                          endAdornment: &lt;InputAdornment position="end"&gt;&lt;Phone/&gt;&lt;/InputAdornment&gt;,
                        }}
                        type={"tel"}
                      /&gt;
                      &lt;TextField
                        label="One-Time Password"
                        id="otp"
                        name={"otp"}
                        fullWidth
  
                        InputProps={{
                          endAdornment: &lt;InputAdornment position="end"&gt;&lt;Lock/&gt;&lt;/InputAdornment&gt;,
                        }}
  
                        type={'password'}
                        autoComplete={'false'}
                      /&gt;
                    &lt;/CardBody&gt;
                    &lt;div id={'recaptcha-container'}/&gt;
  
                    &lt;p className={classes.divider}&gt;Standard messaging rates may apply.&lt;/p&gt;
  
                    &lt;CardFooter className={classes.cardFooter}&gt;
                      &lt;Button color="primary" size="large" onClick={this.handleLogin}&gt;
                        Verify
                      &lt;/Button&gt;
                    &lt;/CardFooter&gt;
  
                  &lt;/form&gt;
                &lt;/Card&gt;
              &lt;/Grid&gt;
            &lt;/Grid&gt;
          &lt;/div&gt;
          &lt;Footer whiteFont /&gt;
        &lt;/div&gt;
      );
    }
  }
  const SignInForm = compose(
    withRouter,
    withFirebase,
  )(SignInFormBase);
  /// this is then rendered in a functional react component in this page
  </code></pre>
  
  <p>I have a higher-order component that gives me firebase context. The function called at <code>this.props.firebase.recaptchaVerifier</code> within my setupRecaptcha function is:</p>
  
  <pre><code>class Firebase() {
      constructor() {
          // initialise firebase etc
          this.authRef = app().auth;
          this.auth.useDeviceLanguage();
      }
      recaptchaVerifier = (container, parameters) =&gt;
          this.authRef.RecaptchaVerifier(container, parameters);
  
  }
  </code></pre>
  
  <p>I'm well and truly stumped!</p>
  
  <p>EDIT: </p>
  
  <p>I managed to fix it. I moved the 'new' statement into my context provider:</p>
  
  <pre><code>recaptchaVerifier = (container, params) =&gt; {
      return new this.authRef.RecaptchaVerifier(container, params);
    };
  </code></pre>
  
  <pre><code>    setupRecaptcha = () =&gt; {
          window.recaptchaVerifier = this.props.firebase.recaptchaVerifier('recaptcha-container', {
              'size': 'normal',
              'callback': response =&gt; {
                  // reCAPTCHA solved, allow signInWithPhoneNumber.
                  this.setState({isButtonDisabled: false});
              },
              'expired-callback': response =&gt; {
                  // Response expired. Ask user to solve reCAPTCHA again.
                  this.setState({isButtonDisabled: true, error: "Recaptcha Expired. Please try again."});
              }
          });
          window.recaptchaVerifier.render().then(widgetId =&gt; {
              window.recaptchaWidgetId = widgetId;
          });
      };
  </code></pre>