'firebase' is not defined no-undef

Question

I was building a sign in page with firebase authentication using Google and Facebook. Kindly find the code snippet and error message below.

import {GoogleOutlined,FacebookOutlined} from '@ant-design/icons';
import {auth} from '../firebase';
import "firebase/app";


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

               <div className="login-button google"
               onClick={()=>auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider())}>

<GoogleOutlined /> Sign In with Google 
               </div>

<br></br>

<div className="login-button facebook" onClick={()=>auth.signInWithRedirect(new firebase.auth.FacebookAuthProvider())}>
<FacebookOutlined /> Sign In with Facebook 
               
               </div>
            </div>
   </div>
   
   );
}

export default Login

Answer 1

I can't comment but have you installed the correct version of firebase? If you have v9 installed (the latest, modular version) it probably isn't working because you're using the v8 syntax.

Try looking at the v9 syntax in the documentation for Google and Facebook and make sure you use the correct version.