I am using Reactjs and firebase to create a Login Page in my application. I got an error that the 'firebase' is not defined in the part of onClick.

Here is my Log In Page code:

import React from 'react';

import { FacebookFilled, GoogleSquareFilled} from '@ant-design/icons';

import "firebase/app";
import { auth } from '../components/firebase';

const Login = () => {
    return (
        <div id="login-page">
            <div id="login-card">
                <h1>Welcome to SimpChat!</h1>
                <h2 className="login-title">Login</h2>

                <div className="login-button google"
                       onClick={() => auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider())} //not defined
                    >
                        <GoogleSquareFilled style={{ fontSize: '20px' }} />&nbsp; Sign In with Google
                </div>

                <br /><br />

                <div className="login-button facebook"
                      onClick={() => auth.signInWithRedirect(new firebase.auth.FacebookAuthProvider())} //not defined
                    >
                        <FacebookFilled style={{ fontSize: '20px' }} />&nbsp; Sign In with Facebook
                </div>
            </div>
        </div>
    );
}

export default Login;

and this is the firebase.js code:

import firebase from "firebase/compat/app";
import "firebase/compat/auth";


export const auth = firebase.initializeApp({
    apiKey: "AIzaSyCqJv-aBQrcD-afBqQrI7uZJ-VCbWGBrD0",
    authDomain: "simpchat-c8eb5.firebaseapp.com",
    projectId: "simpchat-c8eb5",
    storageBucket: "simpchat-c8eb5.appspot.com",
    messagingSenderId: "692332223424",
    appId: "1:692332223424:web:f6aac779101514b8544625",
    measurementId: "G-PQXQBGPRSH"
  }).auth();

CodePudding user response：

You don't have firebase defined in your login page. Try updating the imports to:

// import "firebase/app";

import firebase from "firebase/compat/app";

I would highly recommend upgrading to Modular SDK as the compat version might be removed in future.