My app is connected to firebase and auth is working fine. However, when trying to use firestore I can't figure out this problem.
Possible Unhandled Promise Rejection (id: 0):
Error: No Firebase App '[DEFAULT]' has been created - call firebase.initializeApp()
I am getting the above error however, I am already calling initializeApp and not sure what else to try. I am trying to get access to a collection on firestore and print it out but it gives me the error when I try to access firestore.
I have tried doing console.log(firebase.app().name) which gives the name of the app, so not sure how it is not initialised.
var firebaseConfig = {
apiKey: "***",
authDomain: "***",
databaseURL: "***",
projectId: "***",
storageBucket: "***",
messagingSenderId: "***",
appId: "***",
measurementId: "****",
}
firebase.initializeApp(firebaseConfig)
const db = firebase.firestore()
My imports are
import "firebase/firestore"
import firebase from "firebase"
import firestore from "#react-native-firebase/firestore"
I have tried so many different questions on here and forums but nothing has helped
Make sure that you made all the configuration correctly by following this video
And just make sure that the first 2 lines at main function are (follow the same order):
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
//rest of the code
runApp(MyApp());
}
As per Kishan above. I added the google-services.json file into the android level folder and modified both build.gradle files.
https://firebase.google.com/docs/android/setup followed step 3 here to update the build.gradle files to use google-services.
Related
So i've read many topics and lose so much time cause of this issue.
My components don't load anymore and i'm receiving this error in my console : 'FirebaseError: Firebase: Error (auth/invalid-api-key).'
(I specify that is my first project using firebase).
About my firebase.config.js :
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
const app = firebase.initializeApp({
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_MESSAGING_APP_ID
});
export const auth = app.auth();
export default app;
About my .env.local :
REACT_APP_API_KEY=AIXXXXzaSyX_ITiQXXXXXXXXxcXXXXXXXxU
REACT_APP_AUTH_DOMAIN=XXXXX.firebaseapp.com
REACT_APP_PROJECT_ID=name-name-name
REACT_APP_STORAGE_BUCKET=name-name-name.appspot.com
REACT_APP_MESSAGING_SENDER_ID=5XXX7XXXX5XX
REACT_APP_MESSAGING_APP_ID=1:5XXXX4XXX7X:web:aXXXXxxx0xxxxb4a4xxxxxxdd
**About files location : **
src/utils/firebase.config.js
src/.env.local
About the auth process :
Authentication is used in a signUp component that matches a form
Thanks for reading
When I just paste the API_KEY directly in app like this : apiKey: "string". This works, so I think this issue come from my .env file.
I think you're using create-react-app. If that is the case you need to add the .env file to the root of your project, not the src folder.
See the docs for more info on env vars in create react app https://create-react-app.dev/docs/adding-custom-environment-variables/#adding-development-environment-variables-in-env
I am trying to use firebase in my new React app but I am always getting "The development server returned response errror code: 500"
And I have no ideo of what am I doing wrong. I only created a firebase.js file to put my firebase configuration
import * as firebase from 'firebase'
const firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
measurementId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
}
export {firebase};
I am getting this error in the terminal (and I am sure of having installed firebase):
Unable to resolve "firebase" from "firebase.js"
This doesn't look right, you imported firebase never used it you created config never used it, is this the whole code ?
Please try to follow firebase documentation, last i checked you had to import only the initializeApp function with config object.
here this might help - Firebase Setup for React App
I am trying to hook CDN based firebase libs for one of my project and as per the doc its doable
https://firebase.google.com/docs/web/alt-setup
But when i put below html/js code
<html>
<body>
<script type="module">
import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.6.6/firebase-app.js'
// Add Firebase products that you want to use
import { auth } from 'https://www.gstatic.com/firebasejs/9.6.6/firebase-auth.js'
const firebaseConfig = {
apiKey: "<>",
authDomain: "<>.firebaseapp.com",
projectId: "<>",
storageBucket: "<>.appspot.com",
messagingSenderId: "<>",
appId: "<>",
measurementId: "<>"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
</script>
</body>
</html>
Its error out with below log (seen on console)
Uncaught SyntaxError: import not found: auth
I do not want to fallback to older version of firebase, so is there any solution someone can suggest?
You're importing the modular SDK, which does not export an auth symbol. To get access to the auth service, import the getAuth function:
import { getAuth } from 'https://www.gstatic.com/firebasejs/9.6.6/firebase-auth.js'
And then call it as:
const auth = getAuth();
// And then for example: createUserWithEmailAndPassword(auth, email, password)
I recommend keeping the Firebase documentation on getting started with authentication on the web handy while getting started, as it has handy copy/pasteable code snippets for common operations like this.
I'm trying to use Firebase Emulator on a local project based on Nextjs. Following the guidance from Firebase here I'm trying to use db.useEmulator('localhost', 8080); after I initialised Firebase but I have this error:
Error was not caught TypeError: db.useEmulator is not a function
at Module.eval (VM79706 firebase.js:30)
at eval (VM79706 firebase.js:91)
at Module../utils/firebase.js (_app.js?ts=1603918354205:23994)
...
I've been using the emulator to test cloud functions and it's working pretty well. I just don't understand how to connect it with Firestore.
Here is how I set up Firebase:
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/storage';
import 'firebase/analytics';
const clientCredentials = {
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
};
// Check that `window` is in scope for the analytics module!
if (typeof window !== 'undefined' && !firebase.apps.length) {
firebase.initializeApp(clientCredentials);
if ('measurementId' in clientCredentials) firebase.analytics();
const db = firebase.firestore();
if (process.env.NEXT_PUBLIC_DB_HOST === 'localhost') {
db.useEmulator('localhost', 8080);
}
}
export default firebase;
Any idea why I'm getting this error and how I connect Firebase emulator with Nextjs?
To answer my own question, the problem was that this method was introduced in the new version of firebase 8.0.0. I just had the update and voila!
Using firebase ver. 9.4.1.
You may using database UI for work with database locally. Url to database UI show, when start emulators.
Regular url: localhost:PORT/database
I have two firebases on the same project and i need to connect to both of them.
There are two javascript files connecting to each firebase which seems ok.
I import both of them
import db from '../FireBase'
import mdb from '../MissionFireBase'
let MissionRef = mdb.ref('mission');
let TeamRef = db.ref('Teams');
let StartRef = db.ref('start');
db is an export of one firebase and mdb of another. On itself each one of them works but when i try to use both of them i get an error
index.cjs.js?3b8b:360 Uncaught FirebaseError {code: "app/duplicate-app", message: "Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).", name: "[DEFAULT]", stack: "[DEFAULT]: Firebase: Firebase App named '[DEFAULT]…0)↵ at fn (http://localhost:8080/app.js:89:20)"}
To me it seems somewhere firebase gets a default id and when trying to use them both it conflicts. I tried calling each one from a different vue component but i get the same result.
The firebase connection is made like so
import Firebases from 'firebase'
let config = {
apiKey: "--",
authDomain: "--",
databaseURL: "--",
projectId: "--",
storageBucket: "--",
messagingSenderId: "--"
};
let apps= Firebases.initializeApp(config);
let mdb = apps.database();
export default mdb
Is this possible? Can i use two different firebase calls or would i need to merge them both together?
Thanks
That's definitely possible. You will need to create separate FirebaseApp instances for each, and then get your database from that.
var secondaryAppConfig = {
apiKey: "<API_KEY>",
authDomain: "<PROJECT_ID>.firebaseapp.com",
databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
storageBucket: "<BUCKET>.appspot.com",
};
// Initialize another app with a different config
var secondary = firebase.initializeApp(secondaryAppConfig, "secondary");
// Retrieve the database.
var secondaryDatabase = secondary.database();
For more on this, have a look at the section using multiple projects in your application in the Firebase documentation.