javascript - Cannot read property 'auth' of undefined - Stack Overflow

admin管理员组

文章数量:1417676

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",
databaseURL: ";,
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 (), 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?

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.",
databaseURL: "https://my-project.firebaseio.",
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./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?

• javascript
• firebase
• vue.js
• firebase-authentication
• firebaseui

Share Improve this question Follow edited Nov 12, 2020 at 7:42 Doug Stevenson 319k3636 gold badges456456 silver badges473473 bronze badges asked Nov 12, 2020 at 7:39 BoronBoron 1391212 silver badges3737 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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

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

to use the backwards patible interface.

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

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.

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.

本文标签： javascriptCannot read property 39auth39 of undefinedStack Overflow