I have firebase installed (previously working with Auth, Firestore, Storage, with no problems) but when I want to implement messaging I have this error message:
Error: Service messaging is not available
Working with Next.js.
This is my firebase.js config file:
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { getMessaging } from "firebase/messaging";
const firebaseConfig = {
apiKey: "--------------------",
authDomain: "------------------",
projectId: "--------------------",
storageBucket: "--------------------",
messagingSenderId: "------------------------",
appId: "---------------------------",
measurementId: "--------------------",
};
const app = initializeApp(firebaseConfig);
export const auth = getAuth();
export const db = getFirestore(app);
export const messaging = getMessaging(app);
I have already reinstalled firebase with version 9.15.0
Related
I am following these firebase docs : https://firebase.google.com/docs/auth/web/passing-state-in-email-actions
I am using: React 18.2.0, firebase 11.4.2
I am wanting to pass state in email actions when I send a user an email verification request.
My issue here is that I do not know how to obtain the firebase object as in this documention code:
firebase.auth().currentUser.sendEmailVerification(actionCodeSettings)
.then(function() {
// Verification email sent.
})
.catch(function(error) {
// Error occurred. Inspect error.code.
});
I have my firebase.js file configured this way:
import { initializeApp } from "firebase/app";
import { getAuth } from 'firebase/auth';
import { getFirestore } from "firebase/firestore";
import { getStorage } from 'firebase/storage';
const firebaseConfig = {
apiKey: process.env.REACT_APP_FIREBASE_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_MESSAGINGSENDERID,
appId: process.env.REACT_APP_APP_ID
};
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
export const auth = getAuth();
export const storage = getStorage(app);
I have tried:
auth.currentUser.sendEmailVerification(actionCodeSettings)
And I have also tried (in my firebase.js):
import firebase from 'firebase/app';
but to no avail...where am I going wrong in obtaining this firebase object?
import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'
import { getFirestore } from "firebase/firestore";
const firebaseConfig = {
apiKey: process.env.NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID
}
const app = initializeApp(firebaseConfig)
export const auth = getAuth()
export const db = getFirestore(app)
console.log('db', db)
I have tried the length thing but it doesn't seem to work with firebase v9. i need to export the db too.
without connecting to the db, the app works just fine.
After lot of trial and error figured out :)
import * as firebase from "firebase/app";
import { logEvent } from "firebase/analytics";
import { getAnalytics } from "firebase/analytics";
const firebaseConfig = {
apiKey: process.env.API_KEY,
authDomain: process.env.AUTH_DOMAIN,
projectId: process.env.PROJECT_ID,
storageBucket: process.env.STORAGE_BUCKET,
messagingSenderId: process.env.MESSAGING_SENDER_ID,
appId: process.env.APP_ID,
measurementId: process.env.MEASUREMENT_ID
};
let app;
if (!firebase.getApps().length) {
app = firebase.initializeApp(firebaseConfig);
} else {
// if already initialized, use that one
app = firebase.getApp();
}
export function analyticsLogEvents(event:string, params:any) {
let analytics;
if (typeof window !== "undefined") {
analytics = getAnalytics(app);
logEvent(analytics, event, params);
}
}
I am getting this error when I was trying to connect firebase with my React Native App.
Firebase Error: No Firebase App [DEFAULT] has been created - call Firebase App.initializeApp() (app/no-app)
I have added my code here-
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
// Your web app's Firebase configuration
const RNfirebaseConfig = {
apiKey: "........",
authDomain: "note-app-rn.firebaseapp.com",
projectId: "note-app-rn",
storageBucket: "note-app-rn.appspot.com",
messagingSenderId: ".....",
appId: "......"
};
const app = initializeApp(RNfirebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);
try this,
import firebase from '#react-native-firebase/app';
import '#react-native-firebase/auth';
import '#react-native-firebase/firestore';
const RNfirebaseConfig = {
apiKey: "........",
authDomain: "note-app-rn.firebaseapp.com",
projectId: "note-app-rn",
storageBucket: "note-app-rn.appspot.com",
messagingSenderId: ".....",
appId: "......"
};
let app;
if (firebase.apps.length === 0) {
app = firebase.initializeApp(RNfirebaseConfig )
} else {
app = firebase.app()
}
const db = firebase.firestore();
const auth = firebase.auth();
Did it happen during migration to new React Native architecture?
Remember to change your import:
from: #import Firebase; in AppDelegate.m
to: #import <Firebase.h> in AppDelegate.mm
The main source of the error is related to initialize config setting.
Checkout this usage;
import firebase from 'firebase/compat/app'
import 'firebase/compat/auth'
import 'firebase/compat/firestore'
export const firebaseConfig = {
apiKey: "............",
authDomain: "............",
projectId: "............",
storageBucket: "............",
messagingSenderId: "............",
appId: "............",
measurementId: "............"
}
if (!firebase.apps.length){
firebase.initializeApp(firebaseConfig);
}
after i have installed these:
npm install firebase
npm install firebase-tools
This was my firebase file before
import firebase from "firebase";
const firebaseConfig = {
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;
THIS IS WHERE IM TRING TO USE IT
import React, {useEffect} from 'react';
import styled from 'styled-components';
import ImgSlider from './ImgSlider';
import Viewers from './Viewers';
import Movies from './Movies';
import { db } from '../firebase';
import Detail from './Detail';
function Home() {
useEffect(() => {
db.collection("movies").onSnapshot((snapshot)=>{
console.log(snapshot);
})
}, [])
After doing some searches, I was advised to change to firebase v9.12.1, of which it changed my firebase file to look like this:
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
const firebaseConfig = {
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, db, provider, storage };
I am still getting the blank react screen, what might be the problem, or what am I not grasping? Thanks.
so I am following this online tutorial on how to build a WhatsApp build and I ran into this problem.
import "../styles/globals.css";
import { useAuthState } from "react-firebase-hooks/auth";
import { auth, db } from "../firebase";
function MyApp({ Component, pageProps }) {
const [user] = useAuthState(auth);
if (!user) return <Login />;
return <Component {...pageProps} />;
}
export default MyApp;
This is my firebase.js, I removed the my apiKey because I am sharing my code but that don't think that is the issue.
import firebase from "firebase/app";
const firebaseConfig = {
apiKey: "",
authDomain: "global-chat-80ab3.firebaseapp.com",
projectId: "global-chat-80ab3",
storageBucket: "global-chat-80ab3.appspot.com",
messagingSenderId: "405392556419",
appId: "1:405392556419:web:562d012b108561b8be76b6",
};
const app = !firebase.apps.length
? firebase.initializeApp(firebaseConfig)
: firebase.app();
const db = app.firestore();
const auth = app.auth();
const provider = new firebase.auth.GoogleAuthProvider();
export { db, auth, provider };
I'm using firebase v9 modular code as in firebase Documentation
Firebase Version: 9.6.1
This code worked fine for me. But the downside I faced was v9 modular functionalities won't work with react-firebase-hooks.(Not supported till now I guess)
My usecase: for next.js project with firebase.
import { initializeApp, getApps } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth } from "firebase/auth";
import { GoogleAuthProvider } from "firebase/auth";
const firebaseConfig = {
apiKey: "",
authDomain: "global-chat-80ab3.firebaseapp.com",
projectId: "global-chat-80ab3",
storageBucket: "global-chat-80ab3.appspot.com",
messagingSenderId: "405392556419",
appId: "1:405392556419:web:562d012b108561b8be76b6",
};
// Initialize Firebase
const app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps();
const auth = getAuth();
const db = getFirestore();
const provider = new GoogleAuthProvider();
export { db, auth, provider };
If you're using Firebase 9.6.0, try updating your imports to v9 compat. This recommendation comes from the Firebase documentation.
So, your imports would look like this:
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
const firebaseConfig = {
apiKey: "",
authDomain: "global-chat-80ab3.firebaseapp.com",
projectId: "global-chat-80ab3",
storageBucket: "global-chat-80ab3.appspot.com",
messagingSenderId: "405392556419",
appId: "1:405392556419:web:562d012b108561b8be76b6",
};
const app = !firebase.apps.length
? firebase.initializeApp(firebaseConfig)
: firebase.app();
const db = app.firestore();
const auth = app.auth();
const provider = new firebase.auth.GoogleAuthProvider();
export { db, auth, provider };