firebase working but firebase.auth() not working in Vue.js - javascript

I ran
npm i firebase
and have
import firebase from 'firebase/compat/app'
but when i run
console.log(firebase.auth())
I get an error message of
app.js:280 Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app-compat/no-app).
at app (firebaseNamespaceCore.ts?1484:102:1)
at Object.serviceNamespace [as auth] (firebaseNamespaceCore.ts?1484:152:1)
at eval (HelloWorld.vue?e90b:24:1)
at Module../node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/HelloWorld.vue?vue&type=script&lang=js (app.js:30:1)
at __webpack_require__ (app.js:277:33)
at fn (app.js:517:21)
at eval (HelloWorld.vue?vue&type=script&lang=js:5:213)
at Module../src/components/HelloWorld.vue?vue&type=script&lang=js (app.js:140:1)
at __webpack_require__ (app.js:277:33)
at fn (app.js:517:21)
However, when I just run console.log(firebase) I get correct data output in console. I have also setup firebase correctly as documented here but firebause.auth() is still not working. I am working in Vue3 but I don't think that part matters, still trying to find a solution.
I am currently trying to get firebaseUI to work and this is the step I am getting stuck in. Once I'm able to get firebause.auth() to work, I'll be able to initialize the firebaseUI widget by running:
var ui = new firebaseui.auth.AuthUI(firebase.auth());
my ./src/firebaseConfig.js code:
import { initializeApp } from "firebase/app";
const firebaseConfig = {
apiKey: "code",
authDomain: "code",
projectId: "code",
storageBucket: "code",
messagingSenderId: "code",
appId: "code",
measurementId: "code"
};
const firebaseApp = initializeApp(firebaseConfig);
export default firebaseApp
My component file using firebaseConfig.js in ./src/components/HellowWorld.vue :
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<div id="sign-in-status"></div>
<div id="sign-in"></div>
<pre id="account-details"></pre>
</div>
</template>
<script>
import firebaseConfig from '../firebaseConfig';
import firebase from 'firebase/compat/app';
import * as firebaseui from 'firebaseui'
import 'firebaseui/dist/firebaseui.css'
console.log(firebaseConfig);
console.log(firebase);
// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());
ui
export default {
name: 'HelloWorld',
props: {
msg: String
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
both
console.log(firebaseConfig);
console.log(firebase);
works but
// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());
ui
produces an error as copy and pasted above.

I had same problem, then I found points. And I understood why somebody was OK, others was bug.
Initialization needs to App based, of course before call firebaseUI. We have some ways to do that
main.js, import configuration.js, before auth timing...etc.
Initialized firebaseApp (your firebaseConfig.js) is different from import firebase from 'firebase/compat/app'
If new firebaseUI is called before Initialization or no initialized, we get error. Then take care Lifecycle of Vue.
Probably you need,
Import firebaseApp, Not firebaseConfig to HellowWorld.vue for getting Initialized.
In my case, my 'new firebaseUI' is in mounted() of ChildView. I initialize firebaseApp at main.ts, so childView doesn't need initialization any more, only import firebase from 'firebase/compat/app'.
If you need code, I can show you my case.

Related

Module not found: Error: Can't resolve './Firebase'

I am new to react and i have been trying to initialize firebase into my react app.
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
var firebaseConfig = {
apiKey: "AIzaSyCvSb1gFiUYMJA4SbsKlJvhFwJ8IFjSwkg",
authDomain: "raya-feedback.firebaseapp.com",
databaseURL: "https://raya-feedback-default-rtdb.europe-west1.firebasedatabase.app",
projectId: "raya-feedback",
storageBucket: "raya-feedback.appspot.com",
messagingSenderId: "575830594611",
appId: "1:575830594611:web:930556a8f2ccf9bf733f46"
};
firebase.initializeApp(firebaseConfig);
export {firebase};
;
This is my Firebase.js file that I am trying to import into my Body.js file and I have been getting this error "Module not found: Error: Can't resolve './Firebase.js'".
This is my file structure:
This is how I am importing it in the Body.js file
import firebase from './Firebase';
I am kind of lost and I have been trying to initialize in a multitude of different ways I see on Youtube and I am still stuck on this error.
Seeing your folder structure Firebase.js is inside src and your trying to process Firebase.js from src/body, since Firebase.js doesn't exist in body you are getting this error, you have to use
import { firebase } from '../Firebase';
So you may be encountering this error because there is some other error in your Firebase.js file.
I noticed in your code snippet above getauth needs to actually be getAuth
./ means the current directory,
../ means the parent directory (previous one)
../../ means the parent of the parent and so on.
you need to use ../Firebase

Uncaught ReferenceError. Firebase SDK not recognised despite correct order of script tags

I am trying to implement firebase authentication on my website. However, whenever I try to test the function, I get the following error:
Uncaught ReferenceError: createUserWithEmailAndPassword is not defined
It will produce the applicable ReferenceError for any Firebase SDK function I try to use.
A common problem most people point out is not ordering the script tags correctly, however, mine seem fine to me:
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-analytics.js";
import { getAuth, createUserWithEmailAndPassword} from "https://www.gstatic.com/firebasejs/9.8.1/firebase-auth.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-firestore.js"
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "xxxxxx",
authDomain: "xxxxxx",
projectId: "xxxxxx",
storageBucket: "xxxxxxx",
messagingSenderId: "xxxxxxx",
appId: "xxxxxxxx",
measurementId: "xxxxxx"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const auth = getAuth(app);
const db = getFirestore(app);
</script>
<script src="scripts/auth.js"></script>
<script src="scripts/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
I am absolutely stumped as to what might be causing this, any input would be extremely appreciated.
Edit: I have identified that the script tags execute in the wrong order, printing to console occurs first in auth.js, then in the Firebase intialisation script. How would I ensure they execute in the correct order?
Edit2: I added defer attributes to my other script tags which now shows that they execute in the correct order. However, I still get the same reference error.

React Native firebase is undefined

Hi I keep getting this error when trying to run my react-native app on expo go on my phone
TypeError: undefined is not an object (evaluating '_app.default.apps')
and the error shows it pointing to the firebase variable on line 19 in the code below in the if statement where it says firebase:
import firebase from 'firebase/app';
require('firebase/auth');
import Constants from 'expo-constants';
// Initialize Firebase
const firebaseConfig = {
apiKey: Constants.manifest.extra.apiKey,
authDomain: Constants.manifest.extra.authDomain,
projectId: Constants.manifest.extra.projectId,
storageBucket: Constants.manifest.extra.storageBucket,
messagingSenderId: Constants.manifest.extra.messagingSenderId,
appId: Constants.manifest.extra.appId,
measurementId: Constants.manifest.extra.measurementId
};
let Firebase;
if (firebase.apps.length === 0) {
Firebase = firebase.initializeApp(firebaseConfig);
}
export default Firebase;
this in turn is causing I believe an Invariant violation as well.
Any help please?
FirebaseSDK changed their API in the new version 9 so now import firebase from “firebase/app” won’t work
You need to use the import { initializeApp } from 'firebase/app'; to initiate your app or import from firebase/compat/app to use the old API
Refer to https://firebase.google.com/docs/web/modular-upgrade for more about the changes and https://firebase.google.com/docs/web/setup for the new API

Where is 'initializeApp' in firebase imports?

So I started taking a look into firebase and just after defining the intialization as
import firebase from "firebase/compat"
const firebaseConfig = {
apiKey: process.env.REACT_APP_API_KEY,
authDomain: process.env.REACT_APP_AUTH_DOMAIN,
projectId: process.env.REACT_APP_PROJECT_ID,
storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_APP_ID,
measurementId: process.env.REACT_APP_MEASUREMENT_ID
};
const chatSupportApp = firebase.initializeApp(firebaseConfig, "my-app");
A wild warning was display!
/*It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.
For the module builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):
CommonJS Modules:
const firebase = require('firebase/app');
require('firebase/<PACKAGE>');
ES Modules:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>';
Typescript:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>';*/
I search in many posts, including documentation and didn't really get how to initialize my app first before using any of the other imports
I found out lately that is was a bit hidden under "firebase/firebase-app"
so it get solved, as
import {initializeApp} from "firebase/firebase-app";
const firebaseConfig = {
apiKey: ...............
};
const chatSupportApp = initializeApp(firebaseConfig, "my-app");
export default chatSupportApp;
This started as a question that I search in most stack overflow posts, but since I solve it for now somehow I wanted also to share with the community in here, but also consider any other suggestion, the question will be then.
Is this approach correct? why all the documentation suggest to do it with
import { initializeApp } from 'firebase/app'; as:
import { initializeApp } from 'firebase/app';
import { getAuth, onAuthStateChanged, getRedirectResult } from 'firebase/auth';
This really didn't work for me at all and I was not able to use it.
Thanks and enjoy your code!
import {initializeApp} from "firebase/firebase-app";
const firebaseConfig = {
apiKey: ...............
};
const chatSupportApp = initializeApp(firebaseConfig, "my-app");
export default chatSupportApp;

Cannot read property 'auth' of undefined

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?
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
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.

Categories