Property 'auth' does not exist on type 'FirebaseApp' on REACT

Question

I'm learning how to use firebase authentication in a react app and i have met this issue. Can somebody help me ?

i have installed firebase with npm. This is my firebase.js file.

import { initializeApp } from "firebase/app";
import 'firebase/auth'

const firebaseConfig = {
apiKey: "AIzaSyA_89k1bt6Z2_1lVLb_Vwn5OL9_GgTNQEQ",
authDomain: "auth-development-59396.firebaseapp.com",
projectId: "auth-development-59396",
storageBucket: "auth-development-59396.appspot.com",
messagingSenderId: "1003786595756",
appId: "1:1003786595756:web:fa93ae00e49a4c04c49e09"

};

const app = initializeApp(firebaseConfig);

export const auth = app.auth()
export default app

This is the dependencies package.json file.

"dependencies": {
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"bootstrap": "^5.1.1",
"firebase": "^9.0.2",
"react": "^17.0.2",
"react-bootstrap": "^1.6.3",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
 }

Answer 1

You are using the new Modular SDK which uses a different syntax than the name-spaced (v8) version. Try this:

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth"; // New import

const app = initializeApp(firebaseConfig);

export const auth = getAuth(app);
export default app;

Do note that if you must refactor all your code to work with the new syntax. I'd recommend checking out the documentation to learn more about the new syntax. Also checkout this Firecast.

---

If you wish to use the V8 name-spaced syntax, then you can use the compat versions:

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

if (!firebase.apps.length) firebase.initializeApp({...config});

export const auth = firebase.auth();
export default app;