React - Firebase - RecaptchaVerifier is not a constructor

Related searches

I am trying to create a React application that uses an "onSubmit" button to trigger handleSignUp(). However, each time I call handleSignUp() it gives this error

TypeError: _base__WEBPACK_IMPORTED_MODULE_2__.default.auth.RecaptchaVerifier is not a constructor

firebase initialize -base.js

import * as firebase from "firebase/app";
import "firebase/auth";

const app = firebase.initializeApp({
  apiKey: process.env.REACT_APP_FIREBASE_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID
});

export default app;

SignUp.js

import React, { Component } from "react";
import { withRouter } from "react-router";
import app from "./base";

class SignUp extends Component {
  componentDidMount() {
    window.recaptchaVerifier = new app.auth.RecaptchaVerifier(this.recaptcha, {
      size: "normal",
      callback: function(response) {
        console.log("reCAPTCHA solved, allow signInWithPhoneNumber.");
      },
      "expired-callback": function() {
        console.log("Response expired. Ask user to solve reCAPTCHA again.");
      }
    });
    window.recaptchaVerifier.render().then(function(widgetId) {
      window.recaptchaWidgetId = widgetId;
    });
  }

  handleSignUp = async () => {
    var phoneNumber = "+16505554567";
    var appVerifier = new app.auth.RecaptchaVerifier("recaptcha-container");

    try {
      await app
        .auth()
        .signInWithPhoneNumber(phoneNumber, appVerifier)
        .then(function(confirmationResult) {
          window.confirmationResult = confirmationResult;
        });
    } catch (error) {
      alert(error);
    }
  };
  render() {
    return (
      <div ref={ref => (this.recaptcha = ref)}>
        <h1>Sign up</h1>
        <form onSubmit={this.handleSignUp}>
          <button type="submit">Sign Up</button>
        </form>
      </div>
    );
  }
}

export default withRouter(SignUp);

and also run var appVerifier = new app.auth.RecaptchaVerifier("recaptcha-container"); automatically refresh the web page


I spent 3hrs on this and finally found the issue. When you initialize firebase app like

app.initializeApp(config);

then you can call methods using: app.auth()

app.auth().createUserWithEmailAndPassword(email, password);

and to create RecaptchaVerifier instance, you must use: app.auth

window.recaptchaVerifier = new app.auth.RecaptchaVerifier('captcha-container', {
        'size': 'invisible'
    });

React - Firebase - GoogleAuthProvider is not a constructor, You're mixing namespaces with instance: the firebaseApp is just a container for configuration data. It is not how you create a provider instance. Reference for RecaptchaVerifier. Overview; auth:import and auth:export; Firebase Realtime Database Operation Types


RecaptchaVerifier constructor resides in firebase.auth. You need to pass window.recaptchaVerifier as the second argument to signInWithPhoneNumber.

React - Firebase - RecaptchaVerifier is not a constructor, React - Firebase - RecaptchaVerifier is not a constructor. I am trying to create a React application that uses an "onSubmit" button to trigger handleSignUp() . Firebase is an all-in-one backend as a service provider (BaaS) that provides database, authentication, cloud storage among their many services. In this tutorial you’re going to learn how to use Firebase Real Time Database service in React application.


I'm also face this issue and resolved. This code absolutely help to signIn using firebase phone auth

Firebase.js

import * as Firebase from 'firebase';

const app = firebase.initializeApp({
  apiKey: process.env.REACT_APP_FIREBASE_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID
});
Firebase.initializeApp(app);
export default Firebase;

signup.js

    import React, { useState  } from 'react';
    import Firebase from './container/Firebase';
    import 'react-phone-number-input/style.css'
    import PhoneInput from 'react-phone-number-input'

    const Signup= () => {

    const [value, setValue] = useState(0);

function setuprecaptcha (){
    window.recaptchaVerifier = new Firebase.auth.RecaptchaVerifier('recaptcha-container', {
        size: 'invisible',
        callback: function (response) {
            console.log("recature resolved")
            this.onSignInSubmit();
        }
    });

}

 
function onSignInSubmit(event) {
    
    event.preventDefault();
    setuprecaptcha();
    var phoneNumber = value;
    var appVerifier = window.recaptchaVerifier;
    Firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
        .then(function (confirmationResult) {
            console.log("Success");
            // SMS sent. Prompt user to type the code from the message, then sign the
            // user in with confirmationResult.confirm(code).
            window.confirmationResult = confirmationResult;
            var verificationId = window.prompt("Enter otp")
            confirmationResult
                .confirm(verificationId)
                .then(function (result) {
                    // User signed in successfully.
                    var user = result.user;
                    user.getIdToken().then(idToken => {
                        window.localStorage.setItem('idToken', idToken);

                       
                        console.log(idToken);
                    });
                })
                .catch(function (error) {
                    // User couldn't sign in (bad verification code?)
                    console.error("Error while checking the verification code", error);
                    window.alert(
                        "Error while checking the verification code:\n\n" +
                        error.code +
                        "\n\n" +
                        error.message
                    );
                });

        })
        .catch(function (error) {
            console.log("sign Up error:" + error.code);
        });

}

RecaptchaVerifier | JavaScript SDK, Constructors. constructor. new RecaptchaVerifier ( container : any | string , parameters ? : Object | null , app ? : App | null ) : RecaptchaVerifier. Inherited from � I’ll go over the file top to bottom. At the top, we import everything we need from React, firebase, and react-router. I am importing our Login component to easily switch to Login if our user already has an account. After that, we’ll create a constructor to set up our default state.


firebase.auth.RecaptchaVerifier is not a constructor error, 问题: Trying to add the Firebase script in my html, after initializing Firebase app with firebase.initializeApp(config);. So then I have this : Firebase phone authentication is not possible out of the box using the Firebase JS SDK. This because an Application Verifier object (reCAPTCHA) is needed as an additional security measure to verify that the user is real and not a bot.


Hi, please i need help with this. "_firebase2.default is not a , run my react App: create.js?84fe:13 Uncaught TypeError: _firebase2.default is not a constructor just in the line when a create a new Firebase:� You can use it to store and retrieve data in real time. That’s not all Firebase does, it can do more things like handle user authentication and store files, but we’ll be mainly focusing on data storage. The data storage ability of Firebase make it a perfect fit for React. A persistent, real-time backend for your application to plug in to!


The FirebaseContext.Provider component is used to provide a Firebase instance once at the top-level of your React component tree, which we will do in this section; and the FirebaseContext.Consumer component is used to retrieve the Firebase instance if it is needed in the React component.