Cannot read property 'auth' of undefined

Question

I'm trying to use firebase-ui in a VueJS project.

My api credentials is defined in a file called config.js

export default {
apiKey: "*****",
authDomain: "*****.firebaseapp.com",
databaseURL: "https://my-project.firebaseio.com",
projectId: "*****",
storageBucket: "*****",
messagingSenderId: "73482979",
appId: "1:685818581200:web:1f5ebjnfsdjnj",
measurementId: "G-BHJK6N67PZ"
};

I am the importing the config.js file in my init.js where the whole firebase setup is done:

import config from "./config";
import firebase from "firebase";
import firebaseui from "firebaseui";
import "firebase/auth";
import "firebase/firestore";

const app = firebase.initializeApp(config);
const auth = firebase.auth();
const firestore = app.firestore();

const authUi = new firebaseui.auth.AuthUI(auth); //Error is thrown at this point

export default app;
export { auth, authUi, firestore };

However the error -> Cannot read property 'auth' of undefined' is thrown and I've been unable to move past here for a few days now. I've checked the documentation ( https://firebase.google.com/docs/auth/web/firebaseui#before_you_begin ), everything is done correctly and even using the latest firebaseui version "firebaseui": "4.7.0" located in package.json

Any help with how I can solve this problem?

Answer 1

You're importing the Firebase client JS library incorrectly. The documentation for module bundlers shows:

// Firebase App (the core Firebase SDK) is always required and must be listed first
import firebase from "firebase/app";
// If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
// import * as firebase from "firebase/app"

Don't import from "firebase". Import from "firebase/app", and be sure to observe the conventions for the version of the SDK you're using.

The documentation for firebaseui might be out of date. Consider submitting your feedback using the "send feedback" button at the top of the doc page.

Answer 2

I got the same problem. After few hours of trying, I solve it by edit my config like :

import firebase from 'firebase/app';
import * as firebaseui from 'firebaseui';
import 'firebaseui/dist/firebaseui.css';

If your firebase version if greater than 7, you got to import from 'firebase/app' instead of 'firebase'.

And you have to import * from 'firebaseui', instead of import only firebaseui.

and my packages.json like:

"dependencies": {
  "firebase": "^8.8.0-202162022140",
  "firebaseui": "^4.8.1",
},

By the way, my project is using Vue3.js.

Answer 3

As of Firebase 9.0.0 (August 25, 2021) it should now be

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

to use the backwards compatible interface.

See https://firebase.google.com/docs/web/modular-upgrade for the full upgrade path