Im trying to connect firebase with a react app, but I get the Uncaught TypeError: app.auth is not a function error when trying to create an auth variable export const auth = app.auth()

This is the code:

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

const app = firebase.initializeApp({
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID
})

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

CodePudding user response：

If you want to use the namespaced syntax then you must import compat version of Firebase Auth SDK as well.

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth'; // <-- add /compat/

The compat libraries are a temporary solution that will be removed completely in a future major SDK version (such as version 10 or version 11). Your ultimate goal is to remove compat code and keep only version 9 modular-style code in your app.

Checkout the documentation for more information.

CodePudding user response：

Use getAuth instead of app.auth:

import firebase from 'firebase/compat/app';
import {getAuth} from 'firebase/auth';

const app = firebase.initializeApp({
    ...
})

export const auth = getAuth()
export default app;