I am having a TypeError: Cannot read property ‘GoogleAuthProvider’ of undefined?(React JS) Firebase?

Ok as the Yaakov Ainspan mentioned in the comment above that you must include the import statement firebase/auth.So you have to just import it like this in your component like

import firebaseAuth from 'firebase/auth/dist/index.esm'

and the rest of the code will be the same

import React from 'react';

// Import FirebaseAuth and firebase.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faQuestionCircle, faBook, faCamera, faMapMarkerAlt, faCoffee, faSearch, faSearchPlus, faUserCircle, faComment } from '@fortawesome/free-solid-svg-icons';
import { Link } from "react-router-dom"
import "../App.css";

import firebase from 'firebase/app';

import firebaseAuth from 'firebase/auth/dist/index.esm'

import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';

import { Button, Modal } from 'react-bootstrap'


 firebase.initializeApp({
    apiKey: "AIzaSyDAelHByyhxwHlF7JIeCCGwL5HP622k5E8",
    authDomain: "fastsellat.firebaseapp.com",
    databaseURL: "https://fastsellat.firebaseio.com",
    projectId: "fastsellat",
    storageBucket: "fastsellat.appspot.com",
    messagingSenderId: "717565114992",
    appId: "1:717565114992:web:971b1dd5199c57b04812b5",
    measurementId: "G-0NRD11FNQZ"
  })
  

class Login extends React.Component {
    constructor() {
        super()
        this.state = {
            show: false,
         
        }
    }
    handleModal = () => {
        this.setState({
            show: true
        })
    }
    closeModal = () => {
        this.setState({
            show: false
        })
    }
    state = { isSignedIn: false }
    uiConfig = {
        signInFlow: "popup",
        signInOptions: [
          firebase.auth.GoogleAuthProvider.PROVIDER_ID,
          firebase.auth.FacebookAuthProvider.PROVIDER_ID,
          firebase.auth.GithubAuthProvider.PROVIDER_ID,
          firebase.auth.EmailAuthProvider.PROVIDER_ID
        ],
        callbacks: {
          signInSuccess: () => false
        }
      }
    
      componentDidMount = () => {
        firebase.auth().onAuthStateChanged(user => {
          this.setState({ isSignedIn: !!user })
          console.log("user", user)
        })
      }
    render() {
        return (
            <div>
                <Button  variant="outline-primary" onClick={() => { this.handleModal() }}>
                    Login
                    </Button>

                <Modal show={this.state.show}>
                    <Modal.Header>
                      
                            <div style={{width:"100%",border:"1px solid orange"}} id="carouselExampleIndicators" className="carousel slide" data-ride="carousel">
                                <ol className="carousel-indicators">
                                    <li data-target="#carouselExampleIndicators" data-slide-to={0} className="active" />
                                    <li data-target="#carouselExampleIndicators" data-slide-to={1} />
                                    <li data-target="#carouselExampleIndicators" data-slide-to={2} />
                                </ol>
                                <div className="carousel-inner">
                                    <div className="carousel-item active">
                                        <img id="img1" src="https://statics.olx.com.pk/external/base/img/loginEntryPointPost.webp" alt="First slide" />
  
    
    <p style={{textAlign:"center"}}>Help make OLX safer place to buy and sell</p>
  
                                    </div>
                                    <div className="carousel-item">
                                        <img id="img2"  src="https://statics.olx.com.pk/external/base/img/loginEntryPointFavorite.webp" alt="Second slide" />
                                        
    
    <p style={{textAlign:"center"}}>Contact and close deals faster</p>
  
                                    </div>
                                    <div className="carousel-item">
                                        <img id="img3"  src="https://statics.olx.com.pk/external/base/img/loginEntryPointChat.webp" alt="Third slide" />
                    
    <p style={{textAlign:"center"}}>Save all your favourite items in one place</p>
  
                                    </div>
                                </div>
                                <a className="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                                    <span className="carousel-control-prev-icon" aria-hidden="true" />
                                    <span className="sr-only">Previous</span>
                                </a>
                                <a className="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                                    <span className="carousel-control-next-icon" aria-hidden="true" />
                                    <span className="sr-only">Next</span>
                                </a>
                            </div>
                       
                    </Modal.Header>
                    <Modal.Body>
                    {
                        this.state.isSignedIn ? (
                            <span>
                            <div>Signed In!</div>
                            <button onClick={() => firebase.auth().signOut()}>Sign out!</button>
                            <h1>Welcome {firebase.auth().currentUser.displayName}</h1>
                            <img
                              alt="profile picture"
                              src={firebase.auth().currentUser.photoURL}
                            />
                          </span>
                        ):(
                            <StyledFirebaseAuth
                            uiConfig={this.uiConfig}
                            firebaseAuth={firebase.auth()}
                          />
                        )}
                    </Modal.Body>
                    <Modal.Footer>
                        <Button onClick={() => { this.closeModal() }} variant="secondary">
                            Close
                        </Button>
                        <Button variant="primary">
                            Save Changes
                        </Button>
                    </Modal.Footer>
                </Modal>

            </div>
        );
    }
}
export default Login;

Your package.json file is also fine. One more thing I would like to clear that you must use the 7.24.0 or below version of firebase and not to use the latest one.Thanks

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top