firebase.auth is not a function

Question

I am using Webpack with firebase and firebase-admin.

To install firebase I ran

npm install --save firebase

I am importing firebase

Answer 1

I know you've sorted your problem but there's no real answer to the original problem. The problem wasn't with the node_modules, it was with the way that you were importing the component.

When you export a component ES6 way you normally do export default () => { console.log('default component export'); };

default is the keyword here, when you import a component ES6 way like import firebase from 'firebase' it's grabbing the default property from the exported object.

Keeping in mind the above example, here's what you've done wrong.

Using ES6:

import * as firebase from 'firebase'

console.log(firebase.auth) // Undefined
console.log(firebase.default.auth) // Function

Using ES5:

var firebase = require('firebase')

console.log(firebase.auth) // Undefined
console.log(firebase.default.auth) // Function

Note the .default

Hope this helps to explain what was wrong in the first place.

Answer 2

I tried everything in this post, but nothing worked for me.

I discovered the issue with my imports and exports. This worked for me:

const auth = firebase.auth();
const database = firebase.firestore();

export { auth, database } 
import { auth, database} from '@/firebase.js';

This was my mistake:

export default { auth, database }
import auth from '@/firebase.js';

My first mistake: I did a export default with two values and this doesnt work. The second mistake, if you export with curly braces, you need to import with curly braces. Otherwise you will get a "Cannot read property 'createUserWithEmailAndPassword' of undefined"

Answer 3

this is the import statement from official docs:

// Firebase App (the core Firebase SDK) is always required and must be listed first
import firebase from "firebase/app";
// Add the Firebase products that you want to use
import "firebase/auth";
console.log(firebase.auth);

These also seem to work if you only want auth:

import { auth } from "firebase/app";
import "firebase/auth";
console.log(auth);

or

import { auth } from "firebase";
console.log(auth);

Answer 4

I ran into the same problem. However I didn't have to do any deletion of any files, just correct the import statements. In my case I use Firebase version 7.7.0 in an Gatsby/React app and this is what the import looks like:

import React from 'react';
import firebase from 'firebase/app';
import 'firebase/auth';

const config = {
  apiKey: process.env.GATSBY_FIREBASE_API_KEY,
  authDomain: process.env.GATSBY_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.GATSBY_FIREBASE_DATABASE_URL,
  projectId: process.env.GATSBY_FIREBASE_PROJECT_ID,
  storageBucket: process.env.GATSBY_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.GATSBY_FIREBASE_MESSAGING_SENDER_ID,
};

class Firebase {
  constructor() {
    firebase.initializeApp(config);
    this.auth = firebase.auth();
    this.uiConfig = {
      signinOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.FacebookAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID,
      ],
    };
  }
}
export default Firebase;

const FirebaseContext = React.createContext(null);
export { FirebaseContext };

Update after request from @Mel. The context may be used using either a HOC:

export const withFirebase = Component => props => (
  <FirebaseContext.Consumer>
    {firebase => <Component {...props} firebase={firebase} />}
  </FirebaseContext.Consumer>
);

or using a hook:

import { FirebaseContext } from './firebase';
const MyComponent = () => {
  const firebase = useContext(FirebaseContext);
  // do something with firebase
};

Answer 5

When running in Node and needing both firebase and firebase-admin this works for me:

First install firebase and then firebase-admin in that order.

Then use as so:

const app = require('@firebase/app');
require('@firebase/auth');
require('@firebase/firestore');

const firebase = app.firebase

firebase.initializeApp({…})

const auth = firebase.auth()
const db = firebase.firestore()

Answer 6

I didn't need to delete my node_modules folder. Just confirm if you've both '@firebase' and 'firebase' subfolders inside node_mudules. If you do, change the path to 'firebase' on your require statement to './node_modules/firebase'

and make the next line; require('./node_modules/firebase/firebase-auth');