I'm attempting to use firebase realtime database on my app. I first authenticate and then I need to use the RTDB. Here is my attempt.
import { initializeApp } from 'firebase/app';
import 'firebase/auth';
import 'firebase/storage';
import { getDatabase } from "firebase/database";
import getEnvVars from '../environment';
const ENV = getEnvVars();
const firebaseConfig = {
apiKey: ENV.firebase.API_KEY,
authDomain: ENV.firebase.AUTH_DOMAIN,
databaseURL: ENV.firebase.DATABASE_URL,
projectId: ENV.firebase.PROJECT_ID,
storageBucket: ENV.firebase.STORAGE_BUCKET,
messagingSenderId: ENV.firebase.MESSAGING_SENDER_ID,
appId: ENV.firebase.APP_ID
};
initializeApp(firebaseConfig);
export const db = getDatabase();
The error I get is:
TypeError: (0, _database.getDatabase) is not a function. (In '(0, _database.getDatabase)()', '(0, _database.getDatabase)' is undefined)
You're mixing up the old, namespaced syntax of SDK versions 8 and lower, with the new, modular syntax of SDK versions 9 and above.
To get the database in v9, you call getDatabase() as a top-level function:
export const db = getDatabase();
I recommend keeping the Firebase documentation ready when going through this, as it has code samples for both the old and new syntax so you can easily compare. For this specific call, see the documentation on getting a database reference.
Related
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 am a newbie, and I am stuck. I don`t know what to do. My browser is showing that fire store is not able to connect to the backend. This is my code :
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import 'firebase/compat/storage';
import {initializeApp} from 'firebase/app'
const firebaseConfig = initializeApp({
apiKey: "AIzaSyA9BnlX96fMf7XiUVCFRsoQzG8DGERJkeY",
authDomain: "disneyplus-clone-a33d5.firebaseapp.com",
projectId: "disneyplus-clone-a33d5",
storageBucket: "disneyplus-clone-a33d5.appspot.com",
messagingSenderId: "37918794208",
appId: "1:37918794208:web:dbe9842dfe1dda522a4b85",
measurementId: "G-DRVLJKWRWG",
});
const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebaseApp.firestore();
const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();
const storage = firebase.storage();
export { auth, provider, storage };
export default db;
And if i delete the initializeApp from const firebaseConfig it gives my the following error:
#firebase/firestore: Firestore (9.2.0): Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError: [code=permission-denied]: Permission denied on resource project disneyplus-clone-a33d5.
This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.
Hope you can help me. Thank you !
I got this error after messing with my firebase project (in the firebase console). In the end I discovered that my firebase_options.dart file was outdated, so I had to run
flutterfire configure
in order to regenerate those option files and then my problem was solved...
can you try this workaroun. let me know if this helps
const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebaseApp.firestore();
//workaround
db.settings({ experimentalForceLongPolling: true });
This is what I did
Create a file called firebase.tsx and add this
// firebase.tsx
import { initializeApp, getApp } from "firebase/app";
const firebaseConfig = {
// firebaseconfig keys
};
const app = initializeApp(firebaseConfig);
export { app };
Then where ever you want to use any firebase features you can just import the app like this
import {app} from './your/path/to/firebase.tsx'
const db = getFirestore(app);
and then use it as a normal firebase.
P.S This works for firebase v9
I faced this issue when I changed the firebase project in firebase console for my REACT NATIVE ANDROID APP.
to fix this issue there is a needs to clean the builds and related files.
Steps:-
cd android
./gradlew clean or gradlew clean
./gradlew cleanBuildCache
npm run android
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import 'firebase/compat/storage';
import {initializeApp} from 'firebase/app'
const firebaseConfig = initializeApp({
apiKey: "AIzaSyA9BnlX96fMf7XiUVCFRsoQzG8DGERJkeY",
authDomain: "disneyplus-clone-a33d5.firebaseapp.com",
projectId: "disneyplus-clone-a33d5",
storageBucket: "disneyplus-clone-a33d5.appspot.com",
messagingSenderId: "37918794208",
appId: "1:37918794208:web:dbe9842dfe1dda522a4b85",
measurementId: "G-DRVLJKWRWG",
});
const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebaseApp.firestore();
const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();
const storage = firebase.storage();
export { auth, provider, storage };
export default db;
Add this in Flutter
NOTE - Use this "Firebase.initializeApp" only Once in the entire Project.
// Wait for Default Firebase app to initialize
if (Firebase.apps.isEmpty) {
await Firebase.initializeApp(
name: 'YourAPP',
options: DefaultFirebaseOptions.currentPlatform,
).whenComplete(() {
print("completedAppInitialize");
// setState(() {});
});
}
I have a separate file named "firebase.js" which contains:
I have downloading the firebase package as npm i firebase.
import firebase from "firebase";
import "#firebase/auth";
import 'firebase/firebase-functions';
// require('firebase/auth');
// import auth from 'firebase/firebase-auth';
const firebaseConfig = {
apiKey:
authDomain:
projectId:
storageBucket:
messagingSenderId:
appId:
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
//export
const auth= firebase.auth();
const googleAuthProvider=firebase.auth.GoogleAuthProvider();
export {auth,googleAuthProvider};
The issue is whenever I'm trying to import the auth from this file and after successful compilation I'm getting this error in the browser.
I have everything updated to latest versions, whether it is React scripts, npm, everything.
You're missing a new in this line:
const googleAuthProvider = new firebase.auth.GoogleAuthProvider();
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'm having issues getting firebase into this project and I'm really not sure what is going wrong? All the firebase code (except the project-specific config code) is exactly the same as another (working) project...
I'm Using react-native with expo and have the FB database as a web project.
I Initialize the database in a file called firebase.js on the root level of the project, it's sitting right next to app.js. Database doesn't have security rules yet so I removed some of the info but its what you would expect for an api key.
import * as firebase from 'firebase';
import 'firebase/firestore';
const firebaseConfig = {
apiKey: "removed for post",
authDomain: "removed for post",
databaseURL: "removed for post",
projectId: "goalsdev-7eb67",
storageBucket: "goalsdev-7eb67.appspot.com",
messagingSenderId: "362368452051",
appId: "removed for post",
measurementId: "G-CNRGY3FTLE"
};
firebase.initializeApp(firebaseConfig);
export default firebase;
Then I try and use it like so...
import firebase from 'firebase'
this is in /screens/signUpFinal, have also tried importing as 'firebase.js', '../firebase' and '../firebase.js'
package.json is:
...
"dependencies": {
"#react-native-community/masked-view": "0.1.10",
"#react-native-firebase/app": "^8.4.3",
"#react-native-firebase/auth": "^9.2.3",
...
...
First run
npm install --save firebase
And instead of this:
import * as firebase from "firebase"
Use this:
import * as firebase from "firebase/app";
Source: https://firebase.google.com/docs/web/setup#node.js-apps
And also this:
import firebase from 'firebase'
To this:
import firebase from '../firebase'
And remove #react-native-firebase libraries because they won't work with expo.
I found that this is the best/easiest way to use in React.js with no problem ....you can try to import like this ( "firebase": "^9.6.1",) :
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
create your configfile .....
const firebaseConfig = { your config data ...};
and then you can use it in this way without any annoying error :
const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebaseApp.firestore();
const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();
I hope it can help for others who have the same problem I had
The last time I had to install firebase was over 6 months ago and that was "firebase": "^8.6.2". The configuration looked something like;
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/storage';
import 'firebase/messaging';
import 'firebase/analytics';
import {
API_KEY,
AUTH_DOMAIN,
DATABASE_URL,
PROJECT_ID,
STORAGE_BUCKET,
MESSAGING_SENDER_ID,
APP_ID,
MEASUREMENT_ID,
MESSAGING_VAPID_KEY,
} from '../config';
const config = {
apiKey: API_KEY,
authDomain: AUTH_DOMAIN,
databaseURL: DATABASE_URL,
projectId: PROJECT_ID,
storageBucket: STORAGE_BUCKET,
messagingSenderId: MESSAGING_SENDER_ID,
appId: APP_ID,
measurementId: MEASUREMENT_ID,
};
// Initialize Firebase App with Configurations
firebase.initializeApp(config);
// Setup Firestore
const analytics = firebase.analytics();
const database = firebase.firestore();
const storage = firebase.storage();
// Setup push messaging
let messaging = null;
if (firebase.messaging.isSupported()) {
messaging = firebase.messaging();
messaging.usePublicVapidKey(MESSAGING_VAPID_KEY);
}
export {
firebase, storage, messaging, analytics, config, database as default,
};
As of the time of posting this, firebase is at v9 and a lot has changed. Kindly refer to the official doc here
for help with setting up firebase on a project.
Google has updated Firebase from version 8 to modular Web SDK. For this reason if you are using firebase#>9.0.0 then it will be a bit different.
In the firebase.js file you need to import firebase like this.
import firebase from "firebase/compat/app";
So a sample of your firebase.js will look like this
import firebase from "firebase/compat/app";
import { FIREBASE_CONFIG } from "./constants/firebase";
import "firebase/compat/storage";
firebase.initializeApp(FIREBASE_CONFIG);
export const storage = firebase.storage();
export default firebase;
Here FIREBASE_CONFIG is your firebase configuration
As shown in the example use this storage object in other files.
As here I used this storage to other functions and worked on its functionalities like upload files etc.
I haven't tried with other services like authentication but at least firebase-storage service worked for me
cd src from project file inside src do npm install firebase,I was facing same issue, but this solution sorted my problem.